Support address book functionality for Starknet

apps/extension/src/languages/en.json

@@ -604,6 +604,7 @@
   "page.starknet.components.account-activation-modal.description": "Activate your account to access various features of Starknet!{br}A small fee applies for account activation.",
 
   "components.empty-view.text": "No {subject} Yet",
+  "components.input.recipient-input.wallet-address-only-label": "Wallet Address",
   "components.input.recipient-input.wallet-address-label": "Wallet Address or ICNS",
   "components.input.recipient-input.wallet-address-label-ens": "Wallet Address or ENS",
   "components.input.recipient-input.wallet-address-label-icns-ens": "Wallet Address or ICNS or ENS",

apps/extension/src/languages/ko.json

@@ -587,6 +587,7 @@
   "page.starknet.components.account-activation-modal.description": "스타크넷의 다양한 기능을 이용하려면 계정을 활성화하세요!{br}계정 활성화에는 약간의 수수료가 필요합니다.",
 
   "components.empty-view.text": "{subject} 데이터가 없습니다.",
+  "components.input.recipient-input.wallet-address-only-label": "지갑 주소",
   "components.input.recipient-input.wallet-address-label": "지갑 주소 혹은 ICNS",
   "components.input.recipient-input.wallet-address-label-ens": "지갑 주소 혹은 ENS",
   "components.input.recipient-input.wallet-address-label-icns-ens": "지갑 주소 혹은 ICNS 혹은 ENS",

apps/extension/src/pages/setting/contacts/add/index.tsx

@@ -5,12 +5,18 @@ import { Stack } from "../../../../components/stack";
 import { BackButton } from "../../../../layouts/header/components";
 import { HeaderLayout } from "../../../../layouts/header";
 import { RecipientInput, TextInput } from "../../../../components/input";
+import { RecipientInput as RecipientInputForStarknet } from "../../../starknet/components/input/reciepient-input";
+
 import { useSearchParams } from "react-router-dom";
 import {
   useMemoConfig,
   useRecipientConfig,
   useTxConfigsValidate,
 } from "@keplr-wallet/hooks";
+import {
+  useRecipientConfig as useRecipientConfigForStarknet,
+  useTxConfigsValidate as useTxConfigsValidateForStarknet,
+} from "@keplr-wallet/hooks-starknet";
 import { useStore } from "../../../../stores";
 import { MemoInput } from "../../../../components/input/memo-input";
 import { useNavigate } from "react-router";
