refactor: utilize sm size

plus fixing not enough to pay fee issue
PolkaGate · Jan 23, 2025 · 0f15aa3 · 0f15aa3
1 parent 8f7104f
commit 0f15aa3
Show file tree

Hide file tree

Showing 36 changed files with 338 additions and 228 deletions.
diff --git a/package.json b/package.json
@@ -39,7 +39,6 @@
     "@metamask/eslint-config-typescript": "^14.0.0",
     "@metamask/snaps-cli": "^6.5.4",
     "@metamask/snaps-jest": "^8.5.0",
-    "@types/react-dom": "18.2.4",
     "@typescript-eslint/eslint-plugin": "^5.42.1",
     "@typescript-eslint/parser": "^5.42.1",
     "eslint": "^8.27.0",

diff --git a/packages/snap/package.json b/packages/snap/package.json
@@ -30,7 +30,7 @@
     "@dicebear/avatars-identicon-sprites": "latest",
     "@metamask/key-tree": "^10.0.1",
     "@metamask/rpc-errors": "^7.0.1",
-    "@metamask/snaps-sdk": "^6.13.0",
+    "@metamask/snaps-sdk": "^6.15.0",
     "@polkadot/api": "^15.0.1",
     "@polkadot/apps-config": "^0.141.1",
     "@polkadot/extension-chains": "^0.56.2",
@@ -58,6 +58,7 @@
     "@metamask/utils": "^11.0.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",

diff --git 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": "pKlCKLm24+CsWnzVlgDziD8mi++Cm4thl45aIzl/MPU=",
+    "shasum": "rhbUBbM2am7A1HtWUiWgEw0tzBa0ffXkYHAyu610ZhU=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/snap/src/listeners/onInstall.tsx b/packages/snap/src/listeners/onInstall.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { OnInstallHandler } from '@metamask/snaps-sdk';
-import { Box, Heading, Text, Bold, Link, Icon, Section, SnapComponent, Image, Row } from "@metamask/snaps-sdk/jsx";
+import { Box, Heading, Text, Bold, Link, Section, SnapComponent, Image } from "@metamask/snaps-sdk/jsx";
 
 import { POLKADOT_GENESIS } from '@polkadot/apps-config';
 import { setSnapState } from '../rpc/stateManagement';
