Skip to content

Commit 27ae3ac

Browse files
GuillaumeRxGuillaumeRx
committed
cleanup
1 parent 71e915b commit 27ae3ac

File tree

8 files changed

+212
-88
lines changed

8 files changed

+212
-88
lines changed

‎packages/examples/packages/send-flow/src/components/AccountSelector.tsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import {
2+
Card,
3+
Field,
4+
Selector,
5+
SelectorOption,
6+
type SnapComponent,
7+
} from '@metamask/snaps-sdk/jsx';
8+
9+
import type { Account } from '../types';
10+
import { truncate } from '../utils';
11+
12+
/**
13+
* The props for the {@link AccountSelector} component.
14+
*
15+
* @property selectedAccount - The currently selected account.
16+
* @property accounts - The available accounts.
17+
*/
18+
export type AccountSelectorProps = {
19+
selectedAccount: string;
20+
accounts: Account[];
21+
};
22+
23+
/**
24+
* A component that shows the account selector.
25+
*
26+
* @param props - The component props.
27+
* @param props.selectedAccount - The currently selected account.
28+
* @param props.accounts - The available accounts.
29+
* @returns The AccountSelector component.
30+
*/
31+
export const AccountSelector: SnapComponent<AccountSelectorProps> = ({
32+
selectedAccount,
33+
accounts,
34+
}) => (
35+
<Field label={'From account'}>
36+
<Selector
37+
name="accountSelector"
38+
title="From account"
39+
value={selectedAccount}
40+
>
41+
{accounts.map(({ name, address, balance, icon }) => (
42+
<SelectorOption value={address}>
43+
<Card
44+
image={icon}
45+
title={name}
46+
description={truncate(address, 13)}
47+
value={`${balance.amount.toString()} BTC`}
48+
extra={`$${balance.fiat.toString()}`}
49+
/>
50+
</SelectorOption>
51+
))}
52+
</Selector>
53+
</Field>
54+
);

‎packages/examples/packages/send-flow/src/components/SendFlow.tsx‎

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,68 @@
1-
import type {
2-
AccountSelectorState,
3-
AssetSelectorState,
4-
} from '@metamask/snaps-sdk';
51
import type { SnapComponent } from '@metamask/snaps-sdk/jsx';
62
import { Box, Container } from '@metamask/snaps-sdk/jsx';
73

84
import { SendFlowFooter } from './SendFlowFooter';
95
import { SendFlowHeader } from './SendFlowHeader';
106
import { SendForm } from './SendForm';
117
import { TransactionSummary } from './TransactionSummary';
12-
import type { Currency } from '../types';
8+
import type { Account, Currency } from '../types';
139

1410
/**
1511
* The props for the {@link SendFlow} component.
1612
*
13+
* @property accounts - The available accounts.
14+
* @property selectedAccount - The currently selected account.
1715
* @property selectedCurrency - The selected currency to display.
1816
* @property total - The total cost of the transaction.
1917
* @property fees - The fees for the transaction.
2018
* @property errors - The form errors.
2119
* @property displayAvatar - Whether to display the avatar of the address.
2220
*/
2321
export type SendFlowProps = {
24-
displayAvatar?: boolean;
25-
useFiat: boolean;
26-
account: AccountSelectorState | null;
27-
asset: AssetSelectorState | null;
22+
accounts: Account[];
23+
selectedAccount: string;
24+
selectedCurrency: 'BTC' | '$';
2825
total: Currency;
2926
fees: Currency;
3027
errors?: {
3128
amount?: string;
3229
to?: string;
3330
};
31+
displayAvatar?: boolean | undefined;
3432
};
3533

