Add Polkadot Vault wallet package

packages/core/src/utils.ts

@@ -130,6 +130,20 @@ export function gweiToWeiHex(gwei: number): string {
   return `0x${(gwei * 1e9).toString(16)}`
 }
 
+export enum ChainIdByGenesisHash  {
+  POLKADOT_ID = '0x91b171bb158e2d3848fa23a9f1c25182fb8e20313b2c1eb49219da7a70ce90c3',
+  KUSAMA_ID = '0xb0a8d493285c2df73290dfb7e61f870f17b41801197a149ca93654499ea3dafe',
+  WESTEND_ID = '0xe143f23803ac50e8f6f8e62695d1ce9e4e1d68aa36c1cd2cfd15340213f3423e',
+  ROCOCO_ID = '0x6408de7737c59c238890533af25896a2c20608d8b380bb01029acb392781063e',
+  ASTAR_NETWORK_ID = '0x9eb76c5184c4ab8679d2d5d819fdf90b9c001403e9e17da2e14b6d8aec4029c6',
+  CRUST_MAINET_ID = '0x8b404e7ed8789d813982b9cb4c8b664c05b3fbf433309f603af014ec9ce56a8c',
+  HYDRADX_ID = '0xafdc188f45c71dacbaa0b62e16a91f726c7b8699a9748cdf715459de6b7f366d',
+  PHALA_ID = '0x1bb969d85965e4bb5a651abbedf21a54b6b31a21f66b5401cc3f1e286268d736',
+  STATEMINT_ID = '0x68d56f15f85d3136970ec16946040bc1752654e906147f7e43e9d539d7c3de2f',
+  STAEMINE_ID = '0x48239ef607d7928874027a43a67689209727dfb3d3dc5e5b03a39bdc2eda771a',
+  TURING_ID = '0xd54f0988402deb4548538626ce37e4a318441ea0529ca369400ebec4e04dfe4b'
+}
+
 export const chainIdToLabel: Record<string, string> = {
   '0x1': 'Ethereum',
   '0x3': 'Ropsten',
@@ -150,18 +164,18 @@ export const chainIdToLabel: Record<string, string> = {
   '0x63564C40': 'Harmony One',
   '0xa4b1': 'Arbitrum One',
   '0xa4ba': 'Arbitrum Nova',
-  '91b171bb158e2d3848fa23a9f1c25182' : 'Polkadot',
   'acala' : 'Acala',
-  '9eb76c5184c4ab8679d2d5d819fdf90b' : 'Astar Network',
-  'd4c0c08ca49dc7c680c3dac71a7c0703' : 'Crust',
-  'afdc188f45c71dacbaa0b62e16a91f72' : 'Hydradx',
-  'b0a8d493285c2df73290dfb7e61f870f' : 'Kusama',
-  '1bb969d85965e4bb5a651abbedf21a54' : 'Phala Network',
-  '68d56f15f85d3136970ec16946040bc1' : 'Statemint',
-  '0f62b701fb12d02237a33b84818c11f6' : 'Turing Network',
-  'e143f23803ac50e8f6f8e62695d1ce9e' : 'Westend',
-  '6408de7737c59c238890533af25896a2': 'Rococo',
-  '48239ef607d7928874027a43a6768920': 'Statemine'
+  [ChainIdByGenesisHash.POLKADOT_ID] : 'Polkadot',
+  [ChainIdByGenesisHash.ASTAR_NETWORK_ID] : 'Astar Network',
+  [ChainIdByGenesisHash.CRUST_MAINET_ID] : 'Crust',
+  [ChainIdByGenesisHash.HYDRADX_ID] : 'Hydradx',
+  [ChainIdByGenesisHash.KUSAMA_ID] : 'Kusama',
+  [ChainIdByGenesisHash.PHALA_ID] : 'Phala Network',
+  [ChainIdByGenesisHash.STATEMINT_ID] : 'Statemint',
+  [ChainIdByGenesisHash.TURING_ID] : 'Turing Network',
+  [ChainIdByGenesisHash.WESTEND_ID] : 'Westend',
+  [ChainIdByGenesisHash.ROCOCO_ID]: 'Rococo',
+  [ChainIdByGenesisHash.STAEMINE_ID]: 'Statemine'
 }
 
 export const networkToChainId: Record<string, ChainId> = {
@@ -258,51 +272,51 @@ export const chainStyles: Record<string, ChainStyle> = {
     icon: polygonIcon,
     color: '#8247E5'
   },
-  '91b171bb158e2d3848fa23a9f1c25182' : {
+  [ChainIdByGenesisHash.POLKADOT_ID] : {
     icon : polkadotIcon,
     color : '#ffffff'
   },
   'acala' : {
     icon : acalaIcon,
     color : '#ffffff'
   },
-  '9eb76c5184c4ab8679d2d5d819fdf90b' : {
+  [ChainIdByGenesisHash.ASTAR_NETWORK_ID] : {
     icon : astarNetworkIcon,
     color : '#ffffff'
   },
-  'd4c0c08ca49dc7c680c3dac71a7c0703' : {
+  [ChainIdByGenesisHash.CRUST_MAINET_ID] : {
     icon: crutsIcon,
     color: '#000000'
   },
-  'afdc188f45c71dacbaa0b62e16a91f72' : {
+  [ChainIdByGenesisHash.HYDRADX_ID] : {
     icon : hydraxIcon,
     color : '#f453a1'
   },
-  'b0a8d493285c2df73290dfb7e61f870f' : {
+  [ChainIdByGenesisHash.KUSAMA_ID] : {
     icon : kusamaIcon,
     color: '#000000'
   },
-  '1bb969d85965e4bb5a651abbedf21a54' : {
+  [ChainIdByGenesisHash.PHALA_ID]: {
     icon : phalaNetworkIcon,
     color: '#000000'
   },
-  '68d56f15f85d3136970ec16946040bc1' : {
+  [ChainIdByGenesisHash.STATEMINT_ID] : {
     icon : statemintIcon,
     color : '#E6007A'
   },
-  '0f62b701fb12d02237a33b84818c11f6' : {
+  [ChainIdByGenesisHash.TURING_ID] : {
     icon : turingNetworkIcon,
     color: '#ffffff'
   },
-  'e143f23803ac50e8f6f8e62695d1ce9e' : {
+  [ChainIdByGenesisHash.WESTEND_ID] : {
     icon : westendIcon,
     color: '#ffffff'
   },
-  '48239ef607d7928874027a43a6768920': {
+  [ChainIdByGenesisHash.STATEMINT_ID] : {
     icon: statemineIcon,
     color: '#000000'
   },
-  '6408de7737c59c238890533af25896a2': {
+  [ChainIdByGenesisHash.ROCOCO_ID]: {
     icon: rococoIcon,
     color: '#ffffff'
   }
@@ -557,6 +571,9 @@ const TypeWalletSubstratePlatformByLabel : Record<WalletState['label'], WalletSt
   'Talisman': {
     platform: ['Extension'],
     namespace: 'talisman'
+  },
+  'Polkadot Vault': {
+    platform: ['QRcode']
   }
 }
 

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

@@ -193,7 +193,8 @@
         provider,
         instance,
         accounts: [],
-        chains: [{ namespace: type, id: (type === 'evm' ? '0x1' : '91b171bb158e2d3848fa23a9f1c25182') }]
+        chains: [{ namespace: type, id: (type === 'evm' ?
+                  '0x1' : '0x91b171bb158e2d3848fa23a9f1c25182fb8e20313b2c1eb49219da7a70ce90c3') }]
       }
 
       connectingErrorMessage = ''

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

@@ -90,6 +90,8 @@
     color: var(--w3o-text-color, initial);
     display: flex;
     flex-direction: column;
+    border-radius: 8px;
+    box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25);
   }
 
   .modal.mobile {

packages/demo/package.json

@@ -55,6 +55,7 @@
     "@subwallet_connect/talisman": "^1.0.0",
     "@subwallet_connect/polkadot_js": "^1.0.0",
     "@subwallet/chain-list": "^0.2.39",
+    "@subwallet_connect/polkadot-vault": "^1.0.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",

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

@@ -64,10 +64,13 @@ 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(address, provider)
+                wallet.signer = await substrateProvider?.getLedgerSigner(address, provider)
               }
               if( wallet.label === 'WalletConnect') {
-                wallet.signer = await substrateProvider?.getSignerWC(address, provider);
+                wallet.signer = await substrateProvider?.getWCSigner(address, provider);
+              }
+              if(wallet.label === 'Polkadot Vault'){
+                wallet.signer = await substrateProvider?.getQrSigner(address, provider, chainId);
               }
               await substrateProvider.sendTransaction(
                 address,
@@ -96,7 +99,8 @@ function Component ({className, substrateProvider, evmProvider}: Props): React.R
             autoDismiss: 0
           });
           try {
-            wallet.type === 'evm' ?  await evmProvider?.signMessage(address) : await substrateProvider?.signMessage(address, wallet.provider as SubstrateProvider, wallet.signer);
+            wallet.type === 'evm' ?  await evmProvider?.signMessage(address)
+              : await substrateProvider?.signMessage(address, wallet.provider as SubstrateProvider, wallet.signer, wallet.chains[0].id);
             update({
               eventCode: 'dbUpdateSuccess',
               message: `success message is success`,

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

@@ -1,11 +1,11 @@
-import {ApiPromise, WsProvider} from '@polkadot/api';
-import type {Signer, SignerPayloadJSON, SignerResult} 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 { RequestArguments } from "../../types";
+import { SIGN_METHODS } from "../methods";
+import { LedgerSignature } from "@polkadot/hw-ledger/types";
+import { blake2AsU8a } from '@polkadot/util-crypto';
 export class substrateApi {
   private readonly api ?: ApiPromise;
 
@@ -53,7 +53,7 @@ export class substrateApi {
 
   }
 
-  public async getSignerWC (senderAddress: string, provider: SubstrateProvider) : Promise<Signer > {
+  public async getWCSigner (senderAddress: string, provider: SubstrateProvider) : Promise<Signer > {
     if(!this.api) return {} ;
 
     return {
@@ -72,7 +72,7 @@ export class substrateApi {
     }
   }
 
-  public async getSignerLedger ( senderAddress: string, provider: SubstrateProvider) : Promise<Signer> {
+  public async getLedgerSigner ( senderAddress: string, provider: SubstrateProvider) : Promise<Signer> {
     if(!this.api) return {} ;
 
     return {
@@ -93,15 +93,40 @@ export class substrateApi {
 
   }
 
-  public async signMessage ( address: string, provider: SubstrateProvider,  signer ?: Signer ) {
+  public async getQrSigner ( senderAddress: string, provider: SubstrateProvider, chainId: string) : Promise<Signer> {
+    if(!this.api) return {} ;
+
+    return {
+      signPayload : async (payload: SignerPayloadJSON): Promise<SignerResult>  => {
+        console.log(payload)
+        const raw = this.api?.registry.createType('ExtrinsicPayload', payload, { version: payload.version });
+        const args = {} as RequestArguments;
+        args.method = 'polkadot_sendTransaction';
+        const isQrHashed = (payload.method.length > 5000);
+        const qrPayload = isQrHashed
+          ? blake2AsU8a(raw?.toU8a(true) || '')
+          : raw?.toU8a();
+        args.params = {
+          transactionPayload: qrPayload,
+          genesisHash: chainId,
+          address: senderAddress
+        };
+        const { signature }   = (await provider.request(args)) as any
+        return { id: 0, signature };
+      }
+    }
+
+  }
+
+  public async signMessage ( address: string, provider: SubstrateProvider,  signer ?: Signer, genesisHash ?: string ) {
     if(signer && signer.signRaw) {
       const signPromise = signer.signRaw({ address, data: 'This is dummy message', type: 'bytes' });
       return await signPromise
     }
     const args = {} as RequestArguments;
 
     args.method = SIGN_METHODS.substrateSign.method;
-    args.params = [address, SIGN_METHODS.substrateSign.getInput('This is sign message')];
+    args.params = [address, SIGN_METHODS.substrateSign.getInput('This is sign message'), genesisHash ];
 
     await provider.request(args);
 

packages/demo/src/utils/network.ts

@@ -24,7 +24,7 @@ export const NetworkInfo : Record<string, NetworkItemType> = {
     slug: 'westend',
     name: 'Westend',
     namespace: 'substrate',
-    wsProvider: "wss://rpc.dotters.network/westend"
+    wsProvider: "wss://westend-rpc.polkadot.io"
   },
   'Ethereum Mainnet': {
     slug: 'ethereum',

packages/demo/src/web3-onboard.ts

@@ -8,7 +8,7 @@ import subwalletModule from '@subwallet_connect/subwallet';
 import talismanModule from '@subwallet_connect/talisman';
 import polkadot_jsModule from '@subwallet_connect/polkadot_js';
 import subwalletPolkadotModule from '@subwallet_connect/subwallet-polkadot';
-// import polkadotVaultModule from '@subwallet_connect/polkadot-vault';
+import polkadotVaultModule from '@subwallet_connect/polkadot-vault';
 import {TransactionHandlerReturn} from "@subwallet_connect/core/dist/types";
 import { SubWallet } from "../assets";
 
@@ -49,7 +49,7 @@ const subwalletWallet = subwalletModule();
 const polkadotWallet = polkadot_jsModule();
 const subwalletPolkadotWalet = subwalletPolkadotModule();
 const talismanWallet = talismanModule();
-// const polkadotVaultWallet = polkadotVaultModule();
+const polkadotVaultWallet = polkadotVaultModule();
 
 
 export default init({
@@ -77,7 +77,7 @@ export default init({
     ledgerPolkadot_,
     talismanWallet,
     polkadotWallet,
-    // polkadotVaultWallet,
+    polkadotVaultWallet,
     injected
   ],
   // An array of Chains that your app supports
@@ -136,7 +136,7 @@ export default init({
   chainsPolkadot:[
     {
       // hex encoded string, eg '0x1' for Ethereum Mainnet
-      id: '91b171bb158e2d3848fa23a9f1c25182',
+      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
@@ -148,7 +148,7 @@ export default init({
       decimal: 10
     },
     {
-      id: 'e143f23803ac50e8f6f8e62695d1ce9e' ,
+      id: '0xe143f23803ac50e8f6f8e62695d1ce9e4e1d68aa36c1cd2cfd15340213f3423e' ,
       token: 'WND',
       decimal : 12,
       label: 'Westend',
@@ -157,7 +157,7 @@ export default init({
     },
 
     {
-      id: '68d56f15f85d3136970ec16946040bc1',
+      id: '0x68d56f15f85d3136970ec16946040bc1752654e906147f7e43e9d539d7c3de2f',
       label: 'Polkadot Asset Hub',
       namespace: 'substrate',
       decimal: 10,
@@ -166,7 +166,7 @@ export default init({
     },
 
     {
-      id: 'b0a8d493285c2df73290dfb7e61f870f',
+      id: '0xb0a8d493285c2df73290dfb7e61f870f17b41801197a149ca93654499ea3dafe',
       label: 'Kusama',
       decimal: 12,
       namespace: 'substrate',
@@ -175,7 +175,7 @@ export default init({
     },
 
     {
-      id: '48239ef607d7928874027a43a6768920',
+      id: '0x48239ef607d7928874027a43a67689209727dfb3d3dc5e5b03a39bdc2eda771a',
       label: 'Kusama Asset Hub',
       decimal: 12,
       namespace: 'substrate',

packages/hw-common/src/account-select.ts

@@ -76,7 +76,7 @@ const mountAccountSelect = (
         --success-700: #129b4d;
 
         /* FONTS */
-        --font-family-normal: var(--w3o-font-family, Inter, sans-serif);
+        --font-family-normal: var(--w3o-font-family, 'Plus Jakarta Sans', Inter, sans-serif);
         --font-size-5: 1rem;
         --font-size-6: .875rem;
         --font-size-7: .75rem;