[issue-960] Support domain name for mobile app

Koniverse · Aug 26, 2023 · 71dd87e · 71dd87e
1 parent 09b0006
commit 71dd87e
Show file tree

Hide file tree

Showing 7 changed files with 129 additions and 66 deletions.
diff --git a/package.json b/package.json
@@ -50,8 +50,8 @@
     "@react-navigation/native": "^6.1.2",
     "@react-navigation/native-stack": "^6.9.8",
     "@reduxjs/toolkit": "^1.9.2",
-    "@subwallet/extension-chains": "^1.1.8-0",
-    "@subwallet/extension-dapp": "^1.1.8-0",
+    "@subwallet/extension-chains": "^1.1.9-0",
+    "@subwallet/extension-dapp": "^1.1.9-0",
     "@subwallet/keyring": "^0.0.10",
     "@subwallet/react-ui": "^5.1.2-b69",
     "@subwallet/ui-keyring": "^0.0.10",
@@ -60,6 +60,7 @@
     "eslint-plugin-ft-flow": "^2.0.3",
     "eventemitter3": "^5.0.0",
     "i18next": "^22.4.9",
+    "loglevel": "^1.8.1",
     "moment": "^2.29.4",
     "patch-package": "^6.5.0",
     "phosphor-react-native": "^1.1.2",
@@ -136,7 +137,7 @@
     "@polkadot/types": "^9.9.4",
     "@react-native-community/eslint-config": "^3.2.0",
     "@subwallet/chain-list": "^0.2.10",
-    "@subwallet/extension-base": "^1.1.8-0",
+    "@subwallet/extension-base": "^1.1.9-0",
     "@tsconfig/react-native": "^2.0.2",
     "@types/jest": "^29.2.3",
     "@types/react": "^18.0.25",
@@ -185,7 +186,7 @@
     "@polkadot/util": "^12.2.1",
     "@polkadot/api": "^10.7.2",
     "@polkadot/util-crypto": "^12.2.1",
-    "@subwallet/extension-base": "^1.1.8-0",
+    "@subwallet/extension-base": "^1.1.9-0",
     "@subwallet/chain-list": "0.2.10",
     "react-native-svg": "^13.6.0"
   },

diff --git a/src/components/Input/InputAddressV2.tsx b/src/components/Input/InputAddressV2.tsx
@@ -1,5 +1,5 @@
 import Input, { InputProps } from 'components/design-system-ui/input';
