Skip to content

Commit

Permalink
chore: mobile dashboard update (#227)
Browse files Browse the repository at this point in the history
  • Loading branch information
tadejpodrekar authored Dec 23, 2024
1 parent c94f109 commit 234518c
Show file tree
Hide file tree
Showing 8 changed files with 245 additions and 197 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -381,7 +381,7 @@ export const BorrowTable = () => {
<div className="w-1/2 text-moon font-medium">
Borrow Points
</div>
<PointIcons points={POINTS_BORROW} />
<PointIcons points={POINTS_BORROW} mobile />
</div>
</div>
</CardContent>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
CardHeader,
CardTitle,
} from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';
import { Skeleton } from '@/components/ui/skeleton';
import {
Table,
Expand Down Expand Up @@ -206,12 +207,69 @@ const CollateralTableRow = ({
{formattedBalance} {symbol}
</TableCell>
<TableCell>
<div className="w-[48px] h-[48px]">
<CircularProgressBar percent={supplyUsed.div(100)} />
</div>
<TooltipProvider delayDuration={100}>
<Tooltip>
<TooltipTrigger onClick={(e) => e.preventDefault()}>
<div className="w-[48px] h-[48px]">
<CircularProgressBar percent={supplyUsed.div(100)} />
</div>
</TooltipTrigger>
<TooltipContent onPointerDownOutside={(e) => e.preventDefault()}>
<div className="p-2 w-[250px]">
<div className="font-bold text-lg">
Collateral Supply Details
</div>
<div className="flex flex-col gap-y-2 mt-2">
<div className="text-md flex justify-between">
<div className="text-lavender">Supply Cap</div>
<div className="font-semibold text-moon">
{getFormattedNumber(
formatUnits(
BigNumber(
collateralConfiguration.supply_cap.toString()
),
decimals
)
)}{' '}
{appConfig.assets[assetId]}
</div>
</div>
<div className="text-md flex justify-between">
<div className="text-lavender">Supply Cap Value</div>
<div className="font-semibold text-moon">
{getFormattedNumber(
formatUnits(
BigNumber(
collateralConfiguration.supply_cap.toString()
),
decimals
).times(price)
)}
{' $'}
</div>
</div>
<div className="text-md flex justify-between">
<div className="text-lavender">Total Supplied</div>
<div className="font-semibold text-moon">
{getFormattedNumber(collateralAmount)}{' '}
{appConfig.assets[assetId]}
</div>
</div>
<div className="text-md flex justify-between">
<div className="text-lavender">Total Supplied Value</div>
<div className="font-semibold text-moon">
{getFormattedNumber(collateralAmount.times(price))}
{' $'}
</div>
</div>
</div>
</div>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</TableCell>
<TableCell>
<div className=" h-full flex items-center gap-x-2">
<div className="h-full flex items-center gap-x-2">
<span className="text-lavender font-medium">
{getFormattedPrice(
formatUnits(protocolBalance, decimals).times(price)
Expand All @@ -221,7 +279,7 @@ const CollateralTableRow = ({
</div>
</TableCell>
<TableCell>
<div className=" h-full flex items-center gap-x-2">
<div className="h-full flex items-center gap-x-2">
<PointIcons
points={[
...(symbol === 'USDT' || symbol === 'ETH'
Expand Down Expand Up @@ -319,10 +377,13 @@ const CollateralCard = ({
</div>
<div className="w-full flex items-center">
<div className="w-1/2 text-moon font-medium">
Supply Cap Reached
Supply Cap
<br />
Reached
</div>
<div className="w-[48px] h-[48px]">
<CircularProgressBar percent={supplyUsed.div(100)} />
<div className="w-[30%] h-[48px] flex items-center gap-x-2">
{Number(supplyUsed.decimalPlaces(1))}%
<Progress value={Number(supplyUsed)} />
</div>
</div>
<div className="w-full flex items-center">
Expand All @@ -348,6 +409,7 @@ const CollateralCard = ({
: [POINTS_COLLATERAL[1]]),
POINTS_COLLATERAL[2],
]}
mobile
/>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -359,7 +359,7 @@ export const LendTable = () => {
<div className="w-1/2 text-moon font-medium">
Supply Points
</div>
<PointIcons points={POINTS_LEND} />
<PointIcons points={POINTS_LEND} mobile />
</div>
</div>
</CardContent>
Expand Down
26 changes: 17 additions & 9 deletions apps/frontend/src/components/LeaderboardView/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export const LeaderboardView = () => {

return (
<>
<div className="hidden lg:flex pt-[33px] sm:pt-[55px] pb-[55px] w-full items-center justify-center">
<div className="flex pt-[33px] sm:pt-[55px] pb-[55px] w-full items-center justify-center">
<div className="flex flex-col items-center justify-center max-w-[750px] lg:w-[750px]">
<div className="text-xl font-semibold text-white">
Swaylend Leaderboard
Expand All @@ -26,27 +26,27 @@ export const LeaderboardView = () => {
<div className="w-full mt-[30px] flex justify-between bg-card p-4 rounded-xl">
<div>
<div className="text-moon font-semibold">Your Rank</div>
<div className="text-primary text-2xl font-semibold">
<div className="text-primary font-semibold text-xl md:text-2xl">
{user?.rank === 0 ? (
<span className="text-xl">Unranked</span>
<span className="text-lg md:text-xl">Unranked</span>
) : (
user?.rank
)}
</div>
</div>
<div className="flex flex-col items-end">
<div className="text-moon font-semibold">Your Points</div>
<div className="text-white text-2xl font-semibold text-right">
<div className="text-white font-semibold text-right text-xl md:text-2xl">
{user ? user.points : '0'}
</div>
</div>
</div>
))}
<div className="w-full mt-[55px] flex justify-between">
<div className="max-sm:flex max-sm:flex-col max-sm:text-center w-full mt-[55px] flex justify-between">
<div className="text-lg text-white font-semibold">
Top Contributors
</div>
<div className="text-sm text-yellow-100 flex items-center px-2">
<div className="text-sm text-yellow-100 flex items-center sm:px-2 max-sm:justify-center">
<TriangleAlert className="w-4 h-4 mr-1" /> Points are updated
every 24 hours
</div>
Expand Down Expand Up @@ -75,7 +75,15 @@ export const LeaderboardView = () => {
{user.rank}
</td>
<td className="px-4 py-2 text-left text-lavender font-semibold">
{user.address}
<span className="md:hidden">{`${user.address.slice(
0,
6
)}...${user.address.slice(-4)}`}</span>
<span className="max-md:hidden lg:hidden">{`${user.address.slice(
0,
14
)}...${user.address.slice(-14)}`}</span>
<span className="max-lg:hidden">{user.address}</span>
</td>
<td className="px-4 py-2 text-right text-lavender font-semibold">
{user.points}
Expand All @@ -89,9 +97,9 @@ export const LeaderboardView = () => {
</table>
</div>
</div>
<div className="lg:hidden w-full h-[60dvh] flex items-center justify-center">
{/* <div className="lg:hidden w-full h-[60dvh] flex items-center justify-center">
This page is not supported on this screen size.
</div>
</div> */}
</>
);
};
5 changes: 4 additions & 1 deletion apps/frontend/src/components/PointIcons/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,10 @@ export type Point = {

type PointIconsProps = {
points: Point[];
mobile?: boolean;
};

export const PointIcons = ({ points }: PointIconsProps) => {
export const PointIcons = ({ points, mobile = false }: PointIconsProps) => {
return (
<div className="flex items-center">
{points.map((point: Point) => {
Expand Down Expand Up @@ -57,6 +58,8 @@ export const PointIcons = ({ points }: PointIconsProps) => {
</TooltipTrigger>
<TooltipContent
onPointerDownOutside={(e) => e.preventDefault()}
className={mobile ? 'w-64' : 'w-128'}
align="center"
>
<div className="p-1">
<div className="font-bold">{point.name}</div>
Expand Down
134 changes: 134 additions & 0 deletions apps/frontend/src/components/Providers/FuelProviderWrapper.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
'use client';

import 'react-toastify/dist/ReactToastify.css';

import { appConfig } from '@/configs';
import { isMobile } from '@/utils/isMobile';
import {
BakoSafeConnector,
BurnerWalletConnector,
FuelWalletConnector,
FuelWalletDevelopmentConnector,
FueletWalletConnector,
SolanaConnector,
WalletConnectConnector,
createConfig,
} from '@fuels/connectors';
import { FuelProvider } from '@fuels/react';
import { CHAIN_IDS, type FuelConnector, Provider } from 'fuels';
import { type ReactNode } from 'react';
import { fallback } from 'viem';
import { http, createConfig as createConfigWagmiConfig } from 'wagmi';
import { mainnet, sepolia } from 'wagmi/chains';
import { coinbaseWallet, injected, walletConnect } from 'wagmi/connectors';

const METADATA = {
name: 'Swaylend',
description: 'Swaylend',
url: 'https://app.swaylend.com',
icons: ['https://app.swaylend.com/logo512.png'],
};

const UI_CONFIG = {
suggestBridge: false,
};
const NETWORKS = [
appConfig.env === 'testnet'
? {
bridgeURL: `${appConfig.client.fuelExplorerUrl}/bridge`,
url: appConfig.client.fuelNodeUrl,
chainId: CHAIN_IDS.fuel.testnet,
}
: {
bridgeURL: `${appConfig.client.fuelExplorerUrl}/bridge`,
url: appConfig.client.fuelNodeUrl,
chainId: CHAIN_IDS.fuel.mainnet,
},
];

const wagmiConfig = createConfigWagmiConfig({
chains: [mainnet, sepolia],
connectors: [
injected({ shimDisconnect: false }),
walletConnect({
projectId: appConfig.client.walletConnectProjectId,
metadata: METADATA,
showQrModal: false,
}),
coinbaseWallet({
appName: METADATA.name,
appLogoUrl: METADATA.icons[0],
darkMode: true,
reloadOnDisconnect: true,
}),
],
transports: {
[mainnet.id]: fallback([
http(
`https://eth-mainnet.g.alchemy.com/v2/${appConfig.client.alchemyId}`
),
]),
[sepolia.id]: fallback([
http(
`https://eth-sepolia.g.alchemy.com/v2/${appConfig.client.alchemyId}`
),
]),
},
});

const customDefaultConnectors = (): Array<FuelConnector> => {
const provider = Provider.create(appConfig.client.fuelNodeUrl);
const connectors: Array<FuelConnector> = [
new FueletWalletConnector(),
new WalletConnectConnector({
projectId: appConfig.client.walletConnectProjectId,
wagmiConfig: wagmiConfig,
chainId:
appConfig.env === 'testnet'
? CHAIN_IDS.fuel.testnet
: CHAIN_IDS.fuel.mainnet,
fuelProvider: provider,
}),
new SolanaConnector({
projectId: appConfig.client.walletConnectProjectId,
chainId:
appConfig.env === 'testnet'
? CHAIN_IDS.fuel.testnet
: CHAIN_IDS.fuel.mainnet,
fuelProvider: provider,
}),
// Add desktop only connectors
...(!isMobile(navigator.userAgent)
? [new FuelWalletConnector(), new BakoSafeConnector()]
: []),
];

if (appConfig.env === 'testnet') {
connectors.push(
new FuelWalletDevelopmentConnector(),
new BurnerWalletConnector({
chainId: CHAIN_IDS.fuel.testnet,
fuelProvider: provider,
})
);
}

return connectors;
};

const FUEL_CONFIG = createConfig(() => ({
connectors: customDefaultConnectors(),
}));

export const FuelProviderWrapper = ({ children }: { children: ReactNode }) => {
return (
<FuelProvider
theme="dark"
uiConfig={UI_CONFIG}
networks={NETWORKS}
fuelConfig={FUEL_CONFIG}
>
{children}
</FuelProvider>
);
};
Loading

0 comments on commit 234518c

Please sign in to comment.