address requested changes and improve interface responsivnes

MetaMask · Sep 19, 2024 · 2e6c5c6 · 2e6c5c6
1 parent 16d0937
commit 2e6c5c6
Show file tree

Hide file tree

Showing 13 changed files with 252 additions and 220 deletions.
diff --git a/packages/examples/packages/send-flow/LICENSE.APACHE2 b/packages/examples/packages/send-flow/LICENSE.APACHE2
@@ -186,7 +186,7 @@
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-   Copyright 2023 ConsenSys Software Inc.
+   Copyright 2024 Consensys Software Inc.
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

diff --git a/packages/examples/packages/send-flow/LICENSE.MIT0 b/packages/examples/packages/send-flow/LICENSE.MIT0
@@ -1,6 +1,6 @@
 MIT No Attribution
 
-Copyright 2023 ConsenSys Software Inc.
+Copyright 2024 Consensys Software Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this
 software and associated documentation files (the "Software"), to deal in the Software

diff --git a/packages/examples/packages/send-flow/README.md b/packages/examples/packages/send-flow/README.md
@@ -4,14 +4,14 @@ This snap demonstrates a simple send flow built with Snaps custom UI.
 
 ## Snap usage
 
-### onRpcRequest
+### `onRpcRequest`
 
 This snap exposes an `onRpcRequest` handler, which supports the following
 JSON-RPC methods:
 
 - `dialog`: Create a `snap_dialog` with the send flow.
 
-### onHomePage
+### `onHomePage`
 
 The snap exposes an `onHomePage` handler, which shows the send flow.
 

diff --git a/packages/examples/packages/send-flow/package.json b/packages/examples/packages/send-flow/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@metamask/send-flow-example-snap",
   "version": "0.0.0",
