+
+ );
+};
+
+function truncateMiddle(text: string, maxLength: number): string {
+ if (text.length <= maxLength) {
+ return text;
+ }
+
+ const start = 5;
+ const end = 5;
+ const ellipsis = '...';
+ const charsToShow = maxLength - (start + end + ellipsis.length);
+
+ if (charsToShow < 1) {
+ return text.slice(0, start) + ellipsis + text.slice(-end);
+ }
+
+ const leftChars = Math.ceil(charsToShow / 2);
+ const rightChars = Math.floor(charsToShow / 2);
+
+ return (
+ text.slice(0, start + leftChars) +
+ ellipsis +
+ text.slice(-(end + rightChars))
+ );
+}
+
+export default Staking;
diff --git a/components/Swap.tsx b/components/Swap.tsx
new file mode 100644
index 0000000..51cb8db
--- /dev/null
+++ b/components/Swap.tsx
@@ -0,0 +1,221 @@
+import type {
+ SwapView,
+ SwapView_Visible,
+} from '@penumbra-zone/protobuf/penumbra/core/component/dex/v1/dex_pb';
+import type {
+ ActionView,
+ TransactionView,
+} from '@penumbra-zone/protobuf/penumbra/core/transaction/v1/transaction_pb';
+import { ActionViewComponent } from '@penumbra-zone/ui/components/tx/action-view';
+import type React from 'react';
+import {
+ getMetadata,
+ useFeeMetadata,
+ useSetScanSinceBlock,
+ useSwaps,
+} from './hooks';
+import { useQuestStore } from './store';
+
+const Swap: React.FC = () => {
+ useSetScanSinceBlock();
+ return (
+
+ 
+
+ 
+
+
+
+ {delegationTokens.length === 0 && (
+ + If you hold the staking token "UM" you can delegate, or stake, those + tokens to a validator. This enables you to receive rewards and + participate in governance in exchange for taking on the risk of + validator misbehavior. +
+ +
+
+
+ To stake with Prax, follow these steps:
+-
+
- + First ensure you hold the Penumbra protocol's staking token 'UM'. + +
- Next, select the 'Stake' tab on your frontend. +
- + On the 'Stake' tab, you can see how much 'UM' you have available + to delegate, along with a list of possible validators. + +
For each validator, you will see some important data:
+-
+
- + 'VP': the voting power of the validator in the governance system, + +
- 'Com': the commission rate that validator takes. +
+ 
+
+
+ + Once you select a validator to stake with, you can click the + 'Delegate' button. +
++ Select how much 'UM' you wish to delegate, then press 'Delegate': +
+
+ + It will take a few moments for the delegation transaction to be + prepared, then Prax will generate a view of your transaction. Verify + one of the outputs is to the validator you selected, then click + 'Approve': +
+
+
+ + You should see a pop-up in the lower right hand of the page indicating + that the transaction was approved! +
+ +
+
+ + You will receive the delegation token associated with that validator. + At a later point, you can undelegate by clicking the 'Undelegate' + button to undelegate from that validator, and receive staking tokens. +
+
+
+ )}
+
+ {delegationTokens.length > 0 && (
+
+
+ Waiting for a staking delegation to occur
+
+
+
+ )}
+
+
+ Staked UM successfully!
+
+ {delegationTokens?.map((balance) => {
+ const validator = validators?.find((validator) =>
+ (
+ balance?.balanceView?.valueView
+ ?.value as ValueView_KnownAssetId
+ )?.metadata?.base?.includes(
+ bech32mIdentityKey({
+ ik:
+ validator?.validator?.identityKey?.ik ?? new Uint8Array(),
+ }),
+ ),
+ )?.validator;
+ return (
+
+
+
+ );
+ })}
+
+ Successfully staked
+
+
+ {/*TODO: support ellipsis in the value view component*/}
+
+ using delegation token:
+
+
+
+ Info
++ Delegation tokens are liquid - you can swap them the same way you + would other assets. They will also show up under your Balances in + frontends. +
+
+
+ );
+};
+
+function SwapMonitor() {
+ const { scanSinceBlockHeight } = useQuestStore();
+ const { data: swaps } = useSwaps({
+ from: scanSinceBlockHeight,
+ to: 99999999,
+ });
+ const swapActions =
+ swaps?.flatMap(
+ (swapTx) =>
+ swapTx.txInfo?.view?.bodyView?.actionViews
+ ?.filter((action) => action.actionView?.case === 'swap')
+ .map((action) => ({
+ action,
+ fee: swapTx?.txInfo?.view?.bodyView?.transactionParameters?.fee,
+ txView: swapTx?.txInfo?.view,
+ })) ?? [],
+ ) ?? [];
+
+ return (
+
+ 
+
+ 
+
+ 
+
+ 
+
+
+ + Penumbra offers a built-in DEX that allows you to swap tokens + privately and with the best trade execution. +
++ We recommend swapping the USDC that you bridged in earlier to UM, the + Penumbra staking token, but you can choose to swap any pair you want. + + Click here + + to go to the Minifront Swap page. +
+ +Instant Swaps
+ ++ The simplest type of swap available is an "instant swap". This can be + accessed by setting the 'Speed' slider all the way to the left-hand + setting ('Instant Price'). +
+ ++ Using the selectors on the right-hand side, choose the two tokens you + wish to swap between: +
+ +
+
+ + The left-hand side specifies the source token, which you will swap for + the right-hand side. The amount of the source token you wish to swap + is specified in the input box below the 'Trade' label. +
+ ++ Thanks to Penumbra's DEX design, you're guaranteed to get the best + market execution price at the time you perform the swap. +
+ ++ To see a preview of how the swap will execute, you can press the + 'Estimate' button. This will show you information including: +
+ +-
+
- The total amount of the desired token to be received +
- + The individual routes taken to perform the swap (the Penumbra DEX + allows synthetic liquidity by swapping through other trading pairs!) + +
- The price impact of executing your swap +
+
+ + If you're happy with the proposed swap, press the 'Swap' button and + wait for the transaction to be built. +
+ ++ Prax will prompt you to sign the transaction after it's built. Click + 'Approve' in the extension and your swap will be executed at market + price. +
+ +Gradual Dutch Auctions
+ ++ Penumbra's DEX also supports{' '} + Gradual Dutch Auctions which allow + you to perform price discovery based on market demand, by offering + your swap over a period of time at diminishing prices until all tokens + are sold. +
+ ++ Using the 'Speed' slider mechanism, you can view how different time + scales affect the number of auctions that will be created. By moving + the slider to the right, the auction will take place over a greater + amount of time, leading to tokens being sold at more price points. +
+ ++ You must also specify the maximum and minimum prices you're willing to + sell your tokens at. This way, you can ensure that the auction allows + you to get the highest prices possible for your tokens, without + selling them for less than you're comfortable with. +
+ + + +
+
+ + Press 'Start auctions' and Prax will present to you the proposed + transaction, which allows you to view all the individual Dutch + Auctions: +
+ + + +
+
+ + As with the Instant Swap, you can + then press 'Approve' in Prax to submit the auction. +
+
+ {swapActions?.length ? (
+ swapActions.map((s) => (
+
+ );
+}
+
+function AssetSwapWithFeeMetadataComponent(props: {
+ txv: TransactionView;
+ action: ActionView;
+}) {
+ /*The link that's displayed when claimTx is defined doesn't work outside minifront*/
+ delete (
+ (props.action.actionView.value as SwapView).swapView
+ .value as SwapView_Visible
+ ).claimTx;
+ const { feeValueView } = useFeeMetadata(props.txv, getMetadata);
+ return (
+
+
+ )}
+
+ Waiting for a swap to occur
+
+
+
+ <>
+
+ );
+};
+
+export default WalletInstall;
diff --git a/components/hooks.ts b/components/hooks.ts
new file mode 100644
index 0000000..87fc1e4
--- /dev/null
+++ b/components/hooks.ts
@@ -0,0 +1,320 @@
+import { ChainRegistryClient } from '@penumbra-labs/registry';
+import {
+ PenumbraClient,
+ type PenumbraManifest,
+ PenumbraRequestFailure,
+ PenumbraState,
+} from '@penumbra-zone/client';
+import { TendermintProxyService, ViewService } from '@penumbra-zone/protobuf';
+import {
+ type AssetId,
+ type Metadata,
+ ValueView,
+} from '@penumbra-zone/protobuf/penumbra/core/asset/v1/asset_pb';
+import type { TransactionView } from '@penumbra-zone/protobuf/penumbra/core/transaction/v1/transaction_pb';
+import { useQuery } from '@tanstack/react-query';
+import { uniqBy } from 'es-toolkit';
+import { useEffect, useState } from 'react';
+import { client } from './penumbra';
+import { useQuestStore } from './store';
+
+export const useWalletManifests = () => {
+ return useQuery
+ In order to interact with Penumbra, you need a compatible wallet. One
+ such option is{' '}
+
+ Prax Wallet
+
+ . Visit the link and click Add to Chrome to install it, then come back
+ to this page.
+
+ {!isPraxInstalled && (
+
+ )}
+
+
+ {isPraxInstalled && (
+ <>
+ Great! You've now installed the Prax Wallet extension.
+
+
+ Open it by clicking the extension icon in the Chrome toolbar, select
+ Create a new wallet. During the guided tutorial, you'll need to set
+ a passphrase to protect your wallet. The passphrase is not the same
+ as the recovery phrase. The passphrase is used to restrict access to
+ the web wallet on your computer. The recovery phrase can be used to
+ restore your wallet in case you forget your passphrase, switch to a
+ new machine or delete the extension. Make sure to store both the
+ passphrase and the recovery phrase securely, for example in a
+ password manager. Re-enter portions of the recovery phrase when
+ prompted, to confirm that you've saved it properly.
+
+
+
+ Before you connect your wallet, websites cannot access any of your
+ data. It's all stored locally and securely on your device. To give a
+ site permission to access your data, click the Connect button below.
+
+
+ {!isLoading &&
+ wallets &&
+ !connected &&
+ Object.entries(wallets).map(([origin, manifest]) => (
+
+ ))}
+
+ {connected && (
+
+ You have now connected Prax to this page. This means that the
+ website can access the data in your wallet, such as balances and
+ transaction history. A page can never access your seedphrase.
+
+ )}
+
+
+
+
+ {connected && (
+ + Here are your first 3 accounts: +
+ {addresses?.map((address) => ( +
+
+ ))}
+ {!connected && (
+
+ Can't access accounts until you've connected your wallet
+
+ )}
+
+
+ )}
+
+ )}
+ Quest complete!
+
-
-
-
-- -
-- -
-- -
-