[Issue 19] SubConnect - Improve UI

Koniverse · Mar 13, 2024 · 44ca66e · 44ca66e
1 parent f653c63
commit 44ca66e
Show file tree

Hide file tree

Showing 21 changed files with 120 additions and 54 deletions.
diff --git a/packages/core/src/views/connect/Index.svelte b/packages/core/src/views/connect/Index.svelte
@@ -186,7 +186,7 @@
 
       connectingErrorMessage = ''
       scrollToTop()
-      setTimeout(() => setStep('connectingWallet'), 1)
+      setStep('connectingWallet')
     } catch (error) {
       const { message } = error as { message: string }
       connectingErrorMessage = message
@@ -496,7 +496,7 @@
     //     return;
     //   }
     // }
-    setTimeout(() => connectWallet$.next({ inProgress: false }), 100)
+    connectWallet$.next({ inProgress: false })
   }
 
 
@@ -682,6 +682,12 @@
       display: none;
     }
   }
+
+  @media  all and ( max-width: 768px) {
+    .content {
+      padding: 2rem 1rem 2rem 1rem;
+    }
+  }
 </style>
 
 <svelte:window bind:innerWidth={windowWidth} />

diff --git a/packages/core/src/views/connect/WalletButton.svelte b/packages/core/src/views/connect/WalletButton.svelte
@@ -180,6 +180,12 @@
     /*  flex-direction: column;*/
     /*}*/
   }
+  @media screen and (max-width: 768px) {
+    button.wallet-button-styling {
+      min-width: 80px;
+    }
+  }
+
 </style>
 
 <svelte:window bind:innerWidth={windowWidth} />

diff --git a/packages/demo/package.json b/packages/demo/package.json
@@ -77,7 +77,8 @@
     "usehooks-ts": "^2.15.1",
     "bignumber.js": "^9.1.2",
     "@types/bn.js": "^5.1.5",
-    "bn.js": "^4.11.9"
+    "bn.js": "^4.11.9",
+    "eventemitter3": "^4.0.7"
   },
   "devDependencies": {
     "@types/jest": "^29.5.8",

diff --git a/packages/demo/src/components/account/AccountBriefInfo.tsx b/packages/demo/src/components/account/AccountBriefInfo.tsx
@@ -1,6 +1,6 @@
 import { Typography } from '@subwallet/react-ui';
 import SwAvatar from '@subwallet/react-ui/es/sw-avatar';
-import React, { useMemo } from 'react';
+import React, {useContext, useMemo} from 'react';
 import styled from 'styled-components';
 
 import type { ThemeProps } from '../../types';
@@ -49,17 +49,19 @@ const AccountBriefInfo = styled(Component)<Props>(({ theme: { token } }: Props)
     },
 
     '.account-name': {
+      whiteSpace: 'nowrap',
       fontWeight: token.headingFontWeight,
       fontSize: token.fontSizeHeading5,
       lineHeight: token.lineHeightHeading5,
       color: token.colorTextBase
     },
 
     '.account-address': {
+      whiteSpace: 'nowrap',
       fontSize: token.fontSizeHeading6,
       lineHeight: token.lineHeightHeading6,
       color: token.colorTextDescription
-    }
+    },
   };
 });
 

diff --git a/packages/demo/src/components/icon/InfoIcon.tsx b/packages/demo/src/components/icon/InfoIcon.tsx
@@ -11,7 +11,6 @@ const InfoIcon: React.FC<Props> = (props: Props) => {
   return (
     <Icon
       phosphorIcon={Question}
-      size='md'
       {...props}
     />
   );

diff --git a/packages/demo/src/components/layout/Layout.tsx b/packages/demo/src/components/layout/Layout.tsx
@@ -111,11 +111,22 @@ const Layout = styled(Component)<Props>( ({ theme: { extendToken, token} }: Them
 
     },
 
+    '@media(max-width : 1660px and min-width: 768px)' : {
+      '.__main-layout': {
+        padding: '0 16px'
+      }
+
+    },
+
     '&.-isMobile':{
       '.__main-content.-isConnected': {
         padding: `0 ${token.padding}px`,
+      },
 
-      }
+      '.-upper': {
+        gap: 81,
+        marginTop: 0
+      },
     }
   }
 })

