[Issue-30] [Feature] Add 'Add PSP token' method

packages/sub-connect/src/components/WalletMetadata.scss

@@ -24,4 +24,11 @@
   color: #7B8098;
   text-overflow: ellipsis;
   overflow: hidden;
-}
+}
+
+.wallet-action-button-group {
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+  align-items: center;
+}

packages/sub-connect/src/components/WalletMetadata.tsx

@@ -3,6 +3,7 @@
 
 /* eslint-disable @typescript-eslint/no-floating-promises */
 import { PlusCircleOutlined } from '@ant-design/icons';
+import { RequestAddPspToken } from "@subwallet/wallet-connect/types";
 import { Button, message } from 'antd';
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 
@@ -68,6 +69,37 @@ function WalletMetadata (): React.ReactElement {
     [loadMetadata, walletContext.wallet?.metadata]
   );
 
+  const addToken = useCallback(
+    () => {
+      const metadata = walletContext.wallet?.metadata;
+
+      if (metadata) {
+        const requestAddPspToken: RequestAddPspToken = {
+          genesisHash: '0x05d5279c52c484cc80396535a316add7d47b1c5b9e0398dd1f584149341460c5', // Aleph zero testnet
+          tokenInfo: {
+            type: 'psp22',
+            address: '5DGHdeY4SXsZ2w8RZrgXXJwHXXe2Qg8LCnUoDTr3tnBnu2BC',
+            symbol: 'PANX',
+            name: 'PANX'
+          }
+        };
+        const key = 'add-token';
+
+        message.loading({ content: 'Adding Token', key });
+        metadata.addToken(requestAddPspToken)
+          .then((rs) => {
+            message.success({ content: 'Add Token Successfully!', key });
+            loadMetadata();
+          })
+          .catch((error) => {
+            console.error(error);
+            message.warn({ content: 'Add Token Failed or Cancelled!', key });
+          });
+      }
+    },
+    [loadMetadata, walletContext.wallet?.metadata]
+  );
+
   return (<div className={'wallet-metadata'}>
     <div className={'metadata-list'}>
       {injectedMetas.map((meta) =>
@@ -85,12 +117,21 @@ function WalletMetadata (): React.ReactElement {
           </div>
         </div>)}
     </div>
-    <Button
-      className='sub-wallet-btn sub-wallet-icon-btn'
-      icon={<PlusCircleOutlined />}
-      onClick={addMetadata}
-      type={'primary'}
-    >Add Example Metadata</Button>
+    <div className='wallet-action-button-group'>
+      <Button
+        className='sub-wallet-btn sub-wallet-icon-btn'
+        icon={<PlusCircleOutlined />}
+        onClick={addMetadata}
+        type={'primary'}
+      >Add Example Metadata</Button>
+      <Button
+        className='sub-wallet-btn sub-wallet-icon-btn'
+        icon={<PlusCircleOutlined />}
+        onClick={addToken}
+        type={'primary'}
+      >Add Example Token</Button>
+    </div>
+
   </div>);
 }
 

packages/wallet-connect/src/types.ts

@@ -40,14 +40,30 @@ export interface WalletMethods {
   getAccounts: () => Promise<WalletAccount[] | null>
 }
 
+export interface RequestAddPspToken {
+  genesisHash: string;
+  tokenInfo: {
+    type: string;
+    address: string;
+    symbol: string;
+    name: string;
+    decimals?: number;
+    logo?: string;
+  };
+}
+
+export interface SubWalletInjectedMetadata extends InjectedMetadata {
+  addToken: (request: RequestAddPspToken) => Promise<boolean>;
+}
+
 export interface Wallet extends WalletInfo, WalletMethods {
   installed: boolean | undefined;
 
   extension: InjectedExtension | undefined;
 
   signer: Signer | undefined;
 
-  metadata: InjectedMetadata | undefined;
+  metadata: SubWalletInjectedMetadata | undefined;
 
   provider: InjectedProvider | undefined;
 }