add more menu

.eslintrc.js

@@ -21,7 +21,7 @@ module.exports = {
     },
 
     {
-      files: ['**/*.test.ts', '**/*.test.js'],
+      files: ['**/*.test.ts',"**/*.test.tsx", '**/*.test.js'],
       extends: ['@metamask/eslint-config-jest'],
       rules: {
         '@typescript-eslint/no-shadow': [
@@ -30,8 +30,20 @@ module.exports = {
         ],
       },
     },
+    {
+      files: ["**/*.ts", "**/*.tsx"],
+      extends: ["@metamask/eslint-config-typescript"],
+      rules: {
+        // This allows importing the `Text` JSX component.
+        "@typescript-eslint/no-shadow": [
+          "error",
+          {
+            allow: ["Text"],
+          },
+        ],
+      },
+    }
   ],
-
   ignorePatterns: [
     '!.prettierrc.js',
     '**/!.eslintrc.js',

packages/snap/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/polkagate/snap.git"
   },
   "source": {
-    "shasum": "zxO0U2wCLtUw7Sxd9PR/14lZak3rjbpZk5P/qvHPjU8=",
+    "shasum": "ilqE//lt6OosojSEjmrQJn2aUTtu7mURnBgmU3Wcc4I=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/snap/src/index.tsx

@@ -1,7 +1,7 @@
 // Copyright 2023-2024 @polkagate/snap authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import {  UserInputEventType } from '@metamask/snaps-sdk';
+import { UserInputEventType } from '@metamask/snaps-sdk';
 import type {
   OnHomePageHandler,
   OnInstallHandler,
@@ -36,6 +36,7 @@ import { getCurrentChainTokenPrice } from './util/getCurrentChainTokenPrice';
 import getChainName from './util/getChainName';
 import { DEFAULT_CHAIN_NAME } from './defaults';
 import { welcomeScreen } from './ui/welcomeScreen';
+import { showMore } from './ui/showMore';
 
 export const onRpcRequest: OnRpcRequestHandler = async ({
   origin,
@@ -96,7 +97,7 @@ export const onInstall: OnInstallHandler = async () => {
     method: 'snap_dialog',
     params: {
       type: 'alert',
-      content:welcomeScreen(address, genesisHash, logo)
+      content: welcomeScreen(address, genesisHash, logo)
     },
   });
 };
@@ -118,6 +119,10 @@ export const onUserInput: OnUserInputHandler = async ({ id, event }) => {
         await polkagateApps(id);
         break;
 
+      case 'more':
+        await showMore(id);
+        break;
+
       case 'stake':
         await staking(id);
         break;

packages/snap/src/ui/accountInfo.tsx

@@ -1,10 +1,9 @@
-import { accountDemo } from './accountDemo';
-import { DEFAULT_CHAIN_NAME, CHAIN_NAMES } from '../defaults';
+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 { getSnapState, setSnapState, updateSnapState } from '../rpc/stateManagement';
+import { updateSnapState } from '../rpc/stateManagement';
 import { getCurrentChainTokenPrice } from '../util/getCurrentChainTokenPrice';
 
 /**

packages/snap/src/ui/components/MenuBar.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { Box, SnapComponent } from "@metamask/snaps-sdk/jsx";
-import { exportAccount, send, stake, vote, settings } from '../image/icons';
+import { send, stake, vote, more } from '../image/icons';
 import { Btn } from "./Btn";
 
 
@@ -22,13 +22,9 @@ export const MenuBar: SnapComponent = () => {
         label='Vote'
       />
       <Btn
-        icon={exportAccount}
-        label='Export'
+        icon={more}
+        label='More'
       />
-      {/* <Btn
-        icon={settings}
-        label='Setting'
-      /> */}
     </Box>
   );
 };

packages/snap/src/ui/image/icons/index.tsx

@@ -1,10 +1,16 @@
 // Copyright 2023-2024 @polkagate/snap authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-export { default as exportAccount } from './exportAccount3.svg'
+export { default as exportAccount } from './exportAccount.svg'
 export { default as ellipsisV } from './ellipsisV.svg'
 export { default as metadata } from './metadata.svg'
 export { default as send } from './send.svg'
 export { default as settings } from './settings.svg'
 export { default as stake } from './stake.svg'
-export { default as vote } from './vote.svg'
+export { default as vote } from './vote.svg'
+export { default as more } from './more.svg'
+export { default as twitter } from './twitter.svg'
+export { default as book } from './book.svg'
+export { default as webSite } from './webSite.svg'
+export { default as email } from './email.svg'
+export { default as youtube } from './youtube.svg'

packages/snap/src/ui/index.ts

@@ -1,9 +1,10 @@
 // Copyright 2023-2024 @polkagate/snap authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-export * from './accountDemo';
+export * from './partials/accountDemo';
 export * from './accountInfo';
 export * from './dappList';
 export * from './exportAccount';
 export * from './review/';
+export * from './showSpinner';
 export * from './transfer';

packages/snap/src/ui/accountDemo.tsx → packages/snap/src/ui/partials/accountDemo.tsx

@@ -1,12 +1,12 @@
 // Copyright 2023-2024 @polkagate/snap authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { Balances } from '../util/getBalance';
-import { getFormatted } from '../util/getFormatted';
+import type { Balances } from '../../util/getBalance';
+import { getFormatted } from '../../util/getFormatted';
 
 import { Copyable, Box, Heading, Divider, Text } from "@metamask/snaps-sdk/jsx";
 
