From 21268e5536b76a2cd4016a6351eac6ac700226de Mon Sep 17 00:00:00 2001 From: Linkie Link Date: Wed, 8 Mar 2023 10:44:39 +0100 Subject: [PATCH] UI style updates (#106) * feat: updates on the button styles * env: updated yarn.lock * fix: added account actions * fix: updated the orbs logic * fix: fixed the blur presets * feat: updated the button logic * fix: wallet modal style adjustments * fix: updated close icon * fix: fixed the close button * fix: fix types * fix: fixed the build * tidy: component cleanup * feat: added new AccountDetails component * refactor: propper usage of tailwind * refactor: imports * feat: added pages for all scenarios * fix: fix the loading component * fix: remove loading from default trade * fix: fixed the build * fix: fixed losing the provider on hotplug * tidy: remove unused code * fix: added error messages * add borrow page structure * env: enhanced debugging by restructuring the ENV object * fix: fixed the build * fix: fixed the wording on missing env variables * feat: added button hover (#112) * feat: added button hover * fix: added bg transition to primary buttons * feat: pages refactored (#111) * feat: pages refactored * fix: added loader for AccountNavigation * fix: fixed the wallet store management * fix: get rid of the walletSlice and refactor * fix: added gap to the borrow page * fix: fixed some dependencies * fix: added initClients back * fix: fixed according to feedback --------- Co-authored-by: bwvdhelm <34470358+bobthebuidlr@users.noreply.github.com> --- .env.example | 2 + package.json | 2 +- src/app/borrow/loading.tsx | 3 - src/app/borrow/page.tsx | 8 +- src/app/council/page.tsx | 6 +- src/app/earn/page.tsx | 6 +- src/app/layout.tsx | 36 +- src/app/page.tsx | 6 +- src/app/portfolio/page.tsx | 6 +- src/app/trade/page.tsx | 6 +- .../accounts/[account]/borrow/page.tsx | 46 +- .../accounts/[account]/council/loading.tsx | 3 - .../accounts/[account]/council/page.tsx | 12 +- .../accounts/[account]/earn/loading.tsx | 3 - .../[wallet]/accounts/[account]/earn/page.tsx | 13 +- .../[wallet]/accounts/[account]/page.tsx | 6 +- .../accounts/[account]/portfolio/error.tsx | 5 - .../accounts/[account]/portfolio/page.tsx | 16 +- .../accounts/[account]/trade/loading.tsx | 3 - .../accounts/[account]/trade/page.tsx | 22 +- .../wallets/[wallet]/borrow/council/page.tsx | 3 - src/app/wallets/[wallet]/borrow/earn/page.tsx | 3 - src/app/wallets/[wallet]/borrow/page.tsx | 6 +- .../[wallet]/borrow/portfolio/page.tsx | 3 - .../wallets/[wallet]/borrow/trade/page.tsx | 3 - src/app/wallets/[wallet]/council/page.tsx | 6 +- src/app/wallets/[wallet]/earn/page.tsx | 6 +- src/app/wallets/[wallet]/layout.tsx | 22 +- src/app/wallets/[wallet]/portfolio/page.tsx | 6 +- src/app/wallets/[wallet]/trade/page.tsx | 6 +- src/components/Account/AccountDetails.tsx | 147 +- .../Account/AccountManageOverlay.tsx | 94 - src/components/Account/AccountNavigation.tsx | 229 +- src/components/Account/AccountStatus.tsx | 83 - src/components/Account/FundAccountModal.tsx | 4 +- src/components/Account/WithdrawModal.tsx | 14 +- src/components/AmountAndValue.tsx | 4 +- src/components/Background.tsx | 43 +- src/components/Borrow/BorrowTable.tsx | 33 +- src/components/Borrow/Borrowings.tsx | 69 + src/components/BorrowModal.tsx | 5 +- src/components/Button.tsx | 111 +- src/components/Card.tsx | 18 +- src/components/ContainerSecondary.tsx | 15 - src/components/Council/Overview.tsx | 30 + src/components/Earn/Overview.tsx | 32 + src/components/Gauge.tsx | 67 +- src/components/Icons/Account.svg | 3 + src/components/Icons/Add.svg | 8 +- src/components/Icons/ArrowDownLine.svg | 3 + src/components/Icons/ArrowUpLine.svg | 3 + src/components/Icons/Close.svg | 19 +- src/components/Icons/Heart.svg | 3 + src/components/Icons/index.ts | 4 + src/components/Loading.tsx | 8 +- src/components/Modal.tsx | 14 +- src/components/Modals.tsx | 3 +- .../Navigation/DesktopNavigation.tsx | 19 +- src/components/Navigation/NavLink.tsx | 6 +- src/components/Overlay/Overlay.tsx | 2 +- src/components/Overlay/OverlayAction.tsx | 31 - src/components/Portfolio/AccountOverview.tsx | 70 + src/components/RepayModal.tsx | 11 +- src/components/Slider.tsx | 3 +- src/components/Text.tsx | 1 - src/components/TextLink.tsx | 8 +- src/components/Toaster.tsx | 24 +- src/components/Tooltip.tsx | 2 +- src/components/Trade/OrderBook.tsx | 32 + src/components/Trade/Trade.tsx | 38 + src/components/Trade/TradingView.tsx | 24 + src/components/Wallet/ConnectButton.tsx | 18 +- src/components/Wallet/ConnectedButton.tsx | 74 +- src/components/Wallet/Wallet.tsx | 48 +- .../Wallet/WalletConnectProvider.tsx | 29 +- src/components/pages/borrow.tsx | 14 + src/components/pages/council.tsx | 9 + src/components/pages/earn.tsx | 9 + src/components/pages/portfolio.tsx | 9 + src/components/pages/trade.tsx | 17 + src/constants/env.ts | 60 +- src/hooks/queries/useAllBalances.tsx | 4 +- src/hooks/queries/useAllowedCoins.tsx | 4 +- .../queries/useCreditAccountPositions.tsx | 4 +- src/hooks/queries/useCreditAccounts.tsx | 4 +- src/hooks/queries/useRedbankBalances.tsx | 6 +- src/hooks/queries/useTokenPrices.tsx | 10 +- src/pages/api/accounts/[id]/debts.ts | 6 +- src/pages/api/accounts/[id]/deposits.ts | 6 +- src/pages/api/accounts/[id]/index.ts | 8 +- src/pages/api/markets/balances.ts | 8 +- src/pages/api/markets/borrow.ts | 12 +- src/pages/api/markets/debts.ts | 10 +- src/pages/api/markets/deposits.ts | 10 +- src/pages/api/markets/index.ts | 8 +- src/pages/api/markets/liquidity.ts | 8 +- src/pages/api/prices/index.ts | 8 +- src/pages/api/vaults/index.ts | 8 +- src/pages/api/wallets/[address]/accounts.ts | 8 +- src/pages/api/wallets/[address]/balances.ts | 6 +- src/store/index.ts | 4 +- src/store/slices/broadcast.ts | 29 +- src/store/slices/common.ts | 54 +- src/store/slices/wallet.ts | 79 - src/styles/globals.scss | 116 - src/types/interfaces/asset.d.ts | 4 +- src/types/interfaces/pageParams.d.ts | 4 + src/utils/api.ts | 13 +- tailwind.config.js | 126 +- yarn.lock | 2620 +++++++++-------- 110 files changed, 2602 insertions(+), 2483 deletions(-) delete mode 100644 src/app/borrow/loading.tsx delete mode 100644 src/app/wallets/[wallet]/accounts/[account]/council/loading.tsx delete mode 100644 src/app/wallets/[wallet]/accounts/[account]/earn/loading.tsx delete mode 100644 src/app/wallets/[wallet]/accounts/[account]/portfolio/error.tsx delete mode 100644 src/app/wallets/[wallet]/accounts/[account]/trade/loading.tsx delete mode 100644 src/app/wallets/[wallet]/borrow/council/page.tsx delete mode 100644 src/app/wallets/[wallet]/borrow/earn/page.tsx delete mode 100644 src/app/wallets/[wallet]/borrow/portfolio/page.tsx delete mode 100644 src/app/wallets/[wallet]/borrow/trade/page.tsx delete mode 100644 src/components/Account/AccountManageOverlay.tsx delete mode 100644 src/components/Account/AccountStatus.tsx create mode 100644 src/components/Borrow/Borrowings.tsx delete mode 100644 src/components/ContainerSecondary.tsx create mode 100644 src/components/Council/Overview.tsx create mode 100644 src/components/Earn/Overview.tsx create mode 100644 src/components/Icons/Account.svg create mode 100644 src/components/Icons/ArrowDownLine.svg create mode 100644 src/components/Icons/ArrowUpLine.svg create mode 100644 src/components/Icons/Heart.svg delete mode 100644 src/components/Overlay/OverlayAction.tsx create mode 100644 src/components/Portfolio/AccountOverview.tsx create mode 100644 src/components/Trade/OrderBook.tsx create mode 100644 src/components/Trade/Trade.tsx create mode 100644 src/components/Trade/TradingView.tsx create mode 100644 src/components/pages/borrow.tsx create mode 100644 src/components/pages/council.tsx create mode 100644 src/components/pages/earn.tsx create mode 100644 src/components/pages/portfolio.tsx create mode 100644 src/components/pages/trade.tsx delete mode 100644 src/store/slices/wallet.ts diff --git a/.env.example b/.env.example index 731dcdf6..bb6f2be5 100644 --- a/.env.example +++ b/.env.example @@ -9,5 +9,7 @@ NEXT_PUBLIC_ACCOUNT_NFT=osmo1l8c3g6zy7kjhuh8d2kqyvxkw0myn4puxv0tzcdf9nwxd386r9l7 NEXT_PUBLIC_ORACLE=osmo1dqz2u3c8rs5e7w5fnchsr2mpzzsxew69wtdy0aq4jsd76w7upmsstqe0s8 NEXT_PUBLIC_RED_BANK=osmo1g30recyv8pfy3qd4qn3dn7plc0rn5z68y5gn32j39e96tjhthzxsw3uvvu NEXT_PUBLIC_CREDIT_MANAGER=osmo12hgn4jec4tftahm7spf7c2aqsqrxzzk50hkq60e89atumyu0zvys7vzxdc +NEXT_PUBLIC_INCENTIVES=osmo1zxs8fry3m8j94pqg7h4muunyx86en27cl0xgk76fc839xg2qnn6qtpjs48 NEXT_PUBLIC_ZAPPER=osmo1ua8dwc9v8qjh7n3qf8kg6xvrwjm5yu9xxln7yjvgmrvfzaxvzsuqfcdnjq NEXT_PUBLIC_SWAPPER=osmo1uj6r9tu440wwp2mhtagh48yvmeyeaqt2xa7kdnlhyrqcuthlj4ss7ghg6n +NEXT_PUBLIC_API=http://localhost:3000/api \ No newline at end of file diff --git a/package.json b/package.json index 8ca8fdab..665c0b9a 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,7 @@ "recharts": "^2.2.0", "sass": "^1.58.3", "swr": "^2.0.3", - "tailwindcss-border-gradient-radius": "^3.0.1", + "tailwind-scrollbar-hide": "^1.1.7", "use-local-storage-state": "^18.1.1", "zustand": "^4.1.4" }, diff --git a/src/app/borrow/loading.tsx b/src/app/borrow/loading.tsx deleted file mode 100644 index 0597facd..00000000 --- a/src/app/borrow/loading.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function laoding() { - return '...isLoading' -} diff --git a/src/app/borrow/page.tsx b/src/app/borrow/page.tsx index 94d250b2..fe8775e7 100644 --- a/src/app/borrow/page.tsx +++ b/src/app/borrow/page.tsx @@ -1,7 +1,5 @@ -import { getBorrowData } from 'utils/api' +import BorrowPage from 'components/pages/borrow' -export default async function page() { - const borrowData = await getBorrowData() - - return `You are a guest` +export default async function page({ params }: PageProps) { + return } diff --git a/src/app/council/page.tsx b/src/app/council/page.tsx index 8c592614..a24798ba 100644 --- a/src/app/council/page.tsx +++ b/src/app/council/page.tsx @@ -1,3 +1,5 @@ -export default function page() { - return `You are a guest` +import CouncilPage from 'components/pages/council' + +export default async function page({ params }: PageProps) { + return } diff --git a/src/app/earn/page.tsx b/src/app/earn/page.tsx index 8c592614..35771cc7 100644 --- a/src/app/earn/page.tsx +++ b/src/app/earn/page.tsx @@ -1,3 +1,5 @@ -export default function page() { - return `You are a guest` +import EarnPage from 'components/pages/earn' + +export default async function page({ params }: PageProps) { + return } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 9bec7c3c..de4f3569 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,3 +1,6 @@ +import classNames from 'classnames' + +import AccountDetails from 'components/Account/AccountDetails' import Background from 'components/Background' import FetchPrices from 'components/FetchPrices' import { Modals } from 'components/Modals' @@ -9,22 +12,25 @@ import 'styles/globals.scss' export default function RootLayout({ children }: { children: React.ReactNode }) { return ( - + - - -
- - - - - - - -
-
{children}
-
-
+ + + + + + +
+
{children}
+ +
+ + ) diff --git a/src/app/page.tsx b/src/app/page.tsx index 9fd04b1c..9efcf71d 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,3 +1,5 @@ -export default function page() { - return 'Connect to your wallet' +import TradePage from 'components/pages/trade' + +export default async function page({ params }: PageProps) { + return } diff --git a/src/app/portfolio/page.tsx b/src/app/portfolio/page.tsx index 8c592614..d8fc448d 100644 --- a/src/app/portfolio/page.tsx +++ b/src/app/portfolio/page.tsx @@ -1,3 +1,5 @@ -export default function page() { - return `You are a guest` +import PortfolioPage from 'components/pages/portfolio' + +export default async function page({ params }: PageProps) { + return } diff --git a/src/app/trade/page.tsx b/src/app/trade/page.tsx index 8c592614..9efcf71d 100644 --- a/src/app/trade/page.tsx +++ b/src/app/trade/page.tsx @@ -1,3 +1,5 @@ -export default function page() { - return `You are a guest` +import TradePage from 'components/pages/trade' + +export default async function page({ params }: PageProps) { + return } diff --git a/src/app/wallets/[wallet]/accounts/[account]/borrow/page.tsx b/src/app/wallets/[wallet]/accounts/[account]/borrow/page.tsx index add834c1..fe8775e7 100644 --- a/src/app/wallets/[wallet]/accounts/[account]/borrow/page.tsx +++ b/src/app/wallets/[wallet]/accounts/[account]/borrow/page.tsx @@ -1,45 +1,5 @@ -import { BorrowTable } from 'components/Borrow/BorrowTable' -import { Card } from 'components/Card' -import { getAccountDebts, getBorrowData } from 'utils/api' -import { getMarketAssets } from 'utils/assets' +import BorrowPage from 'components/pages/borrow' -export default async function page({ params }: { params: PageParams }) { - const debtData = await getAccountDebts(params.account) - const borrowData = await getBorrowData() - - const marketAssets = getMarketAssets() - - const { available, active } = marketAssets.reduce( - (prev: { available: BorrowAsset[]; active: BorrowAssetActive[] }, curr) => { - const borrow = borrowData.find((borrow) => borrow.denom === curr.denom) - if (borrow) { - const debt = debtData.find((debt) => debt.denom === curr.denom) - if (debt) { - prev.active.push({ - ...borrow, - debt: debt.amount, - }) - } else { - prev.available.push(borrow) - } - } - return prev - }, - { available: [], active: [] }, - ) - - return ( -
- {active.length > 0 && ( - - - - )} - {available.length > 0 && ( - - - - )} -
- ) +export default async function page({ params }: PageProps) { + return } diff --git a/src/app/wallets/[wallet]/accounts/[account]/council/loading.tsx b/src/app/wallets/[wallet]/accounts/[account]/council/loading.tsx deleted file mode 100644 index 94ffa4c7..00000000 --- a/src/app/wallets/[wallet]/accounts/[account]/council/loading.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function loading() { - return '...isLoading' -} diff --git a/src/app/wallets/[wallet]/accounts/[account]/council/page.tsx b/src/app/wallets/[wallet]/accounts/[account]/council/page.tsx index 6cb165eb..a24798ba 100644 --- a/src/app/wallets/[wallet]/accounts/[account]/council/page.tsx +++ b/src/app/wallets/[wallet]/accounts/[account]/council/page.tsx @@ -1,11 +1,5 @@ -import { Card } from 'components/Card' +import CouncilPage from 'components/pages/council' -export default function page() { - return ( -
- - <> - -
- ) +export default async function page({ params }: PageProps) { + return } diff --git a/src/app/wallets/[wallet]/accounts/[account]/earn/loading.tsx b/src/app/wallets/[wallet]/accounts/[account]/earn/loading.tsx deleted file mode 100644 index 94ffa4c7..00000000 --- a/src/app/wallets/[wallet]/accounts/[account]/earn/loading.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function loading() { - return '...isLoading' -} diff --git a/src/app/wallets/[wallet]/accounts/[account]/earn/page.tsx b/src/app/wallets/[wallet]/accounts/[account]/earn/page.tsx index cfe7607a..35771cc7 100644 --- a/src/app/wallets/[wallet]/accounts/[account]/earn/page.tsx +++ b/src/app/wallets/[wallet]/accounts/[account]/earn/page.tsx @@ -1,12 +1,5 @@ -import { Card } from 'components/Card' -import { Text } from 'components/Text' +import EarnPage from 'components/pages/earn' -export default function page() { - return ( -
- - <> - -
- ) +export default async function page({ params }: PageProps) { + return } diff --git a/src/app/wallets/[wallet]/accounts/[account]/page.tsx b/src/app/wallets/[wallet]/accounts/[account]/page.tsx index 992d70d9..9efcf71d 100644 --- a/src/app/wallets/[wallet]/accounts/[account]/page.tsx +++ b/src/app/wallets/[wallet]/accounts/[account]/page.tsx @@ -1,3 +1,5 @@ -export default function page() { - return 'Trade page' +import TradePage from 'components/pages/trade' + +export default async function page({ params }: PageProps) { + return } diff --git a/src/app/wallets/[wallet]/accounts/[account]/portfolio/error.tsx b/src/app/wallets/[wallet]/accounts/[account]/portfolio/error.tsx deleted file mode 100644 index 7e85b0d2..00000000 --- a/src/app/wallets/[wallet]/accounts/[account]/portfolio/error.tsx +++ /dev/null @@ -1,5 +0,0 @@ -'use client' - -export default function page({ params }: { params: PageParams }) { - return 'error!' -} diff --git a/src/app/wallets/[wallet]/accounts/[account]/portfolio/page.tsx b/src/app/wallets/[wallet]/accounts/[account]/portfolio/page.tsx index b388a253..d8fc448d 100644 --- a/src/app/wallets/[wallet]/accounts/[account]/portfolio/page.tsx +++ b/src/app/wallets/[wallet]/accounts/[account]/portfolio/page.tsx @@ -1,15 +1,5 @@ -import { getCreditAccounts } from 'utils/api' +import PortfolioPage from 'components/pages/portfolio' -export default async function page({ params }: { params: PageParams }) { - const creditAccounts = await getCreditAccounts(params.wallet) - - return ( -
-
    - {creditAccounts.map((account: string, index: number) => ( -
  • {account}
    • - ))} -
-
- ) +export default async function page({ params }: PageProps) { + return } diff --git a/src/app/wallets/[wallet]/accounts/[account]/trade/loading.tsx b/src/app/wallets/[wallet]/accounts/[account]/trade/loading.tsx deleted file mode 100644 index 94ffa4c7..00000000 --- a/src/app/wallets/[wallet]/accounts/[account]/trade/loading.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function loading() { - return '...isLoading' -} diff --git a/src/app/wallets/[wallet]/accounts/[account]/trade/page.tsx b/src/app/wallets/[wallet]/accounts/[account]/trade/page.tsx index e841dbef..9efcf71d 100644 --- a/src/app/wallets/[wallet]/accounts/[account]/trade/page.tsx +++ b/src/app/wallets/[wallet]/accounts/[account]/trade/page.tsx @@ -1,21 +1,5 @@ -import { Card } from 'components/Card' +import TradePage from 'components/pages/trade' -export default function page() { - return ( -
-
- - <> - -
- - <> - -
-
- - <> - -
- ) +export default async function page({ params }: PageProps) { + return } diff --git a/src/app/wallets/[wallet]/borrow/council/page.tsx b/src/app/wallets/[wallet]/borrow/council/page.tsx deleted file mode 100644 index 200bf3c3..00000000 --- a/src/app/wallets/[wallet]/borrow/council/page.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function page() { - return `You are a viewer or a user` -} diff --git a/src/app/wallets/[wallet]/borrow/earn/page.tsx b/src/app/wallets/[wallet]/borrow/earn/page.tsx deleted file mode 100644 index 200bf3c3..00000000 --- a/src/app/wallets/[wallet]/borrow/earn/page.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function page() { - return `You are a viewer or a user` -} diff --git a/src/app/wallets/[wallet]/borrow/page.tsx b/src/app/wallets/[wallet]/borrow/page.tsx index 200bf3c3..fe8775e7 100644 --- a/src/app/wallets/[wallet]/borrow/page.tsx +++ b/src/app/wallets/[wallet]/borrow/page.tsx @@ -1,3 +1,5 @@ -export default function page() { - return `You are a viewer or a user` +import BorrowPage from 'components/pages/borrow' + +export default async function page({ params }: PageProps) { + return } diff --git a/src/app/wallets/[wallet]/borrow/portfolio/page.tsx b/src/app/wallets/[wallet]/borrow/portfolio/page.tsx deleted file mode 100644 index 200bf3c3..00000000 --- a/src/app/wallets/[wallet]/borrow/portfolio/page.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function page() { - return `You are a viewer or a user` -} diff --git a/src/app/wallets/[wallet]/borrow/trade/page.tsx b/src/app/wallets/[wallet]/borrow/trade/page.tsx deleted file mode 100644 index 200bf3c3..00000000 --- a/src/app/wallets/[wallet]/borrow/trade/page.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function page() { - return `You are a viewer or a user` -} diff --git a/src/app/wallets/[wallet]/council/page.tsx b/src/app/wallets/[wallet]/council/page.tsx index 200bf3c3..a24798ba 100644 --- a/src/app/wallets/[wallet]/council/page.tsx +++ b/src/app/wallets/[wallet]/council/page.tsx @@ -1,3 +1,5 @@ -export default function page() { - return `You are a viewer or a user` +import CouncilPage from 'components/pages/council' + +export default async function page({ params }: PageProps) { + return } diff --git a/src/app/wallets/[wallet]/earn/page.tsx b/src/app/wallets/[wallet]/earn/page.tsx index 200bf3c3..35771cc7 100644 --- a/src/app/wallets/[wallet]/earn/page.tsx +++ b/src/app/wallets/[wallet]/earn/page.tsx @@ -1,3 +1,5 @@ -export default function page() { - return `You are a viewer or a user` +import EarnPage from 'components/pages/earn' + +export default async function page({ params }: PageProps) { + return } diff --git a/src/app/wallets/[wallet]/layout.tsx b/src/app/wallets/[wallet]/layout.tsx index 04bb3c60..e86ddb16 100644 --- a/src/app/wallets/[wallet]/layout.tsx +++ b/src/app/wallets/[wallet]/layout.tsx @@ -1,21 +1,3 @@ -import { AccountNavigation } from 'components/Account/AccountNavigation' -import { getCreditAccounts } from 'utils/api' - -export default async function RootLayout({ - children, - params, -}: { - children: React.ReactNode - params: PageParams -}) { - const creditAccounts = await getCreditAccounts(params.wallet) - - return ( - <> -
- -
-
{children}
- - ) +export default function RootLayout({ children }: { children: React.ReactNode }) { + return children } diff --git a/src/app/wallets/[wallet]/portfolio/page.tsx b/src/app/wallets/[wallet]/portfolio/page.tsx index 200bf3c3..d8fc448d 100644 --- a/src/app/wallets/[wallet]/portfolio/page.tsx +++ b/src/app/wallets/[wallet]/portfolio/page.tsx @@ -1,3 +1,5 @@ -export default function page() { - return `You are a viewer or a user` +import PortfolioPage from 'components/pages/portfolio' + +export default async function page({ params }: PageProps) { + return } diff --git a/src/app/wallets/[wallet]/trade/page.tsx b/src/app/wallets/[wallet]/trade/page.tsx index 200bf3c3..9efcf71d 100644 --- a/src/app/wallets/[wallet]/trade/page.tsx +++ b/src/app/wallets/[wallet]/trade/page.tsx @@ -1,3 +1,5 @@ -export default function page() { - return `You are a viewer or a user` +import TradePage from 'components/pages/trade' + +export default async function page({ params }: PageProps) { + return } diff --git a/src/components/Account/AccountDetails.tsx b/src/components/Account/AccountDetails.tsx index d77a9531..fa88bb4a 100644 --- a/src/components/Account/AccountDetails.tsx +++ b/src/components/Account/AccountDetails.tsx @@ -1,121 +1,40 @@ 'use client' +import { Gauge } from 'components/Gauge' +import { Heart } from 'components/Icons' +import { Text } from 'components/Text' +import useParams from 'hooks/useParams' -import classNames from 'classnames' -import { useEffect, useState } from 'react' +export default function AccountDetails() { + const params = useParams() + const hasAccount = params.account && !isNaN(Number(params.account)) -import { AccountManageOverlay } from 'components/Account/AccountManageOverlay' -import { RiskChart } from 'components/Account/RiskChart' -import { Button } from 'components/Button' -import { ArrowRightLine, ChevronDown, ChevronLeft } from 'components/Icons' -import { LabelValuePair } from 'components/LabelValuePair' -import { PositionsList } from 'components/PositionsList' -import { useAccountStats } from 'hooks/data/useAccountStats' -import { convertFromGwei } from 'utils/formatters' -import { createRiskData } from 'utils/risk' -import useStore from 'store' -import { getBaseAsset, getMarketAssets } from 'utils/assets' - -export const AccountDetails = () => { - const enableAnimations = useStore((s) => s.enableAnimations) - const selectedAccount = useStore((s) => s.selectedAccount) - const isOpen = useStore((s) => s.isOpen) - const marketAssets = getMarketAssets() - const baseAsset = getBaseAsset() - - const accountStats = useAccountStats() - - const [showManageMenu, setShowManageMenu] = useState(false) - const [riskData, setRiskData] = useState() - - useEffect(() => { - setRiskData(createRiskData(accountStats?.risk ?? 0)) - }, [accountStats?.risk, selectedAccount]) - - return ( -
- -
- -
{}}> - -
- + return hasAccount ? ( +
+
+ } /> + + Health + + + 89% +
-
- - +
+ + Leverage + + + 4.5x + +
+
+ + Balance + {' '} + + $300M +
- {riskData && }
- ) + ) : null } diff --git a/src/components/Account/AccountManageOverlay.tsx b/src/components/Account/AccountManageOverlay.tsx deleted file mode 100644 index 6f60786b..00000000 --- a/src/components/Account/AccountManageOverlay.tsx +++ /dev/null @@ -1,94 +0,0 @@ -'use client' - -import { useRouter } from 'next/navigation' - -import { Button } from 'components/Button' -import { Add, ArrowDown, ArrowsLeftRight, ArrowUp, Rubbish } from 'components/Icons' -import { Overlay } from 'components/Overlay/Overlay' -import { OverlayAction } from 'components/Overlay/OverlayAction' -import { Text } from 'components/Text' -import useParams from 'hooks/useParams' -import useStore from 'store' -import { hardcodedFee } from 'utils/contants' - -interface Props { - className?: string - setShow: (show: boolean) => void - show: boolean -} - -export const AccountManageOverlay = ({ className, setShow, show }: Props) => { - const router = useRouter() - const params = useParams() - const createCreditAccount = useStore((s) => s.createCreditAccount) - const deleteCreditAccount = useStore((s) => s.deleteCreditAccount) - - async function createAccount() { - const newAccountId = await createCreditAccount({ fee: hardcodedFee }) - router.push(`/wallets/${params.wallet}/accounts/${newAccountId}`) - } - - async function deleteAccountHandler() { - const isSuccess = await deleteCreditAccount({ fee: hardcodedFee, accountId: params.account }) - if (isSuccess) { - router.push(`/wallets/${params.wallet}/accounts`) - } - } - - return ( - -
- - Manage - -
- - -
-
- } - /> - } - /> - alert('TODO')} - icon={} - /> -
-
- - ) -} diff --git a/src/components/Account/AccountNavigation.tsx b/src/components/Account/AccountNavigation.tsx index bb025c3c..bba3aa52 100644 --- a/src/components/Account/AccountNavigation.tsx +++ b/src/components/Account/AccountNavigation.tsx @@ -1,36 +1,38 @@ 'use client' -import classNames from 'classnames' import { useRouter } from 'next/navigation' import { useState } from 'react' -import { AccountManageOverlay } from 'components/Account/AccountManageOverlay' import { Button } from 'components/Button' -import { ChevronDown } from 'components/Icons' +import { + Account, + Add, + ArrowDownLine, + ArrowsLeftRight, + ArrowUpLine, + Rubbish, +} from 'components/Icons' +import Loading from 'components/Loading' import { Overlay } from 'components/Overlay/Overlay' +import { Text } from 'components/Text' import useParams from 'hooks/useParams' import useStore from 'store' import { hardcodedFee } from 'utils/contants' -const MAX_VISIBLE_CREDIT_ACCOUNTS = 5 - -interface Props { - creditAccounts: string[] -} - -export const AccountNavigation = (props: Props) => { +export const AccountNavigation = () => { const router = useRouter() const params = useParams() - const address = useStore((s) => s.client?.recentWallet.account?.address) || '' const selectedAccount = params.account + const createCreditAccount = useStore((s) => s.createCreditAccount) + const deleteCreditAccount = useStore((s) => s.deleteCreditAccount) + const creditAccounts = useStore((s) => s.creditAccounts) + const address = useStore((s) => s.address) - const hasCreditAccounts = !!props.creditAccounts?.length - const firstCreditAccounts = props.creditAccounts?.slice(0, MAX_VISIBLE_CREDIT_ACCOUNTS) ?? [] - const restCreditAccounts = props.creditAccounts?.slice(MAX_VISIBLE_CREDIT_ACCOUNTS) ?? [] + const hasCreditAccounts = !!creditAccounts?.length + const accountSelected = !!selectedAccount && !isNaN(Number(selectedAccount)) - const [showManageMenu, setShowManageMenu] = useState(false) - const [showMoreMenu, setShowMoreMenu] = useState(false) + const [showMenu, setShowMenu] = useState(false) async function createAccountHandler() { const accountId = await createCreditAccount({ fee: hardcodedFee }) @@ -38,93 +40,128 @@ export const AccountNavigation = (props: Props) => { router.push(`/wallets/${params.wallet}/accounts/${accountId}`) } - return ( -
- <> - {hasCreditAccounts ? ( - <> - {firstCreditAccounts.map((account) => ( - - ))} + async function deleteAccountHandler() { + if (!accountSelected) return + const isSuccess = await deleteCreditAccount({ fee: hardcodedFee, accountId: selectedAccount }) + if (isSuccess) { + router.push(`/wallets/${params.wallet}/accounts`) + } + } + + return !address ? null : ( + <> + {creditAccounts === null ? ( + + ) : ( + <> + {' '} + {hasCreditAccounts ? (
- {restCreditAccounts.length > 0 && ( - <> - - -
- {restCreditAccounts.map((account) => ( + + + {accountSelected && ( +
+ + Manage Account {selectedAccount} + +
+
+
+
+
+ )} + {creditAccounts.length > 1 && ( +
+ + Select Account + + {creditAccounts.map((account) => + selectedAccount === account ? null : ( - ))} -
- - - )} -
-
-
)} - onClick={() => setShowManageMenu(!showManageMenu)} - variant='text' - > - Manage - - - - - - +
- - ) : ( - <>{address ? : ''} - )} - -
+ ) : ( + + )} + + )} + ) } diff --git a/src/components/Account/AccountStatus.tsx b/src/components/Account/AccountStatus.tsx deleted file mode 100644 index 11bd17b9..00000000 --- a/src/components/Account/AccountStatus.tsx +++ /dev/null @@ -1,83 +0,0 @@ -'use client' - -import BigNumber from 'bignumber.js' - -import { BorrowCapacity } from 'components/BorrowCapacity' -import { Button } from 'components/Button' -import { FormattedNumber } from 'components/FormattedNumber' -import { Gauge } from 'components/Gauge' -import { Text } from 'components/Text' -import { useAccountStats } from 'hooks/data/useAccountStats' -import { useCreditAccounts } from 'hooks/queries/useCreditAccounts' -import { getBaseAsset } from 'utils/assets' -import { formatLeverage, formatValue } from 'utils/formatters' - -export const AccountStatus = () => { - const baseAsset = getBaseAsset() - const accountStats = useAccountStats() - const { data: creditAccountsList } = useCreditAccounts() - - const createCreditAccount = () => { - console.log('create credit account') - } - - const hasCreditAccounts = creditAccountsList && creditAccountsList.length > 0 - - if (!hasCreditAccounts) { - return ( - - ) - } - - return ( -
- {accountStats && ( - <> - - - - - - Current Leverage: {formatLeverage(accountStats.currentLeverage)} -
- Max Leverage: {formatLeverage(accountStats.maxLeverage)} - - } - /> - - - Current Risk:{' '} - {formatValue(accountStats.risk * 100, { minDecimals: 0, suffix: '%' })} - - } - /> - - - )} -
- ) -} diff --git a/src/components/Account/FundAccountModal.tsx b/src/components/Account/FundAccountModal.tsx index 190d5698..0c563fc3 100644 --- a/src/components/Account/FundAccountModal.tsx +++ b/src/components/Account/FundAccountModal.tsx @@ -66,7 +66,7 @@ export const FundAccountModal = () => { found = true } }) - }, [marketAssets, balancesData]) + }, [balancesData, marketAssets, selectedToken]) // --------------- // VARIABLES @@ -130,7 +130,7 @@ export const FundAccountModal = () => { your osmosis wallet. <> -
+
Asset: diff --git a/src/components/Account/WithdrawModal.tsx b/src/components/Account/WithdrawModal.tsx index e1b5724e..cd9cb5c1 100644 --- a/src/components/Account/WithdrawModal.tsx +++ b/src/components/Account/WithdrawModal.tsx @@ -2,20 +2,16 @@ import { Switch } from '@headlessui/react' import BigNumber from 'bignumber.js' import classNames from 'classnames' import React, { useEffect, useMemo, useState } from 'react' -import { toast } from 'react-toastify' import { BorrowCapacity } from 'components/BorrowCapacity' -import { convertFromGwei, formatLeverage, formatValue } from 'utils/formatters' -import { getTokenDecimals, getTokenSymbol } from 'utils/tokens' -import { CircularProgress } from 'components/CircularProgress' import { Button } from 'components/Button' -import { Text } from 'components/Text' -import { Slider } from 'components/Slider' +import { CircularProgress } from 'components/CircularProgress' import { FormattedNumber } from 'components/FormattedNumber' import { Gauge } from 'components/Gauge' import { LabelValuePair } from 'components/LabelValuePair' import { Modal } from 'components/Modal' -import { PositionsList } from 'components/PositionsList' +import { Slider } from 'components/Slider' +import { Text } from 'components/Text' import { useAccountStats } from 'hooks/data/useAccountStats' import { useCalculateMaxWithdrawAmount } from 'hooks/data/useCalculateMaxWithdrawAmount' import { useWithdrawFunds } from 'hooks/mutations/useWithdrawFunds' @@ -23,6 +19,8 @@ import { useCreditAccountPositions } from 'hooks/queries/useCreditAccountPositio import { useTokenPrices } from 'hooks/queries/useTokenPrices' import useStore from 'store' import { getBaseAsset, getMarketAssets } from 'utils/assets' +import { convertFromGwei, formatLeverage, formatValue } from 'utils/formatters' +import { getTokenDecimals, getTokenSymbol } from 'utils/tokens' export const WithdrawModal = () => { // --------------- @@ -169,7 +167,7 @@ export const WithdrawModal = () => {
-
+
Asset: diff --git a/src/components/AmountAndValue.tsx b/src/components/AmountAndValue.tsx index aad87fe3..e27fc7aa 100644 --- a/src/components/AmountAndValue.tsx +++ b/src/components/AmountAndValue.tsx @@ -1,5 +1,5 @@ -import { FormattedNumber } from './FormattedNumber' -import TitleAndSubCell from './TitleAndSubCell' +import { FormattedNumber } from 'components/FormattedNumber' +import TitleAndSubCell from 'components/TitleAndSubCell' interface Props { asset: Asset diff --git a/src/components/Background.tsx b/src/components/Background.tsx index edb73ef6..f01e5e7a 100644 --- a/src/components/Background.tsx +++ b/src/components/Background.tsx @@ -1,5 +1,44 @@ -'use client' +import classNames from 'classnames' export default function Background() { - return
+ return ( +
+
+
+
+
+ ) } diff --git a/src/components/Borrow/BorrowTable.tsx b/src/components/Borrow/BorrowTable.tsx index 46f4e4c7..0b31affe 100644 --- a/src/components/Borrow/BorrowTable.tsx +++ b/src/components/Borrow/BorrowTable.tsx @@ -8,20 +8,19 @@ import { SortingState, useReactTable, } from '@tanstack/react-table' +import classNames from 'classnames' import Image from 'next/image' import React from 'react' -import classNames from 'classnames' +import AmountAndValue from 'components/AmountAndValue' import { AssetRow } from 'components/Borrow/AssetRow' import { ChevronDown, ChevronUp } from 'components/Icons' -import { getMarketAssets } from 'utils/assets' import { Text } from 'components/Text' import TitleAndSubCell from 'components/TitleAndSubCell' -import { FormattedNumber } from 'components/FormattedNumber' -import AmountAndValue from 'components/AmountAndValue' +import { getMarketAssets } from 'utils/assets' import { formatPercent } from 'utils/formatters' - -import AssetExpanded from './AssetExpanded' +import AssetExpanded from 'components/Borrow/AssetExpanded' +import Loading from 'components/Loading' type Props = { data: BorrowAsset[] | BorrowAssetActive[] @@ -52,11 +51,17 @@ export const BorrowTable = (props: Props) => { { accessorKey: 'borrowRate', header: 'Borrow Rate', - cell: ({ row }) => ( - - {formatPercent(row.original.borrowRate)} - - ), + cell: ({ row }) => { + if (row.original.borrowRate === null) { + return + } + + return ( + + {formatPercent(row.original.borrowRate)} + + ) + }, }, ...((props.data[0] as BorrowAssetActive)?.debt ? [ @@ -82,6 +87,10 @@ export const BorrowTable = (props: Props) => { if (!asset) return null + if (row.original.liquidity === null) { + return + } + return }, }, @@ -97,7 +106,7 @@ export const BorrowTable = (props: Props) => { ), }, ], - [], + [marketAssets, props.data], ) const table = useReactTable({ diff --git a/src/components/Borrow/Borrowings.tsx b/src/components/Borrow/Borrowings.tsx new file mode 100644 index 00000000..2e41ff57 --- /dev/null +++ b/src/components/Borrow/Borrowings.tsx @@ -0,0 +1,69 @@ +import { Suspense } from 'react' + +import { Card } from 'components/Card' +import { getAccountDebts, getBorrowData } from 'utils/api' +import { getMarketAssets } from 'utils/assets' + +import { BorrowTable } from './BorrowTable' + +async function Content(props: Props) { + const debtData = await getAccountDebts(props.params?.account) + const borrowData = await getBorrowData() + + const marketAssets = getMarketAssets() + + function getBorrowAssets() { + return marketAssets.reduce( + (prev: { available: BorrowAsset[]; active: BorrowAssetActive[] }, curr) => { + const borrow = borrowData.find((borrow) => borrow.denom === curr.denom) + if (borrow) { + const debt = debtData.find((debt) => debt.denom === curr.denom) + if (debt) { + prev.active.push({ + ...borrow, + debt: debt.amount, + }) + } else { + prev.available.push(borrow) + } + } + return prev + }, + { available: [], active: [] }, + ) + } + + const { available, active } = getBorrowAssets() + + return +} + +function Fallback() { + const marketAssets = getMarketAssets() + + const available: BorrowAsset[] = marketAssets.reduce((prev: BorrowAsset[], curr) => { + prev.push({ ...curr, borrowRate: null, liquidity: null }) + + return prev + }, []) + + return +} + +export default function BorrowPage(props: Props) { + return ( + + }> + {/* @ts-expect-error Server Component */} + + + + ) +} + +interface Props extends PageProps { + type: 'active' | 'available' +} diff --git a/src/components/BorrowModal.tsx b/src/components/BorrowModal.tsx index b491daac..9afd4e59 100644 --- a/src/components/BorrowModal.tsx +++ b/src/components/BorrowModal.tsx @@ -1,7 +1,6 @@ import useStore from 'store' - -import { Modal } from './Modal' -import TitleAndSubCell from './TitleAndSubCell' +import { Modal } from 'components/Modal' +import TitleAndSubCell from 'components/TitleAndSubCell' export default function BorrowModal() { const open = useStore((s) => s.borrowModal) diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 5eac448d..72b7593d 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -1,7 +1,8 @@ import classNames from 'classnames' -import React, { LegacyRef, ReactNode } from 'react' +import React, { LegacyRef, ReactElement, ReactNode } from 'react' import { CircularProgress } from 'components/CircularProgress' +import { ChevronDown } from 'components/Icons' import useStore from 'store' interface Props { @@ -13,30 +14,39 @@ interface Props { showProgressIndicator?: boolean size?: 'small' | 'medium' | 'large' text?: string | ReactNode - variant?: 'solid' | 'transparent' | 'round' | 'text' + variant?: 'solid' | 'transparent' | 'round' onClick?: (e: React.MouseEvent) => void + icon?: ReactElement + iconClassName?: string + hasSubmenu?: boolean } export const buttonColorClasses = { primary: - 'border-none text-white bg-primary hover:bg-primary-highlight active:bg-primary-highlight-10 focus:bg-primary-highlight', + 'border-none gradient-primary-to-secondary hover:bg-white/20 active:bg-white/40 focus:bg-white/20', secondary: - 'border-none text-white bg-secondary hover:bg-secondary-highlight active:bg-secondary-highlight-10 focus:bg-secondary-highlight', + 'border border-white/30 bg-transparent hover:bg-white/20 active:bg-white/40 focus:bg-white/20', tertiary: - 'border text-white bg-secondary-dark/60 border-white/60 hover:bg-secondary-dark hover:border-white active:bg-secondary-dark-10 active:border-white focus:bg-secondary-dark focus:border-white', + 'border border-transparent bg-white/10 hover:bg-white/20 active:bg-white/40 focus:bg-white/20', quaternary: - 'border bg-transparent text-white/60 border-transparent hover:text-white hover:border-white active:text-white active:border-white', + 'bg-transparent text-white/60 border-transparent hover:text-white hover:border-white active:text-white active:border-white', } +const buttonBorderClasses = + 'before:content-[" "] before:absolute before:inset-0 before:rounded-sm before:p-[1px] before:border-glas before:z-[-1]' + +const buttonGradientClasses = [ + 'before:content-[" "] before:absolute before:inset-0 before:rounded-sm before:z-[-1] before:opacity-0', + 'before:gradient-secondary-to-primary before:transition-opacity before:duration-500 before:ease-in', + 'hover:before:opacity-100', +] + const buttonTransparentColorClasses = { - primary: - 'border-none text-primary hover:text-primary-highlight active:text-primary-highlight focus:text-primary-highlight', - secondary: - 'border-none text-secondary hover:text-secondary-highlight active:text-secondary-highlight focus:text-secondary-highlight', - tertiary: - 'text-secondary-dark hover:text-secondary-dark-10 active:text-secondary-dark-10 focus:text-secondary-dark-10', + primary: 'border-none hover:text-primary active:text-primary focus:text-primary', + secondary: 'border-none hover:text-secondary active:text-secondary focus:text-secondary', + tertiary: 'border-none hover:text-white/80 active:text-white/80 focus:text-white/80', quaternary: - 'border border-transparent text-white/60 hover:text-white hover:border-white active:text-white active:border-white', + 'border-none text-white/60 hover:text-white hover:border-white active:text-white active:border-white', } const buttonRoundSizeClasses = { @@ -46,16 +56,41 @@ const buttonRoundSizeClasses = { } export const buttonSizeClasses = { - small: 'text-sm px-5 py-1.5 min-h-[32px]', - medium: 'text-base px-6 py-2.5 min-h-[40px]', - large: 'text-lg px-6 py-2.5 min-h-[56px]', + small: 'text-sm', + medium: 'text-base', + large: 'text-lg', +} + +export const buttonPaddingClasses = { + small: 'px-2.5 py-1.5 min-h-[32px]', + medium: 'px-3 py-2 min-h-[40px]', + large: 'px-3.5 py-2.5 min-h-[56px]', } export const buttonVariantClasses = { - solid: 'text-white', - transparent: 'bg-transparent p-0', + solid: 'rounded-sm text-white shadow-button justify-center group', + transparent: 'rounded-sm bg-transparent p-0 transition duration-200 ease-in', round: 'rounded-full p-0', - text: 'border-none bg-transparent', +} + +function glowElement() { + return ( + + + + ) } export const Button = React.forwardRef(function Button( @@ -70,17 +105,22 @@ export const Button = React.forwardRef(function Button( text, variant = 'solid', onClick, + icon, + iconClassName, + hasSubmenu, }: Props, ref, ) { const buttonClasses = [] const enableAnimations = useStore((s) => s.enableAnimations) + const isDisabled = disabled || showProgressIndicator switch (variant) { case 'round': buttonClasses.push( buttonSizeClasses[size], buttonRoundSizeClasses[size], + buttonPaddingClasses[size], buttonColorClasses[color], ) break @@ -90,7 +130,11 @@ export const Button = React.forwardRef(function Button( break case 'solid': - buttonClasses.push(buttonSizeClasses[size], buttonColorClasses[color]) + buttonClasses.push( + buttonSizeClasses[size], + buttonPaddingClasses[size], + buttonColorClasses[color], + ) break default: } @@ -98,10 +142,14 @@ export const Button = React.forwardRef(function Button( return (
{props.children ? props.children : props.content}
diff --git a/src/components/Modals.tsx b/src/components/Modals.tsx index b9e5878a..bbef68aa 100644 --- a/src/components/Modals.tsx +++ b/src/components/Modals.tsx @@ -2,8 +2,7 @@ import { ConfirmModal } from 'components/Account/ConfirmModal' import { FundAccountModal } from 'components/Account/FundAccountModal' - -import BorrowModal from './BorrowModal' +import BorrowModal from 'components/BorrowModal' export const Modals = () => ( <> diff --git a/src/components/Navigation/DesktopNavigation.tsx b/src/components/Navigation/DesktopNavigation.tsx index 2b733b34..f0843bdf 100644 --- a/src/components/Navigation/DesktopNavigation.tsx +++ b/src/components/Navigation/DesktopNavigation.tsx @@ -2,7 +2,9 @@ import Link from 'next/link' import { usePathname } from 'next/navigation' +import classNames from 'classnames' +import { AccountNavigation } from 'components/Account/AccountNavigation' import { Logo } from 'components/Icons' import { NavLink } from 'components/Navigation/NavLink' import Wallet from 'components/Wallet/Wallet' @@ -20,8 +22,14 @@ export default function DesktopNavigation() { const pathname = usePathname() || '' return ( -
-
+
-
+ ) } diff --git a/src/components/Navigation/NavLink.tsx b/src/components/Navigation/NavLink.tsx index 7c8e8aef..94eb8347 100644 --- a/src/components/Navigation/NavLink.tsx +++ b/src/components/Navigation/NavLink.tsx @@ -1,9 +1,7 @@ -'use client' - +import classNames from 'classnames' import Link from 'next/link' import { usePathname } from 'next/navigation' import { ReactNode } from 'react' -import classNames from 'classnames' interface Props { href: string @@ -18,7 +16,7 @@ export const NavLink = ({ href, children }: Props) => { diff --git a/src/components/Overlay/Overlay.tsx b/src/components/Overlay/Overlay.tsx index 7bffb7ca..b6d27b19 100644 --- a/src/components/Overlay/Overlay.tsx +++ b/src/components/Overlay/Overlay.tsx @@ -18,7 +18,7 @@ export const Overlay = ({ children, content, className, show, setShow }: Props) <>
diff --git a/src/components/Overlay/OverlayAction.tsx b/src/components/Overlay/OverlayAction.tsx deleted file mode 100644 index 2ef3a8bd..00000000 --- a/src/components/Overlay/OverlayAction.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import classNames from 'classnames' -import { ReactNode } from 'react' - -import { Button } from 'components/Button' - -interface Props { - className?: string - icon?: ReactNode - onClick: () => void - setShow: (show: boolean) => void - text: string | ReactNode -} - -export const OverlayAction = ({ className, icon, onClick, setShow, text }: Props) => { - return ( - - ) -} diff --git a/src/components/Portfolio/AccountOverview.tsx b/src/components/Portfolio/AccountOverview.tsx new file mode 100644 index 00000000..16ac7648 --- /dev/null +++ b/src/components/Portfolio/AccountOverview.tsx @@ -0,0 +1,70 @@ +import { Suspense } from 'react' +import classNames from 'classnames' + +import { Card } from 'components/Card' +import Loading from 'components/Loading' +import { Text } from 'components/Text' +import { getCreditAccounts } from 'utils/api' + +async function Content(props: PageProps) { + const wallet = props.params.wallet + const currentAccount = props.params.account + const hasAccount = !isNaN(Number(currentAccount)) + const creditAccounts = await getCreditAccounts(wallet) + + return wallet ? ( +
+ {creditAccounts.map((account: string, index: number) => ( + + {hasAccount && currentAccount === account ? ( + Current Account + ) : ( + Account details + )} + + ))} +
+ ) : ( + + + You need to be connected to view the porfolio page + + + ) +} + +function Fallback() { + const cardCount = 3 + return ( +
+ {Array.from({ length: cardCount }, (_, i) => ( + + Account + + } + contentClassName='px-4 py-6' + > + + + ))} +
+ ) +} + +export default function AccountOverview(props: PageProps) { + return ( + }> + {/* @ts-expect-error Server Component */} + + + ) +} diff --git a/src/components/RepayModal.tsx b/src/components/RepayModal.tsx index 93a91a45..0f200526 100644 --- a/src/components/RepayModal.tsx +++ b/src/components/RepayModal.tsx @@ -3,19 +3,18 @@ import BigNumber from 'bignumber.js' import Image from 'next/image' import React, { useMemo, useState } from 'react' import { NumericFormat } from 'react-number-format' -import { toast } from 'react-toastify' import { Button } from 'components/Button' +import { Card } from 'components/Card' import { CircularProgress } from 'components/CircularProgress' -import { ContainerSecondary } from 'components/ContainerSecondary' import { Slider } from 'components/Slider' import { useRepayFunds } from 'hooks/mutations/useRepayFunds' import { useAllBalances } from 'hooks/queries/useAllBalances' import { useCreditAccountPositions } from 'hooks/queries/useCreditAccountPositions' import { useTokenPrices } from 'hooks/queries/useTokenPrices' -import { getTokenDecimals, getTokenSymbol } from 'utils/tokens' -import { getMarketAssets } from 'utils/assets' import useStore from 'store' +import { getMarketAssets } from 'utils/assets' +import { getTokenDecimals, getTokenSymbol } from 'utils/tokens' // 0.001% buffer / slippage to avoid repay action from not fully repaying the debt amount const REPAY_BUFFER = 1.00001 @@ -137,7 +136,7 @@ export const RepayModal = ({ show, onClose, tokenDenom }: Props) => { Repay {tokenSymbol}
- +

In wallet: {walletAmount.toLocaleString()} {tokenSymbol}

@@ -176,7 +175,7 @@ export const RepayModal = ({ show, onClose, tokenDenom }: Props) => { }} onMaxClick={() => setAmount(maxValue)} /> - +
+
) } diff --git a/src/components/Wallet/ConnectedButton.tsx b/src/components/Wallet/ConnectedButton.tsx index b4ce42a4..11db3986 100644 --- a/src/components/Wallet/ConnectedButton.tsx +++ b/src/components/Wallet/ConnectedButton.tsx @@ -1,3 +1,5 @@ +'use client' + import { Coin } from '@cosmjs/stargate' import { ChainInfoID, @@ -18,9 +20,9 @@ import { Check, Copy, ExternalLink, Osmo } from 'components/Icons' import { Overlay } from 'components/Overlay/Overlay' import { Text } from 'components/Text' import useStore from 'store' +import { getWalletBalances } from 'utils/api' import { getBaseAsset } from 'utils/assets' import { formatValue, truncate } from 'utils/formatters' -import { getWalletBalances } from 'utils/api' export default function ConnectedButton() { // --------------- @@ -30,7 +32,6 @@ export default function ConnectedButton() { const { disconnect: terminate } = useWalletManager() const address = useStore((s) => s.client?.recentWallet.account?.address) const network = useStore((s) => s.client?.recentWallet.network) - const name = useStore((s) => s.name) const baseAsset = getBaseAsset() const { data, isLoading } = useSWR(address, getWalletBalances) @@ -73,7 +74,7 @@ export default function ConnectedButton() {
{network?.chainId !== ChainInfoID.Osmosis1 && ( @@ -81,24 +82,19 @@ export default function ConnectedButton() { )} - + -
+
-
+
{baseAsset.denom}
@@ -128,44 +124,44 @@ export default function ConnectedButton() {
- - {name ? `‘${name}’` : 'Your Address'} + + {'Your Address'} - + {address} - + {truncate(address, [14, 14])}
- - +
diff --git a/src/components/Wallet/Wallet.tsx b/src/components/Wallet/Wallet.tsx index fc428f64..adf38c97 100644 --- a/src/components/Wallet/Wallet.tsx +++ b/src/components/Wallet/Wallet.tsx @@ -6,42 +6,46 @@ import { useWalletManager, WalletConnectionStatus, } from '@marsprotocol/wallet-connector' -import { useEffect, useState } from 'react' import { useRouter } from 'next/navigation' +import { useEffect } from 'react' import ConnectButton from 'components/Wallet/ConnectButton' import ConnectedButton from 'components/Wallet/ConnectedButton' import useParams from 'hooks/useParams' import useStore from 'store' +import { getCreditAccounts } from 'utils/api' export default function Wallet() { const router = useRouter() const params = useParams() + const { status } = useWalletManager() - const [isConnected, setIsConnected] = useState(false) const { recentWallet, simulate, sign, broadcast } = useWallet() const client = useStore((s) => s.client) + const address = useStore((s) => s.address) useEffect(() => { - const connectedStatus = status === WalletConnectionStatus.Connected - if (connectedStatus === isConnected) return - setIsConnected(connectedStatus) - }, [status, isConnected]) + const isConnected = status === WalletConnectionStatus.Connected - useEffect(() => { - if (!isConnected && !params.wallet) { - router.push('/') - return + useStore.setState({ status }) + useStore.setState( + isConnected + ? { + address: recentWallet?.account.address, + } + : { address: undefined, creditAccounts: null, client: undefined }, + ) + + if (!isConnected || !recentWallet) return + + const fetchCreditAccounts = async () => { + if (!recentWallet?.account.address) return + const walletCreditAccounts = await getCreditAccounts(recentWallet?.account.address) + useStore.setState({ creditAccounts: walletCreditAccounts }) } - const address = client?.recentWallet.account.address - if (!address || address === params.wallet) return + fetchCreditAccounts() - router.push(`/wallets/${client.recentWallet.account.address}`) - }, [client, params, isConnected]) - - useEffect(() => { - if (!recentWallet) return if (!client) { const getCosmWasmClient = async () => { const cosmClient = await getClient(recentWallet.network.rpc) @@ -57,9 +61,11 @@ export default function Wallet() { } getCosmWasmClient() - - return } - }, [simulate, sign, recentWallet, broadcast]) - return isConnected ? : + + if (!address || address === params.wallet) return + router.push(`/wallets/${address}`) + }, [address, broadcast, client, params, recentWallet, router, simulate, sign, status]) + + return address ? : } diff --git a/src/components/Wallet/WalletConnectProvider.tsx b/src/components/Wallet/WalletConnectProvider.tsx index 5071c368..3433804a 100644 --- a/src/components/Wallet/WalletConnectProvider.tsx +++ b/src/components/Wallet/WalletConnectProvider.tsx @@ -3,25 +3,27 @@ import { WalletManagerProvider } from '@marsprotocol/wallet-connector' import { FC } from 'react' +import { Button } from 'components/Button' import { CircularProgress } from 'components/CircularProgress' -import { CHAIN_ID, ENV_MISSING_MESSAGE, URL_REST, URL_RPC, WALLETS } from 'constants/env' +import { Close } from 'components/Icons' +import { ENV, ENV_MISSING_MESSAGE } from 'constants/env' type Props = { children?: React.ReactNode } export const WalletConnectProvider: FC = ({ children }) => { - if (!CHAIN_ID || !URL_REST || !URL_RPC || !WALLETS) { + if (!ENV.CHAIN_ID || !ENV.URL_REST || !ENV.URL_RPC || !ENV.WALLETS) { console.error(ENV_MISSING_MESSAGE) return null } const chainInfoOverrides = { - rpc: URL_RPC, - rest: URL_REST, - chainID: CHAIN_ID, + rpc: ENV.URL_RPC, + rest: ENV.URL_REST, + chainID: ENV.CHAIN_ID, } - const enabledWallets: string[] = WALLETS + const enabledWallets: string[] = ENV.WALLETS return ( = ({ children }) => { defaultChainId={chainInfoOverrides.chainID} enabledWallets={enabledWallets} persistent + classNames={{ + modalContent: + 'relative z-50 w-[460px] max-w-full rounded-base border border-white/20 bg-white/5 p-6 pb-4 backdrop-blur-3xl flex flex-wrap', + modalOverlay: + 'fixed inset-0 bg-black/60 w-full h-full z-40 flex items-center justify-center cursor-pointer m-0 backdrop-blur-sm', + modalHeader: 'text-lg text-white mb-4 flex-grow', + modalCloseButton: 'inline-block', + walletList: 'w-full', + wallet: + 'flex bg-transparent p-2 w-full rounded-sm cursor-pointer transition duration-500 ease-in mb-2 hover:bg-primary', + walletImage: 'w-10 h-10', + walletName: 'w-full text-lg', + walletDescription: 'w-full text-xs text-white/60 break-all', + }} + closeIcon={