feat: add network selection

packages/snap/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/polkagate/snap.git"
   },
   "source": {
-    "shasum": "AtXyH37/Y1WEchpW9hS2zFKtsXxOqxZqfyoAHgcmMJM=",
+    "shasum": "RLbpFL70qJQgl5MUKNoO1M87+mp1UO35JBWBQkFuRCE=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/snap/src/chains.ts

@@ -6,7 +6,8 @@ import { Chain } from '@polkadot/extension-chains/types';
 import { sanitizeChainName } from './util/getChainName';
 import { HexString } from '@polkadot/util/types';
 
-const westend = {
+const testnets:Network[] = [
+  {
   decimals: [12],
   displayName: 'Westend',
   genesisHash: [
@@ -22,27 +23,98 @@ const westend = {
   standardAccount: '*25519',
   symbols: ['WND'],
   website: 'https://polkadot.network',
-};
-
-const westendAssetHub = {
+},
+ {
   decimals: [12],
-  displayName: 'Westend Asset Hub',
+  displayName: "Paseo",
   genesisHash: [
-    '0x67f9723393ef76214df0118c34bbbd3dbebc8ed46a10973a8c969d48fe7598c9',
+    "0x77afd6190f1554ad45fd0d31aee62aacc33c6db0ea801129acb813f913e0764f",
   ],
   hasLedgerSupport: false,
-  icon: 'polkadot',
+  icon: "polkadot",
   isIgnored: false,
   isTestnet: true,
-  network: 'westmint',
+  network: "paseo",
   prefix: 42,
-  slip44: 354,
-  standardAccount: '*25519',
-  symbols: ['WND'],
-  website: 'https://polkadot.network',
-};
-
-selectableNetworks.push(westend as Network, westendAssetHub as Network);
+  slip44: 0,
+  standardAccount: "*25519",
+  symbols: ["PAS"],
+  website: "https://polkadot.network",
+}
+]
+
+const assetHubs:Network[] = [
+  {
+    decimals: [10],
+    displayName: "Polkadot Asset Hub",
+    genesisHash: [
+      "0x68d56f15f85d3136970ec16946040bc1752654e906147f7e43e9d539d7c3de2f",
+    ],
+    hasLedgerSupport: true,
+    icon: "polkadot",
+    isIgnored: false,
+    isTestnet: false,
+    network: "statemint",
+    prefix: 0,
+    slip44: 354,
+    standardAccount: "*25519",
+    symbols: ["DOT"],
+    website: "https://polkadot.network",
+  },
+  {
+    decimals: [12],
+    displayName: "Kusama Asset Hub",
+    genesisHash: [
+      "0x48239ef607d7928874027a43a67689209727dfb3d3dc5e5b03a39bdc2eda771a",
+    ],
+    hasLedgerSupport: true,
+    icon: "polkadot",
+    isIgnored: false,
+    isTestnet: false,
+    network: "statemine",
+    prefix: 2,
+    slip44: 434,
+    standardAccount: "*25519",
+    symbols: ["KSM"],
+    website: "https://kusama.network",
+  },
+  {
+    decimals: [12],
+    displayName: 'Westend Asset Hub',
+    genesisHash: [
+      '0x67f9723393ef76214df0118c34bbbd3dbebc8ed46a10973a8c969d48fe7598c9',
+    ],
+    hasLedgerSupport: false,
+    icon: 'polkadot',
+    isIgnored: false,
+    isTestnet: true,
+    network: 'westmint',
+    prefix: 42,
+    slip44: 354,
+    standardAccount: '*25519',
+    symbols: ['WND'],
+    website: 'https://polkadot.network',
+  },
+  {
+    decimals: [10],
+    displayName: "Paseo Asset Hub",
+    genesisHash: [
+      "0xd6eec26135305a8ad257a20d003357284c8aa03d0bdb2b357ab0a22371e11ef2",
+    ],
+    hasLedgerSupport: false,
+    icon: "polkadot",
+    isIgnored: false,
+    isTestnet: false,
+    network: "paseo-asset-hub",
+    prefix: 42, // Adjust if necessary
+    slip44: 0,  // Update as required
+    standardAccount: "*25519",
+    symbols: ["PAS"],
+    website: "https://polkadot.network",
+  },
+];
+
+selectableNetworks.push(...testnets, ...assetHubs);
 export const DISABLED_NETWORKS = ['3DP network', 'xx network', 'Polkadex Mainnet', 'Stafi', 'Peaq Network', 'Genshiro Network'];
 
 // keyWord can be genesisHash, chainName, or even display name
@@ -67,7 +139,7 @@ export const getAllChains = (): Network[] | null => {
   return selectableNetworks;
 };
 
-type Options = {
+export type Options = {
   value: string;
   text: string;
 }
@@ -78,7 +150,7 @@ export const getChainOptions = (): Options[] => {
   if (!chains) {
     return [];
   }
-  
+
   return chains
     .filter(({ genesisHash, displayName }) => genesisHash?.length && !DISABLED_NETWORKS.includes(displayName))
     .map(({ displayName, genesisHash }) => (

packages/snap/src/constants.ts

@@ -1,3 +1,5 @@
+import { KUSAMA_GENESIS, POLKADOT_GENESIS, WESTEND_GENESIS } from "@polkadot/apps-config";
+
 export const DEFAULT_NETWORK_PREFIX = 42; // 42 is for substrate
 export const DEFAULT_COIN_TYPE = 354; // 354 is for Polkadot
 export const DEFAULT_CHAIN_NAME = 'polkadot'; // Since Westend shares the same address prefix as Substrate, the address format for both is identical
@@ -22,3 +24,5 @@ export const NOT_LISTED_CHAINS = [
   ]
 
   export const PRICE_VALIDITY_PERIOD = 2 * 60 * 1000;
+
+  export const DEFAULT_CHAINS_GENESIS=[POLKADOT_GENESIS, KUSAMA_GENESIS];

packages/snap/src/listeners/onHomePage.tsx

@@ -13,9 +13,9 @@ import { handleBalancesAll } from '../util/handleBalancesAll';
  * @returns A static panel rendered with custom UI.
  */
 export const onHomePage: OnHomePageHandler = async () => {
-  const { address, balancesAll, logos, pricesInUsd } = await handleBalancesAll()
+  const { balancesAll, logos, pricesInUsd } = await handleBalancesAll()
 
   return {
-    content: accountDemo(address, balancesAll, logos, pricesInUsd),
+    content: accountDemo(balancesAll, logos, pricesInUsd),
   };
 };

packages/snap/src/listeners/onUserInput.tsx

@@ -6,14 +6,13 @@ import type { OnUserInputHandler } from '@metamask/snaps-sdk';
 
 import {
   showSpinner,
-  accountInfo,
+  home,
   exportAccount,
   showJsonContent,
   staking,
   voting
 } from '../ui';
 import { updateSnapState } from '../rpc/stateManagement';
-import getChainName from '../util/getChainName';
 import { showMore } from '../ui/showMore';
 import { receive } from '../ui/receive';
 import { balanceDetails } from '../ui/balanceDetails';
@@ -23,22 +22,26 @@ import { formValidation } from '../ui/send/utils';
 import { approveSend } from '../ui/send/approveSend';
 import { HexString } from '@polkadot/util/types';
 import { transfer } from '../ui/send/transfer';
+import { CustomizeChains } from '../ui/selectChains/CustomizeChains';
+import { SelectedChainsFormState } from '../ui/selectChains/types';
+import { DEFAULT_CHAINS_GENESIS } from '../constants';
 
 export const onUserInput: OnUserInputHandler = async ({ id, event, context }) => {
 
   const state = await snap.request({
     method: 'snap_getInterfaceState',
     params: { id },
   });
+
   const sendForm = state.sendForm as SendFormState;
 
   if (event.type === UserInputEventType.ButtonClickEvent || event.type === UserInputEventType.InputChangeEvent) {
 
     switch (event.name) {
       case 'switchChain': {
         const genesisHash = event.value;
-        const destinationChainName = await getChainName(genesisHash)
-        await showSpinner(id, `Switching format to ${destinationChainName} ...`);
+        // const destinationChainName = await getChainName(genesisHash)
+        // await showSpinner(id, `Switching format to ${destinationChainName} ...`);
         await updateSnapState('currentGenesisHash', genesisHash);
         await receive(id, genesisHash);
         break;
@@ -92,10 +95,25 @@ export const onUserInput: OnUserInputHandler = async ({ id, event, context }) =>
         await balanceDetails(id, context?.show === undefined ? true : !context.show);
         break;
 
+      case 'refreshSelectedChains':
+        await showSpinner(id, 'Loading, please wait ...');
+        await updateSnapState('selectedChains', DEFAULT_CHAINS_GENESIS);
+      case 'customizeChains':
+        await showSpinner(id, 'Loading, please wait ...');
+        await CustomizeChains(id);
+        break;
+      case 'applySelectedChains':
+        await showSpinner(id, 'Loading, please wait ...');
+        const selectedChains = state.selectedChains as SelectedChainsFormState;
+        const filtered = Object.entries(selectedChains).filter(([key, value]) => value).map(([key]) => key);
+        await updateSnapState('selectedChains', filtered);
+        await home(id);
+        break;
+
       case 'backToHome':
       case 'cancelSend':
         await showSpinner(id, 'Loading, please wait ...');
-        await accountInfo(id);
+        await home(id);
         break;
 
       default:

packages/snap/src/rpc/stateManagement.ts

@@ -4,6 +4,7 @@ import { PricesType } from "../util/getPrices";
 
 interface State {
   balancesAll?: any;
+  selectedChains?: string[];
   currentGenesisHash?: HexString;
   metadata?: Record<HexString, MetadataDef>;
   priceInfo?: {
@@ -22,12 +23,15 @@ export const setSnapState = async (newState: State) => {
   });
 };
 
-export const getSnapState = async () =>
-  await snap.request({
+export const getSnapState = async (label?: string) => {
+  const state = await snap.request({
     method: 'snap_manageState',
     params: { operation: 'get' },
   }) as State;
 
+  return label ? state?.[label] : state;
+}
+
 export const updateSnapState = async (field: keyof State, data: any) => {
   const state = (await getSnapState()) || {};
 

packages/snap/src/ui/balanceDetails.tsx

@@ -10,13 +10,13 @@ import { accountDemo } from './partials/accountDemo';
  * @param id - The id of current UI interface.
  */
 export async function balanceDetails(id: string, show?:boolean) {
-  const { address, balancesAll, logos, pricesInUsd } = await handleBalancesAll()
+  const { balancesAll, logos, pricesInUsd } = await handleBalancesAll()
 
   await snap.request({
     method: 'snap_updateInterface',
     params: {
       id,
-      ui: accountDemo(address, balancesAll, logos, pricesInUsd, show),
+      ui: accountDemo(balancesAll, logos, pricesInUsd, show),
       context: { show: !!show }
     },
   });

packages/snap/src/ui/accountInfo.tsx → packages/snap/src/ui/home.tsx

@@ -1,6 +1,7 @@
 // Copyright 2023-2024 @polkagate/snap authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import { getSnapState } from '../rpc/stateManagement';
 import { handleBalancesAll } from '../util/handleBalancesAll';
 import { accountDemo } from './partials/accountDemo';
 
@@ -10,14 +11,14 @@ import { accountDemo } from './partials/accountDemo';
  * @param id - The id of current UI interface.
  * @param genesisHash - Chain genesisHash.
  */
-export async function accountInfo(id: string) {
-  const {address, balancesAll, logos, pricesInUsd} = await handleBalancesAll()
+export async function home(id: string) {
+  const {balancesAll, logos, pricesInUsd} = await handleBalancesAll()
 
   await snap.request({
     method: 'snap_updateInterface',
     params: {
       id,
-      ui: accountDemo(address, balancesAll, logos, pricesInUsd),
+      ui: accountDemo(balancesAll, logos, pricesInUsd),
     },
   });
 }