Skip to content

Commit bcf9148

Browse files
vacekjvacekj
authored
fix: address PR feedback (#39)
* fix: address PR feedback * fix: address PR feedbackˆ * fix: use getters and fix lint errors * fix: use getters and fix lint errors * fix: styles and getters * fix: styles and getters
1 parent 1bc45ad commit bcf9148

10 files changed

+86
-91
lines changed

‎biome.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@
1818
}
1919
},
2020
"linter": {
21-
"enabled": false,
21+
"enabled": true,
22+
"ignore": ["theme.config.jsx"],
2223
"rules": {
2324
"recommended": true,
2425
"style": {

‎components/Balances.tsx

+4-10
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,13 @@ import { useBalances } from '@/components/hooks';
22
import type { ValueView } from '@penumbra-zone/protobuf/penumbra/core/asset/v1/asset_pb';
33
import { ValueViewComponent } from '@penumbra-zone/ui/ValueViewComponent';
44
import type React from 'react';
5-
65
export function Balances() {
76
const { data: balances } = useBalances();
87

9-
return balances
10-
? balances
11-
.map((bal) => bal.balanceView)
12-
.map((balanceView) => (
13-
<BalanceRow
14-
key={balanceView!.toJsonString()}
15-
balance={balanceView!}
16-
/>
17-
))
8+
return balances?.every((b) => b.balanceView !== undefined)
9+
? balances.map(({ balanceView }) => (
10+
<BalanceRow key={balanceView!.toJsonString()} balance={balanceView!} />
11+
))
1812
: null;
1913
}
2014

‎components/Deposit.tsx

+11-9
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import { client } from '@/components/penumbra';
22
import { useQuestStore } from '@/components/store';
3+
import {
4+
getAmountFromRecord,
5+
getAssetIdFromRecord,
6+
} from '@penumbra-zone/getters/spendable-note-record';
37
import { ViewService } from '@penumbra-zone/protobuf';
48
import { ValueView } from '@penumbra-zone/protobuf/penumbra/core/asset/v1/asset_pb';
59
import type { CommitmentSource_Ics20Transfer } from '@penumbra-zone/protobuf/penumbra/core/component/sct/v1/sct_pb';
@@ -10,14 +14,14 @@ import { ValueViewComponent } from '@penumbra-zone/ui/ValueViewComponent';
1014
import { useQuery } from '@tanstack/react-query';
1115
import { capitalize } from 'es-toolkit';
1216
import { ChevronRightIcon } from 'lucide-react';
13-
import React, { useState } from 'react';
17+
import type React from 'react';
18+
import { useState } from 'react';
1419
import {
1520
useConnect,
1621
useCurrentChainStatus,
1722
useEphemeralAddress,
1823
useNotes,
1924
useSetScanSinceBlock,
20-
useSwaps,
2125
useWalletManifests,
2226
} from './hooks';
2327

@@ -37,7 +41,6 @@ const Deposit: React.FC = () => {
3741
) ?? [];
3842

3943
const { scanSinceBlockHeight } = useQuestStore();
40-
console.log(showOld);
4144
const { data: notesWithMetadata } = useQuery({
4245
queryKey: [
4346
'notesWithMetadata',
@@ -49,11 +52,10 @@ const Deposit: React.FC = () => {
4952
staleTime: 0,
5053
initialData: [],
5154
queryFn: async () => {
52-
console.log('refetch');
5355
const deposits = await Promise.all(
5456
depositNotes.map(async (note) => {
5557
const metadata = await client.service(ViewService).assetMetadataById({
56-
assetId: note.noteRecord?.note?.value?.assetId!,
58+
assetId: getAssetIdFromRecord(note.noteRecord),
5759
});
5860

5961
return {
@@ -64,7 +66,7 @@ const Deposit: React.FC = () => {
6466
case: 'knownAssetId',
6567
value: {
6668
metadata: metadata.denomMetadata!,
67-
amount: note?.noteRecord?.note?.value?.amount!,
69+
amount: getAmountFromRecord(note.noteRecord),
6870
},
6971
},
7072
}),
@@ -95,8 +97,8 @@ const Deposit: React.FC = () => {
9597
wallets &&
9698
!connected &&
9799
Object.entries(wallets).map(([origin, manifest]) => (
100+
// biome-ignore lint: no need for a type here
98101
<button
99-
// type={'button'}
100102
key={origin}
101103
onClick={() => onConnect(origin)}
102104
disabled={connectionLoading}
@@ -166,7 +168,7 @@ const Deposit: React.FC = () => {
166168
</div>
167169

168170
{notesWithMetadata.length === 0 && (
169-
<div className="w-full bg-white text-black shadow-md rounded-lg p-4">
171+
<div className="w-full bg-gray-700 text-white shadow-md rounded-lg p-4">
170172
<div className="flex flex-row gap-3 items-center">
171173
<div>Waiting for a deposit to occur</div>
172174
<div className="animate-spin h-5 w-5 border-2 border-blue-500 rounded-full border-t-transparent" />
@@ -194,7 +196,7 @@ const Deposit: React.FC = () => {
194196
id="default-checkbox"
195197
checked={showOld}
196198
type={'checkbox'}
197-
onChange={(e) => setShowOld((old) => !old)}
199+
onChange={() => setShowOld((old) => !old)}
198200
className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
199201
/>
200202
<label

‎components/Staking.tsx

+39-44
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,21 @@
11
import { bech32mIdentityKey } from '@penumbra-zone/bech32m/penumbravalid';
2-
import type {
2+
import {
3+
getBalanceView,
4+
getMetadataFromBalancesResponse,
5+
getValueViewCaseFromBalancesResponse,
6+
} from '@penumbra-zone/getters/balances-response';
7+
import {
8+
getAmount,
9+
getEquivalentValues,
10+
getExtendedMetadata,
11+
getSymbolFromValueView,
12+
} from '@penumbra-zone/getters/value-view';
13+
import {
314
ValueView,
415
ValueView_KnownAssetId,
516
} from '@penumbra-zone/protobuf/penumbra/core/asset/v1/asset_pb';
617
import { ValidatorInfo } from '@penumbra-zone/protobuf/penumbra/core/component/stake/v1/stake_pb';
718
import { ValueViewComponent } from '@penumbra-zone/ui/ValueViewComponent';
8-
import { ValueComponent } from '@penumbra-zone/ui/components/value/value';
919

1020
import type React from 'react';
1121
import { useBalances, useDelegations } from './hooks';
@@ -15,42 +25,29 @@ const Staking: React.FC = () => {
1525
const validators =
1626
delegations
1727
?.filter(
18-
(delegation) =>
19-
delegation?.valueView?.valueView?.value?.amount?.toJsonString() !==
20-
'{}',
28+
(delegation) => getAmount(delegation.valueView).toJsonString() !== '{}',
2129
)
2230
.map((delegation) => {
23-
const valueView = delegation.valueView?.valueView
24-
?.value as ValueView_KnownAssetId;
25-
return ValidatorInfo.fromBinary(
26-
valueView.extendedMetadata?.value as Uint8Array,
27-
);
31+
const extendedMetadata = getExtendedMetadata(delegation.valueView);
32+
return ValidatorInfo.fromBinary(extendedMetadata.value as Uint8Array);
2833
}) ?? [];
2934
const { data: balances } = useBalances();
3035
const delegationTokens =
3136
balances
3237
?.filter(
3338
(balance) =>
34-
balance?.balanceView?.valueView.case === 'knownAssetId' &&
35-
balance?.balanceView?.valueView?.value?.metadata?.base.includes(
36-
'udelegation',
37-
),
39+
getValueViewCaseFromBalancesResponse(balance) === 'knownAssetId' &&
40+
getMetadataFromBalancesResponse(balance).base.includes('udelegation'),
3841
)
3942
.map((balance) => {
4043
const bal = balance;
41-
// @ts-expect-error bufs for the win
42-
(
43-
bal.balanceView?.valueView?.value as ValueView_KnownAssetId
44-
).metadata.symbol = truncateMiddle(
45-
// @ts-expect-error bufs for the win
46-
(bal.balanceView?.valueView?.value as ValueView_KnownAssetId).metadata
47-
.symbol,
48-
30,
49-
);
44+
const symbol = getSymbolFromValueView(bal.balanceView);
45+
46+
(bal.balanceView?.valueView?.value as ValueView_KnownAssetId)!
47+
.metadata!.symbol = truncateMiddle(symbol, 30);
5048
return bal;
5149
}) ?? [];
5250

53-
console.log(delegationTokens.length, balances?.length, balances);
5451
return (
5552
<div className="py-3 flex flex-col gap-8">
5653
<div className="space-y-6">
@@ -129,7 +126,7 @@ const Staking: React.FC = () => {
129126
</div>
130127

131128
{delegationTokens.length === 0 && (
132-
<div className="w-full bg-white shadow-md rounded-lg p-4">
129+
<div className="w-full bg-gray-700 text-white shadow-md rounded-lg p-4">
133130
<div className="flex flex-row gap-3 items-center">
134131
<div>Waiting for a staking delegation to occur</div>
135132
<div
@@ -154,10 +151,7 @@ const Staking: React.FC = () => {
154151
>
155152
{delegationTokens?.map((balance) => {
156153
const validator = validators?.find((validator) =>
157-
(
158-
balance?.balanceView?.valueView
159-
?.value as ValueView_KnownAssetId
160-
)?.metadata?.base?.includes(
154+
getMetadataFromBalancesResponse(balance).base?.includes(
161155
bech32mIdentityKey({
162156
ik:
163157
validator?.validator?.identityKey?.ik ?? new Uint8Array(),
@@ -172,22 +166,23 @@ const Staking: React.FC = () => {
172166
<div className="flex items-center gap-3 justify-center">
173167
Successfully staked
174168
<ValueViewComponent
175-
valueView={{
176-
valueView: {
177-
// @ts-expect-error TODO: how do we tell typescript these types are correct?
178-
value: {
179-
amount: (
180-
balance?.balanceView?.valueView
181-
?.value as ValueView_KnownAssetId
182-
)?.equivalentValues[0]?.equivalentAmount,
183-
metadata: (
184-
balance?.balanceView?.valueView
185-
?.value as ValueView_KnownAssetId
186-
)?.equivalentValues[0]?.numeraire,
169+
valueView={
170+
new ValueView({
171+
valueView: {
172+
value: new ValueView_KnownAssetId({
173+
amount:
174+
getBalanceView.pipe(getEquivalentValues)(
175+
balance,
176+
)[0].equivalentAmount,
177+
metadata:
178+
getBalanceView.pipe(getEquivalentValues)(
179+
balance,
180+
)[0].numeraire,
181+
}),
182+
case: 'knownAssetId',
187183
},
188-
case: 'knownAssetId',
189-
},
190-
}}
184+
})
185+
}
191186
/>{' '}
192187
on
193188
<a

‎components/Swap.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -188,7 +188,7 @@ function SwapMonitor() {
188188
/>
189189
))
190190
) : (
191-
<div className="w-full p-4 bg-white shadow rounded">
191+
<div className="w-full p-4 bg-gray-700 text-white shadow rounded">
192192
<div className="flex flex-row gap-3">
193193
<span>Waiting for a swap to occur</span>
194194
<div className="animate-spin h-5 w-5 border-2 border-blue-500 rounded-full border-t-transparent" />
@@ -203,7 +203,7 @@ function AssetSwapWithFeeMetadataComponent(props: {
203203
txv: TransactionView;
204204
action: ActionView;
205205
}) {
206-
/*The link that's displayed when claimTx is defined doesn't work outside minifront*/
206+
// biome-ignore lint: The link that's displayed when claimTx is defined doesn't work outside minifront
207207
delete (
208208
(props.action.actionView.value as SwapView).swapView
209209
.value as SwapView_Visible

‎components/WalletInstall.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -71,8 +71,8 @@ const WalletInstall: React.FC = () => {
7171
wallets &&
7272
!connected &&
7373
Object.entries(wallets).map(([origin, manifest]) => (
74+
// biome-ignore lint: we don't want or need a type here
7475
<button
75-
// type={'button'}
7676
key={origin}
7777
onClick={() => onConnect(origin)}
7878
disabled={connectionLoading}

‎components/hooks.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export const useConnect = () => {
6565
if (error instanceof Error && error.cause) {
6666
if (error.cause === PenumbraRequestFailure.Denied) {
6767
alert(
68-
'Connection denied: you may need to un-ignore this site in your extension settings.',
68+
'Connection denied: you may need to un-ignore this site in your extension settings, and reload the page afterwards.',
6969
);
7070
}
7171
if (error.cause === PenumbraRequestFailure.NeedsLogin) {
@@ -241,7 +241,6 @@ export function useSwaps(blockRange: BlockRange) {
241241
action.action?.case === 'swapClaim',
242242
),
243243
);
244-
console.log(swaps);
245244
return swaps;
246245
},
247246
});

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"@penumbra-labs/registry": "^11.3.1",
2121
"@penumbra-zone/bech32m": "^8.0.0",
2222
"@penumbra-zone/client": "^18.1.0",
23+
"@penumbra-zone/getters": "^19.0.0",
2324
"@penumbra-zone/protobuf": "^6.1.0",
2425
"@penumbra-zone/transport-dom": "^7.5.0",
2526
"@penumbra-zone/ui": "^10.0.2",

‎pages/web/prax.mdx

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import WalletInstall from '@/components/WalletInstall';
22

3-
# Prax Wallet
3+
# Prax Wallet Interactive Guide
44

5-
This section describes how to use the Prax Wallet web extension, a browser
5+
Welcome to the interactive guide for the Prax Wallet web extension, a browser
66
wallet extension for Penumbra. Prax Wallet is open-source software
77
that runs entirely on your computer.
88

9-
Currently, the web extension only supports a subset of functionality of the
10-
command-line client, [`pcli`](./pcli.md).
9+
This step-by-step tutorial is designed to help you navigate and use the Prax Wallet effectively.
10+
Please follow each section in order to ensure the best experience.
1111

12-
<WalletInstall />
12+
<WalletInstall/>
1313

1414
## Installing the extension
1515

@@ -57,4 +57,4 @@ Chrome Web Store. To force a check for updates:
5757
After updating the extension manually, it may be helpful to clear the local cache,
5858
as described above.
5959

60-
[Prax Wallet]: https://chromewebstore.google.com/detail/prax-wallet/lkpmkhpnhknhmibgnmmhdhgdilepfghe
60+
[Prax Wallet] https://chromewebstore.google.com/detail/prax-wallet/lkpmkhpnhknhmibgnmmhdhgdilepfghe

0 commit comments

Comments
 (0)