Support fees in Penumbra web #362

jessepinho · 2024-01-08T22:07:13Z

Background

Per #308, we want to support transaction fees in Penumbra Web. To do this, we need to make a TransactionPlannerRequest each time one of the values in the send form changes, then grab the gas fee off of the returned plan.

In this PR

Refactor planWitnessBuildBroadcast in the SendSlice to extract a getPlan function that takes care of just the planning portion.
Use that getPlan function to get the gas fee any time inputs change in the send form.
Display the gas fee below the amount to send.
Hardcode an undefined gas fee for the IBC form, which we're not yet using (per Henry).

Closes #308

jessepinho · 2024-01-09T02:12:59Z

apps/webapp/src/components/shared/input-token.tsx

  ...props
 }: InputTokenProps) {
  const vResult = validationResult(value, validations);

+  const currentBalance = getCurrentBalance(selection?.asset);


Extracted to a helper to make it clear what this represents.

jessepinho · 2024-01-09T02:13:28Z

apps/webapp/public/fuel.svg

Got this from Lucide, which Zpoken told us is where we got some of our icons.

It'd be great to eventually standardize an icon set, though — right now, we seem to be getting icons from Radix, Lucide, and our Figma mockups (and I don't know where those mockups' icons come from).

jessepinho · 2024-01-09T02:23:03Z

apps/webapp/src/components/send/send-form.tsx

@@ -82,7 +89,7 @@ export const SendForm = () => {
          },
        ]}
        balances={accountBalances}
-        tempPrice={1}


See my note below about removing the temp price and its corresponding UI

jessepinho · 2024-01-09T02:24:22Z

packages/router/src/grpc/view-protocol-server/gas-prices.ts

+import type { Impl } from '.';
+
+export const gasPrices: Impl['gasPrices'] = () => {
+  /** @todo Replace this stub with real gas prices. */


@Valentine1898 is currently working on this as part of #203

It seems that gas prices do not actually change on the network and are always equal to these values

blockSpacePrice: 0n compactBlockSpacePrice: 0n executionPrice: 0n verificationPrice: 0n

@Valentine1898 but that could change in the future, right? i.e., I should still be requesting them (using your new implementation) rather rather than depending on all-0 values?

Yeah, I was just clarifying that we're currently getting all the 0 values from the network

Gotcha, thanks

jessepinho · 2024-01-09T02:29:17Z

apps/webapp/src/state/send.ts

+  return (
+    gasPrices.blockSpacePrice +
+    gasPrices.compactBlockSpacePrice +
+    gasPrices.verificationPrice +
+    gasPrices.executionPrice
+  );


I'm summing up the different dimensions of the gas price to get the total. I'm not 100% certain that this logic is correct — this is where I'm bumping against the limits of my crypto knowledge — so reviewers, please let me know if I've got this right.

it looks like the final step of calculating a total might be the location where the denominator is expected to be considered

https://github.com/penumbra-zone/penumbra/blob/main/crates/core/component/fee/src/gas.rs#L65-L74

packages/router/src/grpc/view-protocol-server/transaction-planner.ts

jessepinho · 2024-01-09T03:48:19Z

apps/webapp/src/components/shared/input-token.tsx

          )}
-        >
-          ${displayAmount(Number(value) * tempPrice)}


As far as I can tell, this appeared to be a stub of the gas price. (I'm not sure of that, though — I'm not actually sure what tempPrice was for.) So I removed it and displayed the gas price in its place. If I'm missing something about the tempPrice, let me know.

turbocrime

i think the way i would handle this, is instead of having a state selector that provides the total, provide a state selector that provides all of the price components. that way it could be displayed differently, or with more detail.

otherwise looks like good progress, pending the wasm impl

turbocrime · 2024-01-09T08:12:03Z

apps/webapp/src/state/send.ts

+  return (
+    gasPrices.blockSpacePrice +
+    gasPrices.compactBlockSpacePrice +
+    gasPrices.verificationPrice +
+    gasPrices.executionPrice
+  );


it looks like the final step of calculating a total might be the location where the denominator is expected to be considered

