fix: remove initialize token image in provider (#559)

Author: jinoosss

packages/adena-extension/src/common/provider/wallet/wallet-provider.tsx

@@ -31,7 +31,7 @@ export const WalletProvider: React.FC<React.PropsWithChildren<unknown>> = ({ chi
 
   const [walletStatus, setWalletStatus] = useRecoilState(WalletState.state);
 
-  const [tokenMetainfos, setTokenMetainfos] = useRecoilState(TokenState.tokenMetainfos);
+  const [tokenMetainfos] = useRecoilState(TokenState.tokenMetainfos);
 
   const [networkMetainfos, setNetworkMetainfos] = useRecoilState(NetworkState.networkMetainfos);
 
@@ -95,7 +95,6 @@ export const WalletProvider: React.FC<React.PropsWithChildren<unknown>> = ({ chi
     if (currentAccount) {
       setCurrentAccount(currentAccount);
       await accountService.changeCurrentAccount(currentAccount);
-      await initTokenMetainfos(currentAccount.id);
     }
     return true;
   }
@@ -124,13 +123,6 @@ export const WalletProvider: React.FC<React.PropsWithChildren<unknown>> = ({ chi
     return true;
   }
 
-  async function initTokenMetainfos(accountId: string): Promise<void> {
-    await tokenService.initAccountTokenMetainfos(accountId);
-    const tokenMetainfos = await tokenService.getTokenMetainfosByAccountId(accountId);
-    setTokenMetainfos(tokenMetainfos);
-    balanceService.setTokenMetainfos(tokenMetainfos);
-  }
-
   async function changeNetwork(networkMetainfo: NetworkMetainfo): Promise<NetworkMetainfo> {
     const rpcUrl = networkMetainfo.rpcUrl;
     const gnoProvider = new GnoProvider(rpcUrl, networkMetainfo.networkId);

packages/adena-extension/src/components/atoms/button/index.tsx

@@ -4,9 +4,8 @@ import mixins from '@styles/mixins';
 import { getTheme } from '@styles/theme';
 
 type Without<T, U> = { [P in Exclude<keyof T, keyof U>]?: never };
-type XOR<T, U> = T | U extends Record<string, unknown>
-  ? (Without<T, U> & U) | (Without<U, T> & T)
-  : T | U;
+type XOR<T, U> =
+  T | U extends Record<string, unknown> ? (Without<T, U> & U) | (Without<U, T> & T) : T | U;
 
 type ButtonHierarchy = 'normal' | 'primary' | 'ghost' | 'dark' | 'danger' | 'custom';
 
@@ -95,8 +94,17 @@ export type ButtonProps = XOR<
   }
 >;
 
-export const Button = (props: ButtonProps): JSX.Element => {
-  return <ButtonWrapper {...props}>{props.children}</ButtonWrapper>;
+export const Button = ({
+  disabled = false,
+  hierarchy = 'primary',
+  height = '48px',
+  ...props
+}: ButtonProps): JSX.Element => {
+  return (
+    <ButtonWrapper disabled={disabled} hierarchy={hierarchy} height={height} {...props}>
+      {props.children}
+    </ButtonWrapper>
+  );
 };
 
 const ButtonWrapper = styled.button<ButtonProps>`
@@ -127,9 +135,3 @@ const ButtonWrapper = styled.button<ButtonProps>`
   color: ${getTheme('neutral', '_1')};
   background-color: ${({ bgColor }): string | undefined => bgColor};
 `;
-
-Button.defaultProps = {
-  disabled: false,
-  hierarchy: 'primary',
-  height: '48px',
-};

packages/adena-extension/src/hooks/use-token-metainfo.tsx

@@ -25,6 +25,7 @@ export type UseTokenMetainfoReturn = {
   tokenMetainfos: TokenModel[];
   allTokenMetainfos: TokenModel[];
   currentTokenMetainfos: TokenModel[];
+  tokenLogoMap: Record<string, string | null>;
   getTokenAmount: (amount: { value: string; denom: string }) => { value: string; denom: string };
   initTokenMetainfos: () => Promise<void>;
   updateTokenMetainfos: (account: Account, tokenMetainfos: TokenModel[]) => Promise<void>;
@@ -67,7 +68,6 @@ function makeTokenKey(token: TokenModel): string {
 export const useTokenMetainfo = (): UseTokenMetainfoReturn => {
   const { balanceService, tokenService } = useAdenaContext();
   const [tokenMetainfos, setTokenMetainfo] = useRecoilState(TokenState.tokenMetainfos);
-  const [tokenLogoMap, setTokenLogoMap] = useRecoilState(TokenState.tokenLogoMap);
   const { currentAccount } = useCurrentAccount();
   const { currentNetwork } = useNetwork();
   const { data: grc20Tokens } = useGRC20Tokens();
@@ -105,21 +105,19 @@ export const useTokenMetainfo = (): UseTokenMetainfoReturn => {
     }, {});
   }, [allTokenMetainfos]);
 
+  const tokenLogoMap = useMemo(() => {
+    return currentTokenMetainfos.reduce<Record<string, string | null>>((accum, current) => {
+      const key = makeTokenKey(current);
+      accum[key] = current.image || null;
+      return accum;
+    }, {});
+  }, [currentTokenMetainfos]);
+
   const initTokenMetainfos = async (): Promise<void> => {
     if (currentAccount) {
       await tokenService.initAccountTokenMetainfos(currentAccount.id);
       const tokenMetainfos = await tokenService.getTokenMetainfosByAccountId(currentAccount.id);
       setTokenMetainfo([...tokenMetainfos]);
-
-      const tokenLogoMap = tokenMetainfos.reduce<Record<string, string | null>>(
-        (accum, current) => {
-          const key = makeTokenKey(current);
-          accum[key] = current.image || null;
-          return accum;
-        },
-        {},
-      );
-      setTokenLogoMap(tokenLogoMap);
     }
   };
 
@@ -174,20 +172,30 @@ export const useTokenMetainfo = (): UseTokenMetainfoReturn => {
     [tokenMetaMap],
   );
 
-  const getTokenImage = (token: TokenModel): string | null => {
-    const key = makeTokenKey(token);
-    return tokenLogoMap[key] || null;
-  };
+  const getTokenImage = useCallback(
+    (token: TokenModel): string | null => {
+      const key = makeTokenKey(token);
+      return tokenLogoMap[key] || null;
+    },
+    [tokenLogoMap],
+  );
 
-  const getTokenImageByDenom = (denom: string): string | null => {
-    const key = makeTokenKeyByDenom(denom);
-    return tokenLogoMap[key] || null;
-  };
+  const getTokenImageByDenom = useCallback(
+    (denom: string): string | null => {
+      const key = makeTokenKeyByDenom(denom);
+      console.log(key, tokenLogoMap);
+      return tokenLogoMap[key] || null;
+    },
+    [tokenLogoMap],
+  );
 
-  const getTokenImageByPkgPath = (denom: string): string | null => {
-    const key = makeTokenKeyByPackagePath(denom);
-    return tokenLogoMap[key] || null;
-  };
+  const getTokenImageByPkgPath = useCallback(
+    (packagePath: string): string | null => {
+      const key = makeTokenKeyByPackagePath(packagePath);
+      return tokenLogoMap[key] || null;
+    },
+    [tokenLogoMap],
+  );
 
   const addTokenMetainfo = async (tokenMetainfo: GRC20TokenModel): Promise<boolean> => {
     if (!currentAccount) {
@@ -236,13 +244,14 @@ export const useTokenMetainfo = (): UseTokenMetainfoReturn => {
       type: 'grc20',
       name,
       decimals,
-      image: '',
+      image: getTokenImageByPkgPath(path) || '',
       display: true,
     };
     return addTokenMetainfo(tokenMetainfo);
   };
 
   return {
+    tokenLogoMap,
     tokenMetainfos,
     allTokenMetainfos,
     currentTokenMetainfos,