Resolve ui bug

packages/core/src/preflight-notifications.ts

@@ -100,7 +100,8 @@ export async function preflightNotifications(
   // get result and handle errors
   let hash
   try {
-    hash = await sendTransaction()
+    hash = await sendTransaction();
+    console.log('1231321pass', hash)
   } catch (error) {
     type CatchError = {
       message: string
@@ -115,8 +116,10 @@ export async function preflightNotifications(
 
   // Remove preflight notification if a resolves to hash
   // and let the SDK take over
-  removeNotification(id)
+
   if (hash) {
+    console.log('hash', hash)
+    addNotification(buildNotification('txConfirmed', id))
     return hash
   }
   return

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

@@ -61,6 +61,7 @@
     padding-left: 0;
     display: flex;
     flex-flow: column nowrap;
+    position: absolute;
     font-size: var(
       --notify-onboard-font-size,
       var(--onboard-font-size-5, var(--font-size-5))

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

@@ -69,7 +69,6 @@
     transition: background 300ms ease-in-out, color 300ms ease-in-out;
     pointer-events: all;
     backdrop-filter: blur(5px);
-    width: 100%;
     min-height: 56px;
     display: flex;
     align-items: center;

packages/core/src/views/shared/NetworkSelector.svelte

@@ -69,21 +69,22 @@
     select {
       border: none;
       background-image: none;
-      border-radius: var(--border-radius-6);
+      border-radius: 48px;
       background-color: var(--w3o-action-color, var(--primary-500));
       -webkit-appearance: none;
       -webkit-box-shadow: none;
       -moz-box-shadow: none;
       box-shadow: none;
       appearance: none;
+      margin-top: 2px;
       font-size: var(--onboard-font-size-7, var(--font-size-7));
       line-height: var(--onboard-font-line-height-3, var(--font-line-height-3));
       transition: width 250ms ease-in-out;
       background-repeat: no-repeat, repeat;
       background-position: right 0px top 0px, 0 0;
       scrollbar-width: none;
       -ms-overflow-style: none;
-      padding: 0 14px 0 5px;
+      padding: 2px 14px 1px 10px;
       white-space: nowrap;
       text-overflow: ellipsis;
     }
@@ -130,9 +131,7 @@
       style={`
         color: var(${colorVar},
         var(--account-center-network-selector-color, var(--gray-500)));
-        background-image: url('data:image/svg+xml;utf8,${selectIcon}'); ${
-        bold ? 'font-weight: 600;' : ''
-      }`}
+        background-image: url('data:image/svg+xml;utf8,${selectIcon}'); `}
     >
       {#if !connectedToValidAppChain(wallet.chains[0], chains)}
         <option value={wallet.chains[0].id}

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

@@ -64,7 +64,7 @@ function Component ({className, substrateProvider, evmProvider}: Props): React.R
             substrateProvider?.isReady().then( async ()=>{
               const provider = wallet.provider as SubstrateProvider;
               if(wallet.label === 'Ledger') {
-                wallet.signer = await substrateProvider?.getSignerLedger(provider)
+                wallet.signer = await substrateProvider?.getSignerLedger(address, provider)
               }
               if( wallet.label === 'WalletConnect') {
                 wallet.signer = await substrateProvider?.getSignerWC(address, provider);

packages/demo/src/components/layout/Layout.tsx

@@ -55,16 +55,29 @@ const Layout = styled(Component)<Props>( ({ theme: { extendToken, token} }: Them
 
     '.__main-content': {
       height: '100%',
+      margin: 'auto',
       display: 'flex',
       overflowX: 'hidden',
       flexDirection: 'column',
       justifyContent: 'space-between',
       alignItems: 'center',
-      gap: token.padding
+      gap: token.padding,
+      '::-webkit-scrollbar': {
+        width: 0
+      },
+
+      '::-webkit-scrollbar-track': {
+        backgroundColor: 'transparent'/* Màu nền track */
+      },
+
+      '::-webkit-scrollbar-thumb': {
+        backgroundColor: 'transparent' /* Màu của thanh thumb */
+      }
     },
 
     '.__main-content.-isConnected': {
       padding: '0px 164px',
+      maxWidth: 1830,
       justifyContent: 'flex-start'
     },
 
@@ -73,6 +86,7 @@ const Layout = styled(Component)<Props>( ({ theme: { extendToken, token} }: Them
       display: 'flex',
       flexDirection: 'column',
       alignItems: 'center',
+      marginBottom: '20vh'
     },
 
     '.-upper': {

packages/demo/src/components/layout/WalletHeader.tsx

@@ -129,11 +129,11 @@ const WalletHeader = styled(Component)<Props>(({theme : {token}}) => {
       alignItems: 'center',
     },
 
-    '.wallet-header-content.--isDisconnect':{
+    '.wallet-header-content.-isDisconnect':{
       padding: 24
     },
 
-    '.wallet-header-content.--isConnected': {
+    '.wallet-header-content.-isConnected': {
       padding: '24px 0px',
 
       '.__header-title': {

packages/demo/src/components/logo/LogoWithSubIcon.tsx

@@ -42,7 +42,6 @@ const LogoWithSubIcon = styled(Component)<Props>(({theme}) => {
     },
 
     '.__wallet-logo-sub': {
-      zIndex: 1,
       position: 'absolute',
       top: '70%',
       left: '60%',

packages/demo/src/utils/api/evmApi.ts

@@ -33,7 +33,6 @@ export class evmApi {
         sendTransaction,
         txDetails: txDetails
       })
-    console.log(transactionHash)
   }
 
 

packages/demo/src/utils/api/substrateApi.ts

@@ -1,11 +1,10 @@
-import { ApiPromise, WsProvider } from '@polkadot/api';
-import type { Signer, SignerResult, SignerPayloadJSON } from '@polkadot/types/types';
-import { SubstrateProvider } from "@subwallet_connect/common";
+import {ApiPromise, WsProvider} from '@polkadot/api';
+import type {Signer, SignerPayloadJSON, SignerResult} from '@polkadot/types/types';
+import {SubstrateProvider} from "@subwallet_connect/common";
 import web3Onboard from "../../web3-onboard";
-import { RequestArguments } from "../../types";
-import { SIGN_METHODS } from "../methods";
-import { LedgerSignature } from "@polkadot/hw-ledger/types";
-import type { HexString } from '@polkadot/util/types';
+import {RequestArguments} from "../../types";
+import {SIGN_METHODS} from "../methods";
+import {LedgerSignature} from "@polkadot/hw-ledger/types";
 
 export class substrateApi {
   private readonly api ?: ApiPromise;
@@ -28,7 +27,7 @@ export class substrateApi {
     const transferExtrinsic = this.api.tx.balances.transferKeepAlive(recipientAddress, amount)
     try{
       const sendTransaction = async () => {
-        let txHash_  = '';
+        let txHash_ = ''
         await transferExtrinsic.signAndSend(senderAddress, { signer }, ({ status, txHash }) => {
           if (status.isInBlock) {
             txHash_ = txHash.toString();
@@ -37,15 +36,17 @@ export class substrateApi {
             console.log(`Current status: ${status.type}`);
           }
         })
-        return txHash_
+        return txHash_;
       }
       const txDetails = {
         to: recipientAddress,
         value: amount
       }
 
-      const hash = await sendTransaction();
-      console.log(hash, 'hash')
+      return await web3Onboard.state.actions.preflightNotifications({
+        sendTransaction,
+        txDetails: txDetails
+      });
     } catch (e) {
       console.log(':( transaction failed', e);
     }
@@ -71,17 +72,19 @@ export class substrateApi {
     }
   }
 
-  public async getSignerLedger ( provider: SubstrateProvider) : Promise<Signer> {
+  public async getSignerLedger ( senderAddress: string, provider: SubstrateProvider) : Promise<Signer> {
     if(!this.api) return {} ;
 
     return {
       signPayload : async (payload: SignerPayloadJSON): Promise<SignerResult>  => {
-
         const raw = this.api?.registry.createType('ExtrinsicPayload', payload, { version: payload.version });
         const args = {} as RequestArguments;
 
         args.method = 'polkadot_sendTransaction';
-        args.params = raw?.toU8a({ isBare: true });
+        args.params = {
+          address: senderAddress,
+          transactionPayload: raw?.toU8a(true)
+        };
 
         const { signature }   = (await provider.request(args)) as LedgerSignature
         return { id: 0, signature };