Skip to content

Commit 8496106

Browse files
sirasistantsirasistant
authored
Updated UI structure and added request approvals basic UI (#12)
* feat(wallet): allow login without wc proposal * feat(wallet): handle sign in with key and passcode * feat(wallet): added landing page * feat(wallet): added register fee selector * feat(wallet): use aztec SDK * feat(wallet): wip version of approvals * feat(wallet): basic ui for confirm proof dialog * fix(wallet): fixed font loading * feat(wallet): added basic transaction summary * feat(wallet): added keystore sanity check * refactor(wallet): remove extraneous console log * feat(approvals): improve account proof summary * feat(approvals): render defi approvals
1 parent 6be9443 commit 8496106

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+852
-381
lines changed

‎iframe.html

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
<!DOCTYPE html>
22
<html>
3-
4-
<head>
3+
<head>
54
<title>Aztec Wallet</title>
65
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0" />
76
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
8-
</head>
7+
</head>
98

10-
<body style="font-family: Menlo; font-size: 10px">
9+
<body>
1110
<div id="root"></div>
1211
<script type="module" src="/src/iframe/main.tsx"></script>
13-
</body>
14-
15-
</html>
12+
</body>
13+
</html>

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
],
4444
"dependencies": {
4545
"@aztec/aztec-ui": "^0.0.2",
46-
"@ludamad-aztec/sdk": "2.2.0-alpha.5",
46+
"@aztec/sdk": "2.2.0-alpha.4",
4747
"@rainbow-me/rainbowkit": "^0.8.1",
4848
"@walletconnect/core": "2.2.1",
4949
"@walletconnect/sign-client": "2.2.1",

‎popup.html

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,11 @@
22
<html>
33
<head>
44
<title>Aztec Wallet</title>
5-
<meta
6-
name="viewport"
7-
content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0"
8-
/>
9-
<link
10-
href="https://fonts.googleapis.com/icon?family=Material+Icons"
11-
rel="stylesheet"
12-
/>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0" />
6+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
137
</head>
148

15-
<body style="font-family: Menlo; font-size: 10px">
9+
<body>
1610
<div id="root"></div>
1711
<script type="module" src="/src/popup/main.tsx"></script>
1812
</body>

‎src/components/approve_transaction/approve_transaction.module.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@use '../global.module.scss';

‎src/components/approve_transaction/approve_transaction.tsx

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { Card, CardHeaderSize, Button, ButtonTheme } from '@aztec/aztec-ui';
2+
import style from './approve_transaction.module.scss';
3+
import { TransactionRequest } from '../../iframe/WalletConnectKeyStore';
4+
import { useState } from 'react';
5+
import { AztecSdk } from '@aztec/sdk';
6+
import { TransactionSummary } from './transaction_summary';
7+
8+
export interface ApproveTransactionProps {
9+
dappOrigin: string;
10+
request: TransactionRequest;
11+
sdk: AztecSdk;
12+
onUserResponse: (accepted: boolean) => void;
13+
}
14+
15+
export function ApproveTransaction(props: ApproveTransactionProps) {
16+
const [warningAccepted, setWarningAccepted] = useState(false);
17+
18+
return (
19+
<Card
20+
className={style.card}
21+
headerSize={CardHeaderSize.NONE}
22+
cardContent={
23+
<div className={style.cardContent}>
24+
<div className={style.header}>
25+
<div>Confirm your transaction</div>
26+
</div>
27+
<TransactionSummary requestData={props.request.data} sdk={props.sdk} />
28+
<p>
29+
This is experimental software that hasn't yet been externally audited. Your private key is stored in the
30+
browser, for security amounts are capped at 1 ETH. Use at your own risk.
31+
</p>
32+
<label>
33+
I understand the risks
34+
<input type="checkbox" checked={warningAccepted} onChange={() => setWarningAccepted(!warningAccepted)} />
35+
</label>
36+
<div className={style.buttons}>
37+
<Button
38+
theme={ButtonTheme.Secondary}
39+
text="Cancel"
40+
onClick={() => {
41+
props.onUserResponse(false);
42+
}}
43+
/>
44+
<Button
45+
theme={ButtonTheme.Primary}
46+
disabled={!warningAccepted}
47+
text="Confirm"
48+
onClick={() => {
49+
props.onUserResponse(true);
50+
}}
51+
/>
52+
</div>
53+
</div>
54+
}
55+
/>
56+
);
57+
}

‎src/components/approve_transaction/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './approve_transaction';

‎src/components/approve_transaction/transaction_summary.module.scss

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
.table {
2+
width: 100%;
3+
4+
td {
5+
padding: 16px 0px;
6+
font-size: 16px;
7+
}
8+
9+
tr:nth-child(even) {
10+
background: #f7fbfc;
11+
}
12+
13+
tr:nth-child(odd) {
14+
background: #fff;
15+
}
16+
17+
td:nth-child(odd) {
18+
text-align: left;
19+
padding-left: 10px;
20+
}
21+
22+
td:nth-child(even) {
23+
text-align: right;
24+
padding-right: 10px;
25+
}
26+
}

‎src/components/approve_transaction/transaction_summary.tsx

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
import {
2+
AztecSdk,
3+
ProofId,
4+
ProofRequestData,
5+
ProofRequestDataType,
6+
EthAddress,
7+
PaymentProofRequestData,
8+
AccountProofRequestData,
9+
DefiProofRequestData,
10+
GrumpkinAddress,
11+
AliasHash,
12+
} from '@aztec/sdk';
13+
import { AssetValue } from '../../utils/assets';
14+
import style from './transaction_summary.module.scss';
15+
16+
interface KeyValuePair {
17+
key: string;
18+
value: string;
19+
}
20+
21+
function shortEthAddress(address: EthAddress) {
22+
const stringAddress = address.toString();
23+
return `${stringAddress.slice(0, 10)}...${stringAddress.slice(-4)}`;
24+
}
25+
26+
function SummaryTable({ data }: { data: KeyValuePair[] }) {
27+
return (
28+
<table className={style.table}>
29+
<tbody>
30+
{data.map((pair, index) => (
31+
<tr key={index}>
32+
<td>{pair.key}</td>
33+
<td>{pair.value}</td>
34+
</tr>
35+
))}
36+
</tbody>
37+
</table>
38+
);
39+
}
40+
41+
function assetIdToSymbol(assetId: number, sdk: AztecSdk) {
42+
return sdk.isVirtualAsset(assetId) ? 'Virtual asset' : sdk.getAssetInfo(assetId).symbol;
43+
}
44+
45+
function assetValueToString(assetValue: AssetValue, sdk: AztecSdk) {
46+
return `${sdk.fromBaseUnits(assetValue)} ${assetIdToSymbol(assetValue.assetId, sdk)}`;
47+
}
48+
49+
function generateTotalCost(amounts: AssetValue[], sdk: AztecSdk) {
50+
const totalAmounts = amounts.reduce((acc: AssetValue[], amount: AssetValue) => {
51+
const existingAmount = acc.find(a => a.assetId === amount.assetId);
52+
if (existingAmount) {
53+
existingAmount.value += amount.value;
54+
} else {
55+
acc.push({ ...amount });
56+
}
57+
return acc;
58+
}, []);
59+
60+
return { key: 'Total Cost', value: totalAmounts.map(amount => assetValueToString(amount, sdk)).join(' + ') };
61+
}
62+
63+
function renderPaymentProofSummary(requestData: PaymentProofRequestData, sdk: AztecSdk) {
64+
return [
65+
requestData.proofId === ProofId.WITHDRAW
66+
? { key: 'L1 Recipient', value: shortEthAddress(requestData.publicOwner) }
67+
: { key: 'Recipient', value: requestData.recipient.toShortString() },
68+
{ key: 'Amount', value: assetValueToString(requestData.assetValue, sdk) },
69+
{ key: 'Transaction Fee', value: assetValueToString(requestData.fee, sdk) },
70+
generateTotalCost([requestData.assetValue, requestData.fee], sdk),
71+
];
72+
}
73+
74+
function renderAccountProofSummary(requestData: AccountProofRequestData, sdk: AztecSdk) {
75+
const isAccountCreation = requestData.spendingKeyAccount.aliasHash.equals(AliasHash.ZERO);
76+
const data: KeyValuePair[] = [
77+
{ key: 'Operation', value: isAccountCreation ? 'Account creation' : 'Account update' },
78+
{ key: 'Account alias', value: requestData.alias },
79+
];
80+
81+
if (!requestData.accountPublicKey.equals(requestData.newAccountPublicKey)) {
82+
data.push({ key: 'New account key', value: requestData.newAccountPublicKey.toShortString() });
83+
}
84+
85+
if (!requestData.newSpendingPublicKey1.equals(GrumpkinAddress.ZERO)) {
86+
data.push({ key: 'New spending key', value: requestData.newSpendingPublicKey1.toShortString() });
87+
}
88+
89+
if (!requestData.newSpendingPublicKey2.equals(GrumpkinAddress.ZERO)) {
90+
data.push({ key: 'New spending key', value: requestData.newSpendingPublicKey2.toShortString() });
91+
}
92+
93+
const feeStr = assetValueToString(requestData.fee, sdk);
94+
95+
return data.concat([
96+
{ key: 'Transaction Fee', value: feeStr },
97+
{ key: 'Total Cost', value: feeStr },
98+
]);
99+
}
100+
101+
function renderDefiProofSummary(requestData: DefiProofRequestData, sdk: AztecSdk) {
102+
const {
103+
assetValue: { value },
104+
bridgeCallData,
105+
} = requestData;
106+
107+
const inputAssetValues: AssetValue[] = [{ assetId: bridgeCallData.inputAssetIdA, value }];
108+
if (bridgeCallData.secondInputInUse) {
109+
inputAssetValues.push({ assetId: bridgeCallData.inputAssetIdB, value });
110+
}
111+
112+
const outputAssetIds: number[] = [bridgeCallData.outputAssetIdA];
113+
if (bridgeCallData.secondOutputInUse) {
114+
outputAssetIds.push(bridgeCallData.outputAssetIdB);
115+
}
116+
117+
return [
118+
{ key: 'Recipient', value: 'Defi integration' },
119+
...inputAssetValues.map((assetValue, index) => ({
120+
key: `Amount ${String.fromCharCode(65 + index)}`,
121+
value: assetValueToString(assetValue, sdk),
122+
})),
123+
...outputAssetIds.map((assetId, index) => ({
124+
key: `Receive ${String.fromCharCode(65 + index)}`,
125+
value: assetIdToSymbol(assetId, sdk),
126+
})),
127+
{ key: 'Transaction Fee', value: assetValueToString(requestData.fee, sdk) },
128+
generateTotalCost([...inputAssetValues, requestData.fee], sdk),
129+
];
130+
}
131+
132+
export function TransactionSummary({ requestData, sdk }: { requestData: ProofRequestData; sdk: AztecSdk }) {
133+
let data: KeyValuePair[];
134+
switch (requestData.type) {
135+
case ProofRequestDataType.PaymentProofRequestData:
136+
data = renderPaymentProofSummary(requestData, sdk);
137+
break;
138+
case ProofRequestDataType.AccountProofRequestData:
139+
data = renderAccountProofSummary(requestData, sdk);
140+
break;
141+
case ProofRequestDataType.DefiProofRequestData:
142+
data = renderDefiProofSummary(requestData, sdk);
143+
break;
144+
}
145+
146+
return <SummaryTable data={data} />;
147+
}

‎src/components/assets/fonts.scss

Lines changed: 0 additions & 62 deletions
This file was deleted.

‎src/components/create_account_flow/03_Backup/Backup.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { ImageButton, ImageButtonIcon } from '@aztec/aztec-ui';
22
import { useState } from 'react';
33
import { ConnectButton } from '@rainbow-me/rainbowkit';
4-
import { ConstantKeyPair, RECOVERY_KEY_MESSAGE } from '@ludamad-aztec/sdk';
4+
import { ConstantKeyPair, RECOVERY_KEY_MESSAGE } from '@aztec/sdk';
55
import { useAccount, useSignMessage } from 'wagmi';
66
import StepCard, { NextStepResult } from '../../StepCard';
77
import styles from './Backup.module.scss';

0 commit comments

Comments
 (0)