From 72910eb3240c6523f7a57e1211f21cce600ae29a Mon Sep 17 00:00:00 2001 From: bharadwaj palakurthy Date: Mon, 25 Sep 2023 19:38:23 +0530 Subject: [PATCH 01/11] added columns --- app/lending/page.tsx | 99 ++++++++++++++++++++++---------------------- 1 file changed, 50 insertions(+), 49 deletions(-) diff --git a/app/lending/page.tsx b/app/lending/page.tsx index f285b487..ffa8141a 100644 --- a/app/lending/page.tsx +++ b/app/lending/page.tsx @@ -250,6 +250,7 @@ export default function LendingPage() { )} {rwas.length > 0 && ( - - - - {cNote.underlying.name} - - , - - {cNote.supplyApy} - , - - {formatBalance( - cNote.userDetails?.balanceOfUnderlying!, - cNote.decimals - )} - , - - {cNote.userDetails?.supplyBalanceInUnderlying} - , - - {formatBalance(cNote.collateralFactor, 18)} - , + // data={[ + // [ + // <> + // + // + // + // {item.underlying.name} + // + // , + // + // {item.supplyApy} + // , + // + // {formatBalance( + // item.userDetails?.balanceOfUnderlying!, + // item.decimals + // )} + // , + // + // {item.userDetails?.supplyBalanceInUnderlying} + // , + // + // {formatBalance(item.collateralFactor, 18)} + // , - - - - - , - ], - ]} + // + // + // + // + // , + // ], + // ]} data={[...rwas.map((cToken) => CTokenRow({ cToken }))]} /> )} From c80432ac272deb9dd200a68f9bf3397d14ed5763 Mon Sep 17 00:00:00 2001 From: bharadwaj palakurthy Date: Mon, 25 Sep 2023 19:38:32 +0530 Subject: [PATCH 02/11] removed other wallets --- provider/rainbowProvider.tsx | 26 ++++++++++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/provider/rainbowProvider.tsx b/provider/rainbowProvider.tsx index 1efb18ef..83c4eca6 100644 --- a/provider/rainbowProvider.tsx +++ b/provider/rainbowProvider.tsx @@ -1,5 +1,14 @@ import "@rainbow-me/rainbowkit/styles.css"; -import { getDefaultWallets, RainbowKitProvider } from "@rainbow-me/rainbowkit"; +import { + connectorsForWallets, + getDefaultWallets, + RainbowKitProvider, +} from "@rainbow-me/rainbowkit"; +import { + injectedWallet, + rainbowWallet, + walletConnectWallet, +} from "@rainbow-me/rainbowkit/wallets"; import { Chain, configureChains, createConfig, WagmiConfig } from "wagmi"; import { publicProvider } from "wagmi/providers/public"; import * as EVM_CHAINS from "@/config/networks/evm"; @@ -51,9 +60,22 @@ const { connectors } = getDefaultWallets({ projectId: process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID as string, chains, }); + +const specificConnectors = connectorsForWallets([ + { + groupName: "Recommended", + wallets: [ + injectedWallet({ + chains, + }), + ], + }, +]); + const wagmiConfig = createConfig({ autoConnect: true, - connectors, + // connectors, + connectors: specificConnectors, publicClient, }); From d1bb6b47ab5a5ec108d47b2dca5519156aec1824 Mon Sep 17 00:00:00 2001 From: bharadwaj palakurthy Date: Mon, 25 Sep 2023 19:40:55 +0530 Subject: [PATCH 03/11] removed columns line --- app/lending/page.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/app/lending/page.tsx b/app/lending/page.tsx index e5e74ddf..ffa8141a 100644 --- a/app/lending/page.tsx +++ b/app/lending/page.tsx @@ -250,7 +250,6 @@ export default function LendingPage() { )} {rwas.length > 0 && (
Date: Mon, 25 Sep 2023 20:14:28 +0530 Subject: [PATCH 04/11] isLoading added to hook --- app/lending/page.tsx | 66 +++++--------------------- app/lending/utils.tsx | 4 +- hooks/lending/interfaces/hookParams.ts | 2 +- hooks/lending/useLending.ts | 2 +- 4 files changed, 18 insertions(+), 56 deletions(-) diff --git a/app/lending/page.tsx b/app/lending/page.tsx index ffa8141a..e8feab8e 100644 --- a/app/lending/page.tsx +++ b/app/lending/page.tsx @@ -28,7 +28,8 @@ interface LendingProps { } export default function LendingPage() { - const { cTokens, clmPosition, transaction, selection } = useLendingCombo(); + const { cTokens, clmPosition, transaction, selection, isLoading } = + useLendingCombo(); const { cNote, rwas } = cTokens; const { currentAction, @@ -207,6 +208,7 @@ export default function LendingPage() { )} +
{" "} @@ -233,7 +235,9 @@ export default function LendingPage() { Average Apr: {clmPosition.general.netApr + "%"} {" "}
- {cNote && ( + {isLoading ? ( + Loading... + ) : cNote ? (
+ ) : ( + No Supply Tokens Found )} - {rwas.length > 0 && ( + {isLoading ? ( + Loading... + ) : rwas.length > 0 ? (
- // - // - // - // {item.underlying.name} - // - // , - // - // {item.supplyApy} - // , - // - // {formatBalance( - // item.userDetails?.balanceOfUnderlying!, - // item.decimals - // )} - // , - // - // {item.userDetails?.supplyBalanceInUnderlying} - // , - // - // {formatBalance(item.collateralFactor, 18)} - // , - - // - // - // - // - // , - // ], - // ]} data={[...rwas.map((cToken) => CTokenRow({ cToken }))]} /> + ) : ( + No RWAS tokens available )} ); diff --git a/app/lending/utils.tsx b/app/lending/utils.tsx index b84d7d68..917b40a3 100644 --- a/app/lending/utils.tsx +++ b/app/lending/utils.tsx @@ -19,6 +19,7 @@ interface LendingComboReturn { cNote: CTokenWithUserData | undefined; rwas: CTokenWithUserData[]; }; + isLoading: boolean; clmPosition: { position: UserLMPosition; general: { @@ -47,7 +48,7 @@ export function useLendingCombo(): LendingComboReturn { // params for useLending hook const { data: signer } = useWalletClient(); const chainId = signer?.chain.id === 7701 ? 7701 : 7700; - const { cTokens, position, loading, transaction } = useLending({ + const { cTokens, position, isLoading, transaction } = useLending({ chainId, lmType: "lending", userEthAddress: signer?.account.address, @@ -125,6 +126,7 @@ export function useLendingCombo(): LendingComboReturn { cNote, rwas, }, + isLoading, clmPosition: { position, general: { diff --git a/hooks/lending/interfaces/hookParams.ts b/hooks/lending/interfaces/hookParams.ts index 8205fc3d..e382c41b 100644 --- a/hooks/lending/interfaces/hookParams.ts +++ b/hooks/lending/interfaces/hookParams.ts @@ -13,7 +13,7 @@ export interface LendingHookInputParams { export interface LendingHookReturn { cTokens: CTokenWithUserData[]; position: UserLMPosition; - loading: boolean; + isLoading: boolean; transaction: { canPerformLendingTx: ( txParams: CTokenLendingTransactionParams diff --git a/hooks/lending/useLending.ts b/hooks/lending/useLending.ts index 861b0c2a..c7b9ea9d 100644 --- a/hooks/lending/useLending.ts +++ b/hooks/lending/useLending.ts @@ -101,7 +101,7 @@ export default function useLending( return { cTokens, position, - loading: loadingCTokens, + isLoading: loadingCTokens, transaction: { canPerformLendingTx, createNewLendingFlow: createNewCTokenLendingFlow, From 530c700f71206095f10b3d2e6de3d39227749bea Mon Sep 17 00:00:00 2001 From: bharadwaj palakurthy Date: Wed, 27 Sep 2023 01:43:26 +0530 Subject: [PATCH 05/11] fixed bridge status --- components/transactions/TxItem.tsx | 4 ++-- components/transactions/transactions.module.scss | 3 +-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/components/transactions/TxItem.tsx b/components/transactions/TxItem.tsx index 1d4cb0cc..a5c369f3 100644 --- a/components/transactions/TxItem.tsx +++ b/components/transactions/TxItem.tsx @@ -121,7 +121,7 @@ const TxItem = (props: TxItemProps) => { )} {props.tx.tx.bridge && props.tx.tx.bridge.lastStatus !== "NONE" && ( - <> + Bridge Status - {props.tx.tx.bridge.lastStatus.toLowerCase()} @@ -131,7 +131,7 @@ const TxItem = (props: TxItemProps) => { {formatSecondsToMinutes(props.tx.tx.bridge.timeLeft)} )} - + )} diff --git a/components/transactions/transactions.module.scss b/components/transactions/transactions.module.scss index 25940c75..6c114ad1 100644 --- a/components/transactions/transactions.module.scss +++ b/components/transactions/transactions.module.scss @@ -21,7 +21,6 @@ align-items: center; width: 100%; cursor: pointer; - user-select: none; &:hover { @@ -31,7 +30,7 @@ .collapsable { overflow-x: hidden; - overflow-y: scroll; + overflow-y: hidden; max-height: 0; transition: max-height 0.5s linear; position: relative; From fdfb2c7ee8e3043b189d8b8b60ecddf0ece1db7e Mon Sep 17 00:00:00 2001 From: bharadwaj palakurthy Date: Wed, 27 Sep 2023 14:06:03 +0530 Subject: [PATCH 06/11] added cNote highlightCard --- .../components/highlightCard.module.scss | 57 +++++++++ app/lending/components/highlightCard.tsx | 109 ++++++++++++++++++ app/lending/page.tsx | 65 +++++++++-- 3 files changed, 219 insertions(+), 12 deletions(-) create mode 100644 app/lending/components/highlightCard.module.scss create mode 100644 app/lending/components/highlightCard.tsx diff --git a/app/lending/components/highlightCard.module.scss b/app/lending/components/highlightCard.module.scss new file mode 100644 index 00000000..213a0a94 --- /dev/null +++ b/app/lending/components/highlightCard.module.scss @@ -0,0 +1,57 @@ +.container { + background: var(--card-sub-surface-color, #dfdfdf); + box-shadow: 6px 6px 0px 0px rgba(17, 17, 17, 0.15); + + margin: 0 auto; + width: 920px; + // height: 320px; + padding-bottom: 1rem; + position: relative; + overflow: hidden; +} + +.header { + background: var(--card-primary-color); + padding: 1rem 2rem; + display: flex; + justify-content: space-between; +} + +.amounts { + padding: 1rem 2rem; + display: flex; + justify-content: space-between; +} + +.actions { + padding: 1rem 2rem; + display: flex; + width: 70%; + gap: 2rem; +} + +.item { + display: flex; + flex-grow: 1; + width: 100%; + flex-direction: column; +} + +.title { + font-size: 16px; +} + +.value { + font-size: 32px !important; +} + +.postChild { + margin-left: -1rem; +} + +.logo { + position: absolute; + bottom: 0; + right: 0; + transform: translate(16%, 16%); +} diff --git a/app/lending/components/highlightCard.tsx b/app/lending/components/highlightCard.tsx new file mode 100644 index 00000000..d8669afa --- /dev/null +++ b/app/lending/components/highlightCard.tsx @@ -0,0 +1,109 @@ +import Text from "@/components/text"; +import styles from "./highlightCard.module.scss"; +import Button from "@/components/button/button"; +import Spacer from "@/components/layout/spacer"; +import Image from "next/image"; +interface Props { + token: { + name: string; + imgUrl: string; + supplyAPR: string; + borrowAPR: string; + walletBalance?: string; + amountStaked?: string; + outStandingDebt?: string; + supply: () => void; + borrow: () => void; + }; +} +const HighlightCard = (props: Props) => { + return ( +
+ +
+ + + +
+
+ + } + /> + + } + /> + +
+ +
+ + + +
+
+ ); +}; + +export default HighlightCard; + +type ItemProps = { + name: string; + value: string; + postChild?: React.ReactNode; + theme?: + | "primary-light" + | "primary-dark" + | "secondary-light" + | "secondary-dark" + | undefined; +}; +const Item = ({ name, value, theme, postChild }: ItemProps) => ( +
+ + {name} + + + {value}{" "} + {postChild && {postChild}} + +
+); diff --git a/app/lending/page.tsx b/app/lending/page.tsx index e8feab8e..a88cbf6e 100644 --- a/app/lending/page.tsx +++ b/app/lending/page.tsx @@ -13,6 +13,8 @@ import { formatBalance } from "@/utils/tokenBalances.utils"; import { useLendingCombo } from "./utils"; import Text from "@/components/text"; import Container from "@/components/container/container"; +import HighlightCard from "./components/highlightCard"; +import { format } from "path"; interface LendingProps { Asset: string; @@ -238,22 +240,61 @@ export default function LendingPage() { {isLoading ? ( Loading... ) : cNote ? ( -
+ { + setSelectedToken(cNote); + setModalOpen(true); + }, + + borrow: () => { + setSelectedToken(cNote); + setModalOpen(true); + }, + }} /> ) : ( No Supply Tokens Found )} + {isLoading ? ( Loading... ) : rwas.length > 0 ? ( From 15023585cc7ba66df1abf6fd39ae55bd4f79c3ca Mon Sep 17 00:00:00 2001 From: bharadwaj palakurthy Date: Wed, 27 Sep 2023 16:09:38 +0530 Subject: [PATCH 07/11] added highlight and item comps --- .../components/highlightCard.module.scss | 22 +-------- app/lending/components/highlightCard.tsx | 45 ++++++++----------- app/lending/components/item.module.scss | 18 ++++++++ app/lending/components/item.tsx | 28 ++++++++++++ 4 files changed, 66 insertions(+), 47 deletions(-) create mode 100644 app/lending/components/item.module.scss create mode 100644 app/lending/components/item.tsx diff --git a/app/lending/components/highlightCard.module.scss b/app/lending/components/highlightCard.module.scss index 213a0a94..d601f67a 100644 --- a/app/lending/components/highlightCard.module.scss +++ b/app/lending/components/highlightCard.module.scss @@ -3,8 +3,9 @@ box-shadow: 6px 6px 0px 0px rgba(17, 17, 17, 0.15); margin: 0 auto; - width: 920px; + // width: 920px; // height: 320px; + width: 100%; padding-bottom: 1rem; position: relative; overflow: hidden; @@ -30,25 +31,6 @@ gap: 2rem; } -.item { - display: flex; - flex-grow: 1; - width: 100%; - flex-direction: column; -} - -.title { - font-size: 16px; -} - -.value { - font-size: 32px !important; -} - -.postChild { - margin-left: -1rem; -} - .logo { position: absolute; bottom: 0; diff --git a/app/lending/components/highlightCard.tsx b/app/lending/components/highlightCard.tsx index d8669afa..fc112c24 100644 --- a/app/lending/components/highlightCard.tsx +++ b/app/lending/components/highlightCard.tsx @@ -1,8 +1,8 @@ -import Text from "@/components/text"; import styles from "./highlightCard.module.scss"; import Button from "@/components/button/button"; -import Spacer from "@/components/layout/spacer"; import Image from "next/image"; +import Item from "./item"; +import Icon from "@/components/icon/icon"; interface Props { token: { name: string; @@ -44,14 +44,26 @@ const HighlightCard = (props: Props) => { name="Wallet Balance" value={props.token.walletBalance ?? "0"} postChild={ - + } /> + } /> { width={"fill"} height={"large"} fontSize={"lg"} + onClick={props.token.supply} > Stake note @@ -75,6 +88,7 @@ const HighlightCard = (props: Props) => { width={"fill"} height={"large"} fontSize={"lg"} + onClick={props.token.borrow} > borrow note @@ -84,26 +98,3 @@ const HighlightCard = (props: Props) => { }; export default HighlightCard; - -type ItemProps = { - name: string; - value: string; - postChild?: React.ReactNode; - theme?: - | "primary-light" - | "primary-dark" - | "secondary-light" - | "secondary-dark" - | undefined; -}; -const Item = ({ name, value, theme, postChild }: ItemProps) => ( -
- - {name} - - - {value}{" "} - {postChild && {postChild}} - -
-); diff --git a/app/lending/components/item.module.scss b/app/lending/components/item.module.scss new file mode 100644 index 00000000..ef86b2d7 --- /dev/null +++ b/app/lending/components/item.module.scss @@ -0,0 +1,18 @@ +.item { + display: flex; + flex-grow: 1; + width: 100%; + flex-direction: column; +} + +.title { + font-size: 16px; +} + +.value { + font-size: 32px !important; +} + +.postChild { + margin-left: -1rem; +} diff --git a/app/lending/components/item.tsx b/app/lending/components/item.tsx new file mode 100644 index 00000000..eaa67c05 --- /dev/null +++ b/app/lending/components/item.tsx @@ -0,0 +1,28 @@ +import styles from "./item.module.scss"; +import Text from "@/components/text"; + +type ItemProps = { + name: string; + value: string; + postChild?: React.ReactNode; + theme?: + | "primary-light" + | "primary-dark" + | "secondary-light" + | "secondary-dark" + | undefined; +}; + +const Item = ({ name, value, theme, postChild }: ItemProps) => ( +
+ + {name} + + + {value}{" "} + {postChild && {postChild}} + +
+); + +export default Item; From 38a6df6875a0c48555a4904d97c66138a57b5539 Mon Sep 17 00:00:00 2001 From: bharadwaj palakurthy Date: Wed, 27 Sep 2023 16:09:49 +0530 Subject: [PATCH 08/11] added outline card --- .../components/outlineCard.module.scss | 32 +++++++++++++++++++ app/lending/components/outlineCard.tsx | 9 ++++++ 2 files changed, 41 insertions(+) create mode 100644 app/lending/components/outlineCard.module.scss create mode 100644 app/lending/components/outlineCard.tsx diff --git a/app/lending/components/outlineCard.module.scss b/app/lending/components/outlineCard.module.scss new file mode 100644 index 00000000..30554270 --- /dev/null +++ b/app/lending/components/outlineCard.module.scss @@ -0,0 +1,32 @@ +.container { + width: 100%; + aspect-ratio: 1; + border-top: 1px solid var(--card-primary-color); + border-bottom: 1px solid var(--card-primary-color); + position: relative; + display: flex; + padding: 1rem; + flex-direction: column; + gap: 10px; + &::before { + content: ""; + position: absolute; + top: -1px; + left: 0; + width: calc(100% - 1px); + height: 10px; + border-left: 1px solid var(--card-primary-color); + border-right: 1px solid var(--card-primary-color); + } + + &::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: calc(100% - 1px); + height: 10px; + border-left: 1px solid var(--card-primary-color); + border-right: 1px solid var(--card-primary-color); + } +} diff --git a/app/lending/components/outlineCard.tsx b/app/lending/components/outlineCard.tsx new file mode 100644 index 00000000..2948d1cb --- /dev/null +++ b/app/lending/components/outlineCard.tsx @@ -0,0 +1,9 @@ +import styles from "./outlineCard.module.scss"; +interface Props { + children: React.ReactNode; +} +const OutlineCard = (props: Props) => { + return
{props.children}
; +}; + +export default OutlineCard; From 62cec50532d4022d75c229e54243f131d63fc0dc Mon Sep 17 00:00:00 2001 From: bharadwaj palakurthy Date: Wed, 27 Sep 2023 16:10:05 +0530 Subject: [PATCH 09/11] refactored layout and fixed loading --- app/lending/lending.module.scss | 42 +++++ app/lending/page.tsx | 279 ++++++++++++++++++++------------ components/loader/loading.tsx | 1 + 3 files changed, 215 insertions(+), 107 deletions(-) create mode 100644 app/lending/lending.module.scss diff --git a/app/lending/lending.module.scss b/app/lending/lending.module.scss new file mode 100644 index 00000000..b052b7ef --- /dev/null +++ b/app/lending/lending.module.scss @@ -0,0 +1,42 @@ +.container { + display: flex; + flex-direction: column; + align-items: center; +} + +.title { + font-size: 42px !important; + padding-left: 4rem; + text-align: left; + width: 100%; + max-width: 1500px; +} + +.grid { + display: flex; + gap: 2rem; + padding: 2rem; + padding-top: 0rem; + max-width: 1500px; +} + +.highlightCard { + max-width: 1000px; + width: 100%; + display: flex; + justify-content: stretch; +} + +.mainTable { + max-width: 1000px; + width: 100%; + display: flex; + justify-content: stretch; +} + +.widget1 { + // width: 70%; +} + +.widget2 { +} diff --git a/app/lending/page.tsx b/app/lending/page.tsx index a88cbf6e..970d72c7 100644 --- a/app/lending/page.tsx +++ b/app/lending/page.tsx @@ -1,6 +1,7 @@ "use client"; import Button from "@/components/button/button"; +import styles from "./lending.module.scss"; import Icon from "@/components/icon/icon"; import Input from "@/components/input/input"; import Spacer from "@/components/layout/spacer"; @@ -14,7 +15,9 @@ import { useLendingCombo } from "./utils"; import Text from "@/components/text"; import Container from "@/components/container/container"; import HighlightCard from "./components/highlightCard"; -import { format } from "path"; +import OutlineCard from "./components/outlineCard"; +import Item from "./components/item"; +import LoadingIcon from "@/components/loader/loading"; interface LendingProps { Asset: string; @@ -98,9 +101,9 @@ export default function LendingPage() { > Supply - , +
- { - setSelectedToken(cNote); - setModalOpen(true); - }, + borrow: () => { + setSelectedToken(cNote); + setModalOpen(true); + }, + }} + /> + ) : ( + No Supply Tokens Found + )} + +
+ {isLoading ? ( + + + + ) : rwas.length > 0 ? ( +
CTokenRow({ cToken }))]} + /> + ) : ( + No RWAS tokens available + )} + + - borrow: () => { - setSelectedToken(cNote); - setModalOpen(true); - }, - }} - /> - ) : ( - No Supply Tokens Found - )} - - {isLoading ? ( - Loading... - ) : rwas.length > 0 ? ( -
CTokenRow({ cToken }))]} - /> - ) : ( - No RWAS tokens available - )} + +
+ + + } + /> + + } + /> + + } + /> + +
+ +
+ + + + + + +
+ + ); } diff --git a/components/loader/loading.tsx b/components/loader/loading.tsx index ddcb3b89..63dd5468 100644 --- a/components/loader/loading.tsx +++ b/components/loader/loading.tsx @@ -9,6 +9,7 @@ interface Props { const LoadingIcon = ({ size, className }: Props) => { return ( Date: Wed, 27 Sep 2023 16:35:16 +0530 Subject: [PATCH 10/11] refactored lending modal --- app/lending/components/cTokenRow.tsx | 64 +++++++++ app/lending/components/modal/modal.tsx | 138 +++++++++++++++++++ app/lending/page.tsx | 182 ++++--------------------- 3 files changed, 225 insertions(+), 159 deletions(-) create mode 100644 app/lending/components/cTokenRow.tsx create mode 100644 app/lending/components/modal/modal.tsx diff --git a/app/lending/components/cTokenRow.tsx b/app/lending/components/cTokenRow.tsx new file mode 100644 index 00000000..6e02e6b4 --- /dev/null +++ b/app/lending/components/cTokenRow.tsx @@ -0,0 +1,64 @@ +import Button from "@/components/button/button"; +import Container from "@/components/container/container"; +import Icon from "@/components/icon/icon"; +import Spacer from "@/components/layout/spacer"; +import Text from "@/components/text"; +import { CTokenWithUserData } from "@/hooks/lending/interfaces/tokens"; +import { formatBalance } from "@/utils/tokenBalances.utils"; + +export const CTokenRow = ({ + cToken, + onClick, +}: { + cToken: CTokenWithUserData; + onClick: () => void; +}) => [ + <> + + + + {cToken.underlying.name} + + , + + {cToken.supplyApy + "%"} + , + + {formatBalance( + cToken.userDetails?.balanceOfUnderlying ?? "0", + cToken.underlying.decimals, + { + commify: true, + } + )} + , + + {formatBalance( + cToken.userDetails?.supplyBalanceInUnderlying ?? "0", + cToken.underlying.decimals, + { + commify: true, + } + )} + , + + {formatBalance(cToken.collateralFactor, 16) + "%"} + , + + + + + , +]; diff --git a/app/lending/components/modal/modal.tsx b/app/lending/components/modal/modal.tsx new file mode 100644 index 00000000..9ea8ad08 --- /dev/null +++ b/app/lending/components/modal/modal.tsx @@ -0,0 +1,138 @@ +import Button from "@/components/button/button"; +import Text from "@/components/text"; +import Input from "@/components/input/input"; +import { CTokenLendingTxTypes } from "@/hooks/lending/interfaces/lendingTxTypes"; +import { CTokenWithUserData } from "@/hooks/lending/interfaces/tokens"; +import { maxAmountForLendingTx } from "@/utils/clm/limits.utils"; +import { UserLMPosition } from "@/hooks/lending/interfaces/userPositions"; + +interface Props { + selectedToken: CTokenWithUserData | null; + transaction: { + performTx: (amount: string, txType: CTokenLendingTxTypes) => void; + canPerformTx: (amount: string, txType: CTokenLendingTxTypes) => boolean; + }; + currentAction: CTokenLendingTxTypes; + setCurrentAction: (action: CTokenLendingTxTypes) => void; + amount: string; + setAmount: (amount: string) => void; + clmPosition: { + position: UserLMPosition; + general: { + maxAccountLiquidity: string; + outstandingDebt: string; + percentLimitUsed: string; + netApr: string; + }; + }; +} + +interface LSProps { + action: CTokenLendingTxTypes; +} +export const LendingModal = ({ + selectedToken, + transaction, + currentAction, + setCurrentAction, + amount, + setAmount, + clmPosition, +}: Props) => { + const LendingActionSwitch = ({ action }: LSProps) => ( + + ); + + return ( + <> + {selectedToken && ( + <> + + {selectedToken.symbol} + + name: {selectedToken.name} + Address: {selectedToken.address} + BorrowApy: {selectedToken.borrowApy} + BorrowCap: {selectedToken.borrowCap} + Cash: {selectedToken.cash} + + CollateralFactor: {selectedToken.collateralFactor} + + Decimals: {selectedToken.decimals} + DistApy: {selectedToken.distApy} + Exchange Rate: {selectedToken.exchangeRate} + + IsListed: {selectedToken.isListed ? "yes" : "no"} + + Liquidity: {selectedToken.liquidity} + Underlying Price: {selectedToken.price} + Supply Apy: {selectedToken.supplyApy} +

----

+ + Underlying: + + Address: {selectedToken.underlying.address} + Decimals: {selectedToken.underlying.decimals} + Symbol: {selectedToken.underlying.symbol} + Name: {selectedToken.underlying.name} +

----

+ + User Data: + + + CToken Balance: {selectedToken.userDetails?.balanceOfCToken} + + + Underlying Balance: {selectedToken.userDetails?.balanceOfUnderlying} + + + Borrow Balance: {selectedToken.userDetails?.borrowBalance} + + Rewards: {selectedToken.userDetails?.rewards} + + Is Collateral:{" "} + {selectedToken.userDetails?.isCollateral ? "yes" : "no"} + + + Supply Balance In Underlying:{" "} + {selectedToken.userDetails?.supplyBalanceInUnderlying} + + + Allowance Underlying:{" "} + {selectedToken.userDetails?.underlyingAllowance} + + { + setAmount(val.target.value); + }} + /> +
+ + + + +
+ + + )} + + ); +}; diff --git a/app/lending/page.tsx b/app/lending/page.tsx index 970d72c7..89a65ceb 100644 --- a/app/lending/page.tsx +++ b/app/lending/page.tsx @@ -18,6 +18,8 @@ import HighlightCard from "./components/highlightCard"; import OutlineCard from "./components/outlineCard"; import Item from "./components/item"; import LoadingIcon from "@/components/loader/loading"; +import { LendingModal } from "./components/modal/modal"; +import { CTokenRow } from "./components/cTokenRow"; interface LendingProps { Asset: string; @@ -46,74 +48,6 @@ export default function LendingPage() { amount, setAmount, } = selection; - interface LSProps { - action: CTokenLendingTxTypes; - } - const LendingActionSwitch = ({ action }: LSProps) => ( - - ); - - const CTokenRow = ({ cToken }: { cToken: CTokenWithUserData }) => [ - <> - - - - {cToken.underlying.name} - - , - - {cToken.supplyApy + "%"} - , - - {formatBalance( - cToken.userDetails?.balanceOfUnderlying ?? "0", - cToken.underlying.decimals, - { - commify: true, - } - )} - , - - {formatBalance( - cToken.userDetails?.supplyBalanceInUnderlying ?? "0", - cToken.underlying.decimals, - { - commify: true, - } - )} - , - - {formatBalance(cToken.collateralFactor, 16) + "%"} - , - - - - - , - ]; return (
@@ -122,97 +56,17 @@ export default function LendingPage() { setModalOpen(false)}> - <> - {selectedToken && ( - <> - - {selectedToken.symbol} - - name: {selectedToken.name} - Address: {selectedToken.address} - BorrowApy: {selectedToken.borrowApy} - BorrowCap: {selectedToken.borrowCap} - Cash: {selectedToken.cash} - - CollateralFactor: {selectedToken.collateralFactor} - - Decimals: {selectedToken.decimals} - DistApy: {selectedToken.distApy} - Exchange Rate: {selectedToken.exchangeRate} - - IsListed: {selectedToken.isListed ? "yes" : "no"} - - Liquidity: {selectedToken.liquidity} - Underlying Price: {selectedToken.price} - Supply Apy: {selectedToken.supplyApy} -

----

- - Underlying: - - Address: {selectedToken.underlying.address} - - Decimals: {selectedToken.underlying.decimals} - - Symbol: {selectedToken.underlying.symbol} - Name: {selectedToken.underlying.name} -

----

- - User Data: - - - CToken Balance: {selectedToken.userDetails?.balanceOfCToken} - - - Underlying Balance:{" "} - {selectedToken.userDetails?.balanceOfUnderlying} - - - Borrow Balance: {selectedToken.userDetails?.borrowBalance} - - - Rewards: {selectedToken.userDetails?.rewards} - - - Is Collateral:{" "} - {selectedToken.userDetails?.isCollateral ? "yes" : "no"} - - - Supply Balance In Underlying:{" "} - {selectedToken.userDetails?.supplyBalanceInUnderlying} - - - Allowance Underlying:{" "} - {selectedToken.userDetails?.underlyingAllowance} - - { - setAmount(val.target.value); - }} - /> -
- - - - -
- - - )} - + +
@@ -294,7 +148,17 @@ export default function LendingPage() { "Collateral Factor", "", ]} - data={[...rwas.map((cToken) => CTokenRow({ cToken }))]} + data={[ + ...rwas.map((cToken) => + CTokenRow({ + cToken, + onClick: () => { + setSelectedToken(cToken); + setModalOpen(true); + }, + }) + ), + ]} /> ) : ( No RWAS tokens available From 0d4be7f2b08eac3c575a2943a8155bdbf5a8ac7a Mon Sep 17 00:00:00 2001 From: bharadwaj palakurthy Date: Wed, 27 Sep 2023 17:21:16 +0530 Subject: [PATCH 11/11] implemented lending modal --- .../components/modal/modal.module.scss | 26 ++ app/lending/components/modal/modal.tsx | 300 +++++++++++++----- app/lending/page.tsx | 11 +- components/modal/modal.module.scss | 2 + components/modal/modal.tsx | 5 +- 5 files changed, 266 insertions(+), 78 deletions(-) create mode 100644 app/lending/components/modal/modal.module.scss diff --git a/app/lending/components/modal/modal.module.scss b/app/lending/components/modal/modal.module.scss new file mode 100644 index 00000000..5bd218ec --- /dev/null +++ b/app/lending/components/modal/modal.module.scss @@ -0,0 +1,26 @@ +.container { + display: flex; + flex-direction: column; + // min-height: 42rem; + margin: 0 -15px; + margin-bottom: -15px; +} + +.card { + border-radius: var(--border-radius, 0px); + background: var(--card-surface-color, #f1f1f1); + padding: 1rem; + gap: 10px; + /* old */ + box-shadow: -3px -3px 0px 0px rgba(17, 17, 17, 0.2) inset, + 2px 2px 0px 0px rgba(255, 255, 255, 0.4) inset; +} + +.content { + display: flex; + flex-direction: column; + justify-content: stretch; + align-items: center; + width: 100%; + padding: 1rem; +} diff --git a/app/lending/components/modal/modal.tsx b/app/lending/components/modal/modal.tsx index 9ea8ad08..a9356b44 100644 --- a/app/lending/components/modal/modal.tsx +++ b/app/lending/components/modal/modal.tsx @@ -5,7 +5,13 @@ import { CTokenLendingTxTypes } from "@/hooks/lending/interfaces/lendingTxTypes" import { CTokenWithUserData } from "@/hooks/lending/interfaces/tokens"; import { maxAmountForLendingTx } from "@/utils/clm/limits.utils"; import { UserLMPosition } from "@/hooks/lending/interfaces/userPositions"; - +import styles from "./modal.module.scss"; +import Tabs from "@/components/tabs/tabs"; +import Image from "next/image"; +import Container from "@/components/container/container"; +import { formatBalance } from "@/utils/tokenBalances.utils"; +import Icon from "@/components/icon/icon"; +import Spacer from "@/components/layout/spacer"; interface Props { selectedToken: CTokenWithUserData | null; transaction: { @@ -48,91 +54,239 @@ export const LendingModal = ({ ); - return ( - <> - {selectedToken && ( - <> - - {selectedToken.symbol} - - name: {selectedToken.name} - Address: {selectedToken.address} - BorrowApy: {selectedToken.borrowApy} - BorrowCap: {selectedToken.borrowCap} - Cash: {selectedToken.cash} - - CollateralFactor: {selectedToken.collateralFactor} - - Decimals: {selectedToken.decimals} - DistApy: {selectedToken.distApy} - Exchange Rate: {selectedToken.exchangeRate} - - IsListed: {selectedToken.isListed ? "yes" : "no"} - - Liquidity: {selectedToken.liquidity} - Underlying Price: {selectedToken.price} - Supply Apy: {selectedToken.supplyApy} -

----

- - Underlying: - - Address: {selectedToken.underlying.address} - Decimals: {selectedToken.underlying.decimals} - Symbol: {selectedToken.underlying.symbol} - Name: {selectedToken.underlying.name} -

----

- - User Data: - - - CToken Balance: {selectedToken.userDetails?.balanceOfCToken} - - - Underlying Balance: {selectedToken.userDetails?.balanceOfUnderlying} - - - Borrow Balance: {selectedToken.userDetails?.borrowBalance} - - Rewards: {selectedToken.userDetails?.rewards} - - Is Collateral:{" "} - {selectedToken.userDetails?.isCollateral ? "yes" : "no"} - - - Supply Balance In Underlying:{" "} - {selectedToken.userDetails?.supplyBalanceInUnderlying} - - - Allowance Underlying:{" "} - {selectedToken.userDetails?.underlyingAllowance} - + function data() { + if (selectedToken == null) { + return No Active Token; + } + + return ( + <> + + {selectedToken.symbol} + + name: {selectedToken.name} + Address: {selectedToken.address} + BorrowApy: {selectedToken.borrowApy} + BorrowCap: {selectedToken.borrowCap} + Cash: {selectedToken.cash} + + CollateralFactor: {selectedToken.collateralFactor} + + Decimals: {selectedToken.decimals} + DistApy: {selectedToken.distApy} + Exchange Rate: {selectedToken.exchangeRate} + IsListed: {selectedToken.isListed ? "yes" : "no"} + Liquidity: {selectedToken.liquidity} + Underlying Price: {selectedToken.price} + Supply Apy: {selectedToken.supplyApy} +

----

+ + Underlying: + + Address: {selectedToken.underlying.address} + Decimals: {selectedToken.underlying.decimals} + Symbol: {selectedToken.underlying.symbol} + Name: {selectedToken.underlying.name} +

----

+ + User Data: + + + CToken Balance: {selectedToken.userDetails?.balanceOfCToken} + + + Underlying Balance: {selectedToken.userDetails?.balanceOfUnderlying} + + + Borrow Balance: {selectedToken.userDetails?.borrowBalance} + + Rewards: {selectedToken.userDetails?.rewards} + + Is Collateral:{" "} + {selectedToken.userDetails?.isCollateral ? "yes" : "no"} + + + Supply Balance In Underlying:{" "} + {selectedToken.userDetails?.supplyBalanceInUnderlying} + + + Allowance Underlying: {selectedToken.userDetails?.underlyingAllowance} + + { + setAmount(val.target.value); + }} + /> +
+ + + + +
+ + + ); + } + + function Content(token: CTokenWithUserData) { + return ( +
+ + + + + + {token.symbol} + + + + + + + + + + + + + + + + + + +
{ setAmount(val.target.value); }} + placeholder="0.0" + value={amount} /> -
- - - - -
+ +
+
+ ); + } + return ( +
+ {selectedToken ? ( + <> + + ) : ( + No Active Token )} - +
); }; + +const Card = ({ + name, + value, + note, +}: { + name: string; + value: string; + note?: boolean; +}) => ( + + + {name} + + + {value}{" "} + + {note && ( + + )} + + + +); diff --git a/app/lending/page.tsx b/app/lending/page.tsx index 89a65ceb..faf94596 100644 --- a/app/lending/page.tsx +++ b/app/lending/page.tsx @@ -7,9 +7,7 @@ import Input from "@/components/input/input"; import Spacer from "@/components/layout/spacer"; import Modal from "@/components/modal/modal"; import Table from "@/components/table/table"; -import { CTokenLendingTxTypes } from "@/hooks/lending/interfaces/lendingTxTypes"; -import { CTokenWithUserData } from "@/hooks/lending/interfaces/tokens"; -import { maxAmountForLendingTx } from "@/utils/clm/limits.utils"; + import { formatBalance } from "@/utils/tokenBalances.utils"; import { useLendingCombo } from "./utils"; import Text from "@/components/text"; @@ -55,7 +53,12 @@ export default function LendingPage() { Lending - setModalOpen(false)}> + setModalOpen(false)} + title="Lending" + width="32rem" + > { {title && (
-

{title}

+ + {title} +
)}
{children}