@@ -38,7 +38,6 @@ const WelcomeScreen: SnapComponent = () => {
         <Image src={polkadotMedium} />
       </Box>
 
-
       <Section>
         <Text>
           1.	Open MetaMask.
@@ -51,8 +50,7 @@ const WelcomeScreen: SnapComponent = () => {
         </Text>
       </Section>
 
-
-      <Text color='muted'>
+      <Text color='muted' size='sm'>
         Scroll down to see the full screenshot of the Home screen for reference.
       </Text>
 

diff --git a/packages/snap/src/ui/components/BalanceInfo.tsx b/packages/snap/src/ui/components/BalanceInfo.tsx
@@ -31,15 +31,17 @@ export const DetailRow: SnapComponent<DetailRowProps> = ({ iconName, hideBalance
     <Box alignment='space-between' direction='horizontal'>
       <Box alignment='start' direction='horizontal'>
         <Icon name={iconName} color='muted' />
-        <Text color='muted'>{label} </Text>
+        <Text color='muted' size='sm'>
+          {label}
+        </Text>
       </Box>
       <Box alignment='end' direction='horizontal'>
         {!!tooltip &&
           <Tooltip content={tooltip}>
             <Icon name='info' color='muted' />
           </Tooltip>
         }
-        <Text color='muted'>
+        <Text color='muted' size='sm'>
           {hideBalance ? MASKED_TEXT : value}
         </Text>
       </Box>

diff --git a/packages/snap/src/ui/components/Confirmation.tsx b/packages/snap/src/ui/components/Confirmation.tsx
@@ -28,13 +28,13 @@ export const Confirmation: SnapComponent<Props> = ({ action, button, chainName,
           <Image src={success} alt='success' />
         </Box>
         <Divider />
-        <Text alignment='start'>
+        <Text alignment='start' color='muted'>
           Transaction hash
         </Text>
         <Copyable value={txHash} />
         <Divider />
         <Box direction='horizontal' alignment='space-between'>
-          <Text>
+          <Text color='muted'>
             View on explorer
           </Text>
           <Link href={`https://${sanitizeChainName(chainName)}.subscan.io/extrinsic/${String(txHash)}`}>

diff --git a/packages/snap/src/ui/components/Options.tsx b/packages/snap/src/ui/components/Options.tsx
@@ -46,7 +46,7 @@ export const OptionButton: SnapComponent<OptionProps> = ({ description, form, na
           {text}
         </Text>
         {!!description &&
-          <Text alignment='start' color='muted'>
+          <Text alignment='start' color='muted' size='sm'>
             {description}
           </Text>}
       </Box>
@@ -59,7 +59,7 @@ export const Options: SnapComponent<Props> = ({ description1, description2, form
 
   return (
     <Box direction='vertical'>
-      <Text alignment='start' color='muted'>
+      <Text alignment='start' color='muted' size='sm'>
         {title}
       </Text>
       <OptionButton

diff --git a/packages/snap/src/ui/receive.tsx b/packages/snap/src/ui/receive.tsx
@@ -32,25 +32,18 @@ export async function receive(id: string, genesisHash?: HexString) {
 const ui = (formatted: string, genesisHash: HexString, logo: string, qrCode: string) => {
 
   return (
-    <Container>
-      <Box>
-        <FlowHeader
-          action='backToHome'
-          label='Receive'
-          showHome
-        />
-        <Text alignment="start" color='muted'>
-          Select a network to view your address & QR code
-        </Text>
-        <ChainSwitch genesisHash={genesisHash} logo={logo} />
-        <Copyable value={formatted} />
-        <Image src={qrCode} />
-      </Box>
-      <Footer>
-        <Button name='backToHomeWithoutUpdate' variant="destructive">
-          Back
-        </Button>
-      </Footer>
-    </Container>
+    <Box>
+      <FlowHeader
+        action='backToHome'
+        label='Receive'
+        showHome
+      />
+      <Text alignment="start" color='muted'>
+        Select a network to view your address & QR code
+      </Text>
+      <ChainSwitch genesisHash={genesisHash} logo={logo} />
+      <Copyable value={formatted} />
+      <Image src={qrCode} />
+    </Box>
   );
 };
diff --git a/packages/snap/src/ui/send/index.tsx b/packages/snap/src/ui/send/index.tsx
@@ -13,7 +13,7 @@ import { Balances } from "../../util";
 
 export async function send(
   id: string,
-  context:SendContextType,
+  context: SendContextType,
   amount: number | undefined,
   formErrors: SendFormErrors,
   recipient: string | undefined,
@@ -28,7 +28,7 @@ export async function send(
   const maybeSelectedToken = tokenGenesis && balancesAll.find(({ token, genesisHash }) => tokenGenesis[0] === token && tokenGenesis[1] === genesisHash);
   const selectedToken = maybeSelectedToken || nonZeroBalances[0];
   const noError = !formErrors || Object.keys(formErrors).length === 0;
-  const formIsFilledOut = amount && Number(amount) !== 0 && recipient;
+  const formIsFilledOut = !!amount && Number(amount) !== 0 && !!recipient;
 
   const fee = tokenGenesis && formIsFilledOut && noError && !clearAddress
     ? await getTransfer(address, amount, tokenGenesis[1] as HexString, recipient) as Balance
@@ -51,7 +51,7 @@ export async function send(
         amount,
         decimal: selectedToken.decimal,
         fee: fee ? fee?.toString() : undefined,
-        genesisHash : selectedToken.genesisHash,
+        genesisHash: selectedToken.genesisHash,
         price: selectedTokenPrice,
         recipient,
         token: selectedToken.token,

diff --git a/packages/snap/src/ui/settings/index.tsx b/packages/snap/src/ui/settings/index.tsx
@@ -33,7 +33,7 @@ const ui = (address: string) => {
           tooltip='To unlock the full range of features, download the PolkaGate Extension today!'
         />
 
-        <Text color='muted' >
+        <Text color='muted' size="sm">
           WALLET
         </Text>
         <Section>
@@ -52,23 +52,23 @@ const ui = (address: string) => {
           </Box>
         </Section>
 
-        <Text color='muted' >
+        <Text color='muted' size="sm">
           PREFERENCES
         </Text>
         <Section>
           <Preference icon={currency} label='Currency' value='USD' />
           <Preference icon={language} label='Language' value='English' />
         </Section>
 
-        <Text color='muted' >
+        <Text color='muted' size="sm">
           SUPPORT & FEEDBACK
         </Text>
         <Section>
           <LinkItem icon={book} link='https://docs.polkagate.xyz/polkagate/metamask-snap-user-guide/installing-polkagate-snap' label={'Wiki & Help Center'} />
           <LinkItem icon={email} link='mailto:[email protected]' label={'Contact Us'} />
         </Section>
 
-        <Text color='muted' >
+        <Text color='muted' size="sm">
           COMMUNITY
         </Text>
         <Section>
@@ -77,7 +77,7 @@ const ui = (address: string) => {
           <LinkItem icon={youtube} link='https://youtube.com/@polkagate' label={'YouTube'} />
         </Section>
 
-        <Text color='muted' >
+        <Text color='muted' size="sm">
           ABOUT
         </Text>
         <Section>

diff --git a/packages/snap/src/ui/showSpinner.tsx b/packages/snap/src/ui/showSpinner.tsx
@@ -1,6 +1,5 @@
-import { Box, Button, Container, Footer, Image, Spinner, Text } from "@metamask/snaps-sdk/jsx";
+import { Box, Image, Spinner, Text } from "@metamask/snaps-sdk/jsx";
 import { clock, working } from "./image/icons";
-import { FlowHeader } from "./components/FlowHeader";
 
 /**
  * Show an spinner while processing.
@@ -24,26 +23,12 @@ export const ui = (label?: string, disabled?: boolean) => {
   const isWorking = label?.includes('Working');
 
   return (
-    <Container>
-      <Box>
-        <FlowHeader
-          action='backToHomeWithoutUpdate'
-          label=' '
-          showHome
-        />
-        <Box direction="vertical" alignment="center" center>
-          <Image src={isWorking ? working : clock} />
-          <Text alignment="center" color="muted">
-            {label || 'Processing, Please Wait!'}
-          </Text>
-          <Spinner />
-        </Box>
-      </Box>
-      <Footer>
-        <Button name='backToHomeWithoutUpdate' variant="destructive" disabled={disabled}>
-          Cancel
-        </Button>
-      </Footer>
-    </Container>
+    <Box direction="vertical" alignment="center" center>
+      <Image src={isWorking ? working : clock} />
+      <Text alignment="center" color="muted">
+        {label || 'Processing, Please Wait!'}
+      </Text>
+      <Spinner />
+    </Box>
   );
 };
diff --git a/packages/snap/src/ui/stake/ShowValidator.tsx b/packages/snap/src/ui/stake/ShowValidator.tsx
@@ -5,14 +5,16 @@ import { AccountId } from '@polkadot/types/interfaces';
 import { ellipsis } from './utils/ellipsis';
 
 interface Props {
-  accountId: AccountId;
+  accountId: AccountId | string;
   commission: BN;
   identity?: Identity;
   isSelected?: boolean;
   nominatorsCount: number | undefined;
   showCheckBox?: boolean;
 }
 
+const VALIDATOR_MAX_LENGTH = 20;
+
 export const ShowValidator: SnapComponent<Props> = ({ accountId, commission, identity, isSelected, nominatorsCount, showCheckBox }) => {
   return (
     <Box direction='horizontal' alignment='space-between' center>
@@ -24,17 +26,17 @@ export const ShowValidator: SnapComponent<Props> = ({ accountId, commission, ide
           ? <Box direction='horizontal' alignment='start' center>
             <Avatar address={`polkadot:91b171bb158e2d3848fa23a9f1c25182:${accountId}`} size='sm' />
             <Tooltip content={`${accountId}`}>
-              <Text alignment='start'>
-                {ellipsis((identity.displayParent ? `${identity.displayParent}/` : '') + identity.display, 16)}
+              <Text alignment='start' size='sm'>
+                {ellipsis((identity.displayParent ? `${identity.displayParent}/` : '') + identity.display, VALIDATOR_MAX_LENGTH)}
               </Text>
             </Tooltip>
           </Box>
           : //<Address address={`polkadot:91b171bb158e2d3848fa23a9f1c25182:${accountId}`} /> //this can be used instead, when avatar size is available
           <Box direction='horizontal' alignment='start' center>
             <Avatar address={`polkadot:91b171bb158e2d3848fa23a9f1c25182:${accountId}`} size='sm' />
             <Tooltip content={`${accountId}`}>
-              <Text alignment='start'>
-                {ellipsis(String(accountId), 16)}
+              <Text alignment='start' size='sm'>
+                {ellipsis(String(accountId), VALIDATOR_MAX_LENGTH)}
               </Text>
             </Tooltip>
           </Box>

diff --git a/packages/snap/src/ui/stake/components/InfoRow.tsx b/packages/snap/src/ui/stake/components/InfoRow.tsx
@@ -11,7 +11,7 @@ interface InoRowProps {
 export const InfoRow: SnapComponent<InoRowProps> = ({ text }) => (
   <Box direction="horizontal" alignment="start">
     <Image src={info} />
-    <Text color='muted'>
+    <Text color='muted' size="sm">
       {text}
     </Text>
   </Box>

diff --git a/packages/snap/src/ui/stake/components/PoolOption.tsx b/packages/snap/src/ui/stake/components/PoolOption.tsx
@@ -37,12 +37,16 @@ export const PoolOption: SnapComponent<Props> = ({
           <Row2
             alignment="start"
             label="Minimum stake"
+            labelSize="sm"
+            valueSize="sm"
             value={`${minJoinBondInHuman || 1} ${token}`}
             valueColor="muted"
           />
           <Row2
             alignment="start"
             label="Rewards"
+            labelSize="sm"
+            valueSize="sm"
             value='Claim manually'
             valueColor="muted"
           />

diff --git a/packages/snap/src/ui/stake/components/Row2.tsx b/packages/snap/src/ui/stake/components/Row2.tsx
@@ -2,32 +2,36 @@ import type { SnapComponent, TextColors } from '@metamask/snaps-sdk/jsx';
 import { Box, Text } from '@metamask/snaps-sdk/jsx';
 
 type Props = {
-  label: string;
+  alignment?: "space-between" | "start" | "center" | "end" | "space-around" | undefined
   extra?: string;
-  value: string;
-  labelColor?: TextColors;
   extraColor?: TextColors;
+  label: string;
+  labelColor?: TextColors;
+  value: string;
   valueColor?: TextColors;
-  alignment?: "space-between" | "start" | "center" | "end" | "space-around" | undefined
+  labelSize?: 'sm' | 'md' | undefined;
+  valueSize?: 'sm' | 'md' | undefined;
+  extraSize?: 'sm' | 'md' | undefined;
 }
 
 /**
  * A component that shows label, extra, value in a row with adjustable colors .
  *
  * @returns The Row 2 component.
  */
-export const Row2: SnapComponent<Props> = ({ alignment, label, extra, value, labelColor = 'muted', extraColor = 'muted', valueColor = 'default' }) => (
+export const Row2: SnapComponent<Props> = ({ alignment, label, labelColor = 'muted', extra, extraColor = 'muted', labelSize,valueSize,extraSize, value, valueColor = 'default' }) => (
   <Box alignment={alignment || "space-between"} direction="horizontal" center>
-    <Text color={labelColor}>
+    <Text color={labelColor} size={labelSize}>
       {label}{alignment === 'start' ? ':' : ''}
     </Text>
+
     <Box alignment="end" direction="horizontal" center>
       {!!extra &&
-        <Text color={extraColor}>
+        <Text color={extraColor} size={extraSize}>
           {extra}
         </Text>
       }
-      <Text color={valueColor}>
+      <Text color={valueColor} size={valueSize}>
         {value}
       </Text>
     </Box>