refactor: move cw20 token info to new screen

cudoventures · Nov 7, 2022 · e32fada · e32fada
1 parent 504f0e3
commit e32fada
Show file tree

Hide file tree

Showing 19 changed files with 225 additions and 120 deletions.
diff --git a/i18n.js b/i18n.js
@@ -12,6 +12,7 @@ module.exports = {
     'rgx:^/validators': ['validators', 'transactions', 'accounts', 'message_labels', 'message_contents'],
     'rgx:^/accounts': ['accounts', 'transactions', 'validators', 'message_labels', 'message_contents'],
     'rgx:^/params': ['params'],
+    'rgx:^/token': ['token', 'transactions'],
   },
   loadLocaleFrom: (lang, ns) => import(`./public/locales/${lang}/${ns}.json`).then((m) => m.default),
 };
diff --git a/public/locales/en/accounts.json b/public/locales/en/accounts.json
@@ -40,13 +40,5 @@
   "codeId": "Code Id",
   "instaBlock": "Instantiated At Block",
   "collateralTransactions": "Collateral Transactions",
-  "cw20tokens": "CW20 Tokens",
-  "cw20TokenDetails": "CW20 Token Details",
-  "name": "Name",
-  "denom": "Denom",
-  "exponent": "Exponent",
-  "circulatingSupply": "Circulating Supply",
-  "minter": "Minter",
-  "maxSupply": "Maximum Supply",
-  "projectUrl": "Project URL"
+  "cw20tokens": "CW20 Tokens"
 }
diff --git a/public/locales/en/token.json b/public/locales/en/token.json
@@ -0,0 +1,10 @@
+{
+  "overview": "CW20 Token Details",
+  "name": "Name",
+  "denom": "Denom",
+  "exponent": "Exponent",
+  "circulatingSupply": "Circulating Supply",
+  "minter": "Minter",
+  "maxSupply": "Maximum Supply",
+  "projectUrl": "Project URL"
+}
diff --git a/src/components/nav/components/seach_bar/hooks.tsx b/src/components/nav/components/seach_bar/hooks.tsx
@@ -7,12 +7,14 @@ import {
   BLOCK_DETAILS,
   TRANSACTION_DETAILS,
   PROFILE_DETAILS,
+  TOKEN_DETAILS,
 } from '@utils/go_to_page';
 import {
   useRecoilCallback,
 } from 'recoil';
 import { readValidator } from '@recoil/validators';
 import { toast } from 'react-toastify';
