diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index a8d503b5..86b2be7b 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -1,6 +1,7 @@ import "../src/tailwind-output.css"; import { themes } from "@storybook/theming"; -import { GoldRushProvider } from "../src/utils/store/Goldrush"; +import { CovalentProvider } from "../src/utils/store/Covalent"; +import { ChainsProvider } from "../src/utils/store/Chains"; // import { useDarkMode } from 'storybook-dark-mode' // uncomment out this one line for dark mode export const parameters = { @@ -53,11 +54,13 @@ import { Preview } from "@storybook/react"; const preview: Preview = { decorators: [ (Story) => ( - - - + + + + ), ], }; diff --git a/src/components/Molecules/NFTs/NFTFloorPriceView/NFTFloorPriceView.tsx b/src/components/Molecules/NFTs/NFTFloorPriceView/NFTFloorPriceView.tsx index 0e8bd632..147dfb88 100644 --- a/src/components/Molecules/NFTs/NFTFloorPriceView/NFTFloorPriceView.tsx +++ b/src/components/Molecules/NFTs/NFTFloorPriceView/NFTFloorPriceView.tsx @@ -15,7 +15,7 @@ import { PERIOD, } from "@/utils/constants/shared.constants"; import { CHART_COLORS } from "@/utils/constants/shared.constants"; -import { useGoldrush } from "@/utils/store/Goldrush"; +import { useCovalent } from "@/utils/store/Covalent"; import { type NFTFloorPriceViewProps } from "@/utils/types/molecules.types"; export const NFTFloorPriceView: React.FC = ({ @@ -27,7 +27,7 @@ export const NFTFloorPriceView: React.FC = ({ const [currency, setCurrency] = useState(CURRENCY.USD); const [nativeCurrency, setNativeCurrency] = useState>(None); const [chartColor, setColor] = useState(""); - const { covalentClient } = useGoldrush(); + const { covalentClient } = useCovalent(); useEffect(() => { (async () => { diff --git a/src/components/Molecules/NFTs/NFTSalesCountView/NFTSalesCountView.tsx b/src/components/Molecules/NFTs/NFTSalesCountView/NFTSalesCountView.tsx index 9a91c39c..bf95d095 100644 --- a/src/components/Molecules/NFTs/NFTSalesCountView/NFTSalesCountView.tsx +++ b/src/components/Molecules/NFTs/NFTSalesCountView/NFTSalesCountView.tsx @@ -7,7 +7,7 @@ import { TypographyH4 } from "@/components/ui/typography"; import { Skeleton } from "@/components/ui/skeleton"; import { GRK_SIZES, PERIOD } from "@/utils/constants/shared.constants"; import { CHART_COLORS } from "@/utils/constants/shared.constants"; -import { useGoldrush } from "@/utils/store/Goldrush"; +import { useCovalent } from "@/utils/store/Covalent"; import { type NFTSalesCountViewProps } from "@/utils/types/molecules.types"; export const NFTSalesCountView: React.FC = ({ @@ -17,7 +17,7 @@ export const NFTSalesCountView: React.FC = ({ const [maybeResult, setResult] = useState>(None); const [period, setPeriod] = useState(PERIOD.DAYS_7); const [chartColor, setColor] = useState(""); - const { covalentClient } = useGoldrush(); + const { covalentClient } = useCovalent(); useEffect(() => { (async () => { diff --git a/src/components/Molecules/NFTs/NFTVolumeView/NFTVolumeView.tsx b/src/components/Molecules/NFTs/NFTVolumeView/NFTVolumeView.tsx index c223bc5c..73630d67 100644 --- a/src/components/Molecules/NFTs/NFTVolumeView/NFTVolumeView.tsx +++ b/src/components/Molecules/NFTs/NFTVolumeView/NFTVolumeView.tsx @@ -11,7 +11,7 @@ import { PERIOD, } from "@/utils/constants/shared.constants"; import { CHART_COLORS } from "@/utils/constants/shared.constants"; -import { useGoldrush } from "@/utils/store/Goldrush"; +import { useCovalent } from "@/utils/store/Covalent"; import { type NFTVolumeViewProps } from "@/utils/types/molecules.types"; import { prettifyCurrency } from "@covalenthq/client-sdk"; @@ -24,7 +24,7 @@ export const NFTVolumeView: React.FC = ({ const [currency, setCurrency] = useState(CURRENCY.USD); const [nativeCurrency, setNativeCurrency] = useState>(None); const [chartColor, setColor] = useState(""); - const { covalentClient } = useGoldrush(); + const { covalentClient } = useCovalent(); useEffect(() => { (async () => { diff --git a/src/components/Organisms/NFTs/NFTDetailView/NFTDetailView.tsx b/src/components/Organisms/NFTs/NFTDetailView/NFTDetailView.tsx index d7e0f81d..ce80d6b6 100644 --- a/src/components/Organisms/NFTs/NFTDetailView/NFTDetailView.tsx +++ b/src/components/Organisms/NFTs/NFTDetailView/NFTDetailView.tsx @@ -1,6 +1,6 @@ import { Separator } from "@/components/ui/separator"; import { TypographyH1, TypographyH4 } from "@/components/ui/typography"; -import { useGoldrush } from "@/utils/store/Goldrush"; +import { useCovalent } from "@/utils/store/Covalent"; import { NFTSalesCountView } from "@/components/Molecules/NFTs/NFTSalesCountView/NFTSalesCountView"; import { NFTFloorPriceView } from "@/components/Molecules/NFTs/NFTFloorPriceView/NFTFloorPriceView"; import { type Option, Some, None } from "@/utils/option"; @@ -14,7 +14,7 @@ export const NFTDetailView: React.FC = ({ token_id, }) => { const [maybeResult, setResult] = useState>(None); - const { covalentClient } = useGoldrush(); + const { covalentClient } = useCovalent(); useEffect(() => { (async () => { diff --git a/src/components/Organisms/NFTs/NFTWalletCollectionView/NFTWalletCollectionView.tsx b/src/components/Organisms/NFTs/NFTWalletCollectionView/NFTWalletCollectionView.tsx index f4b43884..fc71b5e2 100644 --- a/src/components/Organisms/NFTs/NFTWalletCollectionView/NFTWalletCollectionView.tsx +++ b/src/components/Organisms/NFTs/NFTWalletCollectionView/NFTWalletCollectionView.tsx @@ -16,15 +16,15 @@ import { Badge } from "@/components/ui/badge"; import { AccountCardView } from "@/components/Molecules/AccountCardView/AccountCardView"; import { type NFTWalletCollectionViewProps } from "@/utils/types/organisms.types"; import { Skeleton } from "@/components/ui/skeleton"; -import sum from "lodash/sum"; -import { useGoldrush } from "@/utils/store/Goldrush"; +import { sum } from "lodash"; +import { useCovalent } from "@/utils/store/Covalent"; export const NFTWalletCollectionView: React.FC< NFTWalletCollectionViewProps > = ({ chain_name, address }) => { const [maybeResult, setResult] = useState>(None); - const { covalentClient } = useGoldrush(); + const { covalentClient } = useCovalent(); useEffect(() => { async function getData() { diff --git a/src/components/Organisms/NFTs/NFTWalletTokenListView/NFTWalletTokenListView.tsx b/src/components/Organisms/NFTs/NFTWalletTokenListView/NFTWalletTokenListView.tsx index 18c3faf2..8efd38b0 100644 --- a/src/components/Organisms/NFTs/NFTWalletTokenListView/NFTWalletTokenListView.tsx +++ b/src/components/Organisms/NFTs/NFTWalletTokenListView/NFTWalletTokenListView.tsx @@ -16,7 +16,7 @@ import flatMap from "lodash/flatMap"; import sum from "lodash/sum"; import { AccountCardView } from "@/components/Molecules/AccountCardView/AccountCardView"; import { Skeleton } from "@/components/ui/skeleton"; -import { useGoldrush } from "@/utils/store/Goldrush"; +import { useCovalent } from "@/utils/store/Covalent"; import { type NFTWalletTokenListViewProps } from "@/utils/types/organisms.types"; import { TokenAvatar } from "@/components/Atoms/TokenAvatar/TokenAvatar"; @@ -26,7 +26,7 @@ export const NFTWalletTokenListView: React.FC = ({ }) => { const [maybeResult, setResult] = useState>(None); - const { covalentClient } = useGoldrush(); + const { covalentClient } = useCovalent(); const [error, setError] = useState({ error: false, error_message: "" }); const [allChains, setAllChains] = useState>(None); diff --git a/src/components/Organisms/TokenBalances/AddressActivityListView/AddressActivityListView.tsx b/src/components/Organisms/TokenBalances/AddressActivityListView/AddressActivityListView.tsx index e98365f8..96e88570 100644 --- a/src/components/Organisms/TokenBalances/AddressActivityListView/AddressActivityListView.tsx +++ b/src/components/Organisms/TokenBalances/AddressActivityListView/AddressActivityListView.tsx @@ -25,7 +25,7 @@ import { TokenAvatar } from "@/components/Atoms/TokenAvatar/TokenAvatar"; import { TableHeaderSorting } from "@/components/ui/tableHeaderSorting"; import { IconWrapper } from "@/components/Atoms/IconWrapper/IconWrapper"; import { GRK_SIZES } from "@/utils/constants/shared.constants"; -import { useGoldrush } from "@/utils/store/Goldrush"; +import { useCovalent } from "@/utils/store/Covalent"; import { type AddressActivityListViewProps } from "@/utils/types/organisms.types"; export const AddressActivityListView: React.FC< @@ -36,7 +36,7 @@ export const AddressActivityListView: React.FC< get_row_selection_state, row_selection_state, }) => { - const { covalentClient } = useGoldrush(); + const { covalentClient } = useCovalent(); const [sorting, setSorting] = useState([]); const [rowSelection, setRowSelection] = useState( row_selection_state ? row_selection_state : {} diff --git a/src/components/Organisms/TokenBalances/TokenBalancesListView/TokenBalancesListView.stories.tsx b/src/components/Organisms/TokenBalances/TokenBalancesListView/TokenBalancesListView.stories.tsx index a63af1aa..58d94cfe 100644 --- a/src/components/Organisms/TokenBalances/TokenBalancesListView/TokenBalancesListView.stories.tsx +++ b/src/components/Organisms/TokenBalances/TokenBalancesListView/TokenBalancesListView.stories.tsx @@ -2,7 +2,7 @@ import { type Meta, type StoryObj } from "@storybook/react"; import { TokenBalancesListView } from "./TokenBalancesListView"; import { useEffect, useState } from "react"; import { type Option, None, Some } from "@/utils/option"; -import { useGoldrush } from "@/utils/store/Goldrush"; +import { useCovalent } from "@/utils/store/Covalent"; import { type TokenBalancesListViewProps } from "@/utils/types/organisms.types"; type Story = StoryObj; @@ -43,7 +43,7 @@ export const MultiChainTokenBalancesList: Story = { hide_small_balances, }: TokenBalancesListViewProps) => { const [resolvedAddress, setAddress] = useState>(None); - const { covalentClient } = useGoldrush(); + const { covalentClient } = useCovalent(); useEffect(() => { (async () => { diff --git a/src/components/Organisms/TokenBalances/TokenBalancesListView/TokenBalancesListView.tsx b/src/components/Organisms/TokenBalances/TokenBalancesListView/TokenBalancesListView.tsx index a6b61eb9..2f68f9b3 100644 --- a/src/components/Organisms/TokenBalances/TokenBalancesListView/TokenBalancesListView.tsx +++ b/src/components/Organisms/TokenBalances/TokenBalancesListView/TokenBalancesListView.tsx @@ -41,7 +41,8 @@ import { TableHeaderSorting } from "@/components/ui/tableHeaderSorting"; import { sum } from "lodash"; import { IconWrapper } from "@/components/Atoms/IconWrapper/IconWrapper"; import { GRK_SIZES } from "@/utils/constants/shared.constants"; -import { useGoldrush } from "@/utils/store/Goldrush"; +import { useChains } from "@/utils/store/Chains"; +import { useCovalent } from "@/utils/store/Covalent"; import { type CrossChainBalanceItem, type TokenBalancesListViewProps, @@ -54,6 +55,9 @@ export const TokenBalancesListView: React.FC = ({ hide_small_balances, on_transfer_click, }) => { + const { covalentClient } = useCovalent(); + const { chains } = useChains(); + const [sorting, setSorting] = useState([ { id: "pretty_quote", @@ -63,17 +67,10 @@ export const TokenBalancesListView: React.FC = ({ const [rowSelection, setRowSelection] = useState({}); const [maybeResult, setResult] = useState>(None); - const { covalentClient } = useGoldrush(); const [error, setError] = useState({ error: false, error_message: "" }); - const [allChains, setAllChains] = useState>(None); const [filterResult, setFilterResult] = useState>(None); - const [windowWidth, setWindowWidth] = useState(0); - - const handleAllChains = async () => { - const allChainsResp = await covalentClient.BaseService.getAllChains(); - setAllChains(new Some(allChainsResp.data.items)); - }; + const [windowWidth, setWindowWidth] = useState(0); const handleTokenBalances = async (_address: string) => { const promises = chain_names.map(async (chain) => { @@ -104,8 +101,6 @@ export const TokenBalancesListView: React.FC = ({ }; useEffect(() => { - handleAllChains(); - setWindowWidth(window.innerWidth); const handleResize = () => { @@ -182,41 +177,34 @@ export const TokenBalancesListView: React.FC = ({ /> ), cell: ({ row }) => { - return allChains.match({ - None: () => <>, - Some: (chains) => { - const chain: ChainItem = chains.filter( - (o) => o.name === row.original.chain - )[0]; - const chainColor = chain.color_theme.hex; - const chain_label = ( - chain?.label ? chain.label : "FIXME" - ).replace(" Mainnet", ""); - const protocol_url = - row.original.logo_urls.protocol_logo_url; + const chain: ChainItem | null = + chains?.find((o) => o.name === row.original.chain) ?? null; + const chainColor = chain?.color_theme.hex; + const chain_label = ( + chain?.label ? chain.label : "FIXME" + ).replace(" Mainnet", ""); + const protocol_url = row.original.logo_urls.protocol_logo_url; - return ( -
- -
-
- {chain_label} -
- -
+ return ( +
+ +
+
+ {chain_label}
- ); - }, - }); + +
+
+ ); }, }, { @@ -423,45 +411,36 @@ export const TokenBalancesListView: React.FC = ({ maximumFractionDigits: 4, }); - return allChains.match({ - None: () => <>, - Some: (chains) => { - const chain: ChainItem = chains.filter( - (o) => o.name === row.original.chain - )[0]; - const chainColor = chain.color_theme.hex; - const chain_label = ( - chain?.label ? chain.label : "FIXME" - ).replace(" Mainnet", ""); - const protocol_url = - row.original.logo_urls.protocol_logo_url; + const chain: ChainItem | null = + chains?.find((o) => o.name === row.original.chain) ?? null; + const chainColor = chain?.color_theme.hex; + const chain_label = ( + chain?.label ? chain.label : "FIXME" + ).replace(" Mainnet", ""); + const protocol_url = row.original.logo_urls.protocol_logo_url; - return ( -
- -
-
- {chain_label} -
- -
- {!mask_balances - ? formattedNumber - : "*****"}{" "} - {row.original.contract_ticker_symbol} -
-
+ return ( +
+ +
+
+ {chain_label}
- ); - }, - }); + +
+ {!mask_balances ? formattedNumber : "*****"}{" "} + {row.original.contract_ticker_symbol} +
+
+
+ ); }, }, { @@ -663,23 +642,20 @@ export const TokenBalancesListView: React.FC = ({ }, })} -
- - {" "} - ( - {filterResult.match({ - None: () => ( - - ), - Some: (result) => { - return {result.length}; - }, - })}{" "} - - Tokens) -
+ + {filterResult.match({ + None: () => ( + + ), + Some: (result) => { + return ( + ({result.length} Tokens) + ); + }, + })} +
diff --git a/src/components/Organisms/TokenBalances/TokenTransfersListView/TokenTransfersListView.tsx b/src/components/Organisms/TokenBalances/TokenTransfersListView/TokenTransfersListView.tsx index ec89eef1..4f4ae9de 100644 --- a/src/components/Organisms/TokenBalances/TokenTransfersListView/TokenTransfersListView.tsx +++ b/src/components/Organisms/TokenBalances/TokenTransfersListView/TokenTransfersListView.tsx @@ -52,7 +52,8 @@ import { type BlockTransactionWithContractTransfersWithDelta, type TokenTransferMeta, } from "@/utils/types/organisms.types"; -import { useGoldrush } from "@/utils/store/Goldrush"; +import { useChains } from "@/utils/store/Chains"; +import { useCovalent } from "@/utils/store/Covalent"; const columns: ColumnDef[] = [ { @@ -209,7 +210,9 @@ export const TokenTransfersListView: React.FC = ({ address, contract_address, }) => { - const { covalentClient } = useGoldrush(); + const { covalentClient } = useCovalent(); + const { chains } = useChains(); + const [sorting, setSorting] = useState([]); const [rowSelection, setRowSelection] = useState({}); const [paginator, setPaginator] = useState({ @@ -222,17 +225,8 @@ export const TokenTransfersListView: React.FC = ({ None ); const [error, setError] = useState({ error: false, error_message: "" }); - const [allChains, setAllChains] = useState>(None); const [maybeMeta, setMeta] = useState>(None); - useEffect(() => { - (async () => { - const allChainsResp = - await covalentClient.BaseService.getAllChains(); - setAllChains(new Some(allChainsResp.data.items)); - })(); - }, []); - useEffect(() => { setResult(None); (async () => { @@ -465,13 +459,12 @@ export const TokenTransfersListView: React.FC = ({ return (
-
+
-
- {" "} +
Network -
+
{maybeMeta.match({ None: () => ( @@ -480,43 +473,33 @@ export const TokenTransfersListView: React.FC = ({ /> ), Some: (result) => { - return allChains.match({ - None: () => null, - Some: (chains) => { - const chain = chains.filter( - (o) => - o.name === - result.chain_name - )[0]; - return ( - <> - - - { - chain?.category_label - } - - - ); - }, - }); + const chain: ChainItem | null = + chains?.find( + (o) => + o.name === result.chain_name + ) ?? null; + return ( + <> + + + {chain?.category_label} + + + ); }, })}
-
- {" "} +
Token -
+
{maybeMeta.match({ None: () => ( diff --git a/src/index.ts b/src/index.ts index 96369ca3..76c58fa6 100644 --- a/src/index.ts +++ b/src/index.ts @@ -2,4 +2,4 @@ export { AddressActivityListView } from "./components/Organisms/TokenBalances/Ad export { TokenBalancesListView } from "./components/Organisms/TokenBalances/TokenBalancesListView/TokenBalancesListView"; export { TokenTransfersListView } from "./components/Organisms/TokenBalances/TokenTransfersListView/TokenTransfersListView"; export { NFTWalletTokenListView } from "./components/Organisms/NFTs/NFTWalletTokenListView/NFTWalletTokenListView"; -export { GoldRushProvider } from "./utils/store/Goldrush"; +export { CovalentProvider as GoldRushProvider } from "./utils/store/Covalent"; diff --git a/src/utils/store/Chains.tsx b/src/utils/store/Chains.tsx new file mode 100644 index 00000000..ea03cd31 --- /dev/null +++ b/src/utils/store/Chains.tsx @@ -0,0 +1,40 @@ +import type { ReactNode } from "react"; +import { createContext, useContext, useEffect, useState } from "react"; +import { useCovalent } from "./Covalent"; +import { type ChainItem } from "@covalenthq/client-sdk"; + +interface ChainsType { + chains: ChainItem[] | null; +} + +interface ChainsProviderProps { + children: ReactNode; +} + +const ChainsContext = createContext({} as ChainsType); + +export const ChainsProvider: React.FC = ({ children }) => { + const { covalentClient } = useCovalent(); + + const [chains, setChains] = useState(null); + + useEffect(() => { + (async () => { + try { + const allChainsResp = + await covalentClient.BaseService.getAllChains(); + setChains(allChainsResp.data.items); + } catch (error) { + console.error(error); + } + })(); + }, []); + + return ( + + {children} + + ); +}; + +export const useChains = () => useContext(ChainsContext); diff --git a/src/utils/store/Covalent.tsx b/src/utils/store/Covalent.tsx new file mode 100644 index 00000000..33e0ab9e --- /dev/null +++ b/src/utils/store/Covalent.tsx @@ -0,0 +1,35 @@ +import { createContext, useContext, useMemo } from "react"; +import { CovalentClient } from "@covalenthq/client-sdk"; +import { Toaster } from "@/components/ui/toaster"; + +interface CovalentContextType { + covalentClient: CovalentClient; +} + +interface CovalentProviderProps { + children: React.ReactNode; + apikey: string; +} + +const CovalentContext = createContext( + {} as CovalentContextType +); + +export const CovalentProvider: React.FC = ({ + children, + apikey, +}) => { + const covalentClient = useMemo( + () => new CovalentClient(apikey), + [apikey] + ); + + return ( + + {children} + + + ); +}; + +export const useCovalent = () => useContext(CovalentContext); diff --git a/src/utils/store/Goldrush.tsx b/src/utils/store/Goldrush.tsx deleted file mode 100644 index 8a2ecd47..00000000 --- a/src/utils/store/Goldrush.tsx +++ /dev/null @@ -1,158 +0,0 @@ -import type { ReactNode } from "react"; -import { createContext, useContext, useMemo } from "react"; -import { updateTheme } from "../functions"; -import { CovalentClient } from "@covalenthq/client-sdk"; -import { Toaster } from "@/components/ui/toaster"; - -interface GoldrushContextType { - covalentClient: CovalentClient; -} - -interface GoldRushProviderProps { - children: ReactNode; - apikey: string; - mode?: "dark" | "light"; - theme?: "classic" | "neo"; - border_radius?: "none" | "small" | "medium" | "large" | "full"; - color?: - | "slate" - | "stone" - | "red" - | "orange" - | "amber" - | "yellow" - | "lime" - | "green" - | "emerald" - | "cyan" - | "sky" - | "blue" - | "indigo" - | "violet" - | "purple" - | "fuchsia" - | "pink" - | "rose"; -} - -const GoldRushContext = createContext( - {} as GoldrushContextType -); - -export const GoldRushProvider: React.FC = ({ - children, - apikey, - mode = "light", - theme = "classic", - color = "slate", - border_radius = "medium", -}) => { - const covalentClient = useMemo( - () => new CovalentClient(apikey), - [apikey] - ); - - function changeOnlyColor(accentcolor: string, border_radius: string) { - if (typeof document !== "undefined") { - const theme = { - accentcolor: accentcolor, - borderradius: border_radius, - }; - updateTheme(theme); - } - } - - function changeMode(mode: "dark" | "light") { - if (typeof document !== "undefined") { - const body = document.body; - const root = document.documentElement; - - if (mode === "dark") { - body.classList.add("dark"); - root.classList.add("dark"); - return; - } - body.classList.remove("dark"); - root.classList.remove("dark"); - } - } - - function changeToNeo() { - if (typeof document !== "undefined") { - const theme = { - backgroundColor: { - light: "#eff6ff", - dark: "#1d4ed8", - }, - borderColor: { - light: "#bfdbfe", - dark: "#1e40af", - }, - secondary: { - light: "#64748b", - }, - surfaceColor: { - light: "#bfdbfe", - dark: "#bfdbfe", - }, - secondaryColor: { - light: "#64748b", - dark: "#64748b", - }, - }; - updateTheme(theme); - const body = document.body; - body.classList.add("neo"); - } - } - - function changeToClassic() { - if (typeof document !== "undefined") { - const theme = { - backgroundColor: { - light: "#ffffff", - dark: "#030711", - }, - borderColor: { - light: "#e5e7eb", - dark: "#1f2937", - }, - surfaceColor: { - light: "#e5e7eb", - dark: "#e5e7eb", - }, - secondaryColor: { - light: "#94a3b8", - dark: "#94a3b8", - }, - }; - updateTheme(theme); - const body = document.body; - body.classList.remove("neo"); - } - } - if (typeof document !== "undefined") { - changeOnlyColor(color, border_radius); - changeMode(mode); - switch (theme) { - case "classic": - changeToClassic(); - break; - case "neo": - changeToNeo(); - break; - default: - changeToClassic(); - break; - } - } - - return ( - - {children} - - - ); -}; - -export const useGoldrush = () => useContext(GoldRushContext);