https://github.com/penumbra-zone/penumbra/blob/main/crates/core/component/fee/src/gas.rs#L65-L74

packages/router/src/grpc/view-protocol-server/transaction-planner.ts

turbocrime · 2024-01-10T00:00:37Z

how to calculate gas price preview on send form

gas prices can be calculated from transaction plan information. the planner performs this calculation here

https://github.com/penumbra-zone/penumbra/blob/main/crates/view/src/planner.rs#L157-L174

the transactionplan's impl simply sums the costs of the action plans

https://github.com/penumbra-zone/penumbra/blob/main/crates/core/transaction/src/gas.rs#L225-L229

the send form only ever generates 'spend' and 'output' actions. cost for these plans are constant, based on their constant dimensions

https://github.com/penumbra-zone/penumbra/blob/main/crates/core/transaction/src/gas.rs#L23-L65

the final cost can be estimated using price information from GasPriceRequest https://github.com/penumbra-zone/penumbra/blob/main/crates/core/component/fee/src/gas.rs#L65-L74

hdevalence · 2024-01-10T00:12:56Z

how to calculate gas price preview on send form

It'd be strongly preferable not to replicate gas cost estimation logic in typescript. We will already be doing exact gas costing as part of the planner. Can we instead just read the fee out of the returned transaction plan?

It is actually reasonably complicated to estimate the gas cost for a particular action, because the frontend isn't in a position to know e.g., how many notes need to be spent to create a plan that fufils the user's intent. (What if a user's balance is spread over many small notes)? Implementing all of this is fairly close to implementing the transaction planner logic itself.

Instead, what if the form submitted planner requests to the extension as the values were input, so it can display a preview, but have the logic for computing the preview be the actual logic that will be used for tx planning?

turbocrime · 2024-01-10T00:14:48Z

the ticket requested displaying a preview in the webapp, by our interpretation. displaying in the popup is certainly much easier :)

turbocrime · 2024-01-10T00:16:07Z

or, should we have an extra stage between "plan came back" and "submit plan for auth"

hdevalence · 2024-01-10T00:16:56Z

@turbocrime added an extra suggestion to my comment in an edit, i think a preview is certainly nice to have, wdyt of that strategy for having it?

the point is that the view service methods don't have user in the loop, the page can make as many planner requests as it wants and throw away the resulting plans

turbocrime · 2024-01-10T00:18:51Z

Instead, what if the form submitted planner requests to the extension as the values were input, so it can display a preview, but have the logic for computing the preview be the actual logic that will be used for tx planning?

current design would require sending a new plan request on every change, creating a new planner and re-planning the whole tx each time, instead of incrementally planning a single tx

turbocrime · 2024-01-10T00:19:28Z

very doable

hdevalence · 2024-01-10T00:20:27Z

my assumption is that planning should be pretty fast, fast enough that we could just spam requests on form change, it seems at least worth trying

turbocrime · 2024-01-10T00:22:38Z

the existing webapp combines plan/witness/build/broadcast into a single fn and i think we were conceptually trapped lol

Valentine1898 · 2024-01-10T00:42:36Z

the existing webapp combines plan/witness/build/broadcast into a single fn and i think we were conceptually trapped lol

Maybe it makes sense to leave it that way and send separate planner requests for gas cost preview

jessepinho · 2024-01-10T00:48:50Z

Thanks all — making planner requests for the gas costs sounds great. I'll go with that approach!

jessepinho · 2024-01-10T20:36:59Z

apps/webapp/src/components/send/send-form/use-refresh-fee.ts

