diff --git a/.eslintrc.js b/.eslintrc.js index e002662..5a892a3 100644 --- a/.eslintrc.js +++ b/.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', diff --git a/packages/snap/snap.manifest.json b/packages/snap/snap.manifest.json index 693fc7c..7d29307 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": "zxO0U2wCLtUw7Sxd9PR/14lZak3rjbpZk5P/qvHPjU8=", + "shasum": "ilqE//lt6OosojSEjmrQJn2aUTtu7mURnBgmU3Wcc4I=", "location": { "npm": { "filePath": "dist/bundle.js", diff --git a/packages/snap/src/index.tsx b/packages/snap/src/index.tsx index d2b9ff1..2fa354f 100644 --- a/packages/snap/src/index.tsx +++ b/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; diff --git a/packages/snap/src/ui/accountInfo.tsx b/packages/snap/src/ui/accountInfo.tsx index 1889fe4..428ba60 100644 --- a/packages/snap/src/ui/accountInfo.tsx +++ b/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'; /** diff --git a/packages/snap/src/ui/components/MenuBar.tsx b/packages/snap/src/ui/components/MenuBar.tsx index 6b3543e..3d5964d 100644 --- a/packages/snap/src/ui/components/MenuBar.tsx +++ b/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' /> - {/* */} ); }; diff --git a/packages/snap/src/ui/image/icons/book.svg b/packages/snap/src/ui/image/icons/book.svg new file mode 100644 index 0000000..9f13f92 --- /dev/null +++ b/packages/snap/src/ui/image/icons/book.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/packages/snap/src/ui/image/icons/email.svg b/packages/snap/src/ui/image/icons/email.svg new file mode 100644 index 0000000..13a5969 --- /dev/null +++ b/packages/snap/src/ui/image/icons/email.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/packages/snap/src/ui/image/icons/exportAccount.svg b/packages/snap/src/ui/image/icons/exportAccount.svg index 9d09337..ec3791d 100644 --- a/packages/snap/src/ui/image/icons/exportAccount.svg +++ b/packages/snap/src/ui/image/icons/exportAccount.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/packages/snap/src/ui/image/icons/exportAccount1.svg b/packages/snap/src/ui/image/icons/exportAccount1.svg new file mode 100644 index 0000000..2d397e7 --- /dev/null +++ b/packages/snap/src/ui/image/icons/exportAccount1.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/packages/snap/src/ui/image/icons/exportAccount3.svg b/packages/snap/src/ui/image/icons/exportAccount3.svg deleted file mode 100644 index a97c793..0000000 --- a/packages/snap/src/ui/image/icons/exportAccount3.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/packages/snap/src/ui/image/icons/index.tsx b/packages/snap/src/ui/image/icons/index.tsx index 339fbe7..9fbd901 100644 --- a/packages/snap/src/ui/image/icons/index.tsx +++ b/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' \ No newline at end of file +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' \ No newline at end of file diff --git a/packages/snap/src/ui/image/icons/more.svg b/packages/snap/src/ui/image/icons/more.svg new file mode 100644 index 0000000..dc992bd --- /dev/null +++ b/packages/snap/src/ui/image/icons/more.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/packages/snap/src/ui/image/icons/twitter.svg b/packages/snap/src/ui/image/icons/twitter.svg new file mode 100644 index 0000000..74452c7 --- /dev/null +++ b/packages/snap/src/ui/image/icons/twitter.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/packages/snap/src/ui/image/icons/webSite.svg b/packages/snap/src/ui/image/icons/webSite.svg new file mode 100644 index 0000000..936f451 --- /dev/null +++ b/packages/snap/src/ui/image/icons/webSite.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/packages/snap/src/ui/image/icons/youtube.svg b/packages/snap/src/ui/image/icons/youtube.svg new file mode 100644 index 0000000..57ead13 --- /dev/null +++ b/packages/snap/src/ui/image/icons/youtube.svg @@ -0,0 +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 0b58941..9a5476f 100644 --- a/packages/snap/src/ui/index.ts +++ b/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'; diff --git a/packages/snap/src/ui/accountDemo.tsx b/packages/snap/src/ui/partials/accountDemo.tsx similarity index 82% rename from packages/snap/src/ui/accountDemo.tsx rename to packages/snap/src/ui/partials/accountDemo.tsx index 72e78dd..4377e4b 100644 --- a/packages/snap/src/ui/accountDemo.tsx +++ b/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) => { diff --git a/packages/snap/src/ui/progress.tsx b/packages/snap/src/ui/progress.tsx deleted file mode 100644 index f76ea93..0000000 --- a/packages/snap/src/ui/progress.tsx +++ /dev/null @@ -1,17 +0,0 @@ -// Copyright 2023-2024 @polkagate/snap authors & contributors -// SPDX-License-Identifier: Apache-2.0 - -import { Box, Spinner, Text } from "@metamask/snaps-sdk/jsx"; -import React from "react"; - -export const progress = (label?: string) => { - - return ( - - - - {label || 'Processing, Please Wait!'} - - - ); -}; diff --git a/packages/snap/src/ui/showMore.tsx b/packages/snap/src/ui/showMore.tsx new file mode 100644 index 0000000..1b98cd3 --- /dev/null +++ b/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 ( + + PolkaGate Snap Menu + + + + + + + + + + + ); +}; + + + +type MenuProps = { + icon: string; + name: string; + label: string; +} + +type LinkProps = { + icon: string; + link: string; + label: string; +} + +export const MenuItem: SnapComponent = ({ icon, name, label }: MenuProps) => { + + return ( + + + + + ); +}; + +export const LinkItem: SnapComponent = ({ icon, link, label }: LinkProps) => { + + return ( + + + {label} + + ); +}; \ No newline at end of file diff --git a/packages/snap/src/ui/showSpinner.tsx b/packages/snap/src/ui/showSpinner.tsx new file mode 100644 index 0000000..f98ea94 --- /dev/null +++ b/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 ( + + + + {label || 'Processing, Please Wait!'} + + + ); +}; \ No newline at end of file diff --git a/packages/snap/src/ui/transfer.ts b/packages/snap/src/ui/transfer.ts index 9b23c18..d13b77f 100644 --- a/packages/snap/src/ui/transfer.ts +++ b/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) { ]), }, }); -} - -/** - * 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) - }, - }); -} +} \ No newline at end of file diff --git a/packages/snap/src/ui/welcomeScreen.tsx b/packages/snap/src/ui/welcomeScreen.tsx index dc12057..617d24f 100644 --- a/packages/snap/src/ui/welcomeScreen.tsx +++ b/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 ( - 🏠 Your account is now created πŸš€ + "πŸŽ‰ Polkadot Account Created! πŸš€" + Your account address: - To access your account's details, navigate to Metamask Menu β†’ Snaps and click on the PolkaGate icon. + Explore features like managing balances, staking, voting in governance, and moreβ€”all from the PolkaGate home screen. + To get started, open MetaMask, go to Menu β†’ Snaps, and click the PolkaGate icon. - ); }; diff --git a/tsconfig.json b/tsconfig.json index 9a272a8..dbc72ff 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -10,7 +10,8 @@ "sourceMap": true, "strict": true, "target": "ES2020", - "jsx": "react" + "jsx": "react-jsx", + "jsxImportSource": "@metamask/snaps-sdk" }, "exclude": ["**/__snapshots__/**", "**/test/**", "**/*.test.ts"] }