Revamp home to show total balances, its changes (24hr) and the list o…

…f tokens, ... (#44)

utilize new features including deep links, card,heading size prop, ...

package.json

@@ -17,6 +17,8 @@
     "packages/*"
   ],
   "scripts": {
+    "dev": "cd packages/dapp && yarn dev && cd ../.. && yarn install",
+    "preinstall": "cd packages/dapp && yarn preinstall",
     "build": "yarn workspaces foreach --parallel --topological --verbose run build",
     "install-chrome": "./scripts/install-chrome.sh",
     "lint": "yarn lint:eslint && yarn lint:misc --check",
@@ -68,6 +70,7 @@
     "@polkadot/ui-keyring": "^3.6.6",
     "@polkadot/util": "^12.6.2",
     "chromedriver": "latest",
+    "qrcode": "^1.5.4",
     "webdriverio": "latest"
   }
 }

packages/dapp/package.json

@@ -30,6 +30,8 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
+    "preinstall": "NODE_ENV=production node ./setDappPath.js",
+    "dev": "NODE_ENV=development node ./setDappPath.js ",
     "start": "PORT=8000 react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",

packages/dapp/setDappPath.js

@@ -0,0 +1,9 @@
+const fs = require('fs');
+const packageJson = require('./package.json');
+
+const isProduction = process.env.NODE_ENV === 'production';
+packageJson.dependencies['@polkagate/extension-dapp'] = isProduction
+  ? '^0.48.2'
+  : '../../../polkadot-js-extension/packages/extension-dapp/build';
+
+fs.writeFileSync('./package.json', JSON.stringify(packageJson, null, 2));