-import React, { ForwardedRef, forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { ForwardedRef, forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Keyboard, TextInput, View } from 'react-native';
 import { useSubWalletTheme } from 'hooks/useSubWalletTheme';
 import { isAddress } from '@polkadot/util-crypto';
@@ -10,7 +10,8 @@ import { AddressBookModal } from 'components/Modal/AddressBook/AddressBookModal'
 import { NativeSyntheticEvent } from 'react-native/Libraries/Types/CoreEventTypes';
 import { TextInputFocusEventData } from 'react-native/Libraries/Components/TextInput/TextInput';
 import { AddressScanner, AddressScannerProps } from 'components/Scanner/AddressScanner';
-import { saveRecentAccountId } from 'messaging/index';
+import { CHAINS_SUPPORTED_DOMAIN, isAzeroDomain } from '@subwallet/extension-base/koni/api/dotsama/domain';
+import { saveRecentAccountId, resolveAddressToDomain, resolveDomainToAddress } from 'messaging/index';
 import { requestCameraPermission } from 'utils/permission/camera';
 import { RESULTS } from 'react-native-permissions';
 import createStylesheet from './style/InputAddress';
@@ -21,6 +22,8 @@ import i18n from 'utils/i18n/i18n';
 import { setAdjustResize } from 'rn-android-keyboard-adjust';
 
 interface Props extends InputProps {
+  chain?: string;
+  reValidate?: () => void;
   isValidValue?: boolean;
   showAvatar?: boolean;
   showAddressBook?: boolean;
@@ -33,6 +36,7 @@ interface Props extends InputProps {
 
 const Component = (
   {
+    chain,
     isValidValue,
     showAvatar = true,
     showAddressBook,
@@ -41,18 +45,22 @@ const Component = (
     scannerProps = {},
     saveAddress = true,
     value = '',
+    reValidate,
     onSideEffectChange,
     ...inputProps
   }: Props,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   ref: ForwardedRef<TextInput>,
 ) => {
   const theme = useSubWalletTheme().swThemes;
+  const [domainName, setDomainName] = useState<string | undefined>(undefined);
   const [isInputBlur, setInputBlur] = useState<boolean>(true);
   const [isShowAddressBookModal, setShowAddressBookModal] = useState<boolean>(false);
   const [isShowQrModalVisible, setIsShowQrModalVisible] = useState<boolean>(false);
   const isAddressValid = isAddress(value) && (isValidValue !== undefined ? isValidValue : true);
   const { accounts, contacts } = useSelector((root: RootState) => root.accountState);
   const [error, setError] = useState<string | undefined>(undefined);
+  const inputRef = useRef<TextInput | null>(null);
 
   const hasLabel = !!inputProps.label;
   const isInputVisible = !isAddressValid || !value || !isInputBlur;
@@ -68,6 +76,60 @@ const Component = (
 
   useEffect(() => setAdjustResize(), []);
 
+  const onChangeInputText = useCallback(
+    (rawText: string) => {
+      const text = rawText.trim();
+
+      if (inputProps.onChangeText) {
+        inputProps.onChangeText(text);
+
+        if (saveAddress && isAddress(text)) {
+          saveRecentAccountId(text).catch(console.error);
+        }
+      }
+    },
+    [inputProps, saveAddress],
+  );
+
+  useEffect(() => {
+    if (chain && value && CHAINS_SUPPORTED_DOMAIN.includes(chain)) {
+      if (isAzeroDomain(value)) {
+        resolveDomainToAddress({
+          chain,
+          domain: value,
+        })
+          .then(result => {
+            if (result) {
+              setDomainName(value);
+              onChangeInputText(result);
+              if (inputRef.current) {
+                if (!inputRef.current.isFocused() && reValidate) {
+                  reValidate();
+                } else {
+                  inputRef.current.blur();
+                }
+              }
+            }
+          })
+          .catch(console.error);
+      } else if (isAddress(value)) {
+        resolveAddressToDomain({
+          chain,
+          address: value,
+        })
+          .then(result => {
+            if (result) {
+              setDomainName(result);
+            }
+          })
+          .catch(console.error);
+      }
+    } else {
+      setDomainName(undefined);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [chain, onChangeInputText, value]);
+
   const _contacts = useMemo(() => [...accounts, ...contacts], [accounts, contacts]);
 
   const accountName = useMemo(() => {
@@ -99,16 +161,17 @@ const Component = (
           </View>
         )}
         <Typography.Text ellipsis style={stylesheet.addressText}>
-          {accountName || toShort(value, 9, 9)}
+          {accountName || domainName || toShort(value, 9, 9)}
         </Typography.Text>
-        {(accountName || addressPrefix !== undefined) && (
+        {(accountName || domainName || addressPrefix !== undefined) && (
           <Typography.Text style={stylesheet.addressAliasText}>({toShort(formattedAddress, 4, 4)})</Typography.Text>
         )}
       </>
     );
   }, [
     accountName,
     addressPrefix,
+    domainName,
     formattedAddress,
     hasLabel,
     showAvatar,
@@ -171,21 +234,6 @@ const Component = (
     theme.colorTextLight5,
   ]);
 
-  const onChangeInputText = useCallback(
-    (rawText: string) => {
-      const text = rawText.trim();
-
-      if (inputProps.onChangeText) {
-        inputProps.onChangeText(text);
-
-        if (saveAddress && isAddress(text)) {
-          saveRecentAccountId(text).catch(console.error);
-        }
-      }
-    },
-    [inputProps, saveAddress],
-  );
-
   const onScanInputText = useCallback(
     (data: string) => {
       if (isAddress(data)) {
@@ -226,7 +274,11 @@ const Component = (
   return (
     <>
       <Input
-        ref={ref}
+        ref={myRef => {
+          inputRef.current = myRef;
+          // @ts-ignored
+          ref = inputRef.current;
+        }}
         {...inputProps}
         leftPart={LeftPart}
         leftPartStyle={stylesheet.inputLeftPart}

diff --git a/src/messaging/index.ts b/src/messaging/index.ts
@@ -105,6 +105,8 @@ import {
   RequestTuringStakeCompound,
   RequestUnbondingSubmit,
   RequestUnlockKeyring,
+  ResolveAddressToDomainRequest,
+  ResolveDomainRequest,
   ResponseAccountCreateSuriV2,
   ResponseAccountCreateWithSecretKey,
   ResponseAccountExportPrivateKey,
@@ -1384,6 +1386,14 @@ export async function disconnectWalletConnectConnection(topic: string): Promise<
   return sendMessage('pri(walletConnect.session.disconnect)', { topic });
 }
 
+export async function resolveDomainToAddress(request: ResolveDomainRequest) {
+  return sendMessage('pri(accounts.resolveDomainToAddress)', request);
+}
+
+export async function resolveAddressToDomain(request: ResolveAddressToDomainRequest) {
+  return sendMessage('pri(accounts.resolveAddressToDomain)', request);
+}
+
 export async function subscribeTransactions(
   callback: (rs: Record<string, SWTransactionResult>) => void,
 ): Promise<Record<string, SWTransactionResult>> {

diff --git a/src/predefined/dAppSites.ts b/src/predefined/dAppSites.ts
@@ -843,19 +843,10 @@ export const predefinedDApps: PredefinedDApps = {
       isSupportEthereumAccount: true,
     },
     {
-      name: 'Moonwell Apollo',
+      name: 'Moonwell',
       icon: 'https://raw.githubusercontent.com/nova-wallet/nova-utils/master/icons/dapps/color/Moonwell.svg',
-      id: 'moonwell.fi/apollo/MOVR',
-      url: 'https://moonwell.fi/apollo/MOVR',
-      categories: ['defi', 'evm'],
-      isSupportSubstrateAccount: false,
-      isSupportEthereumAccount: true,
-    },
-    {
-      name: 'Moonwell Artemis',
-      icon: 'https://dotinsights.subwallet.app/assets/images/projects/moonwell.png',
-      id: 'moonwell.fi/artemis/GLMR',
-      url: 'https://moonwell.fi/artemis/GLMR',
+      id: 'https://moonwell.fi/discover',
+      url: 'https://moonwell.fi/discover',
       categories: ['defi', 'evm'],
       isSupportSubstrateAccount: false,
       isSupportEthereumAccount: true,

diff --git a/src/screens/Transaction/NFT/index.tsx b/src/screens/Transaction/NFT/index.tsx
@@ -239,10 +239,10 @@ const SendNFT: React.FC<SendNFTProps> = ({
               label={formState.labels.recipientAddress}
               value={formState.data.recipientAddress}
               onChangeText={onChangeReceiverAddress}
-              isValidValue={formState.isValidated.recipientAddress}
               placeholder={i18n.placeholder.accountAddress}
               onSubmitEditing={handleSend}
               disabled={loading}
+              chain={nftChain}
             />
             {!!formState.errors.recipientAddress.length && (
               <Warning style={{ marginBottom: 8 }} message={formState.errors.recipientAddress[0]} isDanger />

diff --git a/src/screens/Transaction/SendFundV2/index.tsx b/src/screens/Transaction/SendFundV2/index.tsx
@@ -706,6 +706,8 @@ export const SendFund = ({
     setIsTransferAll(false);
   }, []);
 
+  const reValidate = () => trigger('to');
+
   const renderAmountInput = useCallback(
     ({ field: { onBlur, onChange, value, ref } }: UseControllerReturn<TransferFormValues>) => (
       <>
@@ -967,11 +969,13 @@ export const SendFund = ({
                         value={value}
                         onChangeText={onChange}
                         onBlur={onBlur}
+                        reValidate={reValidate}
                         onSideEffectChange={onBlur}
                         placeholder={i18n.placeholder.accountAddress}
                         disabled={loading}
                         addressPrefix={destChainNetworkPrefix}
                         networkGenesisHash={destChainGenesisHash}
+                        chain={chainValue}
                         showAddressBook
                         saveAddress
                       />