New architecture (#196)

* feat: move app to pages features

* feat: route changes

* Use React Router, Remove SSR

* Fix account menu

* Remove app folder

* remove old useParams

* Moved pages back to pages and refactor names

* add layout to route

* clean up

* create hooks for api fetching

* fix refetch of all data on tx complete

* formatting

* fix: fixed the wallet-connector race condition

* remove cosmjs/stargate (#202)

* remove cosmjs/stargate

* add Yusuf as code-orwner

* Singleton client (#203)

* remove cosmjs/stargate

* add Yusuf as code-orwner

* create signleton client and refactor vaults api

* update client name, add apollo apr env

* Setup validate-env and remove checking from apis

* uncomment vaults

* Resolve comments

* fix: html templating, add checks for hydration&window object, reduce bundle size (#204)

* fix: tests

* Fix routing and wallet client (#205)

* Add header to router (as layout)

* Refactor Wallet component

* Remove server fallback packages webpack

* add missing dependency for useeffect

---------

Co-authored-by: Bob van der Helm <34470358+bobthebuidlr@users.noreply.github.com>
Co-authored-by: Linkie Link <linkielink.dev@gmail.com>

.env.example

@@ -4,6 +4,7 @@ NEXT_PUBLIC_RPC=https://testnet-osmosis-node.marsprotocol.io/XF32UOOU55CX/osmosi
 NEXT_PUBLIC_GQL=https://testnet-osmosis-node.marsprotocol.io/XF32UOOU55CX/osmosis-hive-front/graphql
 NEXT_PUBLIC_REST=https://testnet-osmosis-node.marsprotocol.io/XF32UOOU55CX/osmosis-lcd-front/
 NEXT_PUBLIC_SWAP=https://testnet.osmosis.zone
+NEXT_PUBLIC_APOLLO_APR=https://api.apollo.farm/api/vault_infos/v2/osmo-test-5
 NEXT_PUBLIC_WALLETS=keplr,cosmostation
 NEXT_PUBLIC_ACCOUNT_NFT=osmo1ye2rntzz9qmxgv7eg09supww6k6xs0y0sekcr3x5clp087fymn4q3y33s4
 NEXT_PUBLIC_ORACLE=osmo1khe29uw3t85nmmp3mtr8dls7v2qwsfk3tndu5h4w5g2r5tzlz5qqarq2e2
@@ -21,6 +22,7 @@ NEXT_PUBLIC_API=http://localhost:3000/api
 # NEXT_PUBLIC_GQL=https://osmosis-node.marsprotocol.io/GGSFGSFGFG34/osmosis-hive-front/graphql
 # NEXT_PUBLIC_REST=https://osmosis-node.marsprotocol.io/GGSFGSFGFG34/osmosis-lcd-front/
 # NEXT_PUBLIC_SWAP=https://app.osmosis.zone
+# NEXT_PUBLIC_APOLLO_APR=https://api.apollo.farm/api/vault_infos/v2/osmosis-1
 # NEXT_PUBLIC_WALLETS=keplr,xfi-cosmos,leap-cosmos,cosmostation,mobile-keplr,mobile-cosmostation
 # NEXT_PUBLIC_ACCOUNT_NFT=osmo1450hrg6dv2l58c0rvdwx8ec2a0r6dd50hn4frk370tpvqjhy8khqw7sw09
 # NEXT_PUBLIC_ORACLE=osmo1mhznfr60vjdp2gejhyv2gax9nvyyzhd3z0qcwseyetkfustjauzqycsy2g

.github/CODEOWNERS

@@ -1 +1 @@
-* @bobthebuidlr @linkielink
+* @bobthebuidlr @linkielink @yusufseyrek

__tests__/components/Account/AccountDetails.test.tsx

@@ -1,10 +1,10 @@
 import { render, screen } from '@testing-library/react'
+import * as rrd from 'react-router-dom'
 
-import * as useParams from 'utils/route'
 import AccountDetails from 'components/Account/AccountDetails'
 
-jest.mock('utils/route')
+jest.mock('react-router-dom')
-const mockedUseParams = useParams.default as jest.Mock
+const mockedUseParams = rrd.useParams as jest.Mock
 
 describe('<AccountDetails />', () => {
   afterAll(() => {

next.config.js

@@ -1,46 +1,16 @@
 /** @type {import('next').NextConfig} */
 
 const nextConfig = {
-  output: 'standalone',
-  experimental: {
-    appDir: true,
-  },
   reactStrictMode: true,
-  async redirects() {
+  async rewrites() {
     return [
       {
-        source: '/',
+        source: '/:any*',
-        destination: '/trade',
+        destination: '/',
-        permanent: true,
-      },
-      {
-        source: '/wallets',
-        destination: '/trade',
-        permanent: true,
-      },
-      {
-        source: '/wallets/:wallet',
-        destination: '/wallets/:wallet/trade',
-        permanent: true,
-      },
-      {
-        source: '/wallets/:wallet/accounts',
-        destination: '/wallets/:wallet/accounts/trade',
-        permanent: true,
       },
     ]
   },
-  webpack(config, { isServer }) {
+  webpack(config) {
-    if (isServer) {
-      config.resolve.fallback = {
-        ...config.resolve.fallback,
-        'utf-8-validate': false,
-        bufferutil: false,
-        './build/Release/ecdh': false,
-        eccrypto: false,
-      }
-    }
-
     config.module.rules.push({
       test: /\.svg$/i,
       issuer: /\.[jt]sx?$/,

package-lock.json

@@ -19152,6 +19152,66 @@
           "optional": true
         }
       }
+    },
+    "node_modules/@next/swc-android-arm-eabi": {
+      "version": "13.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.2.4.tgz",
+      "integrity": "sha512-DWlalTSkLjDU11MY11jg17O1gGQzpRccM9Oes2yTqj2DpHndajrXHGxj9HGtJ+idq2k7ImUdJVWS2h2l/EDJOw==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-android-arm64": {
+      "version": "13.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-13.2.4.tgz",
+      "integrity": "sha512-sRavmUImUCf332Gy+PjIfLkMhiRX1Ez4SI+3vFDRs1N5eXp+uNzjFUK/oLMMOzk6KFSkbiK/3Wt8+dHQR/flNg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-freebsd-x64": {
+      "version": "13.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-freebsd-x64/-/swc-freebsd-x64-13.2.4.tgz",
+      "integrity": "sha512-kkbzKVZGPaXRBPisoAQkh3xh22r+TD+5HwoC5bOkALraJ0dsOQgSMAvzMXKsN3tMzJUPS0tjtRf1cTzrQ0I5vQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm-gnueabihf": {
+      "version": "13.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-13.2.4.tgz",
+      "integrity": "sha512-7qA1++UY0fjprqtjBZaOA6cas/7GekpjVsZn/0uHvquuITFCdKGFCsKNBx3S0Rpxmx6WYo0GcmhNRM9ru08BGg==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
     }
   },
   "dependencies": {
@@ -33215,6 +33275,30 @@
       "requires": {
         "use-sync-external-store": "1.2.0"
       }
+    },
+    "@next/swc-android-arm-eabi": {
+      "version": "13.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.2.4.tgz",
+      "integrity": "sha512-DWlalTSkLjDU11MY11jg17O1gGQzpRccM9Oes2yTqj2DpHndajrXHGxj9HGtJ+idq2k7ImUdJVWS2h2l/EDJOw==",
+      "optional": true
+    },
+    "@next/swc-android-arm64": {
+      "version": "13.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-13.2.4.tgz",
+      "integrity": "sha512-sRavmUImUCf332Gy+PjIfLkMhiRX1Ez4SI+3vFDRs1N5eXp+uNzjFUK/oLMMOzk6KFSkbiK/3Wt8+dHQR/flNg==",
+      "optional": true
+    },
+    "@next/swc-freebsd-x64": {
+      "version": "13.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-freebsd-x64/-/swc-freebsd-x64-13.2.4.tgz",
+      "integrity": "sha512-kkbzKVZGPaXRBPisoAQkh3xh22r+TD+5HwoC5bOkALraJ0dsOQgSMAvzMXKsN3tMzJUPS0tjtRf1cTzrQ0I5vQ==",
+      "optional": true
+    },
+    "@next/swc-linux-arm-gnueabihf": {
+      "version": "13.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-13.2.4.tgz",
+      "integrity": "sha512-7qA1++UY0fjprqtjBZaOA6cas/7GekpjVsZn/0uHvquuITFCdKGFCsKNBx3S0Rpxmx6WYo0GcmhNRM9ru08BGg==",
+      "optional": true
     }
   }
 }

package.json

@@ -3,18 +3,18 @@
   "version": "2.0.0",
   "private": true,
   "scripts": {
-    "build": "next build",
+    "build": "yarn validate-env && next build",
     "dev": "next dev",
     "test": "jest",
     "lint": "eslint ./src/ && yarn prettier-check",
     "format": "eslint ./src/ --fix && prettier --write ./src/",
     "prettier-check": "prettier --ignore-path .gitignore --check ./src/",
-    "start": "next start"
+    "start": "next start",
+    "validate-env": "node ./validate-env"
   },
   "dependencies": {
     "@cosmjs/cosmwasm-stargate": "^0.30.1",
-    "@cosmjs/stargate": "^0.30.1",
+    "@marsprotocol/wallet-connector": "^1.5.9",
-    "@marsprotocol/wallet-connector": "^1.5.8",
     "@sentry/nextjs": "^7.51.2",
     "@tanstack/react-table": "^8.9.1",
     "@tippyjs/react": "^4.2.6",
@@ -27,6 +27,7 @@
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.5",
+    "react-router-dom": "^6.11.1",
     "react-spring": "^9.7.1",
     "react-toastify": "^9.1.2",
     "react-use-clipboard": "^1.0.9",
@@ -37,15 +38,16 @@
   },
   "devDependencies": {
     "@svgr/webpack": "^8.0.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
     "@types/node": "^20.1.1",
     "@types/react": "18.2.6",
     "@types/react-dom": "18.2.4",
     "autoprefixer": "^10.4.14",
+    "babel-jest": "^29.5.0",
+    "dotenv": "^16.0.3",
     "eslint": "8.40.0",
     "eslint-config-next": "^13.4.1",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0",
-    "babel-jest": "^29.5.0",
     "eslint-plugin-import": "^2.27.5",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.5.0",

src/api/accounts/getAccount.ts

@@ -0,0 +1,18 @@
+import { getClient } from 'api/cosmwasm-client'
+import { ENV } from 'constants/env'
+
+export default async function getAccount(accountId: string): Promise<AccountResponse> {
+  const client = await getClient()
+
+  const account: AccountResponse = await client.queryContractSmart(ENV.ADDRESS_CREDIT_MANAGER, {
+    positions: {
+      account_id: accountId,
+    },
+  })
+
+  if (account) {
+    return account
+  }
+
+  return new Promise((_, reject) => reject('No account found'))
+}

src/api/accounts/getAccountDebts.ts

@@ -0,0 +1,11 @@
+import getAccount from 'api/accounts/getAccount'
+
+export default async function getAccountDebts(accountId: string): Promise<Coin[]> {
+  const account = await getAccount(accountId)
+
+  if (account) {
+    return account.debts
+  }
+
+  return new Promise((_, reject) => reject('Account not found'))
+}

src/api/accounts/getAccountDeposits.ts

@@ -0,0 +1,11 @@
+import getAccount from 'api/accounts/getAccount'
+
+export default async function getAccountDeposits(accountId: string) {
+  const account = await getAccount(accountId)
+
+  if (account) {
+    return account.deposits
+  }
+
+  return new Promise((_, reject) => reject('Account not found'))
+}

src/api/accounts/getAccountVaults.ts

@@ -0,0 +1,11 @@
+import getAccount from 'api/accounts/getAccount'
+
+export default async function getAccountDeposits(accountId: string) {
+  const account = await getAccount(accountId)
+
+  if (account) {
+    return account.vaults
+  }
+
+  return new Promise((_, reject) => reject('Account not found'))
+}

src/api/cosmwasm-client.ts

@@ -0,0 +1,19 @@
+import { CosmWasmClient } from '@cosmjs/cosmwasm-stargate'
+
+import { ENV } from 'constants/env'
+
+let _cosmWasmClient: CosmWasmClient
+
+const getClient = async () => {
+  try {
+    if (!_cosmWasmClient) {
+      _cosmWasmClient = await CosmWasmClient.connect(ENV.URL_RPC || '')
+    }
+
+    return _cosmWasmClient
+  } catch (error) {
+    throw error
+  }
+}
+
+export { getClient }

src/api/markets/getMarketBalances.ts

@@ -1,13 +1,8 @@
 import { gql, request as gqlRequest } from 'graphql-request'
-import { NextApiRequest, NextApiResponse } from 'next'
 
-import { ENV, ENV_MISSING_MESSAGE } from 'constants/env'
+import { ENV } from 'constants/env'
-
-export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-  if (!ENV.URL_GQL || !ENV.ADDRESS_RED_BANK) {
-    return res.status(404).json(ENV_MISSING_MESSAGE)
-  }
 
+export default async function getBalances() {
   const result = await gqlRequest<Result>(
     ENV.URL_GQL,
     gql`
@@ -24,7 +19,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     `,
   )
 
-  return res.status(200).json(result.bank.balance)
+  return result.bank.balance
 }
 
 interface Result {

src/api/markets/getMarketBorrowings.ts

@@ -0,0 +1,29 @@
+import { BN } from 'utils/helpers'
+import getPrices from 'api/prices/getPrices'
+import getMarkets from 'api/markets/getMarkets'
+import getMarketLiquidity from 'api/markets/getMarketLiquidity'
+
+export default async function getMarketBorrowings(): Promise<BorrowAsset[]> {
+  const liquidity = await getMarketLiquidity()
+  const borrowEnabledMarkets = (await getMarkets()).filter((market: Market) => market.borrowEnabled)
+  const prices = await getPrices()
+
+  const borrow: BorrowAsset[] = borrowEnabledMarkets.map((market) => {
+    const price = prices.find((coin) => coin.denom === market.denom)?.amount ?? '1'
+    const amount = liquidity.find((coin) => coin.denom === market.denom)?.amount ?? '0'
+    return {
+      denom: market.denom,
+      borrowRate: market.borrowRate ?? 0,
+      liquidity: {
+        amount: amount,
+        value: BN(amount).times(price).toString(),
+      },
+    }
+  })
+
+  if (borrow) {
+    return borrow
+  }
+
+  return new Promise((_, reject) => reject('No data'))
+}

src/api/markets/getMarketDebts.ts

@@ -1,15 +1,11 @@
 import { gql, request as gqlRequest } from 'graphql-request'
-import { NextApiRequest, NextApiResponse } from 'next'
 
-import { ENV, ENV_MISSING_MESSAGE, VERCEL_BYPASS } from 'constants/env'
+import { ENV } from 'constants/env'
 import { denomToKey, getContractQuery, keyToDenom } from 'utils/query'
+import getMarkets from 'api/markets/getMarkets'
 
-export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+export default async function getMarketDebts(): Promise<Coin[]> {
-  if (!ENV.URL_API || !ENV.ADDRESS_RED_BANK || !ENV.URL_GQL) {
+  const markets: Market[] = await getMarkets()
-    return res.status(404).json(ENV_MISSING_MESSAGE)
-  }
-
-  const markets: Market[] = await (await fetch(`${ENV.URL_API}/markets${VERCEL_BYPASS}`)).json()
 
   let query = ''
 
@@ -45,10 +41,10 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         amount: result.debts[key],
       }
     })
-    return res.status(200).json(debts)
+    return debts
   }
 
-  return res.status(404)
+  return new Promise((_, reject) => reject('No data'))
 }
 
 interface DebtsQuery {

src/api/markets/getMarketDeposits.ts

@@ -1,15 +1,11 @@
 import { gql, request as gqlRequest } from 'graphql-request'
-import { NextApiRequest, NextApiResponse } from 'next'
 
-import { ENV, ENV_MISSING_MESSAGE, VERCEL_BYPASS } from 'constants/env'
+import { ENV } from 'constants/env'
 import { denomToKey, getContractQuery, keyToDenom } from 'utils/query'
+import getMarkets from 'api/markets/getMarkets'
 
-export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+export default async function getMarketDeposits(): Promise<Coin[]> {
-  if (!ENV.URL_RPC || !ENV.ADDRESS_RED_BANK || !ENV.URL_GQL || !ENV.URL_API) {
+  const markets = await getMarkets()
-    return res.status(404).json(ENV_MISSING_MESSAGE)
-  }
-
-  const markets = await (await fetch(`${ENV.URL_API}/markets${VERCEL_BYPASS}`)).json()
 
   let query = ''
 
@@ -45,10 +41,10 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         amount: result.deposits[key],
       }
     })
-    return res.status(200).json(deposits)
+    return deposits
   }
 
-  return res.status(404)
+  return new Promise((_, reject) => reject('No data'))
 }
 
 interface DepositsQuery {

src/api/markets/getMarketLiquidity.ts

@@ -0,0 +1,30 @@
+import { BN } from 'utils/helpers'
+import getMarketDeposits from 'api/markets/getMarketDeposits'
+import getMarketDebts from 'api/markets/getMarketDebts'
+
+export default async function getMarketLiquidity(): Promise<Coin[]> {
+  const deposits = await getMarketDeposits()
+  const debts = await getMarketDebts()
+
+  const liquidity: Coin[] = deposits.map((deposit) => {
+    const debt = debts.find((debt) => debt.denom === deposit.denom)
+
+    if (debt) {
+      return {
+        denom: deposit.denom,
+        amount: BN(deposit.amount).minus(debt.amount).toString(),
+      }
+    }
+
+    return {
+      denom: deposit.denom,
+      amount: '0',
+    }
+  })
+
+  if (liquidity) {
+    return liquidity
+  }
+
+  return new Promise((_, reject) => reject('No data'))
+}

src/api/markets/getMarkets.ts

@@ -1,16 +1,11 @@
 import { gql, request as gqlRequest } from 'graphql-request'
-import { NextApiRequest, NextApiResponse } from 'next'
 
-import { ENV, ENV_MISSING_MESSAGE } from 'constants/env'
+import { ENV } from 'constants/env'
 import { getMarketAssets } from 'utils/assets'
 import { denomToKey } from 'utils/query'
 import { resolveMarketResponses } from 'utils/resolvers'
 
-export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+export default async function getMarkets(): Promise<Market[]> {
-  if (!ENV.URL_GQL || !ENV.ADDRESS_RED_BANK || !ENV.ADDRESS_INCENTIVES) {
-    return res.status(404).json(ENV_MISSING_MESSAGE)
-  }
-
   const marketAssets = getMarketAssets()
 
   const marketQueries = marketAssets.map(
@@ -36,7 +31,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     const market = result.rbwasmkey[`${denomToKey(asset.denom)}`]
     return market
   })
-  return res.status(200).json(resolveMarketResponses(markets))
+  return resolveMarketResponses(markets)
 }
 
 interface RedBankData {

src/api/prices/getPrices.ts

@@ -1,16 +1,11 @@
 import { gql, request as gqlRequest } from 'graphql-request'
-import { NextApiRequest, NextApiResponse } from 'next'
 
 import { ASSETS } from 'constants/assets'
-import { ENV, ENV_MISSING_MESSAGE } from 'constants/env'
+import { ENV } from 'constants/env'
 import { getMarketAssets } from 'utils/assets'
 import { BN } from 'utils/helpers'
 
-export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+export default async function getPrices(): Promise<Coin[]> {
-  if (!ENV.URL_GQL || !ENV.ADDRESS_ORACLE) {
-    return res.status(404).json(ENV_MISSING_MESSAGE)
-  }
-
   const marketAssets = getMarketAssets()
   const baseCurrency = ASSETS[0]
 
@@ -51,7 +46,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     ] as Coin[]
   }, [])
 
-  return res.status(200).json(data)
+  return data
 }
 
 interface TokenPricesResult {

src/api/vaults/getVaultAprs.ts

@@ -0,0 +1,50 @@
+import { ENV } from 'constants/env'
+
+export default async function getAprs() {
+  try {
+    const response = await fetch(ENV.URL_APOLLO_APR)
+
+    if (response.ok) {
+      const data: FlatApr[] | NestedApr[] = await response.json()
+
+      const newAprs = data.map((aprData) => {
+        try {
+          const apr = aprData as FlatApr
+          const aprTotal = apr.apr.reduce((prev, curr) => Number(curr.value) + prev, 0)
+          const feeTotal = apr.fees.reduce((prev, curr) => Number(curr.value) + prev, 0)
+
+          const finalApr = aprTotal + feeTotal
+
+          return { address: aprData.contract_address, apr: finalApr }
+        } catch {
+          const apr = aprData as NestedApr
+          const aprTotal = apr.apr.aprs.reduce((prev, curr) => Number(curr.value) + prev, 0)
+          const feeTotal = apr.apr.fees.reduce((prev, curr) => Number(curr.value) + prev, 0)
+
+          const finalApr = aprTotal + feeTotal
+          return { address: aprData.contract_address, apr: finalApr }
+        }
+      })
+
+      return newAprs
+    }
+
+    return []
+  } catch {
+    return []
+  }
+}
+
+interface FlatApr {
+  contract_address: string
+  apr: { type: string; value: number | string }[]
+  fees: { type: string; value: number | string }[]
+}
+
+interface NestedApr {
+  contract_address: string
+  apr: {
+    aprs: { type: string; value: number | string }[]
+    fees: { type: string; value: number | string }[]
+  }
+}

src/api/vaults/getVaultConfigs.ts

@@ -0,0 +1,64 @@
+import { getClient } from 'api/cosmwasm-client'
+import { ENV, IS_TESTNET } from 'constants/env'
+import { TESTNET_VAULTS, VAULTS } from 'constants/vaults'
+import {
+  ArrayOfVaultInfoResponse,
+  VaultBaseForString,
+} from 'types/generated/mars-credit-manager/MarsCreditManager.types'
+
+export default async function getVaultConfigs(): Promise<VaultConfig[]> {
+  const vaultInfos: VaultInfo[] = await getVaultInfos([])
+  const vaults = IS_TESTNET ? TESTNET_VAULTS : VAULTS
+
+  return vaults.map((vaultMetaData) => {
+    const vaultConfig = vaultInfos.find((vaultInfo) => vaultInfo.address === vaultMetaData.address)
+
+    return {
+      ...vaultMetaData,
+      ...vaultConfig,
+    } as VaultConfig
+  })
+}
+
+const getVaultInfos = async (
+  vaultInfos: VaultInfo[],
+  startAfter?: VaultBaseForString,
+): Promise<VaultInfo[]> => {
+  if (!ENV.ADDRESS_CREDIT_MANAGER) return []
+  const client = await getClient()
+  try {
+    const batch: ArrayOfVaultInfoResponse = await client.queryContractSmart(
+      ENV.ADDRESS_CREDIT_MANAGER,
+      {
+        vaults_info: { limit: 4, start_after: startAfter },
+      },
+    )
+
+    const batchProcessed = batch?.map((vaultInfo) => {
+      return {
+        address: vaultInfo.vault.address,
+        cap: {
+          denom: vaultInfo.config.deposit_cap.denom,
+          used: Number(vaultInfo.utilization.amount),
+          max: Number(vaultInfo.config.deposit_cap.amount),
+        },
+        ltv: {
+          max: Number(vaultInfo.config.max_ltv),
+          liq: Number(vaultInfo.config.liquidation_threshold),
+        },
+      } as VaultConfig
+    })
+
+    vaultInfos.push(...batchProcessed)
+
+    if (batch.length === 4) {
+      return await getVaultInfos(vaultInfos, {
+        address: batchProcessed[batchProcessed.length - 1].address,
+      } as VaultBaseForString)
+    }
+
+    return vaultInfos
+  } catch {
+    return vaultInfos
+  }
+}

src/api/vaults/getVaults.ts

@@ -0,0 +1,29 @@
+import { convertAprToApy } from 'utils/parsers'
+import getVaultConfigs from 'api/vaults/getVaultConfigs'
+import getAprs from 'api/vaults/getVaultAprs'
+
+export default async function getVaults(): Promise<Vault[]> {
+  const $vaultConfigs = getVaultConfigs()
+  const $aprs = getAprs()
+  const vaults: Vault[] = await Promise.all([$vaultConfigs, $aprs]).then(([vaultConfigs, aprs]) => {
+    return vaultConfigs.map((vaultConfig) => {
+      const apr = aprs.find((apr) => apr.address === vaultConfig.address)
+      if (apr) {
+        return {
+          ...vaultConfig,
+          apy: convertAprToApy(apr.apr, 365),
+        }
+      }
+      return {
+        ...vaultConfig,
+        apy: null,
+      }
+    })
+  })
+
+  if (vaults) {
+    return vaults
+  }
+
+  return new Promise((_, reject) => reject('No data'))
+}

src/api/wallets/getAccountIds.ts

@@ -0,0 +1,18 @@
+import { getClient } from 'api/cosmwasm-client'
+import { ENV } from 'constants/env'
+
+export default async function getAccountIds(address: string) {
+  const client = await getClient()
+
+  const data = await client.queryContractSmart(ENV.ADDRESS_ACCOUNT_NFT, {
+    tokens: {
+      owner: address,
+    },
+  })
+
+  if (data.tokens) {
+    return data.tokens
+  }
+
+  return new Promise((_, reject) => reject('No data'))
+}

src/api/wallets/getAccounts.ts

@@ -0,0 +1,26 @@
+import { ENV } from 'constants/env'
+import { resolvePositionResponses } from 'utils/resolvers'
+import getWalletAccountIds from 'api/wallets/getAccountIds'
+import { getClient } from 'api/cosmwasm-client'
+
+export default async function getAccounts(address: string): Promise<Account[]> {
+  const accountIds: string[] = await getWalletAccountIds(address)
+
+  const client = await getClient()
+
+  const $accounts: Promise<AccountResponse>[] = accountIds.map((accountId) =>
+    client.queryContractSmart(ENV.ADDRESS_CREDIT_MANAGER!, {
+      positions: {
+        account_id: `${accountId}`,
+      },
+    }),
+  )
+
+  const accounts = await Promise.all($accounts).then((accounts) => accounts)
+
+  if (accounts) {
+    return resolvePositionResponses(accounts)
+  }
+
+  return new Promise((_, reject) => reject('No data'))
+}

src/api/wallets/getWalletBalances.ts

@@ -0,0 +1,14 @@
+import { ENV } from 'constants/env'
+
+export default async function getWalletBalances(address: string): Promise<Coin[]> {
+  const uri = '/cosmos/bank/v1beta1/balances/'
+
+  const response = await fetch(`${ENV.URL_REST}${uri}${address}`)
+
+  if (response.ok) {
+    const data = await response.json()
+    return data.balances
+  }
+
+  return new Promise((_, reject) => reject('No data'))
+}

src/app/borrow/page.tsx

@@ -1,5 +0,0 @@
-import BorrowPage from 'components/pages/borrow'
-
-export default async function page({ params }: PageProps) {
-  return <BorrowPage params={params} />
-}

src/app/council/page.tsx

@@ -1,5 +0,0 @@
-import CouncilPage from 'components/pages/council'
-
-export default async function page({ params }: PageProps) {
-  return <CouncilPage params={params} />
-}

src/app/earn/farm/page.tsx

@@ -1,5 +0,0 @@
-import FarmPage from 'components/pages/farm'
-
-export default async function page({ params }: { params: PageParams }) {
-  return <FarmPage params={params} />
-}

src/app/earn/lend/page.tsx

@@ -1,5 +0,0 @@
-import LendPage from 'components/pages/lend'
-
-export default function page({ params }: { params: PageParams }) {
-  return <LendPage params={params} />
-}

src/app/head.tsx

@@ -1,30 +0,0 @@
-export default function Head() {
-  return (
-    <>
-      <title>Mars Protocol V2</title>
-      <meta charSet='utf-8' />
-      <link href='/favicon.svg' rel='icon' />
-      <link href='/apple-touch-icon.png' rel='apple-touch-icon' sizes='180x180' />
-      <link href='/site.webmanifest' rel='manifest' />
-      <link color='#dd5b65' href='/safari-pinned-tab.svg' rel='mask-icon' />
-      <meta content='index,follow' name='robots' />
-      <meta
-        content="Lend, borrow and earn on the galaxy's most powerful credit protocol or enter the Fields of Mars for advanced DeFi strategies."
-        name='description'
-      />
-      <meta content='summary_large_image' name='twitter:card' />
-      <meta content='@mars_protocol' name='twitter:site' />
-      <meta content='@mars_protocol' name='twitter:creator' />
-      <meta content='https://osmosis.marsprotocol.io' property='og:url' />
-      <meta content='Mars Protocol V2 - Powered by Osmosis' property='og:title' />
-      <meta
-        content="Lend, borrow and earn on the galaxy's most powerful credit protocol or enter the Fields of Mars for advanced DeFi strategies."
-        property='og:description'
-      />
-      <meta content='https://osmosis.marsprotocol.io/banner.png' property='og:image' />
-      <meta content='Mars Protocol V2' property='og:site_name' />
-      <meta content='#ffffff' name='msapplication-TileColor' />
-      <meta content='#ffffff' name='theme-color' />
-    </>
-  )
-}

src/app/layout.tsx

@@ -1,42 +0,0 @@
-import classNames from 'classnames'
-import { headers } from 'next/headers'
-
-import AccountDetails from 'components/Account/AccountDetails'
-import Background from 'components/Background'
-import FetchPrices from 'components/FetchPrices'
-import Footer from 'components/Footer'
-import DesktopHeader from 'components/Header/DesktopHeader'
-import ModalsContainer from 'components/Modals/ModalsContainer'
-import Toaster from 'components/Toaster'
-import 'react-toastify/dist/ReactToastify.min.css'
-import 'styles/globals.css'
-import { getRouteParams } from 'utils/route'
-
-export default function RootLayout(props: { children: React.ReactNode }) {
-  const href = headers().get('x-url') || ''
-  const params = getRouteParams(href)
-  return (
-    <html className='m-0 p-0' lang='en'>
-      <head />
-      <body className='m-0 cursor-default bg-body p-0 font-sans text-white'>
-        <Background />
-        <DesktopHeader params={params} />
-        <FetchPrices />
-        <main
-          className={classNames(
-            'relative flex justify-center pt-6',
-            'lg:mt-[65px] lg:h-[calc(100vh-89px)]',
-          )}
-        >
-          <div className='flex w-full max-w-content flex-grow flex-wrap content-start'>
-            {props.children}
-          </div>
-          <AccountDetails />
-        </main>
-        <Footer />
-        <ModalsContainer />
-        <Toaster />
-      </body>
-    </html>
-  )
-}

src/app/page.tsx

@@ -1,5 +0,0 @@
-import TradePage from 'components/pages/trade'
-
-export default async function page({ params }: PageProps) {
-  return <TradePage params={params} />
-}

src/app/portfolio/page.tsx

@@ -1,5 +0,0 @@
-import PortfolioPage from 'components/pages/portfolio'
-
-export default async function page({ params }: PageProps) {
-  return <PortfolioPage params={params} />
-}

src/app/trade/page.tsx

@@ -1,5 +0,0 @@
-import TradePage from 'components/pages/trade'
-
-export default async function page({ params }: PageProps) {
-  return <TradePage params={params} />
-}

src/app/wallets/[address]/accounts/[accountId]/borrow/page.tsx

@@ -1,5 +0,0 @@
-import BorrowPage from 'components/pages/borrow'
-
-export default async function page({ params }: PageProps) {
-  return <BorrowPage params={params} />
-}

src/app/wallets/[address]/accounts/[accountId]/council/page.tsx

@@ -1,5 +0,0 @@
-import CouncilPage from 'components/pages/council'
-
-export default async function page({ params }: PageProps) {
-  return <CouncilPage params={params} />
-}

src/app/wallets/[address]/accounts/[accountId]/earn/farm/page.tsx

@@ -1,5 +0,0 @@
-import FarmPage from 'components/pages/farm'
-
-export default async function page({ params }: { params: PageParams }) {
-  return <FarmPage params={params} />
-}

src/app/wallets/[address]/accounts/[accountId]/earn/lend/page.tsx

@@ -1,5 +0,0 @@
-import LendPage from 'components/pages/lend'
-
-export default function page({ params }: { params: PageParams }) {
-  return <LendPage params={params} />
-}

src/app/wallets/[address]/accounts/[accountId]/page.tsx

@@ -1,5 +0,0 @@
-import TradePage from 'components/pages/trade'
-
-export default async function page({ params }: PageProps) {
-  return <TradePage params={params} />
-}

src/app/wallets/[address]/accounts/[accountId]/portfolio/page.tsx

@@ -1,5 +0,0 @@
-import PortfolioPage from 'components/pages/portfolio'
-
-export default async function page({ params }: PageProps) {
-  return <PortfolioPage params={params} />
-}

src/app/wallets/[address]/accounts/[accountId]/trade/page.tsx

@@ -1,5 +0,0 @@
-import TradePage from 'components/pages/trade'
-
-export default async function page({ params }: PageProps) {
-  return <TradePage params={params} />
-}

src/app/wallets/[address]/borrow/page.tsx

@@ -1,5 +0,0 @@
-import BorrowPage from 'components/pages/borrow'
-
-export default async function page({ params }: PageProps) {
-  return <BorrowPage params={params} />
-}

src/app/wallets/[address]/council/page.tsx

@@ -1,5 +0,0 @@
-import CouncilPage from 'components/pages/council'
-
-export default async function page({ params }: PageProps) {
-  return <CouncilPage params={params} />
-}

src/app/wallets/[address]/earn/farm/page.tsx

@@ -1,5 +0,0 @@
-import FarmPage from 'components/pages/farm'
-
-export default async function page({ params }: { params: PageParams }) {
-  return <FarmPage params={params} />
-}

src/app/wallets/[address]/earn/lend/page.tsx

@@ -1,5 +0,0 @@
-import LendPage from 'components/pages/lend'
-
-export default function page({ params }: { params: PageParams }) {
-  return <LendPage params={params} />
-}

src/app/wallets/[address]/layout.tsx

@@ -1,3 +0,0 @@
-export default function RootLayout({ children }: { children: React.ReactNode }) {
-  return children
-}

src/app/wallets/[address]/portfolio/page.tsx

@@ -1,5 +0,0 @@
-import PortfolioPage from 'components/pages/portfolio'
-
-export default async function page({ params }: PageProps) {
-  return <PortfolioPage params={params} />
-}

src/app/wallets/[address]/trade/page.tsx

@@ -1,5 +0,0 @@
-import TradePage from 'components/pages/trade'
-
-export default async function page({ params }: PageProps) {
-  return <TradePage params={params} />
-}

src/components/Account/AccountBalancesTable.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import {
   ColumnDef,
   flexRender,
@@ -142,7 +140,6 @@ export const AcccountBalancesTable = (props: Props) => {
     onSortingChange: setSorting,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
-    debugTable: true,
   })
 
   return (

src/components/Account/AccountComposition.tsx

@@ -1,4 +1,3 @@
-'use client'
 import BigNumber from 'bignumber.js'
 import classNames from 'classnames'
 

src/components/Account/AccountDetails.tsx

@@ -1,13 +1,13 @@
-'use client'
+import { useParams } from 'react-router-dom'
+
 import { Gauge } from 'components/Gauge'
 import { Heart } from 'components/Icons'
 import Text from 'components/Text'
 import { isNumber } from 'utils/parsers'
-import useParams from 'utils/route'
 
 export default function AccountDetails() {
-  const params = useParams()
+  const { accountId } = useParams()
-  const hasAccount = isNumber(params.accountId)
+  const hasAccount = isNumber(accountId)
 
   return hasAccount ? (
     <div

src/components/Account/AccountHealth.tsx

@@ -1,4 +1,3 @@
-'use client'
 import classNames from 'classnames'
 
 import { Heart } from 'components/Icons'

src/components/Account/AccountList.tsx

@@ -1,8 +1,6 @@
-'use client'
-
 import classNames from 'classnames'
-import { useRouter } from 'next/navigation'
 import { useEffect } from 'react'
+import { useLocation, useNavigate, useParams } from 'react-router-dom'
 
 import AccountStats from 'components/Account/AccountStats'
 import { Button } from 'components/Button'
@@ -16,7 +14,8 @@ import useStore from 'store'
 import { calculateAccountDeposits } from 'utils/accounts'
 import { hardcodedFee } from 'utils/contants'
 import { BN } from 'utils/helpers'
-import useParams, { getRoute } from 'utils/route'
+import { getPage, getRoute } from 'utils/route'
+import usePrices from 'hooks/usePrices'
 
 interface Props {
   setShowFundAccount: (showFundAccount: boolean) => void
@@ -29,26 +28,25 @@ const accountCardHeaderClasses = classNames(
 )
 
 export default function AccountList(props: Props) {
-  const router = useRouter()
+  const navigate = useNavigate()
-  const params = useParams()
+  const { pathname } = useLocation()
-
+  const { accountId, address } = useParams()
-  const selectedAccount = params.accountId
+  const { data: prices } = usePrices()
-  const prices = useStore((s) => s.prices)
 
   const deleteAccount = useStore((s) => s.deleteAccount)
 
   const [isLending, setIsLending] = useToggle()
-  const accountSelected = !!selectedAccount && !isNaN(Number(selectedAccount))
+  const accountSelected = !!accountId && !isNaN(Number(accountId))
-  const selectedAccountDetails = props.accounts.find((account) => account.id === selectedAccount)
+  const selectedAccountDetails = props.accounts.find((account) => account.id === accountId)
   const selectedAccountBalance = selectedAccountDetails
     ? calculateAccountDeposits(selectedAccountDetails, prices)
     : BN(0)
 
   async function deleteAccountHandler() {
     if (!accountSelected) return
-    const isSuccess = await deleteAccount({ fee: hardcodedFee, accountId: selectedAccount })
+    const isSuccess = await deleteAccount({ fee: hardcodedFee, accountId: accountId })
     if (isSuccess) {
-      router.push(`/wallets/${params.address}/accounts`)
+      navigate(`/wallets/${address}/accounts`)
     }
   }
 
@@ -58,11 +56,11 @@ export default function AccountList(props: Props) {
   }
 
   useEffect(() => {
-    const element = document.getElementById(`account-${selectedAccount}`)
+    const element = document.getElementById(`account-${accountId}`)
     if (element) {
       element.scrollIntoView({ behavior: 'smooth' })
     }
-  }, [selectedAccount])
+  }, [accountId])
 
   if (!props.accounts?.length) return null
 
@@ -70,7 +68,7 @@ export default function AccountList(props: Props) {
     <div className='flex w-full flex-wrap p-4'>
       {props.accounts.map((account) => {
         const positionBalance = calculateAccountDeposits(account, prices)
-        const isActive = selectedAccount === account.id
+        const isActive = accountId === account.id
         return (
           <div key={account.id} id={`account-${account.id}`} className='w-full pt-4'>
             <Card
@@ -87,7 +85,7 @@ export default function AccountList(props: Props) {
                   role={!isActive ? 'button' : undefined}
                   onClick={() => {
                     if (isActive) return
-                    router.push(getRoute(params, { accountId: account.id }))
+                    navigate(getRoute(getPage(pathname), address, account.id))
                   }}
                 >
                   <Text size='xs' className='flex flex-1'>

src/components/Account/AccountMenu.tsx

@@ -2,23 +2,20 @@ import { Suspense } from 'react'
 
 import AccountMenuContent from 'components/Account/AccountMenuContent'
 import Loading from 'components/Loading'
-import { getAccounts } from 'utils/api'
+import useStore from 'store'
+import useAccounts from 'hooks/useAccounts'
 
-interface Props {
+function Content() {
-  params: PageParams
+  const address = useStore((s) => s.address)
-}
+  const { data: accounts } = useAccounts(address)
-
+  if (!accounts) return null
-async function Content(props: Props) {
-  if (props.params.address === undefined) return null
-  const accounts = await getAccounts(props.params.address)
   return <AccountMenuContent accounts={accounts} />
 }
 
-export default function AccountMenu(props: Props) {
+export default function AccountMenu() {
   return (
     <Suspense fallback={<Loading className='h-8 w-35' />}>
-      {/* @ts-expect-error Server Component */}
+      <Content />
-      <Content params={props.params} />
     </Suspense>
   )
 }

src/components/Account/AccountMenuContent.tsx

@@ -1,8 +1,6 @@
-'use client'
-
 import classNames from 'classnames'
-import { useRouter } from 'next/navigation'
 import { useEffect, useState } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
 
 import AccountList from 'components/Account/AccountList'
 import CreateAccount from 'components/Account/CreateAccount'
@@ -16,7 +14,6 @@ import useToggle from 'hooks/useToggle'
 import useStore from 'store'
 import { hardcodedFee } from 'utils/contants'
 import { isNumber } from 'utils/parsers'
-import useParams from 'utils/route'
 
 const menuClasses = 'absolute isolate flex w-full flex-wrap scrollbar-hide'
 
@@ -25,22 +22,21 @@ interface Props {
 }
 
 export default function AccountMenuContent(props: Props) {
-  const router = useRouter()
+  const navigate = useNavigate()
-  const params = useParams()
+  const { accountId, address } = useParams()
   const createAccount = useStore((s) => s.createAccount)
   const [showMenu, setShowMenu] = useToggle()
   const [isCreating, setIsCreating] = useToggle()
 
-  const selectedAccountId = params.accountId
   const hasCreditAccounts = !!props.accounts.length
-  const isAccountSelected = isNumber(selectedAccountId)
+  const isAccountSelected = isNumber(accountId)
 
-  const selectedAccountDetails = props.accounts.find((account) => account.id === selectedAccountId)
+  const selectedAccountDetails = props.accounts.find((account) => account.id === accountId)
   const [showFundAccount, setShowFundAccount] = useState<boolean>(
     isAccountSelected && !selectedAccountDetails?.deposits?.length,
   )
 
-  const isLoadingAccount = isAccountSelected && selectedAccountDetails?.id !== selectedAccountId
+  const isLoadingAccount = isAccountSelected && selectedAccountDetails?.id !== accountId
   const showCreateAccount = !hasCreditAccounts || isCreating
 
   async function createAccountHandler() {
@@ -49,14 +45,14 @@ export default function AccountMenuContent(props: Props) {
     const accountId = await createAccount({ fee: hardcodedFee })
     setIsCreating(false)
     if (!accountId) return
-    router.push(`/wallets/${params.address}/accounts/${accountId}`)
+    navigate(`/wallets/${address}/accounts/${accountId}`)
   }
 
   useEffect(() => {
     useStore.setState({ accounts: props.accounts })
   }, [props.accounts])
 
-  if (!params.address) return null
+  if (!address) return null
 
   return (
     <div className='relative'>
@@ -69,7 +65,7 @@ export default function AccountMenuContent(props: Props) {
       >
         {hasCreditAccounts
           ? isAccountSelected
-            ? `Account ${selectedAccountId}`
+            ? `Account ${accountId}`
             : 'Select Account'
           : 'Create Account'}
       </Button>

src/components/Account/AccountStats.tsx

@@ -1,4 +1,3 @@
-'use client'
 import BigNumber from 'bignumber.js'
 
 import AccountHealth from 'components/Account/AccountHealth'

src/components/Account/AccountSummary.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import Accordion from 'components/Accordion'
 import { AcccountBalancesTable } from 'components/Account/AccountBalancesTable'
 import AccountComposition from 'components/Account/AccountComposition'

src/components/Account/CreateAccount.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import { Button } from 'components/Button'
 import { ArrowRight } from 'components/Icons'
 import Text from 'components/Text'

src/components/Account/FundAccount.tsx

@@ -1,7 +1,6 @@
-'use client'
-
 import BigNumber from 'bignumber.js'
 import { useCallback, useState } from 'react'
+import { useParams } from 'react-router-dom'
 
 import { Button } from 'components/Button'
 import { ArrowRight, Cross } from 'components/Icons'
@@ -14,7 +13,6 @@ import useStore from 'store'
 import { getAmount } from 'utils/accounts'
 import { hardcodedFee } from 'utils/contants'
 import { BN } from 'utils/helpers'
-import useParams from 'utils/route'
 
 interface Props {
   setShowFundAccount: (show: boolean) => void
@@ -22,7 +20,7 @@ interface Props {
 }
 
 export default function FundAccount(props: Props) {
-  const params = useParams()
+  const { accountId } = useParams()
   const deposit = useStore((s) => s.deposit)
   const balances = useStore((s) => s.balances)
 
@@ -50,10 +48,11 @@ export default function FundAccount(props: Props) {
   )
 
   async function onDeposit() {
+    if (!accountId) return
     setIsFunding(true)
     const result = await deposit({
       fee: hardcodedFee,
-      accountId: params.accountId,
+      accountId,
       coin: {
         denom: asset.denom,
         amount: amount.toString(),
@@ -79,7 +78,7 @@ export default function FundAccount(props: Props) {
       </div>
       <div className='relative z-10 w-full p-4'>
         <Text size='lg' className='mb-2 font-bold'>
-          {`Fund Account ${params.accountId}`}
+          {`Fund Account ${accountId}`}
         </Text>
         <Text className='mb-4 text-white/70'>
           Deposit assets from your Osmosis address to your Mars credit account. Bridge assets if

src/components/AccountDebtTable.tsx

@@ -1,4 +1,4 @@
-import { getAccountDebts } from 'utils/api'
+import getAccountDebts from 'api/accounts/getAccountDebts'
 
 interface Props {
   accountId: string

src/components/Background.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import classNames from 'classnames'
 
 import useStore from 'store'

src/components/Borrow/AssetExpanded.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import { Row } from '@tanstack/react-table'
 
 import { Button } from 'components/Button'

src/components/Borrow/BorrowTable.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import {
   ColumnDef,
   flexRender,
@@ -124,7 +122,6 @@ export const BorrowTable = (props: Props) => {
     onSortingChange: setSorting,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
-    debugTable: true,
   })
 
   return (

src/components/Borrow/Borrowings.tsx

@@ -1,17 +1,20 @@
 import { Suspense } from 'react'
+import { useParams } from 'react-router-dom'
 
 import Card from 'components/Card'
-import { getAccountDebts, getBorrowData } from 'utils/api'
 import { getMarketAssets } from 'utils/assets'
 import { BorrowTable } from 'components/Borrow/BorrowTable'
+import useAccountDebts from 'hooks/useAccountDebts'
+import useMarketBorrowings from 'hooks/useMarketBorrowings'
 
-interface Props extends PageProps {
+interface Props {
   type: 'active' | 'available'
 }
 
-async function Content(props: Props) {
+function Content(props: Props) {
-  const debtData = await getAccountDebts(props.params?.accountId)
+  const { accountId } = useParams()
-  const borrowData = await getBorrowData()
+  const { data: debtData } = useAccountDebts(accountId)
+  const { data: borrowData } = useMarketBorrowings()
 
   const marketAssets = getMarketAssets()
 
@@ -20,7 +23,7 @@ async function Content(props: Props) {
       (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)
+          const debt = debtData?.find((debt) => debt.denom === curr.denom)
           if (debt) {
             prev.active.push({
               ...borrow,
@@ -68,22 +71,20 @@ function Fallback() {
   return <BorrowTable data={available} />
 }
 
-export function AvailableBorrowings(props: PageProps) {
+export function AvailableBorrowings() {
   return (
     <Card className='h-fit w-full bg-white/5' title={'Available to borrow'}>
       <Suspense fallback={<Fallback />}>
-        {/* @ts-expect-error Server Component */}
+        <Content type='available' />
-        <Content params={props.params} type='available' />
       </Suspense>
     </Card>
   )
 }
 
-export function ActiveBorrowings(props: PageProps) {
+export function ActiveBorrowings() {
   return (
     <Suspense fallback={null}>
-      {/* @ts-expect-error Server Component */}
+      <Content type='active' />
-      <Content params={props.params} type='active' />
     </Suspense>
   )
 }

src/components/Council/Overview.tsx

@@ -1,11 +1,12 @@
 import { Suspense } from 'react'
+import { useParams } from 'react-router-dom'
 
 import Card from 'components/Card'
 import Loading from 'components/Loading'
 import Text from 'components/Text'
 
-async function Content(props: PageProps) {
+function Content() {
-  const address = props.params.address
+  const address = useParams().address || ''
 
   return address ? (
     <Text size='sm'>{`Council page for ${address}`}</Text>
@@ -18,7 +19,7 @@ function Fallback() {
   return <Loading className='h-4 w-50' />
 }
 
-export default function Overview(props: PageProps) {
+export default function Overview() {
   return (
     <Card
       className='h-fit w-full justify-center bg-white/5'
@@ -26,8 +27,7 @@ export default function Overview(props: PageProps) {
       contentClassName='px-4 py-6'
     >
       <Suspense fallback={<Fallback />}>
-        {/* @ts-expect-error Server Component */}
+        <Content />
-        <Content params={props.params} />
       </Suspense>
     </Card>
   )

src/components/DisplayCurrency.tsx

@@ -1,5 +1,3 @@
-import { Coin } from '@cosmjs/stargate'
-
 import { FormattedNumber } from 'components/FormattedNumber'
 import useStore from 'store'
 import { convertToDisplayAmount } from 'utils/formatters'

src/components/Earn/Tab.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames'
-import Link from 'next/link'
+import { NavLink, useParams } from 'react-router-dom'
 
 import { getRoute } from 'utils/route'
 
@@ -7,34 +7,35 @@ const underlineClasses =
   'relative before:absolute before:h-[2px] before:-bottom-1 before:left-0 before:right-0 before:gradient-active-tab'
 
 interface Props {
-  params: PageParams
   isFarm?: boolean
 }
 
 export default function Tab(props: Props) {
+  const { address, accountId } = useParams()
+
   return (
     <div className='mb-8 w-full'>
       <div className='flex gap-2'>
         <div className='relative'>
-          <Link
+          <NavLink
-            href={getRoute(props.params, { page: 'earn/farm' })}
+            to={getRoute('farm', address, accountId)}
             className={classNames(
               !props.isFarm ? 'text-white/20' : underlineClasses,
               'relative mr-8 text-xl',
             )}
           >
             Farm
-          </Link>
+          </NavLink>
         </div>
-        <Link
+        <NavLink
-          href={getRoute(props.params, { page: 'earn/lend' })}
+          to={getRoute('lend', address, accountId)}
           className={classNames(
             props.isFarm ? 'text-white/20' : underlineClasses,
             'relative text-xl',
           )}
         >
           Lend
-        </Link>
+        </NavLink>
       </div>
     </div>
   )

src/components/Earn/vault/AvailableVaults.tsx

@@ -5,10 +5,10 @@ import { VaultTable } from 'components/Earn/vault/VaultTable'
 import Text from 'components/Text'
 import { IS_TESTNET } from 'constants/env'
 import { TESTNET_VAULTS, VAULTS } from 'constants/vaults'
-import { getVaults } from 'utils/api'
+import useVaults from 'hooks/useVaults'
 
-async function Content() {
+function Content() {
-  const vaults = await getVaults()
+  const { data: vaults } = useVaults()
 
   if (!vaults.length) return null
 
@@ -19,7 +19,6 @@ export default function AvailableVaults() {
   return (
     <Card title='Available vaults' className='mb-4 h-fit w-full bg-white/5'>
       <Suspense fallback={<Fallback />}>
-        {/* @ts-expect-error Server Component */}
         <Content />
       </Suspense>
     </Card>

src/components/Earn/vault/FeaturedVaults.tsx

@@ -2,10 +2,10 @@ import { Suspense } from 'react'
 
 import Card from 'components/Card'
 import VaultCard from 'components/Earn/vault/VaultCard'
-import { getVaults } from 'utils/api'
+import useVaults from 'hooks/useVaults'
 
-async function Content() {
+function Content() {
-  const vaults = await getVaults()
+  const { data: vaults } = useVaults()
 
   const featuredVaults = vaults.filter((vault) => vault.isFeatured)
 
@@ -33,7 +33,6 @@ async function Content() {
 export default function FeaturedVaults() {
   return (
     <Suspense fallback={null}>
-      {/* @ts-expect-error Server Component */}
       <Content />
     </Suspense>
   )

src/components/Earn/vault/VaultCard.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import { Button } from 'components/Button'
 import VaultLogo from 'components/Earn/vault/VaultLogo'
 import Text from 'components/Text'

src/components/Earn/vault/VaultTable.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import {
   ColumnDef,
   flexRender,
@@ -103,7 +101,6 @@ export const VaultTable = (props: Props) => {
     onSortingChange: setSorting,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
-    debugTable: true,
   })
 
   return (

src/components/FormattedNumber.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import classNames from 'classnames'
 import React, { useEffect, useRef } from 'react'
 import { animated, useSpring } from 'react-spring'

src/components/Header/DesktopHeader.tsx

@@ -4,21 +4,18 @@ import AccountMenu from 'components/Account/AccountMenu'
 import DesktopNavigation from 'components/Navigation/DesktopNavigation'
 import Settings from 'components/Settings'
 import Wallet from 'components/Wallet/Wallet'
-import { WalletConnectProvider } from 'components/Wallet/WalletConnectProvider'
+import useStore from 'store'
 
-export const menuTree: { href: RouteSegment; label: string }[] = [
+export const menuTree: { page: Page; label: string }[] = [
-  { href: 'trade', label: 'Trade' },
+  { page: 'trade', label: 'Trade' },
-  { href: 'earn/farm', label: 'Earn' },
+  { page: 'farm', label: 'Earn' },
-  { href: 'borrow', label: 'Borrow' },
+  { page: 'borrow', label: 'Borrow' },
-  { href: 'portfolio', label: 'Portfolio' },
+  { page: 'portfolio', label: 'Portfolio' },
-  { href: 'council', label: 'Council' },
+  { page: 'council', label: 'Council' },
 ]
 
-interface Props {
+export default function DesktopHeader() {
-  params: PageParams
+  const address = useStore((s) => s.address)
-}
-
-export default function DesktopHeader(props: Props) {
   return (
     <header
       className={classNames(
@@ -30,10 +27,8 @@ export default function DesktopHeader(props: Props) {
       <div className='flex items-center justify-between border-b border-white/20 py-3 pl-6 pr-4'>
         <DesktopNavigation />
         <div className='flex gap-4'>
-          <AccountMenu params={props.params} />
+          {address && <AccountMenu />}
-          <WalletConnectProvider>
+          <Wallet />
-            <Wallet />
-          </WalletConnectProvider>
           <Settings />
         </div>
       </div>

src/components/Modal.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import classNames from 'classnames'
 import { ReactNode, useEffect, useRef } from 'react'
 

src/components/Modals/BorrowModal.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import Image from 'next/image'
 import { useEffect, useState } from 'react'
 

src/components/Modals/FundAndWithdrawModal.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import { useEffect, useState } from 'react'
 
 import AccountSummary from 'components/Account/AccountSummary'

src/components/Modals/ModalsContainer.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import BorrowModal from 'components/Modals/BorrowModal'
 import FundAndWithdrawModal from 'components/Modals/FundAndWithdrawModal'
 import VaultModal from 'components/Modals/VaultModal'

src/components/Navigation/DesktopNavigation.tsx

@@ -1,33 +1,30 @@
-'use client'
+import { useParams } from 'react-router-dom'
-
-import Link from 'next/link'
 
 import { menuTree } from 'components/Header/DesktopHeader'
 import { Logo } from 'components/Icons'
 import { NavLink } from 'components/Navigation/NavLink'
-import useParams, { getRoute } from 'utils/route'
+import { getRoute } from 'utils/route'
 
 export default function DesktopNavigation() {
-  const params = useParams()
+  const { address, accountId } = useParams()
 
   function getIsActive(href: string) {
-    if (params.page.includes('earn') && href.includes('earn')) return true
+    return location.pathname.includes(href)
-    return params.page === href
   }
 
   return (
     <div className='flex flex-grow items-center'>
-      <Link href={getRoute(params, { page: 'trade' })}>
+      <NavLink href={getRoute('trade', address, accountId)} isActive={false}>
         <span className='block h-10 w-10'>
           <Logo />
         </span>
-      </Link>
+      </NavLink>
       <div className='flex gap-8 px-6'>
         {menuTree.map((item, index) => (
           <NavLink
             key={index}
-            href={getRoute(params, { page: item.href })}
+            href={getRoute(item.page, address, accountId)}
-            isActive={getIsActive(item.href)}
+            isActive={getIsActive(item.page)}
           >
             {item.label}
           </NavLink>

src/components/Navigation/NavLink.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames'
-import Link from 'next/link'
 import { ReactNode } from 'react'
+import { NavLink as Link } from 'react-router-dom'
 
 interface Props {
   href: string
@@ -11,11 +11,13 @@ interface Props {
 export const NavLink = (props: Props) => {
   return (
     <Link
-      href={props.href}
+      to={props.href}
-      className={classNames(
+      className={({ isActive }) =>
-        'text-sm font-semibold hover:text-white active:text-white',
+        classNames(
-        props.isActive ? 'pointer-events-none text-white' : 'text-white/60',
+          'text-sm font-semibold hover:text-white active:text-white',
-      )}
+          isActive ? 'pointer-events-none text-white' : 'text-white/60',
+        )
+      }
     >
       {props.children}
     </Link>

src/components/NumberInput.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import BigNumber from 'bignumber.js'
 import classNames from 'classnames'
 import React, { useEffect, useState } from 'react'

src/components/Portfolio/AccountOverview.tsx

@@ -1,16 +1,17 @@
 import classNames from 'classnames'
 import { Suspense } from 'react'
+import { useParams } from 'react-router-dom'
 
 import { AcccountBalancesTable } from 'components/Account/AccountBalancesTable'
 import AccountComposition from 'components/Account/AccountComposition'
 import Card from 'components/Card'
 import Loading from 'components/Loading'
 import Text from 'components/Text'
-import { getAccounts } from 'utils/api'
+import useAccounts from 'hooks/useAccounts'
 
-async function Content(props: PageProps) {
+function Content() {
-  const address = props.params.address
+  const address = useParams().address || ''
-  const account = await getAccounts(address)
+  const { data: account } = useAccounts(address)
 
   if (!address) {
     return (
@@ -60,11 +61,10 @@ function Fallback() {
   )
 }
 
-export default function AccountOverview(props: PageProps) {
+export default function AccountOverview() {
   return (
     <Suspense fallback={<Fallback />}>
-      {/* @ts-expect-error Server Component */}
+      <Content />
-      <Content params={props.params} />
     </Suspense>
   )
 }

src/components/Routes.tsx

@@ -0,0 +1,49 @@
+import { Outlet, Route, Routes as RoutesWrapper } from 'react-router-dom'
+
+import BorrowPage from 'pages/BorrowPage'
+import CouncilPage from 'pages/CouncilPage'
+import FarmPage from 'pages/FarmPage'
+import LendPage from 'pages/LendPage'
+import PortfolioPage from 'pages/PortfolioPage'
+import TradePage from 'pages/TradePage'
+import Layout from 'pages/_layout'
+
+export default function Routes() {
+  return (
+    <RoutesWrapper>
+      <Route
+        element={
+          <Layout>
+            <Outlet />
+          </Layout>
+        }
+      >
+        <Route path='/trade' element={<TradePage />} />
+        <Route path='/farm' element={<FarmPage />} />
+        <Route path='/lend' element={<LendPage />} />
+        <Route path='/borrow' element={<BorrowPage />} />
+        <Route path='/portfolio' element={<PortfolioPage />} />
+        <Route path='/council' element={<CouncilPage />} />
+        <Route path='/' element={<TradePage />} />
+        <Route path='/wallets/:address'>
+          <Route path='accounts/:accountId'>
+            <Route path='trade' element={<TradePage />} />
+            <Route path='farm' element={<FarmPage />} />
+            <Route path='lend' element={<LendPage />} />
+            <Route path='borrow' element={<BorrowPage />} />
+            <Route path='portfolio' element={<PortfolioPage />} />
+            <Route path='council' element={<CouncilPage />} />
+            <Route path='' element={<TradePage />} />
+          </Route>
+          <Route path='trade' element={<TradePage />} />
+          <Route path='farm' element={<FarmPage />} />
+          <Route path='lend' element={<LendPage />} />
+          <Route path='borrow' element={<BorrowPage />} />
+          <Route path='portfolio' element={<PortfolioPage />} />
+          <Route path='council' element={<CouncilPage />} />
+          <Route path='' element={<TradePage />} />
+        </Route>
+      </Route>
+    </RoutesWrapper>
+  )
+}

src/components/Select/Select.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import classNames from 'classnames'
 import { useEffect, useState } from 'react'
 

src/components/Settings.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import { Button } from 'components/Button'
 import { Gear } from 'components/Icons'
 import Overlay from 'components/Overlay'

src/components/Slider.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import classNames from 'classnames'
 import { ChangeEvent, useRef, useState } from 'react'
 import Draggable from 'react-draggable'

src/components/Toaster.tsx

@@ -1,7 +1,7 @@
-'use client'
 import classNames from 'classnames'
-import { useRouter } from 'next/navigation'
 import { toast as createToast, Slide, ToastContainer } from 'react-toastify'
+import { useNavigate } from 'react-router-dom'
+import { mutate } from 'swr'
 
 import { Button } from 'components/Button'
 import { CheckCircled, Cross, CrossCircled } from 'components/Icons'
@@ -11,7 +11,6 @@ import useStore from 'store'
 export default function Toaster() {
   const enableAnimations = useStore((s) => s.enableAnimations)
   const toast = useStore((s) => s.toast)
-  const router = useRouter()
 
   if (toast) {
     const Msg = () => (
@@ -62,7 +61,7 @@ export default function Toaster() {
     })
 
     useStore.setState({ toast: null })
-    router.refresh()
+    mutate(() => true)
   }
 
   return (

src/components/TokenInput.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import BigNumber from 'bignumber.js'
 import classNames from 'classnames'
 import Image from 'next/image'

src/components/TokenInputWithSlider.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import BigNumber from 'bignumber.js'
 import { useCallback, useEffect, useState } from 'react'
 

src/components/Trade/OrderBook.tsx

@@ -1,11 +1,13 @@
 import { Suspense } from 'react'
+import { useParams } from 'react-router-dom'
 
 import Card from 'components/Card'
 import Loading from 'components/Loading'
 import Text from 'components/Text'
 
-async function Content(props: PageProps) {
+function Content() {
-  const address = props.params.address
+  const params = useParams()
+  const address = params.address
 
   return address ? (
     <Text size='sm'>{`Order book for ${address}`}</Text>
@@ -20,12 +22,11 @@ function Fallback() {
   return <Loading className='h-4 w-50' />
 }
 
-export default function OrderBook(props: PageProps) {
+export default function OrderBook() {
   return (
     <Card className='col-span-3 bg-white/5' title='Order Book' contentClassName='px-4 py-6'>
       <Suspense fallback={<Fallback />}>
-        {/* @ts-expect-error Server Component */}
+        <Content />
-        <Content params={props.params} />
       </Suspense>
     </Card>
   )

src/components/Trade/Trade.tsx

@@ -1,12 +1,14 @@
 import { Suspense } from 'react'
+import { useParams } from 'react-router-dom'
 
 import Card from 'components/Card'
 import Loading from 'components/Loading'
 import Text from 'components/Text'
 
-async function Content(props: PageProps) {
+function Content() {
-  const address = props.params.address
+  const params = useParams()
-  const currentAccount = props.params.accountId
+  const address = params.address
+  const currentAccount = params.accountId
   const hasAccount = !isNaN(Number(currentAccount))
 
   if (!address) return <Text size='sm'>You need to be connected to trade</Text>
@@ -20,12 +22,11 @@ function Fallback() {
   return <Loading className='h-4 w-50' />
 }
 
-export default function Trade(props: PageProps) {
+export default function Trade() {
   return (
     <Card className='h-full w-full bg-white/5' title='Trade Module' contentClassName='px-4 py-6'>
       <Suspense fallback={<Fallback />}>
-        {/* @ts-expect-error Server Component */}
+        <Content />
-        <Content params={props.params} />
       </Suspense>
     </Card>
   )

src/components/Trade/TradingView.tsx

@@ -4,7 +4,7 @@ import Card from 'components/Card'
 import Loading from 'components/Loading'
 import Text from 'components/Text'
 
-async function Content(props: PageProps) {
+function Content() {
   return <Text size='sm'>Chart view</Text>
 }
 
@@ -12,7 +12,7 @@ function Fallback() {
   return <Loading className='h-4 w-50' />
 }
 
-export default function TradingView(props: PageProps) {
+export default function TradingView() {
   return (
     <Card
       className='col-span-2 h-full bg-white/5'
@@ -20,8 +20,7 @@ export default function TradingView(props: PageProps) {
       contentClassName='px-4 py-6'
     >
       <Suspense fallback={<Fallback />}>
-        {/* @ts-expect-error Server Component */}
+        <Content />
-        <Content params={props.params} />
       </Suspense>
     </Card>
   )

src/components/Wallet/ConnectButton.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import { useWalletManager, WalletConnectionStatus } from '@marsprotocol/wallet-connector'
 import { ReactNode } from 'react'
 

src/components/Wallet/ConnectedButton.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import {
   ChainInfoID,
   SimpleChainInfoList,
@@ -10,7 +8,6 @@ import BigNumber from 'bignumber.js'
 import classNames from 'classnames'
 import { useCallback, useEffect, useState } from 'react'
 import useClipboard from 'react-use-clipboard'
-import useSWR from 'swr'
 
 import { Button } from 'components/Button'
 import { CircularProgress } from 'components/CircularProgress'
@@ -21,9 +18,9 @@ import Text from 'components/Text'
 import { IS_TESTNET } from 'constants/env'
 import useToggle from 'hooks/useToggle'
 import useStore from 'store'
-import { Endpoints, getEndpoint, getWalletBalancesSWR } from 'utils/api'
 import { getBaseAsset, getMarketAssets } from 'utils/assets'
 import { formatValue, truncate } from 'utils/formatters'
+import useWalletBalances from 'hooks/useWalletBalances'
 
 export default function ConnectedButton() {
   // ---------------
@@ -35,10 +32,7 @@ export default function ConnectedButton() {
   const address = useStore((s) => s.address)
   const network = useStore((s) => s.client?.recentWallet.network)
   const baseAsset = getBaseAsset()
-  const { data, isLoading } = useSWR(
+  const { data: walletBalances, isLoading } = useWalletBalances(address)
-    getEndpoint(Endpoints.WALLET_BALANCES, { address }),
-    getWalletBalancesSWR,
-  )
 
   // ---------------
   // LOCAL STATE
@@ -66,17 +60,17 @@ export default function ConnectedButton() {
   }
 
   useEffect(() => {
-    if (!data || data.length === 0) return
+    if (!walletBalances || walletBalances.length === 0) return
     setWalletAmount(
-      BigNumber(data?.find((coin: Coin) => coin.denom === baseAsset.denom)?.amount ?? 0)
+      BigNumber(walletBalances?.find((coin: Coin) => coin.denom === baseAsset.denom)?.amount ?? 0)
         .div(10 ** baseAsset.decimals)
         .toNumber(),
     )
 
     const assetDenoms = marketAssets.map((asset) => asset.denom)
-    const balances = data.filter((coin) => assetDenoms.includes(coin.denom))
+    const balances = walletBalances.filter((coin) => assetDenoms.includes(coin.denom))
     useStore.setState({ balances })
-  }, [data, baseAsset.denom, baseAsset.decimals, marketAssets])
+  }, [walletBalances, baseAsset.denom, baseAsset.decimals, marketAssets])
 
   return (
     <div className={'relative'}>

src/components/Wallet/Wallet.tsx

@@ -1,28 +1,28 @@
-'use client'
-
 import {
   getClient,
   useWallet,
   useWalletManager,
   WalletConnectionStatus,
 } from '@marsprotocol/wallet-connector'
-import { useRouter } from 'next/navigation'
 import { useEffect } from 'react'
+import { useLocation, useNavigate, useParams } from 'react-router-dom'
 
 import ConnectButton from 'components/Wallet/ConnectButton'
 import ConnectedButton from 'components/Wallet/ConnectedButton'
-import useParams from 'utils/route'
 import useStore from 'store'
+import { getPage, getRoute } from 'utils/route'
 
 export default function Wallet() {
-  const router = useRouter()
+  const navigate = useNavigate()
-  const params = useParams()
+  const { address: addressInUrl } = useParams()
+  const { pathname } = useLocation()
 
   const { status } = useWalletManager()
   const { recentWallet, simulate, sign, broadcast } = useWallet()
   const client = useStore((s) => s.client)
   const address = useStore((s) => s.address)
 
+  // Set connection status
   useEffect(() => {
     const isConnected = status === WalletConnectionStatus.Connected
 
@@ -34,29 +34,33 @@ export default function Wallet() {
           }
         : { address: undefined, accounts: null, client: undefined },
     )
+  }, [status, recentWallet?.account.address])
 
-    if (!isConnected || !recentWallet) return
+  // Set the client
+  useEffect(() => {
+    if (!recentWallet || client) return
+    async function getCosmWasmClient() {
+      if (!recentWallet) return
 
-    if (!client) {
+      const cosmClient = await getClient(recentWallet.network.rpc)
-      const getCosmWasmClient = async () => {
+      const client = {
-        const cosmClient = await getClient(recentWallet.network.rpc)
+        broadcast,
-
+        cosmWasmClient: cosmClient,
-        const client = {
+        recentWallet,
-          broadcast,
+        sign,
-          cosmWasmClient: cosmClient,
+        simulate,
-          recentWallet,
-          sign,
-          simulate,
-        }
-        useStore.setState({ client })
       }
-
+      useStore.setState({ client })
-      getCosmWasmClient()
     }
 
-    if (!address || address === params.address) return
+    getCosmWasmClient()
-    router.push(`/wallets/${address}`)
+  }, [recentWallet, client, simulate, sign, broadcast])
-  }, [address, broadcast, client, params, recentWallet, router, simulate, sign, status])
+
+  // Redirect when switching wallets or on first connection
+  useEffect(() => {
+    if (!address || address === addressInUrl) return
+    navigate(getRoute(getPage(pathname), address))
+  }, [address, addressInUrl, navigate, pathname])
 
   return address ? <ConnectedButton /> : <ConnectButton status={status} />
 }

src/components/Wallet/WalletConnectProvider.tsx

@@ -1,23 +1,16 @@
-'use client'
-
 import { ChainInfoID, WalletManagerProvider } from '@marsprotocol/wallet-connector'
 import { FC } from 'react'
 
 import { Button } from 'components/Button'
 import { CircularProgress } from 'components/CircularProgress'
 import { Cross } from 'components/Icons'
-import { ENV, ENV_MISSING_MESSAGE } from 'constants/env'
+import { ENV } from 'constants/env'
 
 type Props = {
   children?: React.ReactNode
 }
 
 export const WalletConnectProvider: FC<Props> = ({ children }) => {
-  if (!ENV.CHAIN_ID || !ENV.URL_REST || !ENV.URL_RPC || !ENV.WALLETS) {
-    console.error(ENV_MISSING_MESSAGE)
-    return null
-  }
-
   const chainInfoOverrides = {
     rpc: ENV.URL_RPC,
     rest: ENV.URL_REST,

src/components/pages/council.tsx

@@ -1,9 +0,0 @@
-import Overview from 'components/Council/Overview'
-
-interface Props {
-  params: PageParams
-}
-
-export default function Councilpage(props: Props) {
-  return <Overview params={props.params} />
-}

src/components/pages/portfolio.tsx

@@ -1,9 +0,0 @@
-import AccountOverview from 'components/Portfolio/AccountOverview'
-
-interface Props {
-  params: PageParams
-}
-
-export default function Portfoliopage(props: Props) {
-  return <AccountOverview params={props.params} />
-}

src/constants/env.ts

@@ -1,37 +1,39 @@
 interface EnvironmentVariables {
-  ADDRESS_ACCOUNT_NFT: string | undefined
+  ADDRESS_ACCOUNT_NFT: string
-  ADDRESS_CREDIT_MANAGER: string | undefined
+  ADDRESS_CREDIT_MANAGER: string
-  ADDRESS_INCENTIVES: string | undefined
+  ADDRESS_INCENTIVES: string
-  ADDRESS_ORACLE: string | undefined
+  ADDRESS_ORACLE: string
-  ADDRESS_RED_BANK: string | undefined
+  ADDRESS_RED_BANK: string
-  ADDRESS_SWAPPER: string | undefined
+  ADDRESS_SWAPPER: string
-  ADDRESS_ZAPPER: string | undefined
+  ADDRESS_ZAPPER: string
-  CHAIN_ID: string | undefined
+  CHAIN_ID: string
-  NETWORK: string | undefined
+  NETWORK: string
-  URL_GQL: string | undefined
+  URL_GQL: string
-  URL_REST: string | undefined
+  URL_REST: string
-  URL_RPC: string | undefined
+  URL_RPC: string
-  URL_API: string | undefined
+  URL_API: string
-  WALLETS: string[] | undefined
+  URL_APOLLO_APR: string
+  WALLETS: string[]
 }
 
 export const ENV: EnvironmentVariables = {
-  ADDRESS_ACCOUNT_NFT: process.env.NEXT_PUBLIC_ACCOUNT_NFT,
+  ADDRESS_ACCOUNT_NFT: process.env.NEXT_PUBLIC_ACCOUNT_NFT || '',
-  ADDRESS_CREDIT_MANAGER: process.env.NEXT_PUBLIC_CREDIT_MANAGER,
+  ADDRESS_CREDIT_MANAGER: process.env.NEXT_PUBLIC_CREDIT_MANAGER || '',
-  ADDRESS_INCENTIVES: process.env.NEXT_PUBLIC_INCENTIVES,
+  ADDRESS_INCENTIVES: process.env.NEXT_PUBLIC_INCENTIVES || '',
-  ADDRESS_ORACLE: process.env.NEXT_PUBLIC_ORACLE,
+  ADDRESS_ORACLE: process.env.NEXT_PUBLIC_ORACLE || '',
-  ADDRESS_RED_BANK: process.env.NEXT_PUBLIC_RED_BANK,
+  ADDRESS_RED_BANK: process.env.NEXT_PUBLIC_RED_BANK || '',
-  ADDRESS_SWAPPER: process.env.NEXT_PUBLIC_SWAPPER,
+  ADDRESS_SWAPPER: process.env.NEXT_PUBLIC_SWAPPER || '',
-  ADDRESS_ZAPPER: process.env.NEXT_PUBLIC_ZAPPER,
+  ADDRESS_ZAPPER: process.env.NEXT_PUBLIC_ZAPPER || '',
-  CHAIN_ID: process.env.NEXT_PUBLIC_CHAIN_ID,
+  CHAIN_ID: process.env.NEXT_PUBLIC_CHAIN_ID || '',
-  NETWORK: process.env.NEXT_PUBLIC_NETWORK,
+  NETWORK: process.env.NEXT_PUBLIC_NETWORK || '',
-  URL_GQL: process.env.NEXT_PUBLIC_GQL,
+  URL_GQL: process.env.NEXT_PUBLIC_GQL || '',
-  URL_REST: process.env.NEXT_PUBLIC_REST,
+  URL_REST: process.env.NEXT_PUBLIC_REST || '',
-  URL_RPC: process.env.NEXT_PUBLIC_RPC,
+  URL_RPC: process.env.NEXT_PUBLIC_RPC || '',
   URL_API: process.env.NEXT_PUBLIC_VERCEL_URL
     ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}/api`
-    : process.env.NEXT_PUBLIC_API,
+    : process.env.NEXT_PUBLIC_API || '',
-  WALLETS: process.env.NEXT_PUBLIC_WALLETS?.split(','),
+  URL_APOLLO_APR: process.env.NEXT_PUBLIC_APOLLO_APR || '',
+  WALLETS: process.env.NEXT_PUBLIC_WALLETS?.split(',') || [],
 }
 
 export const VERCEL_BYPASS = process.env.NEXT_PUBLIC_BYPASS
@@ -39,14 +41,3 @@ export const VERCEL_BYPASS = process.env.NEXT_PUBLIC_BYPASS
   : ''
 
 export const IS_TESTNET = ENV.NETWORK !== 'mainnet'
-
-export const ENV_MISSING_MESSAGE = () => {
-  const missing: string[] = []
-  Object.keys(ENV).forEach((key) => {
-    if (!ENV[key as keyof EnvironmentVariables]) {
-      missing.push(key)
-    }
-  })
-
-  return `Environment variable(s) missing for: ${missing.join(', ')}`
-}

src/hooks/useAccountDebts.tsx

@@ -0,0 +1,10 @@
+import useSWR from 'swr'
+
+import getAccountDebts from 'api/accounts/getAccountDebts'
+
+export default function useAccountDebts(accountId?: string) {
+  return useSWR(`accountDebts${accountId}`, () => getAccountDebts(accountId || ''), {
+    suspense: true,
+    isPaused: () => !accountId,
+  })
+}

src/hooks/useAccounts.tsx

@@ -0,0 +1,10 @@
+import useSWR from 'swr'
+
+import getAccounts from 'api/wallets/getAccounts'
+
+export default function useAccounts(address?: string) {
+  return useSWR(`accounts${address}`, () => getAccounts(address || ''), {
+    suspense: true,
+    isPaused: () => !address,
+  })
+}