-  "description": "MetaMask example snap demonstrating a send flow with UI components.",
+  "description": "MetaMask example Snap demonstrating a send flow with UI components.",
   "repository": {
     "type": "git",
     "url": "https://github.com/MetaMask/snaps.git"

diff --git a/packages/examples/packages/send-flow/snap.manifest.json b/packages/examples/packages/send-flow/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "dPrPcKKLcAdDUAuQx4w0hkQEtfqqdKgGROrCaUb2QHc=",
+    "shasum": "0z0EeOogIlK+zdR4HsfZW4AznqBlTrLc1Zxxe0eQZII=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/send-flow/src/components/AccountSelector.tsx b/packages/examples/packages/send-flow/src/components/AccountSelector.tsx
@@ -0,0 +1,54 @@
+import {
+  Card,
+  Field,
+  Selector,
+  SelectorOption,
+  type SnapComponent,
+} from '@metamask/snaps-sdk/jsx';
+
+import type { Account } from '../types';
+import { truncate } from '../utils';
+
+/**
+ * The props for the {@link AccountSelector} component.
+ *
+ * @property selectedAccount - The currently selected account.
+ * @property accounts - The available accounts.
+ */
+export type AccountSelectorProps = {
+  selectedAccount: string;
+  accounts: Account[];
+};
+
+/**
+ * A component that shows the account selector.
+ *
+ * @param props - The component props.
+ * @param props.selectedAccount - The currently selected account.
+ * @param props.accounts - The available accounts.
+ * @returns The AccountSelector component.
+ */
+export const AccountSelector: SnapComponent<AccountSelectorProps> = ({
+  selectedAccount,
+  accounts,
+}) => (
+  <Field label={'From account'}>
+    <Selector
+      name="accountSelector"
+      title="From account"
+      value={selectedAccount}
+    >
+      {accounts.map(({ name, address, balance, icon }) => (
+        <SelectorOption value={address}>
+          <Card
+            image={icon}
+            title={name}
+            description={truncate(address, 13)}
+            value={`${balance.amount.toString()} BTC`}
+            extra={`$${balance.fiat.toString()}`}
+          />
+        </SelectorOption>
+      ))}
+    </Selector>
+  </Field>
+);
diff --git a/packages/examples/packages/send-flow/src/components/SendFlow.tsx b/packages/examples/packages/send-flow/src/components/SendFlow.tsx
@@ -1,211 +1,11 @@
 import type { SnapComponent } from '@metamask/snaps-sdk/jsx';
-import {
-  Button,
-  Box,
-  Text,
-  Card,
-  Container,
-  Footer,
-  Selector,
-  SelectorOption,
-  Form,
-  Field,
-  Input,
-  Image,
-  Icon,
-  Section,
-  Row,
-  Value,
-  Heading,
-} from '@metamask/snaps-sdk/jsx';
+import { Box, Container } from '@metamask/snaps-sdk/jsx';
 
-import btcIcon from '../images/btc.svg';
-import jazzicon3 from '../images/jazzicon3.svg';
-import type { Account, SendFormErrors, Currency } from '../types';
-import { truncate } from '../utils';
-
-/**
- * A component that shows the send flow header.
- *
- * @returns The SendFlowHeader component.
- */
-export const SendFlowHeader: SnapComponent = () => (
-  <Box direction="horizontal" alignment="space-between" center>
-    <Button name="back">
-      <Icon name="arrow-left" color="primary" size="md" />
-    </Button>
-    <Heading>Send</Heading>
-    <Button name="menu">
-      <Icon name="more-vertical" color="primary" size="md" />
-    </Button>
-  </Box>
-);
-
-/**
- * The props for the {@link AccountSelector} component.
- *
- * @property selectedAccount - The currently selected account.
- * @property accounts - The available accounts.
- */
-export type AccountSelectorProps = {
-  selectedAccount: string;
-  accounts: Account[];
-};
-
-/**
- * A component that shows the account selector.
- *
- * @param props - The component props.
- * @param props.selectedAccount - The currently selected account.
- * @param props.accounts - The available accounts.
- * @returns The AccountSelector component.
- */
-export const AccountSelector: SnapComponent<AccountSelectorProps> = ({
-  selectedAccount,
-  accounts,
-}) => (
-  <Field label={'From account'}>
-    <Selector
-      name="accountSelector"
-      title="From account"
-      value={selectedAccount}
-    >
-      {accounts.map(({ name, address, balance, icon }) => (
-        <SelectorOption value={address}>
-          <Card
-            image={icon}
-            title={name}
-            description={truncate(address, 13)}
-            value={`${balance.amount.toString()} BTC`}
-            extra={`$${balance.fiat.toString()}`}
-          />
-        </SelectorOption>
-      ))}
-    </Selector>
-  </Field>
-);
-
-/**
- * The props for the {@link SendForm} component.
- *
- * @property selectedAccount - The currently selected account.
- * @property accounts - The available accounts.
- * @property errors - The form errors.
- * @property selectedCurrency - The selected currency to display.
- * @property toAddress - The receiving address.
- */
-export type SendFormProps = {
-  selectedAccount: string;
-  accounts: Account[];
-  errors?: SendFormErrors;
-  selectedCurrency: 'BTC' | '$';
-  toAddress: string | null;
-};
-
-/**
- * A component that shows the send form.
- *
- * @param props - The component props.
- * @param props.selectedAccount - The currently selected account.
- * @param props.accounts - The available accounts.
- * @param props.errors - The form errors.
- * @param props.selectedCurrency - The selected currency to display.
- * @param props.toAddress - The receiving address.
- * @returns The SendForm component.
- */
-export const SendForm: SnapComponent<SendFormProps> = ({
-  selectedAccount,
-  accounts,
-  errors,
-  selectedCurrency,
-  toAddress,
-}) => (
-  <Form name="sendForm">
-    <AccountSelector selectedAccount={selectedAccount} accounts={accounts} />
-    <Field label="Send amount" error={errors?.amount}>
-      <Box>
-        <Image src={btcIcon} />
-      </Box>
-      <Input name="amount" type="number" placeholder="Enter amount to send" />
-      <Box direction="horizontal" center>
-        <Text color="alternative">{selectedCurrency}</Text>
-        <Button name="swap">
-          <Icon name="swap-vertical" color="primary" size="md" />
-        </Button>
-      </Box>
-    </Field>
-    <Field label="To account" error={errors?.to}>
-      <Box>
-        <Image src={jazzicon3} />
-      </Box>
-      <Input
-        name="to"
-        placeholder="Enter receiving address"
-        value={toAddress ?? undefined}
-      />
-      {toAddress !== null && toAddress !== '' && (
-        <Box>
-          <Button name="clear">
-            <Icon name="close" color="primary" />
-          </Button>
-        </Box>
-      )}
-    </Field>
-  </Form>
-);
-
-/**
- * The props for the {@link TransactionSummary} component.
- *
- * @property fees - The fees for the transaction.
- * @property total - The total cost of the transaction.
- */
-export type TransactionSummaryProps = {
-  fees: Currency;
-  total: Currency;
-};
-
-/**
- * A component that shows the transaction summary.
- *
- * @param props - The component props.
- * @param props.fees - The fees for the transaction.
- * @param props.total - The total cost of the transaction.
- * @returns The TransactionSummary component.
- */
-export const TransactionSummary: SnapComponent<TransactionSummaryProps> = ({
-  fees,
-  total,
-}) => (
-  <Section>
-    <Row label="Estimated network fee">
-      <Value
-        value={`${fees.amount.toString()} BTC`}
-        extra={`$${fees.fiat.toString()}`}
-      />
-    </Row>
-    <Row label="Transaction speed" tooltip="The estimated time of the TX">
-      <Text>30m</Text>
-    </Row>
-    <Row label="Total">
-      <Value
-        value={`${total.amount.toString()} BTC`}
-        extra={`$${total.fiat.toString()}`}
-      />
-    </Row>
-  </Section>
-);
-
-/**
- * A component that shows the send flow footer.
- *
- * @returns The SendFlowFooter component.
- */
-export const SendFlowFooter: SnapComponent = () => (
-  <Footer>
-    <Button name="review">Review</Button>
-  </Footer>
-);
+import type { Account, Currency } from '../types';
+import { SendFlowFooter } from './SendFlowFooter';
+import { SendFlowHeader } from './SendFlowHeader';
+import { SendForm } from './SendForm';
+import { TransactionSummary } from './TransactionSummary';
 
 /**
  * The props for the {@link SendFlow} component.
@@ -214,7 +14,9 @@ export const SendFlowFooter: SnapComponent = () => (
  * @property selectedAccount - The currently selected account.
  * @property selectedCurrency - The selected currency to display.
  * @property total - The total cost of the transaction.
- * @property toAddress - The receiving address.
+ * @property fees - The fees for the transaction.
+ * @property displayClearIcon - Whether to display the clear icon or not.
+ * @property flushToAddress - Whether to flush the address field or not.
  * @property errors - The form errors.
  */
 export type SendFlowProps = {
@@ -223,7 +25,8 @@ export type SendFlowProps = {
   selectedCurrency: 'BTC' | '$';
   total: Currency;
   fees: Currency;
-  toAddress: string | null;
+  displayClearIcon: boolean;
+  flushToAddress?: boolean;
   errors?: {
     amount?: string;
     to?: string;
@@ -238,9 +41,10 @@ export type SendFlowProps = {
  * @param props.selectedAccount - The currently selected account.
  * @param props.selectedCurrency - The selected currency to display.
  * @param props.total - The total cost of the transaction.
- * @param props.toAddress - The receiving address.
  * @param props.errors - The form errors.
  * @param props.fees - The fees for the transaction.
+ * @param props.displayClearIcon - Whether to display the clear icon or not.
+ * @param props.flushToAddress - Whether to flush the address field or not.
  * @returns The SendFlow component.
  */
 export const SendFlow: SnapComponent<SendFlowProps> = ({
@@ -249,7 +53,8 @@ export const SendFlow: SnapComponent<SendFlowProps> = ({
   selectedCurrency,
   total,
   fees,
-  toAddress,
+  displayClearIcon,
+  flushToAddress,
   errors,
 }) => {
   return (
@@ -260,7 +65,8 @@ export const SendFlow: SnapComponent<SendFlowProps> = ({
           selectedAccount={selectedAccount}
           accounts={accounts}
           selectedCurrency={selectedCurrency}
-          toAddress={toAddress}
+          flushToAddress={flushToAddress}
+          displayClearIcon={displayClearIcon}
           errors={errors}
         />
         <TransactionSummary fees={fees} total={total} />

diff --git a/packages/examples/packages/send-flow/src/components/SendFlowFooter.tsx b/packages/examples/packages/send-flow/src/components/SendFlowFooter.tsx
@@ -0,0 +1,12 @@
+import { Button, Footer, type SnapComponent } from '@metamask/snaps-sdk/jsx';
+
+/**
+ * A component that shows the send flow footer.
+ *
+ * @returns The SendFlowFooter component.
+ */
+export const SendFlowFooter: SnapComponent = () => (
+  <Footer>
+    <Button name="review">Review</Button>
+  </Footer>
+);