Skip to content

Commit

Permalink
feat: custom hooks
Browse files Browse the repository at this point in the history
  • Loading branch information
@jagnani73
jagnani73 committed Dec 5, 2023
1 parent 36477e4 commit 1859a4f
Show file tree
Hide file tree
Showing 15 changed files with 203 additions and 324 deletions.
11 changes: 7 additions & 4 deletions .storybook/preview.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 = {
Expand Down Expand Up @@ -53,11 +54,13 @@ import { Preview } from "@storybook/react";
const preview: Preview = {
decorators: [
(Story) => (
<GoldRushProvider
<CovalentProvider
apikey={import.meta.env.STORYBOOK_COVALENT_API_KEY}
>
<Story />
</GoldRushProvider>
<ChainsProvider>
<Story />
</ChainsProvider>
</CovalentProvider>
),
],
};
Expand Down
4 changes: 2 additions & 2 deletions src/components/Molecules/NFTs/NFTFloorPriceView/NFTFloorPriceView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<NFTFloorPriceViewProps> = ({
Expand All @@ -27,7 +27,7 @@ export const NFTFloorPriceView: React.FC<NFTFloorPriceViewProps> = ({
const [currency, setCurrency] = useState<CURRENCY>(CURRENCY.USD);
const [nativeCurrency, setNativeCurrency] = useState<Option<string>>(None);
const [chartColor, setColor] = useState<any>("");
const { covalentClient } = useGoldrush();
const { covalentClient } = useCovalent();

useEffect(() => {
(async () => {
Expand Down
4 changes: 2 additions & 2 deletions src/components/Molecules/NFTs/NFTSalesCountView/NFTSalesCountView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<NFTSalesCountViewProps> = ({
Expand All @@ -17,7 +17,7 @@ export const NFTSalesCountView: React.FC<NFTSalesCountViewProps> = ({
const [maybeResult, setResult] = useState<Option<any[]>>(None);
const [period, setPeriod] = useState<PERIOD>(PERIOD.DAYS_7);
const [chartColor, setColor] = useState<any>("");
const { covalentClient } = useGoldrush();
const { covalentClient } = useCovalent();

useEffect(() => {
(async () => {
Expand Down
4 changes: 2 additions & 2 deletions src/components/Molecules/NFTs/NFTVolumeView/NFTVolumeView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand All @@ -24,7 +24,7 @@ export const NFTVolumeView: React.FC<NFTVolumeViewProps> = ({
const [currency, setCurrency] = useState<CURRENCY>(CURRENCY.USD);
const [nativeCurrency, setNativeCurrency] = useState<Option<string>>(None);
const [chartColor, setColor] = useState<any>("");
const { covalentClient } = useGoldrush();
const { covalentClient } = useCovalent();

useEffect(() => {
(async () => {
Expand Down
4 changes: 2 additions & 2 deletions src/components/Organisms/NFTs/NFTDetailView/NFTDetailView.tsx
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -14,7 +14,7 @@ export const NFTDetailView: React.FC<NFTDetailViewProps> = ({
token_id,
}) => {
const [maybeResult, setResult] = useState<Option<NftTokenContract>>(None);
const { covalentClient } = useGoldrush();
const { covalentClient } = useCovalent();

useEffect(() => {
(async () => {
Expand Down
6 changes: 3 additions & 3 deletions src/components/Organisms/NFTs/NFTWalletCollectionView/NFTWalletCollectionView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<Option<NftTokenContractBalanceItem[]>>(None);
const { covalentClient } = useGoldrush();
const { covalentClient } = useCovalent();

useEffect(() => {
async function getData() {
Expand Down
4 changes: 2 additions & 2 deletions src/components/Organisms/NFTs/NFTWalletTokenListView/NFTWalletTokenListView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand All @@ -26,7 +26,7 @@ export const NFTWalletTokenListView: React.FC<NFTWalletTokenListViewProps> = ({
}) => {
const [maybeResult, setResult] =
useState<Option<NftTokenContractBalanceItem[]>>(None);
const { covalentClient } = useGoldrush();
const { covalentClient } = useCovalent();
const [error, setError] = useState({ error: false, error_message: "" });
const [allChains, setAllChains] = useState<Option<ChainItem[]>>(None);

Expand Down
4 changes: 2 additions & 2 deletions src/components/Organisms/TokenBalances/AddressActivityListView/AddressActivityListView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<
Expand All @@ -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<SortingState>([]);
const [rowSelection, setRowSelection] = useState(
row_selection_state ? row_selection_state : {}
Expand Down
4 changes: 2 additions & 2 deletions ...omponents/Organisms/TokenBalances/TokenBalancesListView/TokenBalancesListView.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<typeof TokenBalancesListView>;
Expand Down Expand Up @@ -43,7 +43,7 @@ export const MultiChainTokenBalancesList: Story = {
hide_small_balances,
}: TokenBalancesListViewProps) => {
const [resolvedAddress, setAddress] = useState<Option<string>>(None);
const { covalentClient } = useGoldrush();
const { covalentClient } = useCovalent();

useEffect(() => {
(async () => {
Expand Down
172 changes: 74 additions & 98 deletions src/components/Organisms/TokenBalances/TokenBalancesListView/TokenBalancesListView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -54,6 +55,9 @@ export const TokenBalancesListView: React.FC<TokenBalancesListViewProps> = ({
hide_small_balances,
on_transfer_click,
}) => {
const { covalentClient } = useCovalent();
const { chains } = useChains();

const [sorting, setSorting] = useState<SortingState>([
{
id: "pretty_quote",
Expand All @@ -63,17 +67,10 @@ export const TokenBalancesListView: React.FC<TokenBalancesListViewProps> = ({
const [rowSelection, setRowSelection] = useState({});
const [maybeResult, setResult] =
useState<Option<CrossChainBalanceItem[]>>(None);
const { covalentClient } = useGoldrush();
const [error, setError] = useState({ error: false, error_message: "" });
const [allChains, setAllChains] = useState<Option<ChainItem[]>>(None);
const [filterResult, setFilterResult] =
useState<Option<CrossChainBalanceItem[]>>(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<number>(0);

const handleTokenBalances = async (_address: string) => {
const promises = chain_names.map(async (chain) => {
Expand Down Expand Up @@ -104,8 +101,6 @@ export const TokenBalancesListView: React.FC<TokenBalancesListViewProps> = ({
};

useEffect(() => {
handleAllChains();

setWindowWidth(window.innerWidth);

const handleResize = () => {
Expand Down Expand Up @@ -182,41 +177,34 @@ export const TokenBalancesListView: React.FC<TokenBalancesListViewProps> = ({
/>
),
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 (
<div className="flex items-center gap-3 ">
<TokenAvatar
size={GRK_SIZES.EXTRA_SMALL}
chain_color={chainColor}
sub_url={protocol_url}
token_url={row.original.logo_url}
/>
<div className="flex flex-col">
<div style={{ color: chainColor }}>
{chain_label}
</div>
<label className="text-base">
{row.original.contract_display_name
? row.original.contract_display_name
: "FIXME"}
</label>
</div>
return (
<div className="flex items-center gap-3">
<TokenAvatar
size={GRK_SIZES.EXTRA_SMALL}
chain_color={chainColor}
sub_url={protocol_url}
token_url={row.original.logo_url}
/>
<div className="flex flex-col">
<div style={{ color: chainColor }}>
{chain_label}
</div>
);
},
});
<label className="text-base">
{row.original.contract_display_name
? row.original.contract_display_name
: "FIXME"}
</label>
</div>
</div>
);
},
},
{
Expand Down Expand Up @@ -423,45 +411,36 @@ export const TokenBalancesListView: React.FC<TokenBalancesListViewProps> = ({
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 (
<div className="flex items-center gap-3">
<TokenAvatar
size={GRK_SIZES.EXTRA_SMALL}
chain_color={chainColor}
sub_url={protocol_url}
token_url={row.original.logo_url}
/>
<div className="flex flex-col gap-1">
<div style={{ color: chainColor }}>
{chain_label}
</div>
<label className="text-base">
{row.getValue("contract_display_name")}
</label>
<div className="text-secondary">
{!mask_balances
? formattedNumber
: "*****"}{" "}
{row.original.contract_ticker_symbol}
</div>
</div>
return (
<div className="flex items-center gap-3">
<TokenAvatar
size={GRK_SIZES.EXTRA_SMALL}
chain_color={chainColor}
sub_url={protocol_url}
token_url={row.original.logo_url}
/>
<div className="flex flex-col gap-1">
<div style={{ color: chainColor }}>
{chain_label}
</div>
);
},
});
<label className="text-base">
{row.getValue("contract_display_name")}
</label>
<div className="text-secondary">
{!mask_balances ? formattedNumber : "*****"}{" "}
{row.original.contract_ticker_symbol}
</div>
</div>
</div>
);
},
},
{
Expand Down Expand Up @@ -663,23 +642,20 @@ export const TokenBalancesListView: React.FC<TokenBalancesListViewProps> = ({
},
})}
</span>
<div className="flex text-sm text-secondary">
<span className="flex">
{" "}
(
{filterResult.match({
None: () => (
<Skeleton
size={GRK_SIZES.EXTRA_EXTRA_SMALL}
/>
),
Some: (result) => {
return <span>{result.length}</span>;
},
})}{" "}
</span>
Tokens)
</div>
<span className="flex text-sm text-secondary">
{filterResult.match({
None: () => (
<Skeleton
size={GRK_SIZES.EXTRA_EXTRA_SMALL}
/>
),
Some: (result) => {
return (
<span>({result.length} Tokens)</span>
);
},
})}
</span>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 1859a4f

Please sign in to comment.