diff --git a/packages/demo/src/components/layout/WalletHeader.tsx b/packages/demo/src/components/layout/WalletHeader.tsx
@@ -109,7 +109,7 @@ function Component ({ visible, className }: Props): React.ReactElement<Props> {
               size='xs'
               type='ghost'
             >
-              Help
+             {isWebUI && 'Help'}
             </Button>
           </>
         }
@@ -158,8 +158,8 @@ const WalletHeader = styled(Component)<Props>(({theme : {token}}) => {
 
     '.__header-title': {
       fontSize: 30,
-      color: token.colorTextLight1,
-      marginLeft: 85
+      marginLeft: 30,
+      color: token.colorTextLight1
     },
 
     '.__header-action': {
@@ -182,10 +182,6 @@ const WalletHeader = styled(Component)<Props>(({theme : {token}}) => {
             paddingRight: 3
           }
         },
-
-      '.__header-title': {
-        marginLeft: 0
-      }
     },
 
     '&.-isMobile': {
@@ -198,7 +194,19 @@ const WalletHeader = styled(Component)<Props>(({theme : {token}}) => {
         flexDirection: 'column',
         alignItems: 'flex-start',
         gap: token.paddingSM
+      },
+
+      '.__header-action': {
+        width: '100%'
+      },
+
+      '.__header-title': {
+        marginLeft: 0
       }
+    },
+
+    '.__header-logo': {
+      padding: `0 ${token.padding}px`
     }
   })
 })

diff --git a/packages/demo/src/components/logo/LogoWithSubIcon.tsx b/packages/demo/src/components/logo/LogoWithSubIcon.tsx
@@ -25,13 +25,13 @@ const Component = ({className, icon, type} : Props) => {
 }
 
 