+import { fetchCW20TokenInfo } from '@src/screens/token_details/utils';
 
 export const useSearchBar = (t) => {
   const router = useRouter();
@@ -23,7 +25,7 @@ export const useSearchBar = (t) => {
       const validatorRegex = `^(${chainConfig.prefix.validator})`;
       const userRegex = `^(${chainConfig.prefix.account})`;
       const parsedValue = value.replace(/\s+/g, '');
-
+      const tokenInfo = await fetchCW20TokenInfo(parsedValue);
       if (new RegExp(consensusRegex).test(parsedValue)) {
         const validatorAddress = await snapshot.getPromise(readValidator(parsedValue));
         if (validatorAddress) {
@@ -33,6 +35,8 @@ export const useSearchBar = (t) => {
         }
       } else if (new RegExp(validatorRegex).test(parsedValue)) {
         router.push(VALIDATOR_DETAILS(parsedValue));
+      } else if (tokenInfo.name) {
+        router.push(TOKEN_DETAILS(parsedValue));
       } else if (new RegExp(userRegex).test(parsedValue)) {
         router.push(ACCOUNT_DETAILS(parsedValue));
       } else if (/^@/.test(parsedValue)) {

diff --git a/src/pages/token/[address].tsx b/src/pages/token/[address].tsx
@@ -0,0 +1,9 @@
+import TokenDetails from '@src/screens/token_details';
+
+const TokenDetailsPage = () => {
+  return (
+    <TokenDetails />
+  );
+};
+
+export default TokenDetailsPage;
diff --git a/src/screens/account_details/components/cw20_token_balances/components/desktop/index.tsx b/src/screens/account_details/components/cw20_token_balances/components/desktop/index.tsx
@@ -14,6 +14,7 @@ import {
 import { formatNumber } from '@utils/format_token';
 import { Cw20TokenBalance } from '@src/screens/account_details/types';
 import { getMiddleEllipsis } from '@utils/get_middle_ellipsis';
+import { TOKEN_DETAILS } from '@src/utils/go_to_page';
 import { columns } from './utils';
 
 const Desktop: React.FC<{
@@ -32,6 +33,7 @@ const Desktop: React.FC<{
           name={`${b.name} (${b.denom.toUpperCase()})`}
           address={b.tokenAddress}
           imageUrl={b.logo}
+          href={TOKEN_DETAILS}
         />
       ),
       balance: `${balance} ${b.denom.toUpperCase()}`,

diff --git a/src/screens/account_details/components/cw20_token_balances/components/mobile/index.tsx b/src/screens/account_details/components/cw20_token_balances/components/mobile/index.tsx
@@ -9,6 +9,7 @@ import { AvatarName } from '@components';
 import { formatNumber } from '@utils/format_token';
 import { Cw20TokenBalance } from '@src/screens/account_details/types';
 import { getMiddleEllipsis } from '@src/utils/get_middle_ellipsis';
+import { TOKEN_DETAILS } from '@src/utils/go_to_page';
 import { useStyles } from './styles';
 
 const Mobile: React.FC<{
@@ -35,6 +36,7 @@ const Mobile: React.FC<{
                   name={`${b.name} (${b.denom.toUpperCase()})`}
                   address={b.tokenAddress}
                   imageUrl={b.logo}
+                  href={TOKEN_DETAILS}
                 />
               </div>
               <div className={classes.flex}>

diff --git a/src/screens/account_details/hooks.ts b/src/screens/account_details/hooks.ts
@@ -20,7 +20,6 @@ import {
   fetchUnbondingBalance,
   fetchCosmWasmInstantiation,
   fetchCW20TokenBalances,
-  fetchCW20TokenInfo,
 } from './utils';
 
 const defaultTokenUnit: TokenUnit = {
@@ -66,13 +65,6 @@ const initialState: AccountDetailState = {
   },
   tab: 0,
   cw20TokenBalances: [],
-  cw20TokenInfo: {
-    name: '',
-    denom: '',
-    logo: '',
-    exponent: 0,
-    circulatingSupply: 0,
-  },
 };
 
 export const useAccountDetails = () => {
@@ -139,7 +131,6 @@ export const useAccountDetails = () => {
       fetchRewards(address),
       fetchCosmWasmInstantiation(address),
       fetchCW20TokenBalances(address),
-      fetchCW20TokenInfo(address),
     ];
     const [
       commission,
@@ -149,7 +140,6 @@ export const useAccountDetails = () => {
       rewards,
       cosmWasmInstantiation,
       cw20TokenBalances,
-      cw20TokenInfo,
     ] = await Promise.allSettled(promises);
 
     const formattedRawData: any = {};
@@ -163,7 +153,6 @@ export const useAccountDetails = () => {
 
     const rawData: any = {};
     rawData.cosmwasm = R.pathOr([], ['value'], cosmWasmInstantiation);
-    rawData.cw20TokenInfo = R.pathOr([], ['value'], cw20TokenInfo);
     handleSetState(rawData);
   };
 

diff --git a/src/screens/account_details/index.tsx b/src/screens/account_details/index.tsx
@@ -23,7 +23,6 @@ import {
 } from './components';
 import { useAccountDetails } from './hooks';
 import Cw20TokenBalances from './components/cw20_token_balances';
-import Cw20TokenOverview from './components/cw20_token_overview';
 
 const AccountDetails = () => {
   const { t } = useTranslation('accounts');
@@ -34,45 +33,6 @@ const AccountDetails = () => {
   } = useAccountDetails();
 
   const isSmartContract = state.cosmwasm.result_contract_address === state.overview.address;
-  const isCw20Token = state.cw20TokenInfo.name && state.cw20TokenInfo.name !== '';
-
-  let title = '';
-  if (isCw20Token) {
-    title = t('cw20TokenDetails');
-  } else if (isSmartContract) {
-    title = t('smartContractDetails');
-  } else {
-    title = t('accountDetails');
-  }
-
-  let overview;
-  if (isCw20Token) {
-    overview = (
-      <Cw20TokenOverview
-        className={classes.overview}
-        tokenInfo={state.cw20TokenInfo}
-      />
-    );
-  } else if (isSmartContract) {
-    overview = (
-      <ContractOverview
-        className={classes.overview}
-        address={state.cosmwasm.result_contract_address}
-        deployerAddress={state.cosmwasm.sender}
-        label={state.cosmwasm.label}
-        codeId={state.cosmwasm.code_id}
-        block={state.cosmwasm.transaction.block.height}
-      />
-    );
-  } else {
-    overview = (
-      <Overview
-        className={classes.overview}
-        withdrawalAddress={state.overview.withdrawalAddress}
-        address={state.overview.address}
-      />
-    );
-  }
 
   const tabs = [
     {
@@ -100,12 +60,12 @@ const AccountDetails = () => {
   return (
     <>
       <NextSeo
-        title={title}
+        title={isSmartContract ? t('smartContractDetails') : t('accountDetails')}
         openGraph={{
-          title,
+          title: isSmartContract ? t('smartContractDetails') : t('accountDetails'),
         }}
       />
-      <Layout navTitle={title}>
+      <Layout navTitle={isSmartContract ? t('smartContractDetails') : t('accountDetails')}>
         <LoadAndExist
           loading={state.loading}
           exists={state.exists}
@@ -121,7 +81,24 @@ const AccountDetails = () => {
               coverUrl={state.desmosProfile.coverUrl}
             />
             )}
-            {overview}
+            {isSmartContract
+              ? (
+                <ContractOverview
+                  className={classes.overview}
+                  address={state.cosmwasm.result_contract_address}
+                  deployerAddress={state.cosmwasm.sender}
+                  label={state.cosmwasm.label}
+                  codeId={state.cosmwasm.code_id}
+                  block={state.cosmwasm.transaction.block.height}
+                />
+              )
+              : (
+                <Overview
+                  className={classes.overview}
+                  withdrawalAddress={state.overview.withdrawalAddress}
+                  address={state.overview.address}
+                />
+              )}
             {isSmartContract
               ? <SimpleBalance total={state.balance.total} />
               : (

diff --git a/src/screens/account_details/styles.ts b/src/screens/account_details/styles.ts
@@ -47,11 +47,6 @@ export const useStyles = () => {
             // gridColumn: '1 / 3',
           },
         },
-        cw20TokenInfo: {
-          [theme.breakpoints.up('lg')]: {
-            // gridColumn: '1 / 3',
-          },
-        },
       });
     },
   )();

diff --git a/src/screens/account_details/types.ts b/src/screens/account_details/types.ts
@@ -42,16 +42,6 @@ export type Cw20TokenBalance = {
   balance: number
 }
 
-export type Cw20TokenInfo = {
-  name: string,
-  denom: string,
-  exponent: number,
-  circulatingSupply: number,
-  maxSupply?: number,
-  minterAddress?: string,
-  projectUrl?: string,
-}
-
 export type AccountDetailState = {
   loading: boolean;
   exists: boolean;
@@ -66,5 +56,4 @@ export type AccountDetailState = {
   cosmwasm: CosmwasmType;
   tab: number;
   cw20TokenBalances: Cw20TokenBalance[];
-  cw20TokenInfo: Cw20TokenInfo;
 }
diff --git a/src/screens/account_details/utils.ts b/src/screens/account_details/utils.ts
@@ -14,7 +14,7 @@ import {
   CosmWasmInstantiateDocument,
 } from '@graphql/cosmwasm';
 import {
-  Cw20TokenBalancesDocument, Cw20TokenInfoDocument,
+  Cw20TokenBalancesDocument,
 } from '@src/graphql/cw20_tokens';
 
 export const fetchCommission = async (address: string) => {
@@ -187,40 +187,3 @@ export const fetchCW20TokenBalances = async (address: string) => {
     return defaultReturnValue;
   }
 };
-
-export const fetchCW20TokenInfo = async (address: string) => {
-  const defaultReturnValue = {
-    cw20TokenInfo: {
-      name: '',
-      denom: '',
-      logo: '',
-      exponent: 0,
-      circulatingSupply: 0,
-      maxSupply: 0,
-      minterAddress: '',
-      projectUrl: '',
-    },
-  };
-
-  try {
-    const { data } = await axios.post(process.env.NEXT_PUBLIC_GRAPHQL_URL, {
-      variables: {
-        address,
-      },
-      query: Cw20TokenInfoDocument,
-    });
-    const tokenInfo = R.pathOr(defaultReturnValue, ['data', 'cw20token_info_by_pk'], data);
-
-    return {
-      name: tokenInfo.name,
-      denom: tokenInfo.symbol,
-      circulatingSupply: tokenInfo.circulating_supply,
-      exponent: tokenInfo.decimals,
-      maxSupply: tokenInfo.max_supply,
-      minterAddress: tokenInfo.minter,
-      projectUrl: tokenInfo.project_url,
-    };
-  } catch (error) {
-    return defaultReturnValue;
-  }
-};
diff --git a/.../components/cw20_token_overview/index.tsx → ...ken_details/components/overview/index.tsx b/.../components/cw20_token_overview/index.tsx → ...ken_details/components/overview/index.tsx
@@ -12,7 +12,7 @@ const Cw20TokenOverview: React.FC<{
     return null;
   }
 
-  const { t } = useTranslation('accounts');
+  const { t } = useTranslation('token');
 
   const details = [
     {

diff --git a/src/screens/token_details/hooks.ts b/src/screens/token_details/hooks.ts
@@ -0,0 +1,38 @@
+import {
+  useState, useEffect,
+} from 'react';
+import * as R from 'ramda';
+import { useRouter } from 'next/router';
+import { Cw20TokenInfo } from './types';
+import { fetchCW20TokenInfo } from './utils';
+
+const initialState: Cw20TokenInfo = {
+  address: '',
+  name: '',
+  denom: '',
+  exponent: 0,
+  circulatingSupply: 0,
+};
+
+export const useTokenDetails = () => {
+  const router = useRouter();
+  const [state, setState] = useState<Cw20TokenInfo>(initialState);
+
+  const handleSetState = (stateChange: any) => {
+    setState((prevState) => R.mergeDeepLeft(stateChange, prevState));
+  };
+
+  useEffect(() => {
+    fetchTokenInfo();
+  }, [router.query.address]);
+
+  const fetchTokenInfo = async () => {
+    const address = router.query.address as string;
+    const tokenInfo = await fetchCW20TokenInfo(address);
+    handleSetState(tokenInfo);
+  };
+
+  return {
+    state,
+  };
+};