From f291742e4a44dfef7f8f71d12c6ff09e212d116b Mon Sep 17 00:00:00 2001 From: Kami Date: Thu, 31 Oct 2024 15:30:45 +0330 Subject: [PATCH] refactor: use new components to polish style --- packages/snap/snap.manifest.json | 2 +- packages/snap/src/index.tsx | 8 +- packages/snap/src/ui/components/Btn.tsx | 8 +- packages/snap/src/ui/dappList.ts | 33 ------- packages/snap/src/ui/exportAccount.ts | 86 ---------------- packages/snap/src/ui/exportAccount.tsx | 97 +++++++++++++++++++ packages/snap/src/ui/image/icons/more.svg | 4 +- packages/snap/src/ui/image/icons/send.svg | 4 +- packages/snap/src/ui/image/icons/stake.svg | 4 +- packages/snap/src/ui/image/icons/vote.svg | 4 +- packages/snap/src/ui/index.ts | 6 +- packages/snap/src/ui/partials/accountDemo.tsx | 29 +++--- packages/snap/src/ui/polkagateApps.ts | 28 ------ packages/snap/src/ui/polkagateApps.tsx | 40 ++++++++ packages/snap/src/ui/showMore.tsx | 51 ++++++---- packages/snap/src/ui/staking.ts | 29 ------ packages/snap/src/ui/staking.tsx | 46 +++++++++ packages/snap/src/ui/voting.ts | 31 ------ packages/snap/src/ui/voting.tsx | 46 +++++++++ 19 files changed, 297 insertions(+), 259 deletions(-) delete mode 100644 packages/snap/src/ui/dappList.ts delete mode 100644 packages/snap/src/ui/exportAccount.ts create mode 100644 packages/snap/src/ui/exportAccount.tsx delete mode 100644 packages/snap/src/ui/polkagateApps.ts create mode 100644 packages/snap/src/ui/polkagateApps.tsx delete mode 100644 packages/snap/src/ui/staking.ts create mode 100644 packages/snap/src/ui/staking.tsx delete mode 100644 packages/snap/src/ui/voting.ts create mode 100644 packages/snap/src/ui/voting.tsx diff --git a/packages/snap/snap.manifest.json b/packages/snap/snap.manifest.json index 716f3e0..9856088 100644 --- a/packages/snap/snap.manifest.json +++ b/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", diff --git a/packages/snap/src/index.tsx b/packages/snap/src/index.tsx index ed0a904..495c481 100644 --- a/packages/snap/src/index.tsx +++ b/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; diff --git a/packages/snap/src/ui/components/Btn.tsx b/packages/snap/src/ui/components/Btn.tsx index 3385580..6759711 100644 --- a/packages/snap/src/ui/components/Btn.tsx +++ b/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 = ({ icon, label }: Props) => { return ( - + - + {label} ); }; diff --git a/packages/snap/src/ui/dappList.ts b/packages/snap/src/ui/dappList.ts deleted file mode 100644 index fb9c0ed..0000000 --- a/packages/snap/src/ui/dappList.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { button, heading, panel, text, divider } from '@metamask/snaps-sdk'; - -/** - * This shows a dapp list to users. - * - * @param id - The id of UI interface to be updated. - */ -export async function showDappList(id: string) { - await snap.request({ - method: 'snap_updateInterface', - params: { - id, - ui: panel([ - heading('DApps List'), - divider(), - text( - 'Explore these dApps to streamline your daily tasks and engage with the Polkadot ecosystem.', - ), - text('General : **[apps.polkagate.xyz](https://apps.polkagate.xyz)**'), - text( - 'Staking : **[staking.polkadot.cloud](https://staking.polkadot.cloud)**', - ), - text('Governance : **[subsquare.io](https://polkadot.subsquare.io)**'), - divider(), - button({ - variant: 'primary', - value: 'Back', - name: 'backToHome', - }), - ]), - }, - }); -} diff --git a/packages/snap/src/ui/exportAccount.ts b/packages/snap/src/ui/exportAccount.ts deleted file mode 100644 index fdf3398..0000000 --- a/packages/snap/src/ui/exportAccount.ts +++ /dev/null @@ -1,86 +0,0 @@ -import { - button, - heading, - panel, - text, - divider, - input, - form, - copyable, -} from '@metamask/snaps-sdk'; - -import { getJsonKeyPair } from '../util'; - -/** - * 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: panel([ - heading('Export Account'), - divider(), - text( - 'Here, you can export your account as a JSON file, which can be used to import your account in another extension or wallet.'), - form({ - name: 'saveExportedAccount', - children: [ - input({ - inputType: 'password', - label: 'Enter a password to encrypt your export data:', - name: 'password', - placeholder: 'password ...', - }), - button({ - variant: 'primary', - value: 'Export', - name: 'exportAccountBtn', - }), - button({ - variant: 'secondary', - value: 'Back', - name: 'backToHome', - }), - ], - }), - ]), - }, - }); -} - -/** - * 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: panel([ - heading('Export Account'), - divider(), - text( - 'Copy and save the following content in a (.json) file. This file can be imported later in extensions and wallets.', - ), - copyable(json), - button({ - variant: 'secondary', - value: 'Back', - name: 'backToHome', - }), - ]), - }, - }); -} diff --git a/packages/snap/src/ui/exportAccount.tsx b/packages/snap/src/ui/exportAccount.tsx new file mode 100644 index 0000000..9f49b08 --- /dev/null +++ b/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 ( + + +
+ + + Export Account! + + + Here, you can export your account as a JSON file, which can be used to import your account in another extension or wallet. + +
+ + + + +
+ +
+ +
+ +
+ + ); +}; + + +/** + * 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 ( + + +
+ + + Export Account! + + + Copy and save the following content in a (.json) file. This file can be imported later in extensions and wallets. + +
+ +
+ +
+ + ); +}; diff --git a/packages/snap/src/ui/image/icons/more.svg b/packages/snap/src/ui/image/icons/more.svg index 920d2dc..a7436e5 100644 --- a/packages/snap/src/ui/image/icons/more.svg +++ b/packages/snap/src/ui/image/icons/more.svg @@ -1,3 +1,3 @@ - - + + \ No newline at end of file diff --git a/packages/snap/src/ui/image/icons/send.svg b/packages/snap/src/ui/image/icons/send.svg index d32f123..1129256 100644 --- a/packages/snap/src/ui/image/icons/send.svg +++ b/packages/snap/src/ui/image/icons/send.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/snap/src/ui/image/icons/stake.svg b/packages/snap/src/ui/image/icons/stake.svg index 405ed8f..5b40ace 100644 --- a/packages/snap/src/ui/image/icons/stake.svg +++ b/packages/snap/src/ui/image/icons/stake.svg @@ -1,3 +1,3 @@ - - + + \ No newline at end of file diff --git a/packages/snap/src/ui/image/icons/vote.svg b/packages/snap/src/ui/image/icons/vote.svg index 598d8c7..6da39ac 100644 --- a/packages/snap/src/ui/image/icons/vote.svg +++ b/packages/snap/src/ui/image/icons/vote.svg @@ -1,3 +1,3 @@ - - + + \ No newline at end of file diff --git a/packages/snap/src/ui/index.ts b/packages/snap/src/ui/index.ts index 9a5476f..0c5374c 100644 --- a/packages/snap/src/ui/index.ts +++ b/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'; diff --git a/packages/snap/src/ui/partials/accountDemo.tsx b/packages/snap/src/ui/partials/accountDemo.tsx index f544771..44ace22 100644 --- a/packages/snap/src/ui/partials/accountDemo.tsx +++ b/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 ( - - Account - - - Chain - - - Balance - - - + +
+ + + Account + + + +
+
+ + + Balance + + +
); diff --git a/packages/snap/src/ui/polkagateApps.ts b/packages/snap/src/ui/polkagateApps.ts deleted file mode 100644 index 97d080c..0000000 --- a/packages/snap/src/ui/polkagateApps.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { button, heading, panel, text, divider } from '@metamask/snaps-sdk'; - -/** - * This shows a staking page including staking websites - * - * @param id - The id of UI interface to be updated. - */ -export async function polkagateApps(id: string) { - await snap.request({ - method: 'snap_updateInterface', - params: { - id, - ui: panel([ - heading('Send Funds!'), - divider(), - text( - 'With the PolkaGate app, you can **send** funds, **stake** tokens, **vote** on referenda, create an **identity**, view **assets** across chains, **unlock** tokens, and more.'), - text('Visit: **[apps.polkagate.xyz](https://apps.polkagate.xyz)**'), - divider(), - button({ - variant: 'secondary', - value: 'Back', - name: 'backToHome', - }), - ]), - }, - }); -} diff --git a/packages/snap/src/ui/polkagateApps.tsx b/packages/snap/src/ui/polkagateApps.tsx new file mode 100644 index 0000000..69efc42 --- /dev/null +++ b/packages/snap/src/ui/polkagateApps.tsx @@ -0,0 +1,40 @@ +import { Bold, Box, Button, Container, Divider, Footer, Heading, Icon, Link, Section, Text } from "@metamask/snaps-sdk/jsx"; + +export async function polkagateApps(id: string) { + await snap.request({ + method: 'snap_updateInterface', + params: { + id, + ui: ui() + }, + }); +} + +const ui = () => { + + return ( + + +
+ + + Send Funds! + + + With the PolkaGate app, you can send funds, stake tokens, vote on referenda, create an identity, view assets across chains, unlock tokens, and more. + + Visit: + + apps.polkagate.xyz + + +
+ +
+ +
+ + ); +}; \ No newline at end of file diff --git a/packages/snap/src/ui/showMore.tsx b/packages/snap/src/ui/showMore.tsx index 144a7af..70c50b5 100644 --- a/packages/snap/src/ui/showMore.tsx +++ b/packages/snap/src/ui/showMore.tsx @@ -1,5 +1,4 @@ -import { Box, Image, Button, SnapComponent, Divider, Link, Heading } from "@metamask/snaps-sdk/jsx"; -import { book, email, exportAccount, twitter, webSite, youtube } from "./image/icons"; +import { Box, Button, SnapComponent, Divider, Link, Heading, Icon, Section, IconName, Footer, Container } from "@metamask/snaps-sdk/jsx"; /** * This shows the more page @@ -16,35 +15,45 @@ export async function showMore(id: string) { }); } -export const ui = () => { +const ui = () => { return ( - - PolkaGate Snap Menu - - - - - - - - - - + + +
+ + + PolkaGate Snap Menu + + + + + + + + + + +
+ +
+ +
+ ); }; type MenuProps = { - icon: string; + icon: IconName; name: string; label: string; } type LinkProps = { - icon: string; + icon: IconName; link: string; label: string; } @@ -53,7 +62,7 @@ export const MenuItem: SnapComponent = ({ icon, name, label }: MenuPr return ( - + @@ -65,7 +74,7 @@ export const LinkItem: SnapComponent = ({ icon, link, label }: LinkPr return ( - + {label} diff --git a/packages/snap/src/ui/staking.ts b/packages/snap/src/ui/staking.ts deleted file mode 100644 index 6340248..0000000 --- a/packages/snap/src/ui/staking.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { button, heading, panel, text, divider } from '@metamask/snaps-sdk'; - -/** - * This shows a staking page including staking websites - * - * @param id - The id of UI interface to be updated. - */ -export async function staking(id: string) { - await snap.request({ - method: 'snap_updateInterface', - params: { - id, - ui: panel([ - heading('Stake Here!'), - divider(), - text('Here are the recommended staking dapps where you can safely stake your tokens:'), - divider(), - text('1- Dashboard: **[staking.polkadot.cloud](https://staking.polkadot.cloud)**'), - text('2- PolkaGate Apps: **[apps.polkagate.xyz](https://apps.polkagate.xyz)**'), - divider(), - button({ - variant: 'secondary', - value: 'Back', - name: 'backToHome', - }), - ]), - }, - }); -} diff --git a/packages/snap/src/ui/staking.tsx b/packages/snap/src/ui/staking.tsx new file mode 100644 index 0000000..78558e1 --- /dev/null +++ b/packages/snap/src/ui/staking.tsx @@ -0,0 +1,46 @@ +import { Box, Button, Container, Divider, Footer, Heading, Icon, Link, Section, Text } from "@metamask/snaps-sdk/jsx"; + +export async function staking(id: string) { + await snap.request({ + method: 'snap_updateInterface', + params: { + id, + ui: ui() + }, + }); +} + +const ui = () => { + + return ( + + +
+ + + Stake Here! + + + Here are the recommended staking dapps where you can safely stake your tokens: + + 1- + + staking.polkadot.cloud + + + + 2- + + apps.polkagate.xyz + + +
+ +
+ +
+ + ); +}; \ No newline at end of file diff --git a/packages/snap/src/ui/voting.ts b/packages/snap/src/ui/voting.ts deleted file mode 100644 index 475bf01..0000000 --- a/packages/snap/src/ui/voting.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { button, heading, panel, text, divider } from '@metamask/snaps-sdk'; - -/** - * This shows a voting page including governance websites - * - * @param id - The id of UI interface to be updated. - */ -export async function voting(id: string) { - await snap.request({ - method: 'snap_updateInterface', - params: { - id, - ui: panel([ - heading('Participate in Governance!'), - divider(), - text( - 'Here are the recommended governance dapps where you can cast your votes:', - ), - divider(), - text('1- Subsquare: **[subsquare.io](https://subsquare.io)**'), - text('2- PolkaGate Apps: **[apps.polkagate.xyz](https://apps.polkagate.xyz)**'), - divider(), - button({ - variant: 'secondary', - value: 'Back', - name: 'backToHome', - }), - ]), - }, - }); -} diff --git a/packages/snap/src/ui/voting.tsx b/packages/snap/src/ui/voting.tsx new file mode 100644 index 0000000..2f281d6 --- /dev/null +++ b/packages/snap/src/ui/voting.tsx @@ -0,0 +1,46 @@ +import { Box, Button, Container, Divider, Footer, Heading, Icon, Link, Section, Text } from "@metamask/snaps-sdk/jsx"; + +export async function voting(id: string) { + await snap.request({ + method: 'snap_updateInterface', + params: { + id, + ui: ui() + }, + }); +} + +const ui = () => { + + return ( + + +
+ + + Participate in Governance! + + + Here are the recommended governance dapps where you can cast your votes: + + 1- + + subsquare.io + + + + 2- + + apps.polkagate.xyz + + +
+ + + + ); +}; \ No newline at end of file