-const LogoWithSubIcon = styled(Component)<Props>(({theme}) => {
+const LogoWithSubIcon = styled(Component)<Props>(({theme: {token}}) => {
   return({
     '&.__wallet-logo': {
       position: 'relative',
+      padding: `0 ${token.padding}`,
       width: 80,
       height: 80,
-
     },
 
     '.__wallet-logo-main': {

diff --git a/packages/demo/src/components/modal/selectors/AccountSelector.tsx b/packages/demo/src/components/modal/selectors/AccountSelector.tsx
@@ -11,6 +11,8 @@ import { GeneralEmptyList } from '../../empty';
 import { BaseSelectModal } from '../BaseSelectModal';
 import {useConnectWallet, useSetChain, useWallets} from "@subwallet-connect/react";
 import type { Account, WalletState } from  '@subwallet-connect/core/dist/types';
+import CN from "classnames";
+import {ScreenContext} from "../../../context/ScreenContext";
 
 
 
@@ -30,6 +32,7 @@ interface WalletMapByAccountInterface {
 
 function Component ({ className }: Props): React.ReactElement<Props> {
   const wallets = useWallets();
+  const { isWebUI } = useContext(ScreenContext);
   const setPrimaryWallet = useConnectWallet()[5];
   const [ accountMap, setAccountMap ] = useState<Account[]>([]);
   const [ walletMapByAccount, setWalletMapByAccount ] = useState<WalletMapByAccountInterface>({});
@@ -91,12 +94,11 @@ function Component ({ className }: Props): React.ReactElement<Props> {
   return (
     <BaseSelectModal
       background={'default'}
-      className={className}
-      fullSizeOnMobile
+      className={CN(className)}
       id={modalId}
       ignoreScrollbarMethod='padding'
-      inputClassName={`${className} account-selector-input`}
-      inputWidth={'100%'}
+      inputClassName={CN(className, 'account-selector-input')}
+      inputWidth={isWebUI ? '100%' : '50%'}
       itemKey='address'
       items={accountMap}
       onSelect={_onSelect}
@@ -224,7 +226,8 @@ const SelectAccount = styled(Component)<Props>(({ theme }) => {
       flexDirection: 'row',
       alignItems: 'center',
       gap: 8
-    },
+    }
+
   });
 });
 

diff --git a/packages/demo/src/components/modal/selectors/NetworkSelector.tsx b/packages/demo/src/components/modal/selectors/NetworkSelector.tsx
@@ -26,9 +26,7 @@ function Component (props: Props): React.ReactElement<Props> {
   const isLedgerWallet = useMemo(()=>  wallet?.label === 'Ledger' , [])
   const renderChainSelected = useCallback((item: NetworkItemType) => {
     return (
-      <>
-        { isWebUI && <div className={'__selected-item'}>{item.name}</div> }
-      </>
+       <div className={'__selected-item'}>{item.name}</div>
     );
   }, []);
 

diff --git a/packages/demo/src/components/transaction/TransactionModal.tsx b/packages/demo/src/components/transaction/TransactionModal.tsx
@@ -238,7 +238,8 @@ function Component ({ className, senderAccount, evmProvider, substrateProvider }
       const amount = getOutputValuesFromString(value, chainInfo.decimal || 18);
 
       if(wallet?.type === "evm"){
-        blockHash = await evmProvider?.sendTransaction(senderAccount.address, to, amount ) || ''
+        await evmProvider?.sendTransaction(senderAccount.address, to, amount )
+        evmProvider?.transactionState.on('transaction-success', (blockHash: string) => blockHash !== '' && onCloseModal())
       }else{
 
         const getSigner = async ()=>{
@@ -252,23 +253,29 @@ function Component ({ className, senderAccount, evmProvider, substrateProvider }
           if(wallet.label === 'Polkadot Vault'){
             wallet.signer = await substrateProvider?.getQrSigner(senderAccount.address, provider, chainId);
           }
-          return await substrateProvider?.sendTransaction(
+          return substrateProvider?.sendTransaction(
             senderAccount.address,
             to,
             wallet.signer,
             amount
           );
         }
 
-        await substrateProvider?.isReady()
-        blockHash = await getSigner() || '';
-
+        await substrateProvider?.isReady();
+        await getSigner();
+        substrateProvider?.transactionState.on('transaction-success', (blockHash: string) => blockHash !== '' && onCloseModal())
       }
       setLoading(false)
-      blockHash !== '' && onCloseModal();
     }catch (e) {}
   }, [wallet, chains, senderAccount, evmProvider, substrateProvider]);
 
+  useEffect(() => {
+    if(!(wallet && wallet.accounts && wallet.accounts.length > 0)){
+      substrateProvider?.transactionState.removeAllListeners('transaction-success')
+      evmProvider?.transactionState.removeAllListeners('transaction-success')
+    }
+  }, [wallet, substrateProvider, evmProvider]);
+
   const isValidInput = useCallback((input: string) => {
     return !(isNaN(parseFloat(input)) || !input.match(/^-?\d*(\.\d+)?$/));
   }, []);

diff --git a/packages/demo/src/pages/EvmWalletInfo.tsx b/packages/demo/src/pages/EvmWalletInfo.tsx
@@ -82,21 +82,25 @@ function Component ({className}: Props): React.ReactElement {
             </div>
             {wallet?.accounts && wallet.accounts.length > 0 && <AccountList evmProvider={evmProvider}/>}
           </div>
-          <div className={'__evm-wallet-info-box'}>
-            <div className={'__evm-wallet-info-label'}>Permission</div>
-            <Web3Block
-              className={'__request-item'}
-              middleItem={
-              <Button
-                className='__sub-wallet-btn'
-                icon={<PlusCircleOutlined />}
-                onClick={requestPermission}
-                block={true}
-              >Request Permissions</Button>
-            }
-            />
 
-          </div>
+            <div className={'__evm-wallet-info-box'}>
+              {wallet?.label !== 'WalletConnect' &&
+                <>
+                  <div className={'__evm-wallet-info-label'}>Permission</div>
+                  <Web3Block
+                    className={'__request-item'}
+                    middleItem={
+                      <Button
+                        className='__sub-wallet-btn'
+                        icon={<PlusCircleOutlined/>}
+                        onClick={requestPermission}
+                        block={true}
+                      >Request Permissions</Button>
+                    }
+                  />
+                </>
+             }
+            </div>
         </div>
       </div>
     </div>

diff --git a/packages/demo/src/pages/Welcome.tsx b/packages/demo/src/pages/Welcome.tsx
@@ -121,7 +121,7 @@ const Welcome = styled(Component)<Props>(({theme: { token }}: ThemeProps) => {
     },
 
     '.__welcome-content__sub-text.-isMobile': {
-      padding: `0 ${token.padding}`
+      padding: `0 ${token.padding}px`
     },
 
     '.__welcome-content__btn': {

diff --git a/packages/demo/src/utils/api/evmApi.ts b/packages/demo/src/utils/api/evmApi.ts
@@ -6,14 +6,20 @@ 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";
+import EventEmitter from 'eventemitter3';
 
 export class evmApi {
   private readonly provider ?: Web3Provider;
+  private _transactionState = new EventEmitter();
 
   constructor (provider: EIP1193Provider){
     this.provider = new ethers.providers.Web3Provider(provider, 'any')
   }
 
+  get transactionState():  EventEmitter<string | symbol, any> {
+    return this._transactionState;
+  }
+
   public async getMaxTransfer (amount: string, senderAddress: string, recipientAddress: string) {
     if(!this.provider) return '0';
 
@@ -59,6 +65,7 @@ export class evmApi {
     }
     const sendTransaction = async (fn: (hash: string) => void) => {
       const tx = await signer.sendTransaction(txDetails);
+      this._transactionState.emit('transaction-success', tx.hash);
       fn(tx.hash);
       return tx.hash;
     }

diff --git a/packages/demo/src/utils/api/substrateApi.ts b/packages/demo/src/utils/api/substrateApi.ts
@@ -8,8 +8,11 @@ import { LedgerSignature } from "@polkadot/hw-ledger/types";
 import { blake2AsU8a } from '@polkadot/util-crypto';
 import { BN_HUNDRED, BN_ZERO, isFunction, nextTick } from '@polkadot/util';
 import BN from 'bn.js';
+import EventEmitter from 'eventemitter3';
+import status from "@subwallet-connect/injected-wallets/dist/icons/status";
 export class substrateApi {
   private readonly api ?: ApiPromise;
+  private _transactionState = new EventEmitter();
 
 
   constructor (chainEndpoint: string){
@@ -18,6 +21,10 @@ export class substrateApi {
     });
   }
 
+  get transactionState():  EventEmitter<string | symbol, any> {
+    return this._transactionState;
+  }
+
   public async isReady(){
     return this.api?.isReady
   }
@@ -60,6 +67,7 @@ export class substrateApi {
         await transferExtrinsic.signAndSend(senderAddress, { signer }, ({ status, txHash }) => {
           if (status.isInBlock) {
             fn(txHash.toString());
+            this._transactionState.emit('transaction-success', txHash.toString());
             console.log(`Completed at block hash #${status.asInBlock.toString()}`);
           } else {
             console.log(`Current status: ${status.type}`);

diff --git a/packages/injected/src/icons/talisman.ts b/packages/injected/src/icons/talisman.ts
@@ -1,5 +1,5 @@
 export default `
-<svg width="100%" height="100%" viewBox="0 0 82 82" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="100%" height="100%" viewBox="0 0 82 82" fill="none" style="border-radius: 13px" xmlns="http://www.w3.org/2000/svg">
     <rect width="100%" height="100%" rx="12" fill="#d5ff5c"/>
     <path fill-rule="evenodd" clip-rule="evenodd" d="M59.117 44.663c.608 1.325 2.398 1.792 3.428.762l1.89-1.89a5 5 0 0 1 7.072 7.071L56.234 65.879C52.565 70.233 47.07 73 40.932 73c-6.403 0-12.102-3.008-15.763-7.689L10.464 50.607a5 5 0 0 1 7.071-7.071l1.861 1.86c1.008 1.009 2.759.555 3.354-.74a1.94 1.94 0 0 0 .182-.813V21a5 5 0 0 1 10 0v11.557c0 .994 1.018 1.669 1.966 1.37.6-.19 1.034-.737 1.034-1.366V14a5 5 0 0 1 10 0v18.561c0 .63.433 1.176 1.033 1.365.948.3 1.966-.375 1.966-1.37V21a5 5 0 1 1 10 0v22.835c0 .287.066.567.186.828z" fill="#fd4848"/>
     <path d="M56.933 55s-7.164 10-16 10c-8.837 0-16-10-16-10s7.163-10 16-10c8.836 0 16 10 16 10z" fill="#d5ff5c"/>