From d5fe1c2b4e05cf091529a6f7f140ce70259af599 Mon Sep 17 00:00:00 2001
From: S2kael <laiducminh1002@gmail.com>
Date: Fri, 23 Jun 2023 15:00:17 +0700
Subject: [PATCH 1/2] [Issue-30] Add 'Add PSP Token' methods

---
 .../src/components/WalletMetadata.scss        |  9 +++-
 .../src/components/WalletMetadata.tsx         | 52 ++++++++++++++++---
 packages/wallet-connect/src/types.ts          | 17 +++++-
 3 files changed, 70 insertions(+), 8 deletions(-)

diff --git a/packages/sub-connect/src/components/WalletMetadata.scss b/packages/sub-connect/src/components/WalletMetadata.scss
index d4e5946..1b6535a 100644
--- a/packages/sub-connect/src/components/WalletMetadata.scss
+++ b/packages/sub-connect/src/components/WalletMetadata.scss
@@ -24,4 +24,11 @@
   color: #7B8098;
   text-overflow: ellipsis;
   overflow: hidden;
-}
\ No newline at end of file
+}
+
+.wallet-action-button-group {
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+  align-items: center;
+}
diff --git a/packages/sub-connect/src/components/WalletMetadata.tsx b/packages/sub-connect/src/components/WalletMetadata.tsx
index 763a1fb..54f3d13 100644
--- a/packages/sub-connect/src/components/WalletMetadata.tsx
+++ b/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,36 @@ function WalletMetadata (): React.ReactElement {
     [loadMetadata, walletContext.wallet?.metadata]
   );
 
+  const addToken = useCallback(
+    () => {
+      const metadata = walletContext.wallet?.metadata;
+
+      if (metadata) {
+        const requestAddPspToken: RequestAddPspToken = {
+          genesisHash: '0x05d5279c52c484cc80396535a316add7d47b1c5b9e0398dd1f584149341460c5',
+          tokenInfo: {
+            type: 'psp22',
+            address: '5DGHdeY4SXsZ2w8RZrgXXJwHXXe2Qg8LCnUoDTr3tnBnu2BC',
+            symbol: 'acv'
+          }
+        };
+        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 +116,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>);
 }
 
diff --git a/packages/wallet-connect/src/types.ts b/packages/wallet-connect/src/types.ts
index ef144fd..6f26cbc 100644
--- a/packages/wallet-connect/src/types.ts
+++ b/packages/wallet-connect/src/types.ts
@@ -40,6 +40,21 @@ export interface WalletMethods {
   getAccounts: () => Promise<WalletAccount[] | null>
 }
 
+export interface RequestAddPspToken {
+  genesisHash: string;
+  tokenInfo: {
+    type: string;
+    address: string;
+    symbol: string;
+    name?: string;
+    decimals?: number;
+  };
+}
+
+export interface SubWalletInjectedMetadata extends InjectedMetadata {
+  addToken: (request: RequestAddPspToken) => Promise<boolean>;
+}
+
 export interface Wallet extends WalletInfo, WalletMethods {
   installed: boolean | undefined;
 
@@ -47,7 +62,7 @@ export interface Wallet extends WalletInfo, WalletMethods {
 
   signer: Signer | undefined;
 
-  metadata: InjectedMetadata | undefined;
+  metadata: SubWalletInjectedMetadata | undefined;
 
   provider: InjectedProvider | undefined;
 }

From 03c7236670199785fba3d41c6d498569667aa7cd Mon Sep 17 00:00:00 2001
From: S2kael <laiducminh1002@gmail.com>
Date: Mon, 26 Jun 2023 09:46:07 +0700
Subject: [PATCH 2/2] [Issue-30] Update types

---
 packages/sub-connect/src/components/WalletMetadata.tsx | 5 +++--
 packages/wallet-connect/src/types.ts                   | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/sub-connect/src/components/WalletMetadata.tsx b/packages/sub-connect/src/components/WalletMetadata.tsx
index 54f3d13..12d3a9c 100644
--- a/packages/sub-connect/src/components/WalletMetadata.tsx
+++ b/packages/sub-connect/src/components/WalletMetadata.tsx
@@ -75,11 +75,12 @@ function WalletMetadata (): React.ReactElement {
 
       if (metadata) {
         const requestAddPspToken: RequestAddPspToken = {
-          genesisHash: '0x05d5279c52c484cc80396535a316add7d47b1c5b9e0398dd1f584149341460c5',
+          genesisHash: '0x05d5279c52c484cc80396535a316add7d47b1c5b9e0398dd1f584149341460c5', // Aleph zero testnet
           tokenInfo: {
             type: 'psp22',
             address: '5DGHdeY4SXsZ2w8RZrgXXJwHXXe2Qg8LCnUoDTr3tnBnu2BC',
-            symbol: 'acv'
+            symbol: 'PANX',
+            name: 'PANX'
           }
         };
         const key = 'add-token';
diff --git a/packages/wallet-connect/src/types.ts b/packages/wallet-connect/src/types.ts
index 6f26cbc..a8c359a 100644
--- a/packages/wallet-connect/src/types.ts
+++ b/packages/wallet-connect/src/types.ts
@@ -46,8 +46,9 @@ export interface RequestAddPspToken {
     type: string;
     address: string;
     symbol: string;
-    name?: string;
+    name: string;
     decimals?: number;
+    logo?: string;
   };
 }