From f61657488916481173cb33dd537050c6decee4d5 Mon Sep 17 00:00:00 2001 From: Adam Akbar Date: Tue, 28 Jun 2022 22:31:33 +0700 Subject: [PATCH 1/5] feat: refactor token pages --- components/v1/MarketMetadata.ts | 13 +++++- modules/tokenPage/TokenContainer.tsx | 66 ++++++++++++++++++++++++++++ pages/[chains]/markets/[token].tsx | 59 +++++++++++++++++++++++++ pages/[chains]/markets/index.tsx | 5 +++ 4 files changed, 141 insertions(+), 2 deletions(-) create mode 100644 modules/tokenPage/TokenContainer.tsx create mode 100644 pages/[chains]/markets/[token].tsx create mode 100644 pages/[chains]/markets/index.tsx diff --git a/components/v1/MarketMetadata.ts b/components/v1/MarketMetadata.ts index 9d962ba4..1a31dbcf 100644 --- a/components/v1/MarketMetadata.ts +++ b/components/v1/MarketMetadata.ts @@ -1,7 +1,7 @@ import { chain as Chains } from "wagmi"; // Markets Metadata -export type Metadata = { +export type MetadataToken = { logo: string; vaultLogo: string; vaultAddress: string; @@ -22,8 +22,16 @@ export type Metadata = { uniswapSwapURL: string; isETH: boolean; }; -export type MarketMetadata = Record; +export type MarketMetadata = Record; export type MarketMetadataRecord = Record; +type MapperNameToChainId = Record; +type MapperTokenToTokenId = Record; +export const MapperNameToChainId: MapperNameToChainId = { + arbitrum: Chains.arbitrumOne.id, +}; +export const MapperTokenToTokenId: MapperTokenToTokenId = { + ethrise: "0x46D06cf8052eA6FdbF71736AF33eD23686eA1452", +}; export const Metadata: MarketMetadataRecord = { /* Kovan chain is no longer supported */ // [Chains.kovan.id]: { @@ -51,6 +59,7 @@ export const Metadata: MarketMetadataRecord = { // isETH: true, // }, // }, + [Chains.arbitrumOne.id]: { ["0x46D06cf8052eA6FdbF71736AF33eD23686eA1452"]: { title: "ETHRISE", diff --git a/modules/tokenPage/TokenContainer.tsx b/modules/tokenPage/TokenContainer.tsx new file mode 100644 index 00000000..53f894da --- /dev/null +++ b/modules/tokenPage/TokenContainer.tsx @@ -0,0 +1,66 @@ +import { TabsList } from "@radix-ui/react-tabs"; +import ButtonConnectWalletMobile from "../../components/v1/Buttons/ConnectWalletMobile"; +import Footer from "../../uikit/layout/Footer"; +import BackgroundGradient from "../ethrisePage/component/BackgroundGradient"; +import LeveragedTokenBackingCard from "../ethrisePage/component/LeveragedTokenBackingCard"; +import LeveragedTokenInfoCard from "../ethrisePage/component/LeveragedTokenInfoCard"; +import MyAssetsCard from "../ethrisePage/component/MyAssetsCard"; +import PriceInfoCard from "../ethrisePage/component/PriceInfoCard"; +import TabsContentGrid from "../ethrisePage/component/TabsContentGrid"; +import VaultInfoCard from "../ethrisePage/component/VaultInfoCard"; +import { Root as TabsRoot } from "@radix-ui/react-tabs"; +import { Metadata as MetadataMarket, MetadataToken } from "../../components/v1/MarketMetadata"; +import { useMemo } from "react"; + +type TokenContainerProps = { + chainAddress: number; + tokenAddress: string; +}; + +function TokenContainer({ tokenAddress, chainAddress }: TokenContainerProps) { + const metadata = useMemo(() => { + return MetadataMarket[chainAddress][tokenAddress]; + }, [chainAddress, tokenAddress]); + + return ( + <> +
+ + + {/* Leverage Tab */} + + {/* Left Column */} + + {/* Right Column */} +
+ + + +
+ + + {/* Lend Tab */} + + {/* Left Column */} + + + {/* RightColumn */} +
+ + +
+ + +
+
+
+
+ +
+ +
+ + ); +} + +export { TokenContainer }; diff --git a/pages/[chains]/markets/[token].tsx b/pages/[chains]/markets/[token].tsx new file mode 100644 index 00000000..8124dcbc --- /dev/null +++ b/pages/[chains]/markets/[token].tsx @@ -0,0 +1,59 @@ +import type { NextPage } from "next"; +import Head from "next/head"; +import { chain } from "wagmi"; + +import MarketDetailPageMeta from "../../../components/v1/MarketDetailPage/MarketDetailPageMeta"; +import { MapperNameToChainId, MapperTokenToTokenId, Metadata, MetadataToken } from "../../../components/v1/MarketMetadata"; +import { DEFAULT_CHAIN, useWalletContext } from "../../../components/v1/Wallet"; +import { chain as Chains } from "wagmi"; + +import EthrisePageContainer from "../../../modules/ethrisePage/EthrisePageContainer"; +import { useRouter } from "next/router"; +import React, { useEffect, useMemo } from "react"; +import { TokenContainer } from "../../../modules/tokenPage/tokenContainer"; + +type PagesData = { + chainId: number; + tokenId: string; +}; +type QueryPage = { + token: string; + chains: string; +}; + +function TokenPage() { + const router = useRouter(); + const { token, chains } = router.query as QueryPage; + const { chain } = useWalletContext(); + const [metadata, setMetadata] = React.useState(); + const address = useMemo(() => { + return { + chainId: MapperNameToChainId[chains], + tokenId: MapperTokenToTokenId[token], + }; + }, [token, chains]); + + useEffect(() => { + if (address.chainId && address.tokenId) { + const currentData = Metadata[address.chainId][address.tokenId]; + setMetadata(currentData); + } + }, [address]); + + if (!address.chainId || !address.tokenId) { + return "Loading..."; + } + + return ( +
+ + {metadata?.title} Market | Risedle Protocol + + + + ; +
+ ); +} + +export default TokenPage; diff --git a/pages/[chains]/markets/index.tsx b/pages/[chains]/markets/index.tsx new file mode 100644 index 00000000..e785ae01 --- /dev/null +++ b/pages/[chains]/markets/index.tsx @@ -0,0 +1,5 @@ +import MarketsPageContainer from "../../../modules/marketsPage/MarketsPageContainer"; + +export default function MarketPages() { + return ; +} From d58f90e97be56bdab3c4502fdec6ab1a4f227d01 Mon Sep 17 00:00:00 2001 From: Adam Akbar Date: Wed, 29 Jun 2022 22:49:35 +0700 Subject: [PATCH 2/5] implement store --- components/v1/WarningHeader.tsx | 6 +- modules/tokenPage/PriceInfoCard.tsx | 35 + modules/tokenPage/TokenContainer.tsx | 73 +- modules/tokenPage/tokenStore.ts | 41 + package-lock.json | 25315 +------------------------ package.json | 3 +- pages/[chains]/markets/[token].tsx | 39 +- 7 files changed, 587 insertions(+), 24925 deletions(-) create mode 100644 modules/tokenPage/PriceInfoCard.tsx create mode 100644 modules/tokenPage/tokenStore.ts diff --git a/components/v1/WarningHeader.tsx b/components/v1/WarningHeader.tsx index df279877..f9679b6b 100644 --- a/components/v1/WarningHeader.tsx +++ b/components/v1/WarningHeader.tsx @@ -35,9 +35,9 @@ const WarningHeader: FunctionComponent = ({}) => { <>
- {[...Array(10)].map(() => { + {[...Array(10)].map((val, index) => { return ( - <> +

Use at your own risk

{getBscLogo("normal")} @@ -46,7 +46,7 @@ const WarningHeader: FunctionComponent = ({}) => {

Binance Smart Chain

{getBscLogo("gray")}
- +
); })}
diff --git a/modules/tokenPage/PriceInfoCard.tsx b/modules/tokenPage/PriceInfoCard.tsx new file mode 100644 index 00000000..5c38af91 --- /dev/null +++ b/modules/tokenPage/PriceInfoCard.tsx @@ -0,0 +1,35 @@ +import { FunctionComponent } from "react"; +import LeveragedTokenChart from "../ethrisePage/component/LeveragedTokenChart"; +import MainButton from "../ethrisePage/component/MainButton"; +import VaultChart from "../ethrisePage/component/VaultChart"; +import { useTokenStore } from "./tokenStore"; + +type PriceInfoCardProps = { + isVault?: boolean; +}; + +const PriceInfoCard: FunctionComponent = ({ isVault }) => { + const { state } = useTokenStore(); + const { status } = state; + if (status === "loaded") { + const { token, tokenId } = state; + const { vaultAddress, subtitle, title, logo } = token; + return ( +
+
+
+
+

{subtitle}

+

{title}

+
+ {title} +
+ {isVault && vaultAddress ? : } + +
+
+ ); + } else return null; +}; + +export default PriceInfoCard; diff --git a/modules/tokenPage/TokenContainer.tsx b/modules/tokenPage/TokenContainer.tsx index 53f894da..4377c5aa 100644 --- a/modules/tokenPage/TokenContainer.tsx +++ b/modules/tokenPage/TokenContainer.tsx @@ -5,52 +5,51 @@ import BackgroundGradient from "../ethrisePage/component/BackgroundGradient"; import LeveragedTokenBackingCard from "../ethrisePage/component/LeveragedTokenBackingCard"; import LeveragedTokenInfoCard from "../ethrisePage/component/LeveragedTokenInfoCard"; import MyAssetsCard from "../ethrisePage/component/MyAssetsCard"; -import PriceInfoCard from "../ethrisePage/component/PriceInfoCard"; import TabsContentGrid from "../ethrisePage/component/TabsContentGrid"; import VaultInfoCard from "../ethrisePage/component/VaultInfoCard"; import { Root as TabsRoot } from "@radix-ui/react-tabs"; -import { Metadata as MetadataMarket, MetadataToken } from "../../components/v1/MarketMetadata"; -import { useMemo } from "react"; +import PriceInfoCard from "./PriceInfoCard"; +import { useTokenStore } from "./tokenStore"; -type TokenContainerProps = { - chainAddress: number; - tokenAddress: string; -}; +const MainContent = () => { + const { state } = useTokenStore(); + if (state.status === "loaded") { + const { tokenId: tokenAddress } = state; + return ( + + + {/* Leverage Tab */} + + {/* Left Column */} + + {/* Right Column */} +
+ + + +
+ + {/* Lend Tab */} + + {/* Left Column */} + -function TokenContainer({ tokenAddress, chainAddress }: TokenContainerProps) { - const metadata = useMemo(() => { - return MetadataMarket[chainAddress][tokenAddress]; - }, [chainAddress, tokenAddress]); + {/* RightColumn */} +
+ + +
+ + + ); + } else return
loading...
; // TODO: loading view ?? +}; +function TokenContainer() { return ( <>
- - - {/* Leverage Tab */} - - {/* Left Column */} - - {/* Right Column */} -
- - - -
- - - {/* Lend Tab */} - - {/* Left Column */} - - - {/* RightColumn */} -
- - -
- - +