+import { useStore } from '../../../state';
+
+/**
+ * Refreshes the fee in the state when the amount, recipient, selection, or memo


Note that we're refreshing even when just the memo changes. Am I correct in understanding that a larger memo could result in the fee changing, since a larger memo takes up more space? Or does the fee remain the same regardless of memo?

If the latter, I'll remove memo from the list of dependencies on line 14 below, since we don't need to refresh the fee when the memo changes.

i believe an encrypted memo is constant size, even if it contains no memo

additionally, when the planner calculates tx cost it does not use the memo, it uses the list of actions

OK, thanks — I've removed memo from the effect dependencies.

jessepinho · 2024-01-10T20:39:18Z

apps/webapp/src/components/shared/input-token.tsx

 import { Selection } from '../../state/types';
+import { Fee } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/component/fee/v1alpha1/fee_pb';
+
+const PENUMBRA_FEE_DENOMINATOR = 1000;


Note that we're currently hardcoding the penumbra fee denominator. @Valentine1898 pointed out that I could call getAllAssets to get the denominator of the token referenced via the fee's assetId property; but @hdevalence, will there ever be a case where the fee will be paid in something other than the staking token (penumbra)?

i believe currently tx fees are always PEN https://protocol.penumbra.zone/main/stake/validator-rewards.html

https://discord.com/channels/824484045370818580/979785365437165658/1194805904311328808
We can ignore the assetId for now

jessepinho · 2024-01-10T20:39:51Z

apps/webapp/src/state/send.ts

-  if (!selection.asset) throw new Error('no selected asset');
+type TransactionProps = Pick<SendSlice, 'amount' | 'recipient' | 'selection' | 'memo'>;
+
+const getPlan = async ({ amount, recipient, selection, memo }: TransactionProps) => {


Extracted a getPlan function, which we call to refresh the fee whenever a form input changes.

jessepinho · 2024-01-10T20:40:23Z

apps/webapp/src/state/send.ts

+  return plan;
+};
+
+const planWitnessBuildBroadcast = async ({


This works exactly as before, even throwing the same errors as before. I've only extracted a getPlan function above.

apps/webapp/src/state/send.ts

Valentine1898 · 2024-01-11T16:36:01Z

apps/webapp/src/components/shared/input-token.tsx

 import { Selection } from '../../state/types';
+import { Fee } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/component/fee/v1alpha1/fee_pb';
+
+const PENUMBRA_FEE_DENOMINATOR = 1000;


https://discord.com/channels/824484045370818580/979785365437165658/1194805904311328808
We can ignore the assetId for now

grod220

A few more comments, feel free to merge after 👍

grod220 · 2024-01-31T07:35:15Z

apps/webapp/src/components/send/send-form/use-refresh-fee.ts

+export const useRefreshFee = () => {
+  const { amount, recipient, selection, refreshFee } = useStore(sendSelector);
+  const timeoutId = useRef<number | null>(null);
+
+  const debouncedRefreshFee = useCallback(() => {
+    if (timeoutId.current) {
+      window.clearTimeout(timeoutId.current);
+      timeoutId.current = null;
+    }
+
+    timeoutId.current = window.setTimeout(() => {
+      timeoutId.current = null;
+      void refreshFee();
+    }, DEBOUNCE_MS);
+  }, [refreshFee]);
+
+  useEffect(debouncedRefreshFee, [amount, recipient, selection, debouncedRefreshFee]);
+};


This feels like it may be better as a selector. Maybe not though 🤔

Selectors always have to be synchronous, pure functions, no? Or how are you suggesting accomplishing this with a selector?

Discussed in Discord — this will be part of a follow-up PR

grod220 · 2024-01-31T07:35:59Z

apps/webapp/src/components/shared/input-token.tsx

+const getCurrentBalance = (assetBalance: AssetBalance | undefined) =>
+  assetBalance
+    ? fromBaseUnitAmount(assetBalance.amount, assetBalance.denom.exponent).toFormat()
+    : '0';


Can we use ValueViewComponent here instead?

Discussed in Discord — this will be part of a follow-up PR (in progress here #440)

grod220 · 2024-01-31T07:39:35Z

packages/ui/components/ui/tx/view/transaction.tsx

+  const fee = joinLoHiAmount(txv.bodyView.transactionParameters!.fee!.amount!).toString();
+


Think we should have error guards here:

if (!txv.bodyView?.transactionParameters?.fee?.amount) throw new Error('Missing fee amount'); const fee = joinLoHiAmount(txv.bodyView.transactionParameters.fee.amount).toString();

Good call — fixed

jessepinho commented Jan 9, 2024

View reviewed changes

packages/router/src/grpc/view-protocol-server/transaction-planner.ts Show resolved Hide resolved

jessepinho commented Jan 9, 2024

View reviewed changes

turbocrime reviewed Jan 9, 2024

View reviewed changes

jessepinho force-pushed the jessepinho/web-308-gas-fees-in-web branch from 403fb83 to 6163c32 Compare January 9, 2024 22:10

jessepinho force-pushed the jessepinho/web-308-gas-fees-in-web branch 3 times, most recently from bbd97d7 to 3975294 Compare January 10, 2024 20:14

jessepinho commented Jan 10, 2024

View reviewed changes

jessepinho force-pushed the jessepinho/web-308-gas-fees-in-web branch from 8191b14 to 96585fa Compare January 10, 2024 21:11

jessepinho marked this pull request as ready for review January 10, 2024 21:18

jessepinho changed the title ~~DRAFT: Support fees in Penumbra web~~ Support fees in Penumbra web Jan 10, 2024

jessepinho requested review from aubrika, Valentine1898 and turbocrime January 10, 2024 21:44

turbocrime reviewed Jan 10, 2024

View reviewed changes

apps/webapp/src/state/send.ts Outdated Show resolved Hide resolved

Valentine1898 approved these changes Jan 11, 2024

View reviewed changes

jessepinho force-pushed the jessepinho/web-308-gas-fees-in-web branch from 31e2ace to c253544 Compare January 26, 2024 04:57

jessepinho mentioned this pull request Jan 29, 2024

Fix fees in WASM planner penumbra-zone/penumbra#3693

Merged

jessepinho force-pushed the jessepinho/web-308-gas-fees-in-web branch 3 times, most recently from 1aebc54 to f389249 Compare January 31, 2024 07:11

jessepinho requested a review from grod220 January 31, 2024 07:30

grod220 approved these changes Jan 31, 2024

View reviewed changes

jessepinho added 6 commits January 31, 2024 10:51

Support gas prices on Penumbra web

e791d6f

Address linting/typing issues

0a4feb0

Update to latest wasm-nodejs and wasm-bundler

b866075

Assert the presence of a fee in TransactionViewComponent

f7708d6

Mock getAddressByIndex

0bfbbe8

Fix fee prop

72a046c

jessepinho force-pushed the jessepinho/web-308-gas-fees-in-web branch from f0efaad to 72a046c Compare January 31, 2024 19:00

jessepinho merged commit c16f001 into main Jan 31, 2024
3 checks passed

jessepinho deleted the jessepinho/web-308-gas-fees-in-web branch January 31, 2024 19:06

jessepinho mentioned this pull request Jan 31, 2024

Refactor selections/balances to use DenomMetadata, and to render a ValueViewComponent when possible #440

Merged

		const fee = joinLoHiAmount(txv.bodyView.transactionParameters!.fee!.amount!).toString();

Support fees in Penumbra web #362

Support fees in Penumbra web #362

Conversation

jessepinho commented Jan 8, 2024 • edited Loading

Background

In this PR

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

turbocrime left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

turbocrime commented Jan 10, 2024

hdevalence commented Jan 10, 2024 • edited Loading

turbocrime commented Jan 10, 2024

turbocrime commented Jan 10, 2024

hdevalence commented Jan 10, 2024

turbocrime commented Jan 10, 2024

turbocrime commented Jan 10, 2024

hdevalence commented Jan 10, 2024

turbocrime commented Jan 10, 2024

Valentine1898 commented Jan 10, 2024

jessepinho commented Jan 10, 2024

jessepinho Jan 10, 2024 • edited Loading

Choose a reason for hiding this comment

turbocrime Jan 10, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

grod220 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jessepinho commented Jan 8, 2024 •

edited

Loading

hdevalence commented Jan 10, 2024 •

edited

Loading

jessepinho Jan 10, 2024 •

edited

Loading

turbocrime Jan 10, 2024 •

edited

Loading