Enhance hex address to show properly

chainapsis · May 24, 2024 · 40b8d10 · 40b8d10
1 parent 47094cb
commit 40b8d10
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 51 deletions.
diff --git a/apps/extension/src/components/address-book-modal/index.tsx b/apps/extension/src/components/address-book-modal/index.tsx
@@ -17,7 +17,6 @@ import { AddressItem } from "../address-item";
 import SimpleBar from "simplebar-react";
 import styled, { useTheme } from "styled-components";
 import { FormattedMessage, useIntl } from "react-intl";
-import { Bech32Address } from "@keplr-wallet/cosmos";
 import { DenomHelper } from "@keplr-wallet/common";
 
 type Type = "recent" | "contacts" | "accounts";
@@ -100,8 +99,9 @@ export const AddressBookModal: FunctionComponent<{
     ]);
 
     const chainInfo = chainStore.getChain(recipientConfig.chainId);
-    const isEvmChain = chainInfo.evm !== undefined;
-    const isErc20 = new DenomHelper(currency.coinMinimalDenom).type === "erc20";
+    const isEVMChain = chainInfo.evm !== undefined;
+    const isEVMOnlyChain = chainInfo.chainId.startsWith("eip155");
+    const isERC20 = new DenomHelper(currency.coinMinimalDenom).type === "erc20";
 
     const datas: {
       timestamp?: number;
@@ -122,7 +122,7 @@ export const AddressBookModal: FunctionComponent<{
               };
             })
             .filter((recent) => {
-              if (isErc20 && !recent.address.startsWith("0x")) {
+              if (isERC20 && !recent.address.startsWith("0x")) {
                 return false;
               }
 
@@ -140,7 +140,7 @@ export const AddressBookModal: FunctionComponent<{
               };
             })
             .filter((contact) => {
-              if (isErc20 && !contact.address.startsWith("0x")) {
+              if (isERC20 && !contact.address.startsWith("0x")) {
                 return false;
               }
 
@@ -153,21 +153,18 @@ export const AddressBookModal: FunctionComponent<{
           >((acc, account) => {
             const isSelf = keyRingStore.selectedKeyInfo?.id === account.vaultId;
 
-            if (!isErc20) {
+            if (!isERC20 && !isEVMOnlyChain) {
               acc.push({
                 name: account.name,
                 address: account.bech32Address,
                 isSelf,
               });
             }
 
-            if (isEvmChain) {
-              const hexAddress = Bech32Address.fromBech32(
-                account.bech32Address
-              ).toHex(true);
+            if (isEVMChain) {
               acc.push({
                 name: account.name,
-                address: hexAddress,
+                address: account.ethereumHexAddress,
                 isSelf,
               });
             }

diff --git a/apps/extension/src/pages/main/available.tsx b/apps/extension/src/pages/main/available.tsx
@@ -281,9 +281,15 @@ export const AvailableTabView: FunctionComponent<{
                             return undefined;
                           }
 
-                          return accountStore.getAccount(
+                          const account = accountStore.getAccount(
                             viewToken.chainInfo.chainId
-                          ).bech32Address;
+                          );
+                          const isEVMOnlyChain =
+                            viewToken.chainInfo.chainId.startsWith("eip155");
+
+                          return isEVMOnlyChain
+                            ? account.ethereumHexAddress
+                            : account.bech32Address;
                         })()}
                         showPrice24HChange={
                           uiConfigStore.show24HChangesInMagePage

diff --git a/apps/extension/src/pages/main/components/deposit-modal/copy-address-scene.tsx b/apps/extension/src/pages/main/components/deposit-modal/copy-address-scene.tsx
@@ -29,7 +29,6 @@ import {
   useSceneTransition,
 } from "../../../../components/transition";
 import { IChainInfoImpl } from "@keplr-wallet/stores";
-import Color from "color";
 
 export const CopyAddressScene: FunctionComponent<{
   close: () => void;
@@ -87,13 +86,19 @@ export const CopyAddressScene: FunctionComponent<{
 
   const addresses: {
     chainInfo: IChainInfoImpl;
-    bech32Address: string;
+    bech32Address?: string;
     ethereumAddress?: string;
   }[] = chainStore.chainInfosInUI
     .map((chainInfo) => {
       const accountInfo = accountStore.getAccount(chainInfo.chainId);
 
-      const bech32Address = accountInfo.bech32Address;
+      const bech32Address = (() => {
+        if (chainInfo.chainId.startsWith("eip155")) {
+          return undefined;
+        }
+
+        return accountInfo.bech32Address;
+      })();
       const ethereumAddress = (() => {
         if (chainInfo.chainId.startsWith("injective")) {
           return undefined;
@@ -111,10 +116,6 @@ export const CopyAddressScene: FunctionComponent<{
       };
     })
     .filter((address) => {
-      if (address.bech32Address.length === 0) {
-        return false;
-      }
-
       const s = search.trim().toLowerCase();
       if (s.length === 0) {
         return true;
@@ -126,10 +127,13 @@ export const CopyAddressScene: FunctionComponent<{
       if (address.chainInfo.chainName.toLowerCase().includes(s)) {
         return true;
       }
-      const bech32Split = address.bech32Address.split("1");
-      if (bech32Split.length > 0) {
-        if (bech32Split[0].toLowerCase().includes(s)) {
-          return true;
+
+      if (address.bech32Address) {
+        const bech32Split = address.bech32Address.split("1");
+        if (bech32Split.length > 0) {
+          if (bech32Split[0].toLowerCase().includes(s)) {
+            return true;
+          }
         }
       }
 
@@ -277,7 +281,7 @@ export const CopyAddressScene: FunctionComponent<{
               // CopyAddressItem 컴포넌트는 ethereumAddress가 있냐 없냐에 따라서 다르게 동작한다.
               // ethereumAddress가 있으면 두개의 CopyAddressItem 컴포넌트를 각각 렌더링하기 위해서
               // ethereumAddress가 있으면 두개의 address로 쪼개서 리턴하고 flat으로 펼져서 렌더링한다.
-              if (address.ethereumAddress) {
+              if (address.ethereumAddress && address.bech32Address) {
                 return [
                   {
                     chainInfo: address.chainInfo,
@@ -317,7 +321,7 @@ export const CopyAddressScene: FunctionComponent<{
 const CopyAddressItem: FunctionComponent<{
   address: {
     chainInfo: IChainInfoImpl;
-    bech32Address: string;
+    bech32Address?: string;
     ethereumAddress?: string;
   };
   close: () => void;
@@ -393,7 +397,7 @@ const CopyAddressItem: FunctionComponent<{
               e.preventDefault();
 
               await navigator.clipboard.writeText(
-                address.ethereumAddress || address.bech32Address
+                address.ethereumAddress || address.bech32Address || ""
               );
               setHasCopied(true);
               setBlockInteraction(true);
@@ -514,10 +518,12 @@ const CopyAddressItem: FunctionComponent<{
                         : address.ethereumAddress;
                     }
 
-                    return Bech32Address.shortenAddress(
-                      address.bech32Address,
-                      20
-                    );
+                    if (address.bech32Address) {
+                      return Bech32Address.shortenAddress(
+                        address.bech32Address,
+                        20
+                      );
+                    }
                   })()}
                 </Caption1>
               </YAxis>
@@ -560,29 +566,22 @@ const CopyAddressItem: FunctionComponent<{
                   ? ColorPalette["gray-50"]
                   : ColorPalette["gray-500"]
               }
-              disabled={hasCopied || !!address.ethereumAddress}
+              disabled={hasCopied}
               onClick={() => {
                 sceneTransition.push("qr-code", {
                   chainId: address.chainInfo.chainId,
-                  bech32Address: address.bech32Address,
+                  address: address.ethereumAddress || address.bech32Address,
                 });
               }}
             >
               <QRCodeIcon
                 width="1.25rem"
                 height="1.25rem"
-                color={(() => {
-                  const color =
-                    theme.mode === "light"
-                      ? ColorPalette["gray-300"]
-                      : ColorPalette.white;
-
-                  if (address.ethereumAddress) {
-                    return Color(color).alpha(0.3).toString();
-                  }
-
-                  return color;
-                })()}
+                color={
+                  theme.mode === "light"
+                    ? ColorPalette["gray-300"]
+                    : ColorPalette.white
+                }
               />
             </IconButton>
             <Gutter size="0.75rem" direction="horizontal" />

diff --git a/apps/extension/src/pages/main/components/deposit-modal/qr-code.tsx b/apps/extension/src/pages/main/components/deposit-modal/qr-code.tsx
@@ -16,8 +16,8 @@ import { YAxis } from "../../../../components/axis";
 
 export const QRCodeScene: FunctionComponent<{
   chainId: string;
-  bech32Address: string;
-}> = observer(({ chainId, bech32Address }) => {
+  address?: string;
+}> = observer(({ chainId, address }) => {
   const { chainStore } = useStore();
 
   const theme = useTheme();
@@ -26,6 +26,10 @@ export const QRCodeScene: FunctionComponent<{
 
   const sceneTransition = useSceneTransition();
 
+  if (!address) {
+    return null;
+  }
+
   return (
     <Box
       paddingTop="1.25rem"
@@ -79,7 +83,7 @@ export const QRCodeScene: FunctionComponent<{
             padding="0.75rem"
           >
             <QRCodeSVG
-              value={bech32Address}
+              value={address}
               size={176}
               level="M"
               bgColor={ColorPalette.white}

diff --git a/apps/extension/src/pages/main/token-detail/address-chip/index.tsx b/apps/extension/src/pages/main/token-detail/address-chip/index.tsx
@@ -19,6 +19,8 @@ export const AddressChip: FunctionComponent<{
 }> = observer(({ chainId, inModal }) => {
   const { accountStore } = useStore();
 
+  const isEVMOnlyChain = chainId.startsWith("eip155");
+
   const theme = useTheme();
 
   const account = accountStore.getAccount(chainId);
@@ -72,7 +74,9 @@ export const AddressChip: FunctionComponent<{
         e.preventDefault();
 
         // copy address
-        navigator.clipboard.writeText(account.bech32Address);
+        navigator.clipboard.writeText(
+          isEVMOnlyChain ? account.ethereumHexAddress : account.bech32Address
+        );
         setAnimCheck(true);
       }}
       onHoverStateChange={setIsHover}
@@ -85,7 +89,12 @@ export const AddressChip: FunctionComponent<{
               : ColorPalette["gray-200"]
           }
         >
-          {Bech32Address.shortenAddress(account.bech32Address, 16)}
+          {isEVMOnlyChain
+            ? `${account.ethereumHexAddress.slice(
+                0,
+                10
+              )}...${account.ethereumHexAddress.slice(32)}`
+            : Bech32Address.shortenAddress(account.bech32Address, 16)}
         </Body3>
         <Gutter size="0.4rem" />
         {!animCheck ? (

diff --git a/apps/extension/src/pages/main/token-detail/receive-modal/index.tsx b/apps/extension/src/pages/main/token-detail/receive-modal/index.tsx
@@ -22,6 +22,7 @@ export const ReceiveModal: FunctionComponent<{
 
   const chainInfo = chainStore.getChain(chainId);
   const account = accountStore.getAccount(chainId);
+  const isEVMOnlyChain = chainId.startsWith("eip155");
 
   return (
     <Box
@@ -63,7 +64,11 @@ export const ReceiveModal: FunctionComponent<{
           padding="0.75rem"
         >
           <QRCodeSVG
-            value={account.bech32Address}
+            value={
+              isEVMOnlyChain
+                ? account.ethereumHexAddress
+                : account.bech32Address
+            }
             size={176}
             level="M"
             bgColor={ColorPalette.white}