3634
/**
3735
* A send flow component, which shows the user a form to send funds to another.
3836
*
3937
* @param props - The component props.
38+
* @param props.accounts - The available accounts.
39+
* @param props.selectedAccount - The currently selected account.
40+
* @param props.selectedCurrency - The selected currency to display.
4041
* @param props.total - The total cost of the transaction.
4142
* @param props.errors - The form errors.
4243
* @param props.fees - The fees for the transaction.
43-
* @param props.useFiat - Whether to use fiat currency.
44-
* @param props.account - The account state.
45-
* @param props.asset - The asset state.
4644
* @param props.displayAvatar - Whether to display the avatar of the address.
4745
* @returns The SendFlow component.
4846
*/
4947
export const SendFlow: SnapComponent<SendFlowProps> = ({
48+
accounts,
49+
selectedAccount,
50+
selectedCurrency,
5051
total,
5152
fees,
5253
errors,
53-
useFiat,
5454
displayAvatar,
55-
account,
56-
asset,
5755
}) => {
5856
return (
5957
<Container>
6058
<Box>
6159
<SendFlowHeader />
6260
<SendForm
63-
displayAvatar={displayAvatar}
64-
useFiat={useFiat}
65-
account={account}
66-
asset={asset}
61+
selectedAccount={selectedAccount}
62+
accounts={accounts}
63+
selectedCurrency={selectedCurrency}
6764
errors={errors}
65+
displayAvatar={displayAvatar}
6866
/>
6967
<TransactionSummary fees={fees} total={total} />
7068
</Box>

‎packages/examples/packages/send-flow/src/components/SendForm.tsx‎

Lines changed: 27 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,69 @@
1-
import type {
2-
AccountSelectorState,
3-
AssetSelectorState,
4-
} from '@metamask/snaps-sdk';
51
import {
62
Box,
73
Button,
84
Field,
95
Form,
106
Icon,
7+
Image,
118
Input,
129
AddressInput,
1310
Text,
14-
AccountSelector,
1511
type SnapComponent,
16-
AssetSelector,
1712
} from '@metamask/snaps-sdk/jsx';
1813

19-
import type { SendFormErrors } from '../types';
14+
import { AccountSelector } from './AccountSelector';
15+
import btcIcon from '../images/btc.svg';
16+
import type { Account, SendFormErrors } from '../types';
2017

2118
/**
2219
* The props for the {@link SendForm} component.
2320
*
21+
* @property selectedAccount - The currently selected account.
22+
* @property accounts - The available accounts.
2423
* @property errors - The form errors.
2524
* @property selectedCurrency - The selected currency to display.
2625
* @property displayAvatar - Whether to display the avatar of the address.
2726
*/
2827
export type SendFormProps = {
29-
useFiat: boolean;
28+
selectedAccount: string;
29+
accounts: Account[];
3030
errors?: SendFormErrors;
31-
account: AccountSelectorState | null;
32-
asset: AssetSelectorState | null;
31+
selectedCurrency: 'BTC' | '$';
3332
displayAvatar?: boolean | undefined;
3433
};
3534

3635
/**
3736
* A component that shows the send form.
3837
*
3938
* @param props - The component props.
39+
* @param props.selectedAccount - The currently selected account.
40+
* @param props.accounts - The available accounts.
4041
* @param props.errors - The form errors.
42+
* @param props.selectedCurrency - The selected currency to display.
4143
* @param props.displayAvatar - Whether to display the avatar of the address.
42-
* @param props.account - The account state.
43-
* @param props.asset - The asset state.
44-
* @param props.useFiat - Whether to use fiat currency.
4544
* @returns The SendForm component.
4645
*/
4746
export const SendForm: SnapComponent<SendFormProps> = ({
47+
selectedAccount,
48+
accounts,
4849
errors,
49-
useFiat,
50-
account,
51-
asset,
50+
selectedCurrency,
5251
displayAvatar,
5352
}) => (
5453
<Form name="sendForm">
55-
<Field label="From account">
56-
<AccountSelector
57-
name="account"
58-
switchGlobalAccount
59-
chainIds={[
60-
'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp',
61-
'solana:EtWTRABZaYq6iMfeYKouRu166VU2xqa1',
62-
]}
63-
/>
54+
<AccountSelector selectedAccount={selectedAccount} accounts={accounts} />
55+
<Field label="Send amount" error={errors?.amount}>
56+
<Box>
57+
<Image src={btcIcon} />
58+
</Box>
59+
<Input name="amount" type="number" placeholder="Enter amount to send" />
60+
<Box direction="horizontal" center>
61+
<Text color="alternative">{selectedCurrency}</Text>
62+
<Button name="swap">
63+
<Icon name="swap-vertical" color="primary" size="md" />
64+
</Button>
65+
</Box>
6466
</Field>
65-
<Box direction="horizontal">
66-
{account ? (
67-
<Field label="Asset">
68-
<AssetSelector name="asset" addresses={account.addresses} />
69-
</Field>
70-
) : null}
71-
<Field label="Send amount" error={errors?.amount}>
72-
<Input name="amount" type="number" placeholder="Enter amount to send" />
73-
<Box direction="horizontal" center>
74-
<Text color="alternative" size="sm">
75-
{useFiat ? '$' : (asset?.symbol ?? 'SOL')}
76-
</Text>
77-
<Button name="swap" size="sm">
78-
<Icon name="swap-vertical" color="primary" size="inherit" />
79-
</Button>
80-
</Box>
81-
</Field>
82-
</Box>
8367
<Field label="To account" error={errors?.to}>
8468
<AddressInput
8569
name="to"

‎packages/examples/packages/send-flow/src/data.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import jazzicon1 from './images/jazzicon1.svg';
2+
import jazzicon2 from './images/jazzicon2.svg';
3+
import type { Account } from './types';
4+
5+
/**
6+
* Example accounts data.
7+
*/
8+
export const accounts: Record<string, Account> = {
9+
bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh: {
10+
name: 'My Bitcoin Account',
11+
address: 'bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh',
12+
balance: { amount: 1.8, fiat: 92000 },
13+
icon: jazzicon1,
14+
},
15+
bc1pmpg8yzpty4xgp497qdydkcqt90zz68n48wzwm757vk8nrlkat99q272xm3: {
16+
name: 'Savings Account',
17+
address: 'bc1pmpg8yzpty4xgp497qdydkcqt90zz68n48wzwm757vk8nrlkat99q272xm3',
18+
balance: { amount: 2.5, fiat: 150000 },
19+
icon: jazzicon2,
20+
},
21+
};
22+
23+
/**
24+
* Example accounts data as an array.
25+
*/
26+
export const accountsArray = Object.values(accounts);

‎packages/examples/packages/send-flow/src/index.tsx‎

Lines changed: 34 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@ import type {
33
OnHomePageHandler,
44
OnUserInputHandler,
55
OnRpcRequestHandler,
6-
AssetSelectorState,
76
} from '@metamask/snaps-sdk';
87
import { UserInputEventType } from '@metamask/snaps-sdk';
98

109
import { SendFlow } from './components';
10+
import { accountsArray, accounts } from './data';
1111
import type { SendFormState, SendFlowContext } from './types';
1212
import { formValidation, generateSendFlow, isCaipHexAddress } from './utils';
1313

@@ -26,6 +26,8 @@ export const onRpcRequest: OnRpcRequestHandler = async ({ request }) => {
2626
switch (request.method) {
2727
case 'display': {
2828
const interfaceId = await generateSendFlow({
29+
accountsArray,
30+
accounts,
2931
fees: { amount: 1.0001, fiat: 1.23 },
3032
});
3133

@@ -54,6 +56,8 @@ export const onRpcRequest: OnRpcRequestHandler = async ({ request }) => {
5456
*/
5557
export const onHomePage: OnHomePageHandler = async () => {
5658
const interfaceId = await generateSendFlow({
59+
accountsArray,
60+
accounts,
5761
fees: { amount: 1.0001, fiat: 1.23 },
5862
});
5963

@@ -75,7 +79,7 @@ export const onUserInput: OnUserInputHandler = async ({
7579
id,
7680
context,
7781
}) => {
78-
const { useFiat, fees } = context as SendFlowContext;
82+
const { selectedCurrency, fees } = context as SendFlowContext;
7983

8084
const state = await snap.request({
8185
method: 'snap_getInterfaceState',
@@ -84,7 +88,7 @@ export const onUserInput: OnUserInputHandler = async ({
8488

8589
const sendForm = state.sendForm as SendFormState;
8690

87-
const formErrors = formValidation(sendForm);
91+
const formErrors = formValidation(sendForm, context as SendFlowContext);
8892

8993
const total = {
9094
amount: Number(sendForm.amount ?? 0) + fees.amount,
@@ -94,18 +98,16 @@ export const onUserInput: OnUserInputHandler = async ({
9498
if (event.type === UserInputEventType.InputChangeEvent) {
9599
switch (event.name) {
96100
case 'amount':
97-
case 'to':
98-
case 'account':
99-
case 'asset': {
101+
case 'to': {
100102
await snap.request({
101103
method: 'snap_updateInterface',
102104
params: {
103105
id,
104106
ui: (
105107
<SendFlow
106-
asset={state.asset as AssetSelectorState}
107-
account={sendForm.account}
108-
useFiat={useFiat}
108+
accounts={accountsArray}
109+
selectedAccount={sendForm.accountSelector}
110+
selectedCurrency={selectedCurrency}
109111
total={total}
110112
fees={fees}
111113
errors={formErrors}
@@ -120,6 +122,29 @@ export const onUserInput: OnUserInputHandler = async ({
120122
});
121123
break;
122124
}
125+
126+
case 'accountSelector': {
127+
await snap.request({
128+
method: 'snap_updateInterface',
129+
params: {
130+
id,
131+
ui: (
132+
<SendFlow
133+
accounts={accountsArray}
134+
selectedAccount={sendForm.accountSelector}
135+
selectedCurrency={selectedCurrency}
136+
total={total}
137+
fees={fees}
138+
errors={formErrors}
139+
displayAvatar={isCaipHexAddress(sendForm.to)}
140+
/>
141+
),
142+
},
143+
});
144+
145+
break;
146+
}
147+
123148
default:
124149
break;
125150
}

0 commit comments

Comments
 (0)