Add transaction modal

packages/core/src/preflight-notifications.ts

@@ -110,7 +110,6 @@ export async function preflightNotifications(
   let hash
   try {
     await sendTransaction(resultFn);
-    removeNotification(id)
   } catch (error) {
     type CatchError = {
       message: string
@@ -119,9 +118,20 @@ export async function preflightNotifications(
     const { eventCode, errorMsg } = extractMessageFromError(error as CatchError)
 
     addNotification(buildNotification(eventCode, id, errorMsg))
+
+    console.log(errorMsg)
+
+    setTimeout(()=>{
+      removeNotification(id)
+    }, 1500)
+
     return
   }
 
+  setTimeout(()=>{
+    removeNotification(id)
+  }, 1500)
+
   // Remove preflight notification if a resolves to hash
   // and let the SDK take over
 

packages/core/src/views/Index.svelte

@@ -439,6 +439,10 @@
     width: 100%;
   }
 
+  .z-indexed-notify{
+    z-index: 10000;
+  }
+
   .z-indexed {
     z-index: var(--account-center-z-index);
   }
@@ -552,7 +556,7 @@
 {/if}
 {#if displayNotifySeparate}
   <div
-    class="container flex flex-column fixed z-indexed"
+    class="container flex flex-column fixed z-indexed-notify"
     style="{setPositioningDefaults(notifyPositioning)[
       $notify$.position
     ]}; {device.type === 'mobile' && $notify$.position.includes('top')

packages/core/src/views/notify/Index.svelte

@@ -70,7 +70,7 @@
     overflow: visible;
     scrollbar-width: none;
     box-sizing: border-box;
-    z-index: var(--notify-onboard-z-index, 300);
+    z-index: var(--notify-onboard-z-index, 10000);
     font-family: var(
       --notify-onboard-font-family,
       var(--onboard-font-family-normal, inherit)

packages/demo/package.json

@@ -72,7 +72,9 @@
     "web3": "^4.2.2",
     "eth-sig-util": "^3.0.1",
     "styled-components": "^5.3.6",
-    "rxjs": "^7.8.1"
+    "rxjs": "^7.8.1",
+    "usehooks-ts": "^2.15.1",
+    "bignumber.js": "^9.1.2"
   },
   "devDependencies": {
     "@types/jest": "^29.5.8",

packages/demo/src/components/account/AccountBriefInfo.tsx

@@ -5,13 +5,14 @@ import styled from 'styled-components';
 
 import type { ThemeProps } from '../../types';
 import { toShort } from "../../utils/style";
-import type { Account } from "@subwallet_connect/core/dist/types";
+import type { Account } from '@subwallet_connect/core/dist/types';
 
 interface Props extends ThemeProps {
-  account: Account
+  account: Account,
+  isDetail ?: boolean
 }
 
-const Component: React.FC<Props> = ({ account, className }: Props) => {
+const Component: React.FC<Props> = ({ account, className, isDetail }: Props) => {
   return (
     <div className={className}>
       <div className='account-avatar'>
@@ -24,7 +25,7 @@ const Component: React.FC<Props> = ({ account, className }: Props) => {
         className='account-name'
         ellipsis={true}
       >
-        {toShort(account.address)}
+        {toShort(account.address, isDetail ? 10 : 6, isDetail ? 10 : 6) }
       </Typography.Text>
     </div>
   );

packages/demo/src/components/account/AccountList.tsx

@@ -3,9 +3,9 @@
 // SPDX-License-Identifier: Apache-2.0
 
 // eslint-disable-next-line header/header
-import { Button, SwList, Web3Block } from "@subwallet/react-ui";
-import React, { useCallback, useEffect, useState } from 'react';
-
+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";
 import { SubstrateProvider } from "@subwallet_connect/common";
 import { GeneralEmptyList } from "../empty";
@@ -15,12 +15,14 @@ import styled from "styled-components";
 import { evmApi } from "../../utils/api/evmApi";
 import { substrateApi } from "../../utils/api/substrateApi";
 import { NetworkInfo } from "../../utils/network";
+import {TRANSACTION_MODAL} from "../../constants/modal";
 
 
 
 interface Props extends ThemeProps{
   substrateProvider ?: substrateApi,
-  evmProvider ?: evmApi
+  evmProvider ?: evmApi,
+  setAddressToTransaction : (account?: Account) => void;
 };
 
 
@@ -29,64 +31,16 @@ type AccountMapType = {
   index: number
 }
 
-function Component ({className, substrateProvider, evmProvider}: Props): React.ReactElement {
+
+const modalId = TRANSACTION_MODAL;
+
+function Component ({className, substrateProvider, evmProvider, setAddressToTransaction}: Props): React.ReactElement {
   const [{ wallet},] = useConnectWallet();
   const renderEmpty = useCallback(() => <GeneralEmptyList />, []);
   const [ accountsMap, setAccountMap ] = useState<AccountMapType[]>([])
   const [{ chains }] = useSetChain();
   const [, customNotification, updateNotify,] = useNotifications();
-
-
-
-
-  const sendTransaction = useCallback(
-    async ( address: string)=> {
-      if(!wallet) return;
-      try{
-
-        if(wallet?.type === "evm"){
-          await evmProvider?.sendTransaction(address, '0x9Cd900257bFdaf6888826f131E8B0ccB54EdB0be', '1000000000000000' )
-        }else{
-          const {namespace: namespace_, id: chainId } = wallet.chains[0]
-          const chainInfo = chains.find(({id, namespace}) => id === chainId && namespace === namespace_);
-          if(chainInfo){
-            const ws = NetworkInfo[chainInfo.label as string].wsProvider;
-            if(! ws) {
-              const {} = customNotification({
-                type: 'error',
-                message:
-                  'This network is not provide api',
-                autoDismiss: 2000
-              })
-
-              return ;
-            }
-
-            substrateProvider?.isReady().then( async ()=>{
-              const provider = wallet.provider as SubstrateProvider;
-              if(wallet.label === 'Ledger') {
-                wallet.signer = await substrateProvider?.getLedgerSigner(address, provider)
-              }
-              if( wallet.label === 'WalletConnect') {
-                wallet.signer = await substrateProvider?.getWCSigner(address, provider);
-              }
-              if(wallet.label === 'Polkadot Vault'){
-                wallet.signer = await substrateProvider?.getQrSigner(address, provider, chainId);
-              }
-              await substrateProvider.sendTransaction(
-                address,
-                '5GnUABVD7kt1wnmLiSeGcuSd5ESvmVnAjdMRrtvKxUGxuy6N',
-                wallet.signer,
-                '0'
-              )
-            })
-
-          }
-        }
-      }catch (e) {}
-    }, [wallet,evmProvider, substrateProvider])
-
-
+  const { activeModal }  = useContext(ModalContext);
 
 
   const onSignClicked = useCallback(
@@ -126,11 +80,13 @@ function Component ({className, substrateProvider, evmProvider}: Props): React.R
   );
 
   const onTransactionClicked = useCallback(
-    (address: string) => {
+    (address_: string) => {
       return async () => {
-        await sendTransaction(address);
+        const account = wallet?.accounts.find(({address}) => address === address_)
+        setAddressToTransaction(account);
+        activeModal(modalId);
       };
-    }, [wallet, sendTransaction])
+    }, [wallet])
 
 
 

packages/demo/src/components/modal/selectors/AccountSelector.tsx

@@ -132,7 +132,21 @@ const SelectAccount = styled(Component)<Props>(({ theme }) => {
     '&.ant-sw-modal': {
       '.ant-sw-modal-body': {
         minHeight: 370,
-        marginBottom: 0
+        marginBottom: 0,
+
+        '.ant-sw-list': {
+          '::-webkit-scrollbar': {
+            width: 0
+          },
+
+          '::-webkit-scrollbar-track': {
+            backgroundColor: 'transparent'
+          },
+
+          '::-webkit-scrollbar-thumb': {
+            backgroundColor: 'transparent'
+          }
+        }
       },
 
       '.ant-sw-list-search-input': {