feature [SGW-751] L1 data endpoint on token creation (#469)

* Added: L1 data endpoint input on token creation * Added: migration to add dL1 endpoints on DOR and PACA * Updated: wallet_watchAsset RPC method (#471)
StardustCollective · Nov 28, 2024 · 7f4014a · 7f4014a
1 parent a9c9e0d
commit 7f4014a
Show file tree

Hide file tree

Showing 18 changed files with 381 additions and 124 deletions.
diff --git a/source/scenes/external/WatchAsset/constants.ts b/source/scenes/external/WatchAsset/constants.ts
@@ -6,6 +6,7 @@ export const TOKEN = 'Token';
 export const BALANCE = 'Balance';
 export const METAGRAPH_ADDRESS = 'Metagraph Address';
 export const L0_ENDPOINT = 'L0 Endpoint';
-export const L1_ENDPOINT = 'L1 Endpoint';
+export const cL1_ENDPOINT = 'L1 Currency Endpoint';
+export const dL1_ENDPOINT = 'L1 Data Endpoint';
 export const CANCEL = 'Cancel';
 export const ADD_TOKEN = 'Add token';
diff --git a/source/scenes/external/WatchAsset/index.module.scss b/source/scenes/external/WatchAsset/index.module.scss
@@ -97,6 +97,8 @@
     width: 100%;
     justify-content: center;
     flex-direction: row;
+    padding-top: 16px;
+    padding-bottom: 16px;
 
     .button {
       margin-left: 4px;

diff --git a/source/scenes/external/WatchAsset/index.tsx b/source/scenes/external/WatchAsset/index.tsx
@@ -26,7 +26,8 @@ import {
   BALANCE,
   CANCEL,
   L0_ENDPOINT,
-  L1_ENDPOINT,
+  cL1_ENDPOINT,
+  dL1_ENDPOINT,
   METAGRAPH_ADDRESS,
   NETWORK,
   TOKEN,
@@ -45,7 +46,7 @@ const WatchAsset = () => {
 
   const { type, options, balance } = data;
 
-  const { address, chainId, l0, l1, logo, symbol, name } = options;
+  const { address, chainId, l0, cl1, dl1, logo, symbol, name } = options;
 
   const wallet = getWalletController();
   const current = useSelector(dappSelectors.getCurrent);
@@ -66,15 +67,22 @@ const WatchAsset = () => {
       (network) => network.chainId === chainId
     );
 
-    await wallet.account.assetsController.addCustomL0Token(
-      l0,
-      l1,
-      address,
-      name,
-      symbol,
-      selectedNetwork.id,
-      logo
-    );
+    try {
+      await wallet.account.assetsController.addCustomL0Token(
+        l0,
+        cl1,
+        dl1,
+        address,
+        name,
+        symbol,
+        selectedNetwork.id,
+        logo
+      );
+    } catch (err) {
+      StargazerExternalPopups.addResolvedParam(location.href);
+      StargazerWSMessageBroker.sendResponseResult(false, message);
+      window.close();
+    }
 
     StargazerExternalPopups.addResolvedParam(location.href);
     StargazerWSMessageBroker.sendResponseResult(true, message);
@@ -159,10 +167,21 @@ const WatchAsset = () => {
             color={COLORS_ENUMS.SECONDARY_TEXT}
             extraStyles={styles.itemTitle}
           >
-            {L1_ENDPOINT}
+            {cL1_ENDPOINT}
+          </TextV3.Caption>
+          <TextV3.Body color={COLORS_ENUMS.BLACK} extraStyles={styles.itemValue}>
+            {cl1}
+          </TextV3.Body>
+        </div>
+        <div className={styles.rowItem}>
+          <TextV3.Caption
+            color={COLORS_ENUMS.SECONDARY_TEXT}
+            extraStyles={styles.itemTitle}
+          >
+            {dL1_ENDPOINT}
           </TextV3.Caption>
           <TextV3.Body color={COLORS_ENUMS.BLACK} extraStyles={styles.itemValue}>
-            {l1}
+            {dl1}
           </TextV3.Body>
         </div>
       </div>

diff --git a/source/scenes/home/Asset/AddCustomAsset/AddCustomAsset.container.tsx b/source/scenes/home/Asset/AddCustomAsset/AddCustomAsset.container.tsx
@@ -53,7 +53,8 @@ const AddCustomAssetContainer: FC<{ navigation: any }> = ({ navigation }) => {
   const [networkType, setNetworkType] = useState<string>('main2');
   const [tokenAddress, setTokenAddress] = useState<string>('');
   const [l0endpoint, setL0endpoint] = useState<string>('');
-  const [l1endpoint, setL1endpoint] = useState<string>('');
+  const [cl1endpoint, setcL1endpoint] = useState<string>('');
+  const [dl1endpoint, setdL1endpoint] = useState<string>('');
   const [tokenName, setTokenName] = useState<string>('');
   const [tokenSymbol, setTokenSymbol] = useState<string>('');
   const [tokenDecimals, setTokenDecimals] = useState<string>('');
@@ -128,20 +129,34 @@ const AddCustomAssetContainer: FC<{ navigation: any }> = ({ navigation }) => {
           return true;
         })
         .required('L0 endpoint is required'),
-      l1endpoint: yup
+      cl1endpoint: yup
         .string()
         .test('validURL', 'Please enter a valid URL', (val) => {
           const regex = new RegExp(URL_REGEX_PATTERN);
           return regex.test(val);
         })
-        .test('validNode', 'L1 endpoint not found', (val) => {
+        .test('validNode', 'L1 currency endpoint not found', (val) => {
           if (!!val) {
             return accountController.isValidNode(val);
           }
 
           return true;
         })
-        .required('L1 endpoint is required'),
+        .required('L1 currency endpoint is required'),
+      dl1endpoint: yup
+        .string()
+        .test('validURL', 'Please enter a valid URL', (val) => {
+          const regex = new RegExp(URL_REGEX_PATTERN);
+          return regex.test(val);
+        })
+        .test('validNode', 'L1 data endpoint not found', (val) => {
+          if (!!val) {
+            return accountController.isValidNode(val);
+          }
+
+          return true;
+        })
+        .required('L1 data endpoint is required'),
       tokenName: yup.string().required('Token name is required'),
       tokenSymbol: yup
         .string()
@@ -186,7 +201,7 @@ const AddCustomAssetContainer: FC<{ navigation: any }> = ({ navigation }) => {
   useEffect(() => {
     const hasErrors = !!Object.keys(errors)?.length;
     const otherChecks = isL0Token
-      ? l0endpoint === '' || l1endpoint === ''
+      ? l0endpoint === '' || cl1endpoint === '' || dl1endpoint === ''
       : tokenDecimals === '';
     const disabled =
       hasErrors ||
@@ -199,7 +214,8 @@ const AddCustomAssetContainer: FC<{ navigation: any }> = ({ navigation }) => {
     Object.keys(errors),
     tokenAddress,
     l0endpoint,
-    l1endpoint,
+    cl1endpoint,
+    dl1endpoint,
     tokenName,
     tokenSymbol,
     tokenDecimals,
@@ -220,10 +236,16 @@ const AddCustomAssetContainer: FC<{ navigation: any }> = ({ navigation }) => {
     triggerValidation('l0endpoint');
   };
 
-  const handleL1endpointChange = (value: string) => {
-    setValue('l1endpoint', value);
-    setL1endpoint(value);
-    triggerValidation('l1endpoint');
+  const handlecL1endpointChange = (value: string) => {
+    setValue('cl1endpoint', value);
+    setcL1endpoint(value);
+    triggerValidation('cl1endpoint');
+  };
+
+  const handledL1endpointChange = (value: string) => {
+    setValue('dl1endpoint', value);
+    setdL1endpoint(value);
+    triggerValidation('dl1endpoint');
   };
 
   const handleNameChange = (value: string) => {
@@ -256,7 +278,8 @@ const AddCustomAssetContainer: FC<{ navigation: any }> = ({ navigation }) => {
       tokenSymbol,
       tokenDecimals,
       l0endpoint,
-      l1endpoint,
+      cl1endpoint,
+      dl1endpoint,
     } = asset;
 
     setButtonLoading(true);
@@ -292,7 +315,8 @@ const AddCustomAssetContainer: FC<{ navigation: any }> = ({ navigation }) => {
 
       await accountController.assetsController.addCustomL0Token(
         l0endpoint,
-        l1endpoint,
+        cl1endpoint,
+        dl1endpoint,
         tokenAddress,
         tokenName,
         tokenSymbol
@@ -308,14 +332,16 @@ const AddCustomAssetContainer: FC<{ navigation: any }> = ({ navigation }) => {
       setNetworkType(value);
       setValue('tokenAddress', '');
       setValue('l0endpoint', '');
-      setValue('l1endpoint', '');
+      setValue('cl1endpoint', '');
+      setValue('dl1endpoint', '');
       setValue('tokenName', '');
       setValue('tokenSymbol', '');
       setValue('tokenDecimals', '');
       setTokenAddress('');
       setTokenName('');
       setL0endpoint('');
-      setL1endpoint('');
+      setcL1endpoint('');
+      setdL1endpoint('');
       setTokenSymbol('');
       setTokenDecimals('');
     }
@@ -331,7 +357,7 @@ const AddCustomAssetContainer: FC<{ navigation: any }> = ({ navigation }) => {
   };
 
   const networkTypeOptions = {
-    title: 'Network type',
+    title: 'Network Type',
     value: networkType,
     items: [
       // 349: New network should be added here.
@@ -355,7 +381,8 @@ const AddCustomAssetContainer: FC<{ navigation: any }> = ({ navigation }) => {
         register={register}
         tokenAddress={tokenAddress}
         l0endpoint={l0endpoint}
-        l1endpoint={l1endpoint}
+        cl1endpoint={cl1endpoint}
+        dl1endpoint={dl1endpoint}
         tokenName={tokenName}
         tokenSymbol={tokenSymbol}
         tokenDecimals={tokenDecimals}
@@ -364,7 +391,8 @@ const AddCustomAssetContainer: FC<{ navigation: any }> = ({ navigation }) => {
         handleAddressScan={handleAddressScan}
         handleAddressChange={handleAddressChange}
         handleL0endpointChange={handleL0endpointChange}
-        handleL1endpointChange={handleL1endpointChange}
+        handlecL1endpointChange={handlecL1endpointChange}
+        handledL1endpointChange={handledL1endpointChange}
         handleNameChange={handleNameChange}
         handleSymbolChange={handleSymbolChange}
         handleDecimalsChange={handleDecimalsChange}

diff --git a/source/scenes/home/Asset/AddCustomAsset/AddCustomAsset.native.tsx b/source/scenes/home/Asset/AddCustomAsset/AddCustomAsset.native.tsx
@@ -42,7 +42,8 @@ const AddCustomAsset: FC<IAddCustomAsset> = ({
   control,
   tokenAddress,
   l0endpoint,
-  l1endpoint,
+  cl1endpoint,
+  dl1endpoint,
   tokenName,
   tokenSymbol,
   tokenDecimals,
@@ -51,7 +52,8 @@ const AddCustomAsset: FC<IAddCustomAsset> = ({
   handleAddressScan,
   handleAddressChange,
   handleL0endpointChange,
-  handleL1endpointChange,
+  handlecL1endpointChange,
+  handledL1endpointChange,
   handleNameChange,
   handleSymbolChange,
   handleDecimalsChange,
@@ -76,7 +78,7 @@ const AddCustomAsset: FC<IAddCustomAsset> = ({
     );
   };
 
-  const tokenAddressLabel = isL0Token ? 'Metagraph address' : 'Token address';
+  const tokenAddressLabel = isL0Token ? 'Metagraph Address' : 'Token Address';
   const tokenAddressPlaceholder = isL0Token ? 'DAG...' : '0x...';
   const tokenNamePlaceholder = isL0Token ? 'Enter token name' : 'Ethereum';
   const tokenSymbolPlaceholder = isL0Token ? 'Enter token symbol' : 'ETH';
@@ -109,45 +111,66 @@ const AddCustomAsset: FC<IAddCustomAsset> = ({
       </TextV3.Caption>
       {isL0Token && (
         <>
-          <TextInput
-            name="l0endpoint"
-            defaultValue={l0endpoint}
-            placeholder="Enter endpoint URL"
-            label="L0 endpoint"
-            control={control}
-            labelStyle={styles.label}
-            returnKeyType="done"
-            error={!!errors?.l0endpoint}
-            onChange={(text) => {
-              handleL0endpointChange(text);
-            }}
-          />
-          <TextV3.Caption color={COLORS_ENUMS.RED} extraStyles={styles.errorMessage}>
-            {!!errors?.l0endpoint ? errors?.l0endpoint?.message : ' '}
-          </TextV3.Caption>
-          <TextInput
-            name="l1endpoint"
-            defaultValue={l1endpoint}
-            placeholder="Enter endpoint URL"
-            label="L1 endpoint"
-            control={control}
-            labelStyle={styles.label}
-            returnKeyType="done"
-            error={!!errors?.l1endpoint}
-            onChange={(text) => {
-              handleL1endpointChange(text);
-            }}
-          />
-          <TextV3.Caption color={COLORS_ENUMS.RED} extraStyles={styles.errorMessage}>
-            {!!errors?.l1endpoint ? errors?.l1endpoint?.message : ' '}
-          </TextV3.Caption>
+          <TextV3.CaptionStrong color={COLORS_ENUMS.BLACK} extraStyles={styles.endpoints}>
+            Endpoints
+          </TextV3.CaptionStrong>
+          <View style={styles.endpointsContainer}>
+            <TextInput
+              name="l0endpoint"
+              defaultValue={l0endpoint}
+              placeholder="Enter endpoint URL"
+              label="L0 Endpoint"
+              control={control}
+              labelStyle={styles.label}
+              returnKeyType="done"
+              error={!!errors?.l0endpoint}
+              onChange={(text) => {
+                handleL0endpointChange(text);
+              }}
+            />
+            <TextV3.Caption color={COLORS_ENUMS.RED} extraStyles={styles.errorMessage}>
+              {!!errors?.l0endpoint ? errors?.l0endpoint?.message : ' '}
+            </TextV3.Caption>
+            <TextInput
+              name="cl1endpoint"
+              defaultValue={cl1endpoint}
+              placeholder="Enter endpoint URL"
+              label="L1 Currency Endpoint"
+              control={control}
+              labelStyle={styles.label}
+              returnKeyType="done"
+              error={!!errors?.cl1endpoint}
+              onChange={(text) => {
+                handlecL1endpointChange(text);
+              }}
+            />
+            <TextV3.Caption color={COLORS_ENUMS.RED} extraStyles={styles.errorMessage}>
+              {!!errors?.cl1endpoint ? errors?.cl1endpoint?.message : ' '}
+            </TextV3.Caption>
+            <TextInput
+              name="dl1endpoint"
+              defaultValue={dl1endpoint}
+              placeholder="Enter endpoint URL"
+              label="L1 Data Endpoint"
+              control={control}
+              labelStyle={styles.label}
+              returnKeyType="done"
+              error={!!errors?.dl1endpoint}
+              onChange={(text) => {
+                handledL1endpointChange(text);
+              }}
+            />
+            <TextV3.Caption color={COLORS_ENUMS.RED} extraStyles={styles.errorMessage}>
+              {!!errors?.dl1endpoint ? errors?.dl1endpoint?.message : ' '}
+            </TextV3.Caption>
+          </View>
         </>
       )}
       <TextInput
         name="tokenName"
         defaultValue={tokenName}
         placeholder={tokenNamePlaceholder}
-        label="Token name"
+        label="Token Name"
         control={control}
         labelStyle={styles.label}
         returnKeyType="done"
@@ -163,7 +186,7 @@ const AddCustomAsset: FC<IAddCustomAsset> = ({
         name="tokenSymbol"
         defaultValue={tokenSymbol}
         placeholder={tokenSymbolPlaceholder}
-        label="Token symbol"
+        label="Token Symbol"
         control={control}
         labelStyle={styles.label}
         returnKeyType="done"