Update ui

Koniverse · Feb 17, 2024 · fdc1b61 · fdc1b61
1 parent bd8c9e1
commit fdc1b61
Show file tree

Hide file tree

Showing 35 changed files with 243 additions and 358 deletions.
diff --git a/packages/blocto/src/icon.ts b/packages/blocto/src/icon.ts
@@ -1,5 +1,5 @@
 export default `
-<svg width="32" height="32" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="100%" height="100%" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_2233_2387)">
 <rect width="60" height="60" rx="12" fill="white"/>
 <path d="M32.9028 18.3063C28.3911 18.3063 23.9873 20.0459 20.6952 23.1319C17.0843 26.5176 14.7992 31.5177 13.4893 36.2212C12.6314 39.2992 12.2016 42.4915 12.2016 45.6853C12.2016 46.6511 12.2412 47.6089 12.3174 48.5556C12.4109 49.7069 13.5321 50.5046 14.6485 50.2033C15.6222 49.9416 16.6466 49.8005 17.7028 49.8005C19.8722 49.8005 21.9052 50.3904 23.648 51.4212C23.6908 51.4466 23.732 51.4719 23.7748 51.4957C26.6071 53.1846 29.9484 54.1123 33.5117 53.9934C42.8062 53.6857 50.399 46.123 50.7416 36.8301C51.1158 26.6635 42.9869 18.3047 32.9044 18.3047L32.9028 18.3063ZM32.9028 44.312C28.3975 44.312 24.7454 40.6599 24.7454 36.1562C24.7454 31.6525 28.3975 27.9987 32.9028 27.9987C37.4081 27.9987 41.0602 31.6509 41.0602 36.1562C41.0602 40.6614 37.4081 44.312 32.9028 44.312Z" fill="#14AAFF"/>

diff --git a/packages/core/src/chain.ts b/packages/core/src/chain.ts
@@ -69,6 +69,20 @@ async function setChain(options: {
     )
   }
 
+  if(wallet.label === 'Ledger' && wallet.type === 'substrate'){
+    const { dismiss } = customNotification({
+      type: 'error',
+      message:
+        `switch network failed`,
+      autoDismiss: 0
+    })
+
+    setTimeout(()=>{
+      dismiss()
+    }, 3000)
+
+    return false;
+  }
   const [walletConnectedChain] = wallet.chains
 
   // check if wallet is already connected to chainId

diff --git a/packages/core/src/icons/ethereum.ts b/packages/core/src/icons/ethereum.ts
@@ -1,5 +1,5 @@
 export default `
-  <svg width="100%" height="100%" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg height="30px" width="30px" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M4.99902 0.12619V5.20805L9.58065 7.12736L4.99902 0.12619Z" fill="white" fill-opacity="0.602"/>
     <path d="M4.99923 0.12619L0.416992 7.12736L4.99923 5.20805V0.12619Z" fill="white"/>
     <path d="M4.99902 10.4207V13.8737L9.58371 7.92728L4.99902 10.4207Z" fill="white" fill-opacity="0.602"/>

diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -127,7 +127,6 @@ function init(options: InitOptions): OnboardAPI {
 
   initI18N(i18n)
   addChains(chainIdToHex(chains).concat(chainsPolkadot))
-  console.log(projectId, 'projectId')
   const modalWC = new WalletConnectModal({ projectId });
 
   qrModalConnect$.next({

diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts
@@ -142,7 +142,6 @@ export function updateWallet(id: string, type : WalletState['type'], update: Par
       ...update
     }
   }
-  console.log(update, 'update')
 
   dispatch(action as UpdateWalletAction)
 }

diff --git a/packages/core/src/utils.ts b/packages/core/src/utils.ts
@@ -413,7 +413,8 @@ export async function getBalanceSubstrate({ url, data } : clientAxiosProps){
     platform: ['Extension']
   },
   'BitKeep': {
-    platform: ['Extension']
+    platform: ['Extension'],
+    namespace: 'isBitKeep'
   },
   'Blockto': {
     platform: ['WebApp', 'Mobile']
@@ -427,7 +428,7 @@ export async function getBalanceSubstrate({ url, data } : clientAxiosProps){
   },
   'Coinbase Wallet': {
     platform: ['Extension', 'WebApp'],
-    namespace: 'coinbaseWallet'
+    namespace: 'coinbaseWalletExtension'
   },
   'D\'CENT': {
     platform: ['Cold Wallet'],

diff --git a/packages/core/src/views/account-center/AcctCenterTriggerSmall.svelte b/packages/core/src/views/account-center/AcctCenterTriggerSmall.svelte
@@ -16,7 +16,7 @@
   const accountCenter$ = state
     .select('accountCenter')
     .pipe(startWith(state.get().accountCenter), shareReplay(1))
-  console.log(primaryWallet)
+
 </script>
 
 <style>

diff --git a/packages/core/src/views/account-center/WalletRow.svelte b/packages/core/src/views/account-center/WalletRow.svelte
@@ -120,6 +120,15 @@
     background-color: var(
       --account-center-maximized-account-section-background-hover
     );
+
+  }
+
+  .container.primary  .elipsis-container {
+    display: none;
+  }
+
+  .container.primary:hover  .elipsis-container {
+    display: block;
   }
 
   .account-details {
@@ -161,7 +170,6 @@
   .elipsis-container {
     flex: 0;
     padding: 0.25rem;
-    display: none;
     border-radius: 24px;
     transition: color 150ms ease-in-out, background-color 150ms ease-in-out;
     background-color: transparent;
@@ -186,7 +194,8 @@
   }
 
   .menu {
-    background: var(--onboard-white, var(--white));
+    background: var(--w3o-background-color-item, var(--gray-800));
+    background-repeat: no-repeat, repeat;
     border: 1px solid var(--onboard-gray-100, var(--gray-100));
     border-radius: 8px;
     list-style-type: none;
@@ -200,16 +209,16 @@
   }
 
   .menu li {
-    color: var(--onboard-primary-500, var(--primary-500));
-    font-size: var(--onboard-font-size-5, var(--font-size-5));
+    color: var(--w3o-text-color, var(--white));
+    font-size: var(--onboard-font-size-6, var(--font-size-6));
     line-height: var(--onboard-font-line-height-3, var(--font-line-height-3));
     padding: 12px 16px;
-    background: var(--onboard-white, var(--white));
+    background: var(--w3o-background-color-item, var(--gray-800));
     transition: background-color 150ms ease-in-out;
     cursor: pointer;
   }
   .menu li:hover {
-    background: var(--onboard-primary-200, var(--primary-200));
+    background: var(--onboard-gray-500, var(--gray-500));
   }
 </style>
 

diff --git a/packages/core/src/views/connect/ConnectedWallet.svelte b/packages/core/src/views/connect/ConnectedWallet.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
   import { _ } from 'svelte-i18n'
-  import { WalletAppBadge, SuccessStatusIcon } from '../shared/index.js'
+  import { WalletAppBadge } from '../shared/index.js'
   import type { WalletState } from '../../types.js'
-  import { questionIcon, successIcon } from '../../icons/index.js'
+  import {  successIcon } from '../../icons/index.js'
   import en from '../../i18n/en.json'
   import { shareReplay, startWith } from 'rxjs'
   import { state } from '../../store/index.js'
   import ConnectHDWalletModal from './ConnectHDWalletModal.svelte';
   import { onMount } from 'svelte';
-  import { getLocalStore, setLocalStore } from '../../utils.js';
+  import { setLocalStore } from '../../utils.js';
   import { STORAGE_KEYS } from '../../constants.js';
-  import {connectWallet$} from "../../streams";
+  import { connectWallet$ } from '../../streams.js';
 
   export let selectedWallet: WalletState
 

diff --git a/packages/core/src/views/connect/Index.svelte b/packages/core/src/views/connect/Index.svelte
@@ -634,7 +634,7 @@
       height: var(--onboard-connect-content-height, 440px);
     }
     .content {
-      width: var(--onboard-connect-content-width, 560px);
+      width: var(--onboard-connect-content-width, 570px);
     }
     .mobile-subheader {
       display: none;

diff --git a/packages/core/src/views/connect/SelectingWallet.svelte b/packages/core/src/views/connect/SelectingWallet.svelte
@@ -24,7 +24,7 @@
   }
 
   const wheresMyWalletDefault =
-          'https://www.blocknative.com/blog/metamask-wont-connect-web3-wallet-troubleshooting'
+          'https://wiki.polkadot.network/docs/wallets-and-extensions'
 </script>
 
 <style>
@@ -58,7 +58,7 @@
     .wallets-container {
       display: grid;
       grid-template-columns: repeat(var(--onboard-wallet-columns, 2), 1fr);
-      padding: 1rem 2rem  2rem 0;
+      padding: 1rem 2rem 0 0;
       border: none;
     }
     .notice-container {

diff --git a/packages/core/src/views/connect/Sidebar.svelte b/packages/core/src/views/connect/Sidebar.svelte
@@ -160,7 +160,7 @@
   @media all and (min-width: 768px) {
     .sidebar {
       max-width: 280px;
-      border-right: 1px solid;
+      border-right: 3px solid;
 
       border-color: var(--border-color);
       background: var(--background-color);
@@ -221,7 +221,7 @@
       <div class="info-icon">{@html infoIcon}</div>
       <a
               href={connect.iDontHaveAWalletLink ||
-          'https://ethereum.org/en/wallets/find-wallet/#main-content'}
+          'https://docs.subwallet.app/main/'}
               target="_blank"
               rel="noreferrer noopener"
       >{$_('connect.selectingWallet.sidebar.IDontHaveAWallet', {

diff --git a/packages/core/src/views/shared/NetworkSelector.svelte b/packages/core/src/views/shared/NetworkSelector.svelte
@@ -66,47 +66,49 @@
 </script>
 
 <style>
-  select {
-    border: none;
-    background-image: none;
-    background-color: var(--w3o-action-color, var(--gray-500));
-    -webkit-appearance: none;
-    -webkit-box-shadow: none;
-    -moz-box-shadow: none;
-    box-shadow: none;
-    appearance: none;
-    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 0;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
+    select {
+      border: none;
+      background-image: none;
+      border-radius: var(--border-radius-6);
+      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;
+      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;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
 
-  select.minimized_ac {
-    min-width: 80px;
-    max-width: 80px;
-  }
+    select.minimized_ac {
+      min-width: 80px;
+      max-width: 80px;
+    }
 
-  select.maximized_ac {
-    width: auto !important;
-  }
+    select.maximized_ac {
+      width: auto !important;
+    }
 
-  select:focus {
-    outline: none;
-  }
+    select:focus {
+      outline: none;
+    }
+
+    span.switching-placeholder {
+      font-size: var(--onboard-font-size-7, var(--font-size-7));
+      line-height: var(--onboard-font-line-height-3, var(--font-line-height-3));
+      min-width: 80px;
+      max-width: 80px;
+      padding: 0 8px 0 4px;
+    }
 
-  span.switching-placeholder {
-    font-size: var(--onboard-font-size-7, var(--font-size-7));
-    line-height: var(--onboard-font-line-height-3, var(--font-line-height-3));
-    min-width: 80px;
-    max-width: 80px;
-    padding: 0 8px 0 4px;
-  }
 </style>
 
 {#if wallet}

diff --git a/packages/demo/src/components/account/AccountList.tsx b/packages/demo/src/components/account/AccountList.tsx
@@ -3,19 +3,19 @@
 // SPDX-License-Identifier: Apache-2.0
 
 // eslint-disable-next-line header/header
-import {Button, message, SwList, Web3Block} from "@subwallet/react-ui";
-import React, {useCallback, useEffect, useState} from 'react';
+import { Button, SwList, Web3Block } from "@subwallet/react-ui";
+import React, { useCallback, useEffect, useState } from 'react';
 
-import {useConnectWallet, useNotifications, useSetChain} from "@subwallet_connect/react";
-import {EIP1193Provider, SubstrateProvider} from "@subwallet_connect/common";
-import {GeneralEmptyList} from "../empty";
-import {RequestArguments, ThemeProps} from "../../types";
+import { useConnectWallet, useNotifications, useSetChain } from "@subwallet_connect/react";
+import { SubstrateProvider } from "@subwallet_connect/common";
+import { GeneralEmptyList } from "../empty";
+import { ThemeProps } from "../../types";
 import CN from "classnames";
 import styled from "styled-components";
-import {Maybe} from "@metamask/providers/dist/utils";
-import {evmApi} from "../../utils/api/evmApi";
-import {substrateApi} from "../../utils/api/substrateApi";
-import {NetworkInfo} from "../../utils/network";
+import { evmApi } from "../../utils/api/evmApi";
+import { substrateApi } from "../../utils/api/substrateApi";
+import { NetworkInfo } from "../../utils/network";
+
 
 
 interface Props extends ThemeProps{
@@ -33,35 +33,50 @@ function Component ({className, substrateProvider, evmProvider}: Props): React.R
   const [{ wallet},] = useConnectWallet();
   const renderEmpty = useCallback(() => <GeneralEmptyList />, []);
   const [ accountsMap, setAccountMap ] = useState<AccountMapType[]>([])
-
   const [{ chains }] = useSetChain();
   const [, customNotification, updateNotify,] = useNotifications();
 
 
 
 
   const sendTransaction = useCallback(
-    async ()=> {
+    async ( address: string)=> {
       if(!wallet) return;
       try{
         if(wallet?.type === "evm"){
-          await evmProvider?.sendTransaction(wallet.accounts[0].address, '0x9Cd900257bFdaf6888826f131E8B0ccB54EdB0be', '1000000000000000' )
+          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){
-              substrateProvider?.isReady().then( async ()=>{
-                substrateProvider.sendTransaction(
-                  wallet.accounts[0].address,
-                  '5GnUABVD7kt1wnmLiSeGcuSd5ESvmVnAjdMRrtvKxUGxuy6N' ,
-                  '100000000000',
-                  wallet.provider as SubstrateProvider,
-                  wallet.signer
-                )
+            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?.getSignerLedger(provider)
+              }
+              if( wallet.label === 'WalletConnect') {
+                wallet.signer = await substrateProvider?.getSignerWC(address, provider);
+              }
+              await substrateProvider.sendTransaction(
+                address,
+                '5GnUABVD7kt1wnmLiSeGcuSd5ESvmVnAjdMRrtvKxUGxuy6N',
+                wallet.signer,
+                '0'
+              )
+            })
+
           }
         }
       }catch (e) {}
@@ -108,7 +123,7 @@ function Component ({className, substrateProvider, evmProvider}: Props): React.R
   const onTransactionClicked = useCallback(
     (address: string) => {
       return async () => {
-        await sendTransaction();
+        await sendTransaction(address);
       };
     }, [wallet, sendTransaction])