-import { BalanceInfo, ChainSwitch, MenuBar } from './components';
+import { BalanceInfo, ChainSwitch, MenuBar } from '../components';
 import { HexString } from '@polkadot/util/types';
 
 export const accountDemo = (address: string, genesisHash: HexString, balances: Balances, logo: string, price: number) => {

packages/snap/src/ui/showMore.tsx

@@ -0,0 +1,71 @@
+import { Box, Image, Button, SnapComponent, Divider, Link, Heading, Text } from "@metamask/snaps-sdk/jsx";
+import { book, email, exportAccount, twitter, webSite } from "./image/icons";
+
+/**
+ * This shows the more page
+ *
+ * @param id - The id of UI interface to be updated.
+ */
+export async function showMore(id: string) {
+  await snap.request({
+    method: 'snap_updateInterface',
+    params: {
+      id,
+      ui: ui()
+    },
+  });
+}
+
+export const ui = () => {
+
+  return (
+    <Box direction="vertical" alignment="start">
+      <Heading>PolkaGate Snap Menu</Heading>
+      <MenuItem icon={exportAccount} name='export' label={'Export Account as JSON File'} />
+      <Divider />
+      <LinkItem icon={book} link='https://docs.polkagate.xyz' label={'View Documents'} />
+      <Divider />
+      <LinkItem icon={twitter} link='https://x.com/@polkagate' label={'Follow Us on X (twitter)'} />
+      <LinkItem icon={twitter} link='https://x.com/@polkagate' label={'Follow Us on X (twitter)'} />
+      <LinkItem icon={twitter} link='https://youtube.com/@polkagate' label={'Subscribe to YouTube Channel'} />
+      <LinkItem icon={webSite} link='https://polkagate.xyz' label={'Visit Website'} />
+      <LinkItem icon={email} link='mailto:[email protected]' label={'Contact Us'} />
+    </Box>
+  );
+};
+
+
+
+type MenuProps = {
+  icon: string;
+  name: string;
+  label: string;
+}
+
+type LinkProps = {
+  icon: string;
+  link: string;
+  label: string;
+}
+
+export const MenuItem: SnapComponent<MenuProps> = ({ icon, name, label }: MenuProps) => {
+
+  return (
+    <Box direction="horizontal" alignment="start">
+      <Image src={icon} />
+      <Button name={name?.toLowerCase()} variant='primary'>
+        {label}
+      </Button>
+    </Box>
+  );
+};
+
+export const LinkItem: SnapComponent<LinkProps> = ({ icon, link, label }: LinkProps) => {
+
+  return (
+    <Box direction="horizontal" alignment="start">
+      <Image src={icon} />
+      <Link href={link}>{label}</Link>
+    </Box>
+  );
+};

packages/snap/src/ui/showSpinner.tsx

@@ -0,0 +1,28 @@
+import { Box, Spinner, Text } from "@metamask/snaps-sdk/jsx";
+/**
+ * Show an spinner while processing.
+ *
+ * @param id - The id of interface.
+ * @param title - The title to show while spinning.
+ */
+export async function showSpinner(id: string, label?: string) {
+  await snap.request({
+    method: 'snap_updateInterface',
+    params: {
+      id,
+      ui: ui(label)
+    },
+  });
+}
+
+export const ui = (label?: string) => {
+
+  return (
+    <Box direction="vertical" alignment="center">
+      <Spinner />
+      <Text>
+        {label || 'Processing, Please Wait!'}
+      </Text>
+    </Box>
+  );
+};

packages/snap/src/ui/transfer.ts

@@ -6,7 +6,6 @@ import {
   input,
   panel,
   text,
-  spinner,
   row,
   divider,
   copyable,
@@ -18,7 +17,6 @@ import { formatCamelCase } from '../util/formatCamelCase';
 import { getApi } from '../util/getApi';
 import { getCurrentChain } from '../util/getCurrentChain';
 import { getKeyPair } from '../util/getKeyPair';
-import { progress } from './progress';
 
 /**
  * Run the transfer extrinsics and then show the result page.
@@ -187,20 +185,4 @@ export async function showResult(id: string, result: Record<string, string>) {
       ]),
     },
   });
-}
-
-/**
- * Show an spinner while processing.
- *
- * @param id - The id of interface.
- * @param title - The title to show while spinning.
- */
-export async function showSpinner(id: string, label?: string) {
-  await snap.request({
-    method: 'snap_updateInterface',
-    params: {
-      id,
-      ui: progress(label)
-    },
-  });
-}
+}

packages/snap/src/ui/welcomeScreen.tsx

@@ -5,7 +5,6 @@ import { getFormatted } from '../util/getFormatted';
 
 import { Copyable, Box, Heading, Divider, Text, Bold } from "@metamask/snaps-sdk/jsx";
 
-import { MenuBar } from './components';
 import { HexString } from '@polkadot/util/types';
 
 export const welcomeScreen = (address: string, genesisHash: HexString, logo: string) => {
@@ -15,12 +14,13 @@ export const welcomeScreen = (address: string, genesisHash: HexString, logo: str
 
   return (
     <Box >
-      <Heading>🏠 Your account is now created 🚀</Heading>
+      <Heading>"🎉 Polkadot Account Created! 🚀"</Heading>
+      <Text>Your account address:</Text>
       <Copyable value={formatted} />
       <Divider />
-      <Text> To access your account's details, navigate to  Metamask <Bold>Menu → Snaps</Bold> and click on the PolkaGate icon.</Text>
+      <Text>Explore features like managing balances, staking, voting in governance, and more—all from the PolkaGate home screen.</Text>
+      <Text>To get started, open MetaMask, go to <Bold>Menu → Snaps</Bold>, and click the PolkaGate icon.</Text>
       <Divider />
-      <MenuBar />
     </Box>
   );
 };