packages/snap/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkagate/snap",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "A MetaMask Snap to interact with Polkadot ecosystem, a platform for cross-chain communication and scalability. Use your MetaMask wallet to access Polkadot dApps and tokens. No extra extension needed.",
   "repository": {
     "type": "git",
@@ -56,6 +56,8 @@
     "@metamask/utils": "^9.3.0",
     "@swc/core": "1.3.78",
     "@swc/jest": "^0.2.26",
+    "@types/react": "18.2.4",
+    "@types/react-dom": "18.2.4",
     "@typescript-eslint/eslint-plugin": "^5.42.1",
     "@typescript-eslint/parser": "^5.42.1",
     "deepmerge": "^4.2.2",

packages/snap/snap.manifest.json

@@ -1,13 +1,13 @@
 {
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Explore Polkadot decentralized applications and manage your tokens using your MetaMask wallet. Start your journey at apps.polkagate.xyz.",
   "proposedName": "PolkaGate",
   "repository": {
     "type": "git",
     "url": "https://github.com/polkagate/snap.git"
   },
   "source": {
-    "shasum": "kg+O7LMOr0ADHcUzkdTGhT4MPaPZKtkhFFVDELp/FGw=",
+    "shasum": "CRmXO1t+mMp/F99/JhIfeOnVlLw169eBsjdOTQdFSIY=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/snap/src/constants.ts

@@ -0,0 +1,21 @@
+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
+export const CHAIN_NAMES = ['westend', 'polkadot', 'kusama'];
+
+export const NOT_LISTED_CHAINS = [
+    '0x742a2ca70c2fda6cee4f8df98d64c4c670a052d9568058982dad9d5a7a135c5b', // Darwinia
+    '0x6f1a800de3daff7f5e037ddf66ab22ce03ab91874debeddb1086f5f7dbd48925', // Equilibirum
+    '0x81443836a9a24caaa23f1241897d1235717535711d1d3fe24eae4fdc942c092c', // Cere
+    '0xdaab8df776eb52ec604a5df5d388bb62a050a0aaec4556a64265b9d42755552d', // Composable
+    '0xe358eb1d11b31255a286c12e44fe6780b7edb171d657905a97e39f71d9c6c3ee', // Ajuna
+    '0xe71578b37a7c799b0ab4ee87ffa6f059a6b98f71f06fb8c84a8d88013a548ad6', // Darwinia
+    '0xf7a99d3cb92853d00d5275c971c132c074636256583fee53b3bbe60d7b8769ba', // Kulupu
+    '0xe61a41c53f5dcd0beb09df93b34402aada44cb05117b71059cce40a2723a4e97', // parallel
+    '0x5d3c298622d5634ed019bf61ea4b71655030015bde9beb0d6a24743714462c86', // Pendulum
+    '0x1bb969d85965e4bb5a651abbedf21a54b6b31a21f66b5401cc3f1e286268d736', // Phala
+    '0x6fbd74e5e1d0a61d52ccfe9d4adaed16dd3a7caa37c6bc4d0c2fa12e8b2f4063', // Polymesh
+    '0x7e4e32d0feafd4f9c9414b0be86373f9a1efa904809b683453a9af6856d38ad5', // SORA
+  ]
+
+  export const PRICE_VALIDITY_PERIOD = 2 * 60 * 1000;

packages/snap/src/index.tsx

@@ -9,7 +9,6 @@ import type {
   OnUserInputHandler,
 } from '@metamask/snaps-sdk';
 
-import { getGenesisHash } from './chains';
 import {
   getMetadataList,
   setMetadata,
@@ -27,16 +26,16 @@ import {
   staking,
   voting
 } from './ui';
-import { getBalances, getKeyPair } from './util';
+import { getKeyPair } from './util';
 import { POLKADOT_GENESIS } from '@polkadot/apps-config';
 import { getLogo } from './ui/image/chains/getLogo';
-import { HexString } from '@polkadot/util/types';
-import { getSnapState, setSnapState, updateSnapState } from './rpc/stateManagement';
-import { getNativeTokenPrice } from './util/getNativeTokenPrice';
+import { setSnapState, updateSnapState } from './rpc/stateManagement';
 import getChainName from './util/getChainName';
-import { DEFAULT_CHAIN_NAME } from './defaults';
 import { welcomeScreen } from './ui/welcomeScreen';
 import { showMore } from './ui/showMore';
+import { receive } from './ui/receive';
+import { balanceDetails } from './ui/balanceDetails';
+import { handleBalancesAll } from './util/handleBalancesAll';
 
 export const onRpcRequest: OnRpcRequestHandler = async ({
   origin,
@@ -69,15 +68,10 @@ export const onRpcRequest: OnRpcRequestHandler = async ({
  * @returns A static panel rendered with custom UI.
  */
 export const onHomePage: OnHomePageHandler = async () => {
-  const currentChainName = DEFAULT_CHAIN_NAME; // to reset chain on each new visit
-  const { address } = await getKeyPair(currentChainName);
-  const genesisHash = await getGenesisHash(currentChainName) ?? POLKADOT_GENESIS; // These will be changed when dropdown component will be available
-  const balances = await getBalances(genesisHash, address);
-  const logo = await getLogo(genesisHash);
-  const priceInUsd = await getNativeTokenPrice(genesisHash);
+  const { address, balancesAll, logos, pricesInUsd } = await handleBalancesAll()
 
   return {
-    content: accountDemo(address, genesisHash, balances, logo, priceInUsd),
+    content: accountDemo(address, balancesAll, logos, pricesInUsd),
   };
 };
 
@@ -102,23 +96,33 @@ export const onInstall: OnInstallHandler = async () => {
   });
 };
 
-export const onUserInput: OnUserInputHandler = async ({ id, event }) => {
+export const onUserInput: OnUserInputHandler = async ({ id, event, context }) => {
+
+  // const state = await snap.request({
+  //   method: 'snap_getInterfaceState',
+  //   params: { id },
+  // });
+
   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 chain to ${destinationChainName} ...`);
+        await showSpinner(id, `Switching format to ${destinationChainName} ...`);
         await updateSnapState('currentGenesisHash', genesisHash);
-        await accountInfo(id, genesisHash);
+        await receive(id, genesisHash);
         break;
       }
 
       case 'send':
         await polkagateApps(id);
         break;
 
+      case 'receive':
+        await receive(id);
+        break;
+
       case 'more':
         await showMore(id);
         break;
@@ -135,10 +139,13 @@ export const onUserInput: OnUserInputHandler = async ({ id, event }) => {
         await exportAccount(id);
         break;
 
+      case 'balanceDetails':
+        await balanceDetails(id, context?.show === undefined ? true : !context.show);
+        break;
+
       case 'backToHome':
         await showSpinner(id, 'Loading, please wait ...');
-        const state = await getSnapState();
-        await accountInfo(id, state?.currentGenesisHash as HexString);
+        await accountInfo(id);
         break;
 
       default:

packages/snap/src/rpc/getAddress.ts

@@ -1,4 +1,4 @@
-import { DEFAULT_CHAIN_NAME } from '../defaults';
+import { DEFAULT_CHAIN_NAME } from '../constants';
 import { getKeyPair } from '../util/getKeyPair';
 
 export const getAddress = async (chainName?: string): Promise<string> => {

packages/snap/src/rpc/stateManagement.ts

@@ -1,8 +1,9 @@
 import { HexString } from "@polkadot/util/types";
 import type { MetadataDef } from '@polkadot/extension-inject/types';
-import { PricesType } from "../getPrices";
+import { PricesType } from "../util/getPrices";
 
 interface State {
+  balancesAll?: any;
   currentGenesisHash?: HexString;
   metadata?: Record<HexString, MetadataDef>;
   priceInfo?: {
@@ -14,19 +15,19 @@ interface State {
 
 type StateValues = State[keyof State];
 
-export const getSnapState = async () =>
-  await snap.request({
-    method: 'snap_manageState',
-    params: { operation: 'get' },
-  }) as State;
-
-export const setSnapState = async (newState:State) => {
+export const setSnapState = async (newState: State) => {
   return await snap.request({
     method: 'snap_manageState',
     params: { operation: 'update', newState },
   });
 };
 
+export const getSnapState = async () =>
+  await snap.request({
+    method: 'snap_manageState',
+    params: { operation: 'get' },
+  }) as State;
+
 export const updateSnapState = async (field: keyof State, data: any) => {
   const state = (await getSnapState()) || {};
 

packages/snap/src/ui/accountInfo.tsx

@@ -1,35 +1,23 @@
+// Copyright 2023-2024 @polkagate/snap authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import { handleBalancesAll } from '../util/handleBalancesAll';
 import { accountDemo } from './partials/accountDemo';
-import { getBalances } from '../util/getBalance';
-import { getKeyPair } from '../util/getKeyPair';
-import { HexString } from '@polkadot/util/types';
-import { getLogo } from './image/chains/getLogo';
-import { updateSnapState } from '../rpc/stateManagement';
-import { getNativeTokenPrice } from '../util/getNativeTokenPrice';
 
 /**
  * Show account info on the current chain.
  *
  * @param id - The id of current UI interface.
  * @param genesisHash - Chain genesisHash.
  */
-export async function accountInfo(id: string, genesisHash: HexString) {
-  console.info(`Preparing account info for ${genesisHash}`)
-
-  const { address } = await getKeyPair(undefined, genesisHash);
-  const priceInUsd = await getNativeTokenPrice(genesisHash);
-
-
-  if (!genesisHash) throw new Error(`No genesis hash found for chain :${genesisHash}`)
-  updateSnapState('currentGenesisHash', genesisHash).catch(console.error);
-
-  const balances = await getBalances(genesisHash, address);
-  const logo = await getLogo(genesisHash)
-
+export async function accountInfo(id: string) {
+  const {address, balancesAll, logos, pricesInUsd} = await handleBalancesAll()
+
   await snap.request({
     method: 'snap_updateInterface',
     params: {
       id,
-      ui: accountDemo(address, genesisHash, balances, logo, priceInUsd),
+      ui: accountDemo(address, balancesAll, logos, pricesInUsd),
     },
   });
 }

packages/snap/src/ui/balanceDetails.tsx

@@ -0,0 +1,23 @@
+// Copyright 2023-2024 @polkagate/snap authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import { handleBalancesAll } from '../util/handleBalancesAll';
+import { accountDemo } from './partials/accountDemo';
+
+/**
+ * Show balance details for all tokens
+ *
+ * @param id - The id of current UI interface.
+ */
+export async function balanceDetails(id: string, show?:boolean) {
+  const { address, balancesAll, logos, pricesInUsd } = await handleBalancesAll()
+
+  await snap.request({
+    method: 'snap_updateInterface',
+    params: {
+      id,
+      ui: accountDemo(address, balancesAll, logos, pricesInUsd, show),
+      context: { show: !!show }
+    },
+  });
+}