[KEPLR-570] Integrate starknet id

apps/extension/src/languages/en.json

@@ -619,6 +619,7 @@
   "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-starknet.id": "Wallet Address or Starknet ID",
   "components.input.recipient-input.wallet-address-label-icns-ens": "Wallet Address or ICNS or ENS",
   "components.input.amount-input.amount-label": "Amount",
   "components.input.amount-input.max-button": "Max",

apps/extension/src/languages/ko.json

@@ -602,6 +602,7 @@
   "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-starknet.id": "지갑 주소 혹은 Starknet ID",
   "components.input.recipient-input.wallet-address-label-icns-ens": "지갑 주소 혹은 ICNS 혹은 ENS",
   "components.input.amount-input.amount-label": "수량",
   "components.input.amount-input.max-button": "최대",

apps/extension/src/languages/zh-cn.json

@@ -579,8 +579,10 @@
   "page.ledger-grant.title": "允许浏览器连接Ledger",
   "page.ledger-grant.paragraph": "你需要重新检查与Ledger的连接。选择正确的应用程序，在成功连接到你的Ledger设备后，关闭此页面并重试你以前的交易（签名中）。",
   "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-starknet.id": "钱包地址或者StarkNet ID",
   "components.input.recipient-input.wallet-address-label-icns-ens": "钱包地址或者ICNS或者ENS",
   "components.input.amount-input.amount-label": "金额",
   "components.input.amount-input.max-button": "最大",

apps/extension/src/pages/starknet/components/address-book-modal/index.tsx

@@ -138,7 +138,10 @@ export const AddressBookModal: FunctionComponent<{
             })
             .filter((contact) => {
               // 이 체크 필요없어보이지만 그냥 원래 있었기 때문에 남김
-              if (!contact.address.startsWith("0x")) {
+              if (
+                !contact.address.startsWith("0x") &&
+                !contact.address.endsWith(".stark")
+              ) {
                 return false;
               }
 

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

@@ -4,6 +4,7 @@ import { observer } from "mobx-react-lite";
 import {
   EmptyAddressError,
   IRecipientConfig,
+  IRecipientConfigWithStarknetID,
 } from "@keplr-wallet/hooks-starknet";
 import { ProfileIcon } from "../../../../../components/icon";
 import { Box } from "../../../../../components/box";
@@ -16,7 +17,7 @@ import { useTheme } from "styled-components";
 
 export interface RecipientInputWithAddressBookProps {
   historyType: string;
-  recipientConfig: IRecipientConfig;
+  recipientConfig: IRecipientConfig | IRecipientConfigWithStarknetID;
 
   permitAddressBookSelfKeyInfo?: boolean;
 }
@@ -34,6 +35,10 @@ export type RecipientInputProps = (
   bottom?: React.ReactNode;
 };
 
+function numOfCharacter(str: string, c: string): number {
+  return str.split(c).length - 1;
+}
+
 export const RecipientInput = observer<RecipientInputProps, HTMLInputElement>(
   (props, ref) => {
     const { analyticsStore } = useStore();
@@ -44,17 +49,55 @@ export const RecipientInput = observer<RecipientInputProps, HTMLInputElement>(
     const [isAddressBookModalOpen, setIsAddressBookModalOpen] =
       React.useState(false);
 
+    const isStarknetIDEnabled: boolean = (() => {
+      if ("isStarknetIDEnabled" in recipientConfig) {
+        return recipientConfig.isStarknetIDEnabled;
+      }
+
+      return false;
+    })();
+
+    const isStarknetID: boolean = (() => {
+      if ("isStarknetID" in recipientConfig) {
+        return recipientConfig.isStarknetID;
+      }
+
+      return false;
+    })();
+
+    const isStarknetIDFetching: boolean = (() => {
+      if ("isStarknetIDFetching" in recipientConfig) {
+        return recipientConfig.isStarknetIDFetching;
+      }
+
+      return false;
+    })();
+
     return (
       <Box>
         <TextInput
           ref={ref}
           label={intl.formatMessage({
-            id: "components.input.recipient-input.wallet-address-only-label",
+            id: isStarknetIDEnabled
+              ? "components.input.recipient-input.wallet-address-label-starknet.id"
+              : "components.input.recipient-input.wallet-address-only-label",
           })}
           value={recipientConfig.value}
           autoComplete="off"
           onChange={(e) => {
-            const value = e.target.value;
+            let value = e.target.value;
+
+            if (
+              "isStarknetIDEnabled" in recipientConfig &&
+              isStarknetIDEnabled &&
+              value.length > 0 &&
+              value[value.length - 1] === "." &&
+              numOfCharacter(value, ".") === 1 &&
+              numOfCharacter(recipientConfig.value, ".") === 0
+            ) {
+              value = value + recipientConfig.starknetExpectedDomain;
+            }
+
             recipientConfig.setValue(value);
 
             e.preventDefault();
@@ -77,6 +120,19 @@ export const RecipientInput = observer<RecipientInputProps, HTMLInputElement>(
               </IconButton>
             ) : null
           }
+          isLoading={isStarknetIDFetching}
+          paragraph={(() => {
+            if (isStarknetID && !recipientConfig.uiProperties.error) {
+              if (isStarknetIDFetching) {
+                return undefined;
+              }
+
+              return `${recipientConfig.recipient.slice(
+                0,
+                10
+              )}...${recipientConfig.recipient.slice(56)}`;
+            }
+          })()}
           bottom={props.bottom}
           error={(() => {
             const uiProperties = recipientConfig.uiProperties;

packages/hooks-starknet/package.json

@@ -37,6 +37,7 @@
   "peerDependencies": {
     "mobx": "^6",
     "mobx-utils": "^6",
-    "react": "^16.8.0 || ^17 || ^18"
+    "react": "^16.8.0 || ^17 || ^18",
+    "starknet": "^6"
   }
 }

packages/hooks-starknet/src/tx/errors.ts

@@ -125,3 +125,19 @@ export class MemoSuspectMnemonicInclusion extends Error {
     Object.setPrototypeOf(this, MemoSuspectMnemonicInclusion.prototype);
   }
 }
+
+export class StarknetIDIsFetchingError extends Error {
+  constructor(m: string) {
+    super(m);
+    // Set the prototype explicitly.
+    Object.setPrototypeOf(this, StarknetIDIsFetchingError.prototype);
+  }
+}
+
+export class StarknetIDFailedToFetchError extends Error {
+  constructor(m: string) {
+    super(m);
+    // Set the prototype explicitly.
+    Object.setPrototypeOf(this, StarknetIDFailedToFetchError.prototype);
+  }
+}