refactor: use new components to polish style

packages/snap/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/polkagate/snap.git"
   },
   "source": {
-    "shasum": "OIpcuFQsDSAMs64+tsEsX1oOkiCBMvjZxZapAnP7Icc=",
+    "shasum": "MT76EDAhXnvCvqsUo7gqfo3yraEEvB4Kju9uR1g3PsE=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/snap/src/index.tsx

@@ -23,14 +23,14 @@ import {
   accountInfo,
   exportAccount,
   showJsonContent,
+  polkagateApps,
+  staking,
+  voting
 } from './ui';
 import { getBalances, getKeyPair } from './util';
 import { POLKADOT_GENESIS } from '@polkadot/apps-config';
 import { getLogo } from './ui/image/chains/getLogo';
 import { HexString } from '@polkadot/util/types';
-import { staking } from './ui/staking';
-import { voting } from './ui/voting';
-import { polkagateApps } from './ui/polkagateApps';
 import { getSnapState, setSnapState, updateSnapState } from './rpc/stateManagement';
 import { getNativeTokenPrice } from './util/getNativeTokenPrice';
 import getChainName from './util/getChainName';
@@ -136,7 +136,7 @@ export const onUserInput: OnUserInputHandler = async ({ id, event }) => {
         break;
 
       case 'backToHome':
-        await showSpinner(id, 'Loading ...');
+        await showSpinner(id, 'Loading, please wait ...');
         const state = await getSnapState();
         await accountInfo(id, state?.currentGenesisHash as HexString);
         break;

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

@@ -1,7 +1,7 @@
 // Copyright 2023-2024 @polkagate/snap authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { Box, Image, Button, SnapComponent } from "@metamask/snaps-sdk/jsx";
+import { Box, Image, Button, SnapComponent, Text } from "@metamask/snaps-sdk/jsx";
 
 type Props = {
   icon: string;
@@ -11,11 +11,11 @@ type Props = {
 export const Btn: SnapComponent<Props> = ({ icon, label }: Props) => {
 
   return (
-    <Box direction="vertical" alignment="start">
+    <Box direction="vertical" alignment="center">
       <Button name={label?.toLowerCase()} variant='primary'>
-        {label}
+        <Image src={icon} />
       </Button>
-      <Image src={icon} />
+      <Text alignment='start'>{label}</Text>
     </Box>
   );
 };

packages/snap/src/ui/exportAccount.tsx

@@ -0,0 +1,97 @@
+
+import { getJsonKeyPair } from '../util';
+import { Text, Box, Button, Container, Divider, Field, Footer, Form, Heading, Icon, Input, Section, Copyable } from '@metamask/snaps-sdk/jsx';
+
+/**
+ * This will show the alert to get password to export account as JSON file.
+ *
+ * @param id - The id of UI interface to be updated.
+ */
+export async function exportAccount(id: string) {
+  await snap.request({
+    method: 'snap_updateInterface',
+    params: {
+      id,
+      ui: ui()
+    },
+  });
+}
+
+const ui = () => {
+
+  return (
+    <Container>
+      <Box direction="vertical" alignment="start">
+        <Section>
+          <Box direction='horizontal' alignment='start'>
+            <Icon name="export" size="md" />
+            <Heading>Export Account!</Heading>
+          </Box>
+          <Divider />
+          <Text alignment='start'> Here, you can export your account as a JSON file, which can be used to import your account in another extension or wallet.</Text>
+          <Box>
+            <Form name="saveExportedAccount">
+              <Field label="Enter a password to encrypt your data" error='Password can not be empty'>
+                <Input name="password" placeholder="password ..." type='password' />
+              </Field>
+              <Button name='exportAccountBtn' type="submit" variant="primary">
+                Export
+              </Button>
+            </Form>
+          </Box>
+        </Section>
+      </Box>
+      <Footer>
+        <Button name='backToHome' variant="destructive">
+          Back
+        </Button>
+      </Footer>
+    </Container>
+  );
+};
+
+
+/**
+ * This will show the exported account content that can be copied in a file.
+ *
+ * @param id - The id of UI interface to be updated.
+ * @param password - The password to encode the content.
+ */
+export async function showJsonContent(id: string, password: string | null) {
+  if (!password) {
+    return;
+  }
+  const json = await getJsonKeyPair(password);
+
+  await snap.request({
+    method: 'snap_updateInterface',
+    params: {
+      id,
+      ui: jsonContentUi(json)
+    },
+  });
+}
+
+const jsonContentUi = (json: string) => {
+
+  return (
+    <Container>
+      <Box direction="vertical" alignment="start">
+        <Section>
+          <Box direction='horizontal' alignment='start'>
+            <Icon name="export" size="md" />
+            <Heading>Export Account!</Heading>
+          </Box>
+          <Divider />
+          <Text alignment='start'>Copy and save the following content in a (.json) file. This file can be imported later in extensions and wallets.</Text>
+          <Copyable value={json} />
+        </Section>
+      </Box>
+      <Footer>
+        <Button name='backToHome' variant="destructive">
+          Back
+        </Button>
+      </Footer>
+    </Container>
+  );
+};

packages/snap/src/ui/index.ts

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

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

@@ -4,7 +4,7 @@
 import type { Balances } from '../../util/getBalance';
 import { getFormatted } from '../../util/getFormatted';
 
-import { Copyable, Box, Heading, Divider } from '@metamask/snaps-sdk/jsx';
+import { Copyable, Box, Heading, Section, Icon } from '@metamask/snaps-sdk/jsx';
 
 import { BalanceInfo, ChainSwitch, MenuBar } from '../components';
 import { HexString } from '@polkadot/util/types';
@@ -15,17 +15,22 @@ export const accountDemo = (address: string, genesisHash: HexString, balances: B
   const formatted = genesisHash ? getFormatted(genesisHash, address) : address;
 
   return (
-    <Box >
-      <Heading>Account</Heading>
-      <Copyable value={formatted} />
-      <Divider />
-      <Heading>Chain</Heading>
-      <ChainSwitch genesisHash={genesisHash} logo={logo} />
-      <Divider />
-      <Heading>Balance</Heading>
-      <BalanceInfo balances={balances} price={price} />
-      <Divider />
-      <Divider />
+    <Box>
+      <Section>
+        <Box direction='horizontal' alignment='start'>
+          <Icon name="wallet" size="md" />
+          <Heading>Account</Heading>
+        </Box>
+        <Copyable value={formatted} />
+        <ChainSwitch genesisHash={genesisHash} logo={logo} />
+      </Section>
+      <Section>
+      <Box direction='horizontal' alignment='start'>
+          <Icon name="coin" size="md" />
+          <Heading>Balance</Heading>
+        </Box>
+        <BalanceInfo balances={balances} price={price} />
+      </Section>
       <MenuBar />
     </Box>
   );