@@ -36,19 +42,28 @@ export const SettingContactsAdd: FunctionComponent = observer(() => {
   const [name, setName] = useState("");
 
   const recipientConfig = useRecipientConfig(chainStore, chainId, {
-    allowHexAddressToBech32Address: !chainStore
-      .getChain(chainId)
-      .chainId.startsWith("injective"),
+    allowHexAddressToBech32Address:
+      chainStore.hasChain(chainId) &&
+      !chainStore.getChain(chainId).chainId.startsWith("injective"),
     icns: uiConfigStore.icnsInfo,
     ens: ENSInfo,
   });
+  const recipientConfigForStarknet = useRecipientConfigForStarknet(
+    chainStore,
+    chainId
+  );
+
   const memoConfig = useMemoConfig(chainStore, chainId);
 
   const [searchParams] = useSearchParams();
   // Param "chainId" is required.
   const paramChainId = searchParams.get("chainId");
   const paramEditIndex = searchParams.get("editIndex");
 
+  const isStarknet =
+    chainStore.hasModularChain(chainId) &&
+    "starknet" in chainStore.getModularChain(chainId);
+
   useEffect(() => {
     if (labelRef.current) {
       labelRef.current.focus();
@@ -61,7 +76,11 @@ export const SettingContactsAdd: FunctionComponent = observer(() => {
     }
 
     setChainId(paramChainId);
-    recipientConfig.setChain(paramChainId);
+    if (isStarknet) {
+      recipientConfigForStarknet.setChain(paramChainId);
+    } else {
+      recipientConfig.setChain(paramChainId);
+    }
     memoConfig.setChain(paramChainId);
 
     if (paramEditIndex) {
@@ -72,7 +91,11 @@ export const SettingContactsAdd: FunctionComponent = observer(() => {
         setEditIndex(index);
         const data = addressBook[index];
         setName(data.name);
-        recipientConfig.setValue(data.address);
+        if (isStarknet) {
+          recipientConfigForStarknet.setValue(data.address);
+        } else {
+          recipientConfig.setValue(data.address);
+        }
         memoConfig.setValue(data.memo);
         return;
       }
@@ -81,16 +104,23 @@ export const SettingContactsAdd: FunctionComponent = observer(() => {
     setEditIndex(-1);
   }, [
     intl,
+    isStarknet,
     memoConfig,
     paramChainId,
     paramEditIndex,
     recipientConfig,
+    recipientConfigForStarknet,
     uiConfigStore.addressBookConfig,
   ]);
 
   const txConfigsValidate = useTxConfigsValidate({
     recipientConfig,
     memoConfig,
+    isIgnoringStarknet: isStarknet,
+  });
+
+  const txConfigsValidateForStarknet = useTxConfigsValidateForStarknet({
+    recipientConfig: recipientConfigForStarknet,
   });
 
   return (
@@ -107,13 +137,17 @@ export const SettingContactsAdd: FunctionComponent = observer(() => {
         if (editIndex < 0) {
           uiConfigStore.addressBookConfig.addAddressBook(chainId, {
             name,
-            address: recipientConfig.value,
+            address: isStarknet
+              ? recipientConfigForStarknet.value
+              : recipientConfig.value,
             memo: memoConfig.value,
           });
         } else {
           uiConfigStore.addressBookConfig.setAddressBookAt(chainId, editIndex, {
             name,
-            address: recipientConfig.value,
+            address: isStarknet
+              ? recipientConfigForStarknet.value
+              : recipientConfig.value,
             memo: memoConfig.value,
           });
         }
@@ -126,7 +160,10 @@ export const SettingContactsAdd: FunctionComponent = observer(() => {
         }),
         color: "secondary",
         size: "large",
-        disabled: txConfigsValidate.interactionBlocked || name === "",
+        disabled:
+          (isStarknet
+            ? txConfigsValidateForStarknet.interactionBlocked
+            : txConfigsValidate.interactionBlocked) || name === "",
       }}
     >
       <Styles.Container gutter="1rem">
@@ -145,10 +182,17 @@ export const SettingContactsAdd: FunctionComponent = observer(() => {
             setName(e.target.value);
           }}
         />
-        <RecipientInput
-          recipientConfig={recipientConfig}
-          hideAddressBookButton={true}
-        />
+        {isStarknet ? (
+          <RecipientInputForStarknet
+            recipientConfig={recipientConfigForStarknet}
+            hideAddressBookButton={true}
+          />
+        ) : (
+          <RecipientInput
+            recipientConfig={recipientConfig}
+            hideAddressBookButton={true}
+          />
+        )}
         <MemoInput
           label={intl.formatMessage({
             id: "page.setting.contacts.add.memo-label",

apps/extension/src/pages/setting/contacts/list/index.tsx

@@ -49,12 +49,23 @@ export const SettingContactsList: FunctionComponent = observer(() => {
     }
   }, [chainStore.chainInfos, paramChainId, setSearchParams]);
 
-  const items = chainStore.chainInfos.map((chainInfo) => {
-    return {
-      key: chainInfo.chainId,
-      label: chainInfo.chainName,
-    };
-  });
+  const items = chainStore.chainInfos
+    .map((chainInfo) => {
+      return {
+        key: chainInfo.chainId,
+        label: chainInfo.chainName,
+      };
+    })
+    .concat(
+      chainStore.modularChainInfos
+        .filter((modularChainInfo) => "starknet" in modularChainInfo)
+        .map((modularChainInfo) => {
+          return {
+            key: modularChainInfo.chainId,
+            label: modularChainInfo.chainName,
+          };
+        })
+    );
 
   const addresses = uiConfigStore.addressBookConfig.getAddressBook(chainId);
 

apps/extension/src/pages/starknet/components/input/reciepient-input/input.tsx

@@ -49,7 +49,7 @@ export const RecipientInput = observer<RecipientInputProps, HTMLInputElement>(
         <TextInput
           ref={ref}
           label={intl.formatMessage({
-            id: "components.input.recipient-input.wallet-address-label",
+            id: "components.input.recipient-input.wallet-address-only-label",
           })}
           value={recipientConfig.value}
           autoComplete="off"

apps/extension/src/stores/ui-config/address-book.ts

@@ -69,6 +69,14 @@ export class AddressBookConfig {
       for (const chainInfo of this.chainStore.chainInfos) {
         chainIdentifierMap.set(chainInfo.chainIdentifier, true);
       }
+      for (const starknetChainInfo of this.chainStore.modularChainInfos.filter(
+        (modularChainInfo) => "starknet" in modularChainInfo
+      )) {
+        chainIdentifierMap.set(
+          ChainIdHelper.parse(starknetChainInfo.chainId).identifier,
+          true
+        );
+      }
       runInAction(() => {
         const chainIdentifiers = Array.from(this.addressBookMap.keys());
         for (const chainIdentifier of chainIdentifiers) {

packages/background/src/chains/service.ts

@@ -1176,14 +1176,16 @@ export class ChainsService {
           return modularChainInfo;
         })
         .concat(
-          this.suggestedChainInfos.map((chainInfo) => {
-            return {
-              chainId: chainInfo.chainId,
-              chainName: chainInfo.chainName,
-              chainSymbolImageUrl: chainInfo.chainSymbolImageUrl,
-              cosmos: chainInfo,
-            };
-          })
+          this.mergeChainInfosWithDynamics(this.suggestedChainInfos).map(
+            (chainInfo) => {
+              return {
+                chainId: chainInfo.chainId,
+                chainName: chainInfo.chainName,
+                chainSymbolImageUrl: chainInfo.chainSymbolImageUrl,
+                cosmos: chainInfo,
+              };
+            }
+          )
         );
     },
     {

packages/hooks/src/tx/validate.ts

@@ -19,8 +19,13 @@ export const useTxConfigsValidate = (configs: {
   memoConfig?: IMemoConfig;
   channelConfig?: IIBCChannelConfig;
   gasSimulator?: IGasSimulator;
+  isIgnoringStarknet?: boolean;
 }) => {
   const interactionBlocked = (() => {
+    if (configs.isIgnoringStarknet) {
+      return false;
+    }
+
     if (
       configs.senderConfig?.uiProperties.error ||
       configs.recipientConfig?.uiProperties.error ||