From b026b0761f68220871f0109a9a87828e3f272c76 Mon Sep 17 00:00:00 2001
From: Thiendekaco <thienguo@gmail.com>
Date: Tue, 5 Mar 2024 16:40:05 +0700
Subject: [PATCH] Resolve ui bug #9

---
 packages/core/src/index.ts                    | 17 ++++---
 packages/core/src/provider.ts                 | 44 +++++++++++++------
 .../src/views/connect/ConnectingWallet.svelte |  4 +-
 packages/core/src/views/connect/Index.svelte  | 41 +++++++++++------
 .../src/components/account/AccountList.tsx    | 19 ++++++--
 packages/demo/src/utils/api/substrateApi.ts   |  2 +-
 packages/demo/src/web3-onboard.ts             |  5 ---
 .../hw-common/src/elements/TableHeader.svelte | 10 -----
 .../hw-common/src/views/AccountSelect.svelte  |  9 +---
 packages/walletconnect/src/walletConnect.ts   |  1 +
 .../src/walletConnect.ts                      |  5 ++-
 11 files changed, 95 insertions(+), 62 deletions(-)

diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 3c3aa6a9b..cfa24c1b6 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -127,12 +127,19 @@ function init(options: InitOptions): OnboardAPI {
 
   initI18N(i18n)
   addChains(chainIdToHex(chains).concat(chainsPolkadot))
-  const modalWC = new WalletConnectModal({ projectId });
 
-  qrModalConnect$.next({
-    isOpen: false,
-    modal: modalWC
-  })
+  if(projectId){
+    const modalWC = new WalletConnectModal(
+      {
+        projectId
+      });
+
+    qrModalConnect$.next({
+      isOpen: false,
+      modal: modalWC
+    })
+  }
+
 
 
   if (typeof connect !== 'undefined') {
diff --git a/packages/core/src/provider.ts b/packages/core/src/provider.ts
index 0d95746a6..a9dc2183b 100644
--- a/packages/core/src/provider.ts
+++ b/packages/core/src/provider.ts
@@ -12,13 +12,13 @@ import type {
 import { weiToEth } from '@subwallet-connect/common'
 import { disconnectWallet$, qrModalConnect$, uriConnect$ } from './streams.js'
 import { updateAccount, updateWallet } from './store/actions.js'
-import { validEnsChain } from './utils.js'
-import disconnect from './disconnect.js'
-import { state } from './store/index.js'
+import { validEnsChain } from './utils.js';
+import disconnect from './disconnect.js';
+import { state } from './store/index.js';
 import { getBNMulitChainSdk } from './services.js'
 import { configuration } from './configuration.js'
 import { getBalanceSubstrate } from './utils.js';
-import { BN } from 'bn.js'
+import BN from 'bn.js';
 
 
 import type {
@@ -114,7 +114,6 @@ export function listenChainChanged(args: {
   const addHandler = (handler: ChainListener) => {
     provider.on('chainChanged', handler)
   }
-
   const removeHandler = (handler: ChainListener) => {
     provider.removeListener('chainChanged', handler)
   }
@@ -127,23 +126,42 @@ export function listenChainChanged(args: {
 export function listenUriChange(args: {
   provider: EIP1193Provider | SubstrateProvider
   uriConnect$: BehaviorSubject<string>
-}): void {
+}): () => void {
   const { provider, uriConnect$ } = args
 
-    provider.on('uriChanged', (uri : string)=> {
-      uriConnect$.next(uri)
-    });
+  const handler = (uri : string) => {
+    uriConnect$.next(uri)
+  }
+
+  provider.on('uriChanged', handler);
+
+
+  const removeHandler = () => {
+    provider.removeListener('uriChanged', handler)
+  }
+
+  return removeHandler
+
 }
 
 export function listenStateModal(args: {
   provider: EIP1193Provider | SubstrateProvider
   qrModalConnect$: BehaviorSubject<ModalQrConnect>
-}): void {
-  const { provider, qrModalConnect$ } = args
+}) : () => void {
+  const { provider, qrModalConnect$ } = args;
 
-  provider.on('qrModalState', (state : boolean)=>{
+  const handler = (state : boolean)=>{
     qrModalConnect$.next({ ...qrModalConnect$.value, isOpen : state })
-  })
+  };
+
+
+    provider.on('qrModalState', handler)
+
+  const removeHandler = () => {
+    provider.removeListener('qrModalState', handler)
+  }
+
+  return removeHandler
 }
 
 
diff --git a/packages/core/src/views/connect/ConnectingWallet.svelte b/packages/core/src/views/connect/ConnectingWallet.svelte
index 0c2a7f607..b930aaf7b 100644
--- a/packages/core/src/views/connect/ConnectingWallet.svelte
+++ b/packages/core/src/views/connect/ConnectingWallet.svelte
@@ -23,10 +23,10 @@
 
   qrModalConnect$
   .pipe(withLatestFrom(uriConnect$))
-  .subscribe(([{ isOpen, modal }, uri])=>{
+  .subscribe(async ([{ isOpen, modal }, uri])=>{
     if(isOpen && modal && uri !== ''){
       try{
-          modal.openModal({ uri })
+          await modal.openModal({ uri });
       }catch (e) {
         console.log(e)
       }
diff --git a/packages/core/src/views/connect/Index.svelte b/packages/core/src/views/connect/Index.svelte
index a013685d6..dcaa6f645 100644
--- a/packages/core/src/views/connect/Index.svelte
+++ b/packages/core/src/views/connect/Index.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { EIP1193Provider, SubstrateProvider, WalletModule } from '@subwallet-connect/common'
-  import { ProviderRpcError, ProviderRpcErrorCode, ProviderRpcErrorMessage } from '@subwallet-connect/common';
+  import { ProviderRpcErrorCode, ProviderRpcErrorMessage } from '@subwallet-connect/common';
   import EventEmitter from 'eventemitter3';
   import { BigNumber } from 'ethers'
   import { _ } from 'svelte-i18n'
@@ -188,8 +188,27 @@
       connectingErrorMessage = ''
       scrollToTop()
       // change step on next event loop
-      listenUriChange({ provider, uriConnect$ })
-      listenStateModal({ provider, qrModalConnect$ })
+      const removeUriListener =  listenUriChange(
+              { provider, uriConnect$ }
+      );
+      const removeStateModalListener = listenStateModal(
+              { provider, qrModalConnect$ }
+      );
+
+      if(qrModalConnect$.value.modal){
+        qrModalConnect$.value.modal
+                .subscribeModal(async ({ open }) => {
+                  if(!open
+                  && !(selectedWallet?.accounts
+                  && selectedWallet.accounts.length !== 0))
+                  {
+                    connectionRejected = true;
+                    removeStateModalListener();
+                    removeUriListener();
+                  }
+                })
+      }
+
       setTimeout(() => setStep('connectingWallet'), 1)
     } catch (error) {
       const { message } = error as { message: string }
@@ -205,7 +224,8 @@
 
 
   function deselectWallet() {
-    selectedWallet = null
+    selectedWallet = null;
+    qrModalConnect$.next({ ...qrModalConnect$.value, isOpen: false });
   }
 
   function updateSelectedWallet(update: Partial<WalletState> | WalletState) {
@@ -250,14 +270,6 @@
         chain = chainId
       }
     })
-    if(qrModalConnect$.value.modal){
-      qrModalConnect$.value.modal
-     .subscribeModal(({ open }) => {
-        if(!open && !(selectedWallet.accounts && selectedWallet.accounts.length !== 0)){
-          connectionRejected = true;
-        }
-      })
-    }
 
     try {
 
@@ -373,12 +385,13 @@
       const { code, message } = error as { code: number; message: string }
       scrollToTop()
       console.log(error);
+      qrModalConnect$.next({ ...qrModalConnect$.value, isOpen: false });
 
       // user rejected account access
       if (code === ProviderRpcErrorCode.ACCOUNT_ACCESS_REJECTED
               || message === ProviderRpcErrorMessage.ACCOUNT_ACCESS_REJECTED
       ) {
-        connectionRejected = true
+        connectionRejected = true;
 
         if (autoSelect.disableModals) {
           connectWallet$.next({ inProgress: false })
@@ -487,7 +500,7 @@
     //     return;
     //   }
     // }
-    setTimeout(() => connectWallet$.next({ inProgress: false }), 500)
+    setTimeout(() => connectWallet$.next({ inProgress: false }), 100)
   }
 
 
diff --git a/packages/demo/src/components/account/AccountList.tsx b/packages/demo/src/components/account/AccountList.tsx
index 97075184b..7d4fe5a06 100644
--- a/packages/demo/src/components/account/AccountList.tsx
+++ b/packages/demo/src/components/account/AccountList.tsx
@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 // eslint-disable-next-line header/header
-import {Button, ModalContext, SwList, Web3Block} from "@subwallet/react-ui";
+import { Button, ModalContext, SwList, Web3Block} from "@subwallet/react-ui";
 import React, {useCallback, useContext, useEffect, useState} from 'react';
 import type { Account } from '@subwallet-connect/core/dist/types';
 import { useConnectWallet, useNotifications, useSetChain } from "@subwallet-connect/react";
@@ -18,6 +18,7 @@ import TransactionModal from "../transaction/TransactionModal";
 import styled from "styled-components";
 import {useNavigate} from "react-router-dom";
 import {TRANSACTION_MODAL} from "../../constants/modal";
+import SwAvatar from "@subwallet/react-ui/es/sw-avatar";
 
 
 
@@ -109,7 +110,15 @@ function Component ({className, substrateProvider, evmProvider}: Props): React.R
       <div className={'__account-item-middle'}>
         <div className={'__account-item-info'}>
           <span className='__account-item__title'>Wallet name:</span>
-          <span className='__account-item__content'>{ name }</span>
+          <span className='__account-item__content'>
+            <SwAvatar
+              size={24}
+              value={address}
+            />
+            <span className={'__account-item-name'}>
+                   { name }
+            </span>
+          </span>
         </div>
         <div className={'__account-item-info'}>
           <span className='__account-item__title'>Address:</span>
@@ -212,6 +221,9 @@ export const AccountList = styled(Component)<Props>( ({theme: {token}}) => {
 
 
       '.__account-item__content': {
+        display: 'flex',
+        gap: token.paddingSM/2,
+        alignItems: 'center',
         textOverflow: 'ellipsis',
         fontSize: token.fontSizeHeading6,
         overflow: 'hidden',
@@ -227,7 +239,8 @@ export const AccountList = styled(Component)<Props>( ({theme: {token}}) => {
         '&:hover': {
           backgroundColor: "#363636"
         }
-      }
+      },
+
     }
 })
 
diff --git a/packages/demo/src/utils/api/substrateApi.ts b/packages/demo/src/utils/api/substrateApi.ts
index 6c8d3c69b..e54f928d2 100644
--- a/packages/demo/src/utils/api/substrateApi.ts
+++ b/packages/demo/src/utils/api/substrateApi.ts
@@ -33,7 +33,7 @@ export class substrateApi {
   }
 
   public async isAvailableAmount ( amount: string, senderAddress: string, recipientAddress: string ) {
-
+    if(!this.api) return false;
     const transferExtrinsic = this.api.tx.balances.transferKeepAlive(recipientAddress, amount)
     const [ { partialFee }, balances ] = await Promise.all([
       transferExtrinsic.paymentInfo(senderAddress),
diff --git a/packages/demo/src/web3-onboard.ts b/packages/demo/src/web3-onboard.ts
index ba9915a1b..fba65858a 100644
--- a/packages/demo/src/web3-onboard.ts
+++ b/packages/demo/src/web3-onboard.ts
@@ -157,15 +157,10 @@ export default init({
       namespace: 'substrate'
     },
     {
-      // hex encoded string, eg '0x1' for Ethereum Mainnet
       id: '0x91b171bb158e2d3848fa23a9f1c25182fb8e20313b2c1eb49219da7a70ce90c3',
-      // string indicating chain namespace. Defaults to 'evm' but will allow other chain namespaces in the future
       namespace: 'substrate',
-      // the native token symbol, eg ETH, BNB, MATIC
       token: 'DOT',
-      // used for display, eg Polkadot
       label: 'Polkadot',
-      // used for get balance
       rpcUrl: `polkadot.api.subscan.io`,
       decimal: 10
     },
diff --git a/packages/hw-common/src/elements/TableHeader.svelte b/packages/hw-common/src/elements/TableHeader.svelte
index f86487033..6bd081e9e 100644
--- a/packages/hw-common/src/elements/TableHeader.svelte
+++ b/packages/hw-common/src/elements/TableHeader.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import Spinner from './Spinner.svelte'
   export let scanAccounts: () => Promise<void>
-  export let getMoreAccounts: () => Promise<void>
   export let loadingAccounts: boolean
   export let showEmptyAddresses: boolean
   export let errorFromScan: string
@@ -261,15 +260,6 @@
         Scan Accounts
       {/if}
     </button>
-
-    <button
-            class="more-btn"
-            id="more-accounts"
-            disabled={loadingAccounts}
-            on:click={getMoreAccounts}
-    >
-      Load More
-    </button>
   </div>
 
 </div>
diff --git a/packages/hw-common/src/views/AccountSelect.svelte b/packages/hw-common/src/views/AccountSelect.svelte
index 177e95471..2a81ac503 100644
--- a/packages/hw-common/src/views/AccountSelect.svelte
+++ b/packages/hw-common/src/views/AccountSelect.svelte
@@ -107,7 +107,8 @@
     try {
       errorFromScan = ''
       loadingAccounts = true
-      const allAccounts = await scanAccounts(scanAccountOptions)
+      scanAccountOptions.accountIdxStart += 10;
+      const allAccounts = await scanAccounts(scanAccountOptions);
       const allAccountsFilter = allAccounts.filter(account => {
         return parseFloat(weiToEth(account.balance.value.toString())) > 0
       })
@@ -139,11 +140,6 @@
     resetModal()
   }
 
-  const getMoreAccount = async () => {
-    scanAccountOptions.accountIdxStart += 10;
-    await scanAccountsWrap()
-  }
-
   const dismiss = () => {
     accounts$.next([])
     resetModal()
@@ -586,7 +582,6 @@
       <div class="w-100 table-container">
         <TableHeader
           scanAccounts={scanAccountsWrap}
-          getMoreAccounts={getMoreAccount}
           {loadingAccounts}
           {errorFromScan}
           bind:showEmptyAddresses
diff --git a/packages/walletconnect/src/walletConnect.ts b/packages/walletconnect/src/walletConnect.ts
index bed57ef1d..96f02f669 100644
--- a/packages/walletconnect/src/walletConnect.ts
+++ b/packages/walletconnect/src/walletConnect.ts
@@ -134,6 +134,7 @@ function walletConnect(options: WalletConnectOptions): WalletInit {
           optionalChains: optionalChainsParsed,
           optionalMethods,
           showQrModal: false,
+          relayUrl: 'wss://relay.walletconnect.com',
           rpcMap: chains
             .map(({ id, rpcUrl }) => ({ id, rpcUrl }))
             .reduce((rpcMap: Record<number, string>, { id, rpcUrl }) => {
diff --git a/packages/walletconnectPolkadot/src/walletConnect.ts b/packages/walletconnectPolkadot/src/walletConnect.ts
index 89e9c697f..e4a4f5740 100644
--- a/packages/walletconnectPolkadot/src/walletConnect.ts
+++ b/packages/walletconnectPolkadot/src/walletConnect.ts
@@ -308,12 +308,11 @@ function walletConnect(options: WalletConnectOptions): WalletInit {
                     .pipe(take(1))
                     .subscribe({
                       next: (payload) => {
-                        console.log(payload)
                         this.emit('accountsChanged', generateAccountAddress());
                         this.emit('chainChanged', chains[0].id);
                         this.emit('qrModalState', false);
                         this.emit('uriChanged', '');
-                        resolve(generateAccountAddress())
+                        resolve(generateAccountAddress());
                       },
                       error: reject
                     })
@@ -336,7 +335,9 @@ function walletConnect(options: WalletConnectOptions): WalletInit {
                           message: 'User rejected the request.'
                         })
                       )
+                      this.emit('qrModalState', false);
                     })
+                    console.log(this.connector.session)
                   } else {
                     // update substrate provider to load accounts & chainId
                     const accounts = generateAccountAddress();