From c381d75a07301d14e43833cacee0644b5534de53 Mon Sep 17 00:00:00 2001
From: Thiendekaco <thienguo@gmail.com>
Date: Sat, 2 Mar 2024 01:16:28 +0700
Subject: [PATCH] Resolve ui bug #8

---
 packages/core/src/preflight-notifications.ts  |  1 +
 packages/core/src/provider.ts                 | 52 +++++++++++++----
 .../src/views/connect/ConnectingWallet.svelte | 24 +++-----
 packages/core/src/views/connect/Index.svelte  | 56 +++++++++----------
 .../modal/selectors/AccountSelector.tsx       |  4 +-
 .../transaction/TransactionModal.tsx          |  3 +-
 packages/demo/src/utils/api/evmApi.ts         | 47 ++++++++++++----
 packages/walletconnect/src/walletConnect.ts   | 29 ++++++----
 .../src/walletConnect.ts                      | 21 ++++---
 9 files changed, 146 insertions(+), 91 deletions(-)

diff --git a/packages/core/src/preflight-notifications.ts b/packages/core/src/preflight-notifications.ts
index 3e85b6ea9..9ef9b0be8 100644
--- a/packages/core/src/preflight-notifications.ts
+++ b/packages/core/src/preflight-notifications.ts
@@ -56,6 +56,7 @@ export async function preflightNotifications(
   // check sufficient balance if required parameters are available
   if (balance && gas && price) {
     const transactionCost = gas.times(price).plus(value)
+    console.log(gas, price, balance);
 
     // if transaction cost is greater than the current balance
     if (transactionCost.gt(new BigNumber(balance))) {
diff --git a/packages/core/src/provider.ts b/packages/core/src/provider.ts
index d8a9af9eb..0d95746a6 100644
--- a/packages/core/src/provider.ts
+++ b/packages/core/src/provider.ts
@@ -165,9 +165,17 @@ export function trackWallet(
   }).pipe(share())
 
   // when account changed, set it to first account and subscribe to events
-  accountsChanged$.subscribe(async (addressList) => {
+  accountsChanged$.subscribe(async (addressList_) => {
+
+    if (!addressList_ && addressList_.length <= 0) {
+      disconnect({ label, type })
+      return
+    }
     // sync accounts with internal state
-    // in the case of an account has been manually disconnected
+    // in the case of an account has been manually disconnected;
+    const addressList = addressList_ .filter((a) => {
+      return type === 'evm' ? a.toLowerCase().startsWith('0x') : !a.toLowerCase().startsWith('0x')
+    })
     try {
       await syncWalletConnectedAccounts(label, type)
     } catch (error) {
@@ -181,20 +189,31 @@ export function trackWallet(
     // this could happen if user locks wallet,
     // or if disconnects app from wallet
     if (!addressList && addressList.length <= 0) {
-      disconnect({ label, type })
-      return
+      await disconnect({ label, type })
+      return;
     }
 
     const { wallets } = state.get()
-    const { accounts } = wallets
+    const walletFinded  = wallets
       .find(wallet => wallet.label === label && wallet.type === type)
 
+    if(!walletFinded) {
+      await disconnect({ label, type });
+      return;
+    }
+    const { accounts  } = walletFinded;
+
     const [existingAccounts] = partition(
         accounts,
-        account => addressList.find(( address ) => address.includes(account.address))
+        account => addressList.find(
+          ( address ) => address.includes(account.address)
+        )
     )
 
-    const newAccounts = addressList.filter((address) => !existingAccounts.find((account) => address.includes(account.address)))
+    const newAccounts = addressList.filter(
+      (address) =>
+        !existingAccounts.find((account) => address.includes(account.address)
+      ))
 
     // update accounts without ens/uns and balance first
     updateWallet(label, type, {
@@ -211,7 +230,8 @@ export function trackWallet(
 
     // if not existing account and notifications,
     // then subscribe to transaction events
-    if (state.get().notify.enabled && !( existingAccounts && existingAccounts.length > 0 )) {
+    if (state.get().notify.enabled
+      && !( existingAccounts && existingAccounts.length > 0 )) {
       const sdk = await getBNMulitChainSdk()
 
       if (sdk) {
@@ -238,7 +258,17 @@ export function trackWallet(
   // also when accounts change, update Balance and ENS/UNS
   accountsChanged$
       .pipe(
-          switchMap(async (addressList) => {
+          switchMap(async (addressList_) => {
+
+            if (!addressList_ && addressList_.length <= 0) {
+              return
+            }
+
+
+            const addressList = addressList_ .filter((a) => {
+              return type === 'evm' ? a.toLowerCase().startsWith('0x') : !a.toLowerCase().startsWith('0x')
+            })
+
             if (!addressList && addressList.length <= 0) {
               return
             }
@@ -257,7 +287,9 @@ export function trackWallet(
             )
 
             return await Promise.all(addressList.map((address) => {
-              const balanceProm =   getBalance(address, chain, primaryWallet.type )
+              const balanceProm =   getBalance(
+                address, chain, primaryWallet.type
+              )
               const secondaryTokenBal =  updateSecondaryTokens(
                 primaryWallet,
                 address,
diff --git a/packages/core/src/views/connect/ConnectingWallet.svelte b/packages/core/src/views/connect/ConnectingWallet.svelte
index c2a39f5e7..eb3fb8327 100644
--- a/packages/core/src/views/connect/ConnectingWallet.svelte
+++ b/packages/core/src/views/connect/ConnectingWallet.svelte
@@ -5,7 +5,7 @@
   import WalletAppBadge from '../shared/WalletAppBadge.svelte'
   import en from '../../i18n/en.json'
   import { state } from '../../store/index.js'
-  import { shareReplay, startWith } from 'rxjs'
+  import { shareReplay, startWith, withLatestFrom } from 'rxjs'
   import { errorIcon } from '../../icons';
   import { qrModalConnect$, uriConnect$ } from '../../streams.js';
   import { MOBILE_WINDOW_WIDTH } from '../../constants.js';
@@ -19,19 +19,16 @@
 
   let windowWidth: number
 
-  $: uri = '';
 
-  uriConnect$.subscribe((_uri)=>{
-     uri = _uri;
-     setTimeout(()=> {
-       openQrModal();
-     }, 500)
-  })
 
-  qrModalConnect$.subscribe( async ({ isOpen, modal })=>{
+  qrModalConnect$
+  .pipe(withLatestFrom(uriConnect$))
+  .subscribe(([{ isOpen, modal }, uri])=>{
     if(isOpen && modal && uri !== ''){
       try{
-        await modal.openModal({ uri })
+        setTimeout(()=>{
+          modal.openModal({ uri })
+        }, 500)
       }catch (e) {
         console.log(e)
       }
@@ -40,12 +37,7 @@
     }
   })
 
-  function openQrModal() {
-    qrModalConnect$.next({
-      ...qrModalConnect$.value,
-      isOpen: true
-    })
-  }
+
   const appMetadata$ = state
     .select('appMetadata')
     .pipe(startWith(state.get().appMetadata), shareReplay(1))
diff --git a/packages/core/src/views/connect/Index.svelte b/packages/core/src/views/connect/Index.svelte
index 5fb8236b4..a013685d6 100644
--- a/packages/core/src/views/connect/Index.svelte
+++ b/packages/core/src/views/connect/Index.svelte
@@ -1,20 +1,26 @@
 <script lang="ts">
-  import type { EIP1193Provider, SubstrateProvider, WalletModule, Chain } from '@subwallet-connect/common'
-  import {ProviderRpcErrorCode, ProviderRpcErrorMessage} from '@subwallet-connect/common';
+  import type { EIP1193Provider, SubstrateProvider, WalletModule } from '@subwallet-connect/common'
+  import { ProviderRpcError, ProviderRpcErrorCode, ProviderRpcErrorMessage } from '@subwallet-connect/common';
   import EventEmitter from 'eventemitter3';
   import { BigNumber } from 'ethers'
   import { _ } from 'svelte-i18n'
   import en from '../../i18n/en.json'
-  import { enable, listenAccountsChanged, listenChainChanged } from '../../provider.js'
+  import {
+    enable,
+    getBalance,
+    getChainId,
+    getEns,
+    getUns,
+    listenAccountsChanged,
+    listenStateModal,
+    listenUriChange,
+    requestAccounts,
+    trackWallet
+  } from '../../provider.js'
   import { state } from '../../store/index.js'
-  import {  connectWallet$, onDestroy$, uriConnect$, qrModalConnect$, disconnectWallet$ } from '../../streams.js'
+  import { connectWallet$, onDestroy$, qrModalConnect$, uriConnect$ } from '../../streams.js'
   import { addWallet, updateAccount } from '../../store/actions.js'
-  import {
-    validEnsChain,
-    isSVG,
-    setLocalStore,
-    getLocalStore
-  } from '../../utils.js'
+  import { getLocalStore, isSVG, setLocalStore, validEnsChain } from '../../utils.js'
   import CloseButton from '../shared/CloseButton.svelte'
   import Modal from '../shared/Modal.svelte'
   import Agreement from './Agreement.svelte'
@@ -40,28 +46,10 @@
     takeUntil
   } from 'rxjs'
 
-  import {
-    getChainId,
-    requestAccounts,
-    trackWallet,
-    getBalance,
-    getEns,
-    getUns,
-    listenStateModal,
-    listenUriChange
-  } from '../../provider.js'
-
-  import type {
-    ConnectedChain,
-    ConnectOptions,
-    i18n, Uns, WalletConnectState,
-    WalletState,
-    WalletWithLoadingIcon
-  } from '../../types.js'
+  import type { ConnectOptions, i18n, Uns, WalletConnectState, WalletState, WalletWithLoadingIcon } from '../../types.js'
   import { updateSecondaryTokens } from '../../update-balances'
 
 
-
   export let autoSelect: ConnectOptions['autoSelect']
 
   const appMetadata$ = state
@@ -262,6 +250,14 @@
         chain = chainId
       }
     })
+    if(qrModalConnect$.value.modal){
+      qrModalConnect$.value.modal
+     .subscribeModal(({ open }) => {
+        if(!open && !(selectedWallet.accounts && selectedWallet.accounts.length !== 0)){
+          connectionRejected = true;
+        }
+      })
+    }
 
     try {
 
@@ -274,8 +270,6 @@
           address : undefined
         })))
       ]);
-      console.log(valueResponse, '1231')
-
       if(!valueResponse ) return;
 
       const { address, signer, metadata } = valueResponse;
diff --git a/packages/demo/src/components/modal/selectors/AccountSelector.tsx b/packages/demo/src/components/modal/selectors/AccountSelector.tsx
index ec51ed4f2..f11e823aa 100644
--- a/packages/demo/src/components/modal/selectors/AccountSelector.tsx
+++ b/packages/demo/src/components/modal/selectors/AccountSelector.tsx
@@ -18,8 +18,8 @@ type Props = ThemeProps;
 
 const renderEmpty = () => <GeneralEmptyList />;
 
-export const searchAccountFunction = (item: string, searchText: string): boolean => {
-  return item.toLowerCase().includes(searchText.toLowerCase()) || (item || '').toLowerCase().includes(searchText.toLowerCase());
+export const searchAccountFunction = (item: Account, searchText: string): boolean => {
+  return item.address.toLowerCase().includes(searchText.toLowerCase());
 };
 
 const modalId = SELECT_ACCOUNT_MODAL;
diff --git a/packages/demo/src/components/transaction/TransactionModal.tsx b/packages/demo/src/components/transaction/TransactionModal.tsx
index 924c696f5..40297cad7 100644
--- a/packages/demo/src/components/transaction/TransactionModal.tsx
+++ b/packages/demo/src/components/transaction/TransactionModal.tsx
@@ -201,6 +201,8 @@ function Component ({ className, senderAccount, evmProvider, substrateProvider }
         if (maxLength && value.length > maxLength) {
           value = value.slice(0, maxLength);
         }
+
+        value = value.replace(/[^0-9.]/g, '');
         setValidateValue(false);
         form.setFieldValue('value', value);
       }
@@ -363,7 +365,6 @@ function Component ({ className, senderAccount, evmProvider, substrateProvider }
           >
             <Input
               placeholder={'Amount'}
-              type={'number'}
               className={'__amount-transfer-input'}
               onBlur={form.submit}
               tooltip={'Amount'}
diff --git a/packages/demo/src/utils/api/evmApi.ts b/packages/demo/src/utils/api/evmApi.ts
index 21de94b82..441f08697 100644
--- a/packages/demo/src/utils/api/evmApi.ts
+++ b/packages/demo/src/utils/api/evmApi.ts
@@ -1,10 +1,11 @@
 import {ethers} from 'ethers'
-import type {Web3Provider} from '@ethersproject/providers';
-import type {EIP1193Provider} from "@subwallet-connect/common";
+import type { Web3Provider } from '@ethersproject/providers';
+import type { EIP1193Provider } from "@subwallet-connect/common";
 import web3Onboard from '../../web3-onboard';
-import {RequestArguments} from "../../types";
-import {METHOD_MAP, SIGN_METHODS} from "../methods";
+import { RequestArguments } from "../../types";
+import { METHOD_MAP, SIGN_METHODS } from "../methods";
 import BigNumber from 'bignumber.js'
+import type  { TxDetails } from "@subwallet-connect/core/src/types";
 
 export class evmApi {
   private readonly provider ?: Web3Provider;
@@ -19,6 +20,18 @@ export class evmApi {
     return (await this.provider.getBalance(senderAddress)).toString();
   }
 
+  private async getEstimateGas (txDetails: TxDetails) {
+    if(! this.provider) return Promise.resolve('0');
+
+    return  this.provider.estimateGas(txDetails).then((rs) => rs.toString());
+  }
+  private async getGasPrice () {
+    if(! this.provider) return Promise.resolve('0');
+
+    return  this.provider.getGasPrice().then((rs) => rs.toString());
+  }
+
+
 
   public async isAvailableAmount ( amount: string, senderAddress: string, recipientAddress: string ) {
     if(!this.provider) return false;
@@ -28,8 +41,8 @@ export class evmApi {
     }
 
     const [ gas, price ] = await Promise.all([
-      this.provider.getGasPrice().then(res => new BigNumber(res.toString())),
-      this.provider.estimateGas(txDetails).then(res =>  new BigNumber(res.toString())),
+      this.getEstimateGas(txDetails).then(res =>  new BigNumber(res.toString())),
+      this.getGasPrice().then(res => new BigNumber(res.toString())),
     ])
     const transactionCost = gas.times(price).plus(amount);
     const balance = new BigNumber(await this.getMaxTransfer(amount, senderAddress, recipientAddress));
@@ -39,7 +52,7 @@ export class evmApi {
   public async sendTransaction (senderAddress: string, recipientAddress: string, amount: string ) {
     if(! this.provider) return;
 
-    const signer = this.provider.getUncheckedSigner();
+    const signer = this.provider.getSigner(senderAddress);
     const txDetails = {
       to: recipientAddress,
       value: amount
@@ -49,11 +62,23 @@ export class evmApi {
       fn(tx.hash);
       return tx.hash;
     }
+    const gasPrice = () => this.getGasPrice();
+
+    const estimateGas = () => this.getEstimateGas(txDetails);
+
+
+    const balanceValue = await this.getMaxTransfer(amount, senderAddress, recipientAddress)
+
+    // convert to hook when available
+    const transactionHash =
+      await web3Onboard.state.actions.preflightNotifications({
+        sendTransaction,
+        gasPrice,
+        estimateGas,
+        balance: balanceValue,
+        txDetails: txDetails
+      })
 
-    return await web3Onboard.state.actions.preflightNotifications({
-      sendTransaction,
-      txDetails: txDetails
-    })
   }
 
 
diff --git a/packages/walletconnect/src/walletConnect.ts b/packages/walletconnect/src/walletConnect.ts
index 9fab69e53..f7ecd4938 100644
--- a/packages/walletconnect/src/walletConnect.ts
+++ b/packages/walletconnect/src/walletConnect.ts
@@ -236,8 +236,9 @@ function walletConnect(options: WalletConnectOptions): WalletInit {
                 .pipe(takeUntil(this.disconnected$))
                 .subscribe(async uri => {
                   try {
-                    this.emit('uriChanged', uri)
-                    handleUri && (await handleUri(uri))
+                    this.emit('uriChanged', uri);
+                    this.emit('qrModalState', true);
+                    handleUri && (await handleUri(uri));
                   } catch (error) {
                     throw `An error occurred when handling the URI. Error: ${error}`
                   }
@@ -268,19 +269,23 @@ function walletConnect(options: WalletConnectOptions): WalletInit {
                     fromEvent(
                       this.connector as JQueryStyleEventEmitter<
                         any,
-                        { chainId: number }
+                        { chainId: number,
+                          modal: any
+                        }
                       >,
                       'connect',
-                      (payload: { chainId: number | string }) => payload
+                      (payload: { chainId: number | string , modal: any}) => payload
                     )
                       .pipe(take(1))
                       .subscribe({
-                        next: ({ chainId }) => {
+                        next: ({ chainId, modal }) => {
+                          console.log(modal)
                           this.emit('accountsChanged', this.connector.accounts)
                           const hexChainId = isHexString(chainId)
                             ? chainId
                             : `0x${chainId.toString(16)}`
-                          this.emit('qrModalState', false)
+                          this.emit('qrModalState', false);
+                          this.emit('uriChanged', '');
                           this.emit('chainChanged', hexChainId)
                           resolve(this.connector.accounts)
                         },
@@ -298,15 +303,17 @@ function walletConnect(options: WalletConnectOptions): WalletInit {
                             message: 'User rejected the request.'
                           })
                         )
+                        this.emit('qrModalState', false);
                       })
                     } else {
                       // update ethereum provider to load accounts & chainId
-                      const accounts = this.connector.accounts
-                      const chainId = this.connector.chainId
+                      const accounts = this.connector.accounts;
+                      const chainId = this.connector.chainId;
                       instance = this.connector.session
-                      const hexChainId = `0x${chainId.toString(16)}`
-                      this.emit('qrModalState', false)
-                      this.emit('chainChanged', hexChainId)
+                      const hexChainId = `0x${chainId.toString(16)}`;
+                      this.emit('qrModalState', false);
+                      this.emit('uriChanged', '');
+                      this.emit('chainChanged', hexChainId);
                       return resolve(accounts)
                     }
                   }
diff --git a/packages/walletconnectPolkadot/src/walletConnect.ts b/packages/walletconnectPolkadot/src/walletConnect.ts
index 38ee21f57..25abe5a78 100644
--- a/packages/walletconnectPolkadot/src/walletConnect.ts
+++ b/packages/walletconnectPolkadot/src/walletConnect.ts
@@ -241,7 +241,8 @@ function walletConnect(options: WalletConnectOptions): WalletInit {
               .pipe(takeUntil(this.disconnected$))
               .subscribe(async uri => {
                 try {
-                  this.emit('uriChanged', uri)
+                  this.emit('uriChanged', uri);
+                  this.emit('qrModalState', true);
                   handleUri && (await handleUri(uri))
                 } catch (error) {
                   throw `An error occurred when handling the URI. Error: ${error}`
@@ -309,9 +310,10 @@ function walletConnect(options: WalletConnectOptions): WalletInit {
                     .subscribe({
                       next: (payload) => {
                         console.log(payload)
-                        this.emit('accountsChanged', generateAccountAddress())
-                        this.emit('chainChanged', chains[0].id)
-                        this.emit('qrModalState', false)
+                        this.emit('accountsChanged', generateAccountAddress());
+                        this.emit('chainChanged', chains[0].id);
+                        this.emit('qrModalState', false);
+                        this.emit('uriChanged', '');
                         resolve(generateAccountAddress())
                       },
                       error: reject
@@ -338,11 +340,12 @@ function walletConnect(options: WalletConnectOptions): WalletInit {
                     })
                   } else {
                     // update substrate provider to load accounts & chainId
-                    const accounts = generateAccountAddress()
-                    const chainId = chains[0].id
-                    instance = this.connector.session
-                    this.emit('chainChanged', chainId)
-                    this.emit('qrModalState', false)
+                    const accounts = generateAccountAddress();
+                    const chainId = chains[0].id;
+                    instance = this.connector.session;
+                    this.emit('chainChanged', chainId);
+                    this.emit('qrModalState', false);
+                    this.emit('uriChanged', '');
                     return resolve(accounts)
                   }
                 }