Skip to content

Commit

Permalink
wip 2
Browse files Browse the repository at this point in the history
  • Loading branch information
@hdevalence
hdevalence committed Nov 21, 2024
1 parent a630e90 commit bd51413
Show file tree
Hide file tree
Showing 14 changed files with 155 additions and 482 deletions.
72 changes: 12 additions & 60 deletions components/Deposit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,9 +88,18 @@ const Deposit: React.FC = () => {
return (
<div className="py-3 flex flex-col gap-8">
<div>
Now it's time to shield your funds and transfer them into Penumbra.
We've displayed one of your IBC Deposit addresses for you convenience
below. Copy it using the button on the right.
The&nbsp;
<a
href="https://go.skip.build/"
className="font-medium underline"
target="_blank"
rel="noopener noreferrer"
>
Skip App
</a>
&nbsp; is an easy way to deposit funds into Penumbra.
Select a source asset and chain (e.g., USDC) and set Penumbra as the destination chain.
Then initiate the deposit and come back to this page.
</div>

{!isLoading &&
Expand All @@ -110,63 +119,6 @@ const Deposit: React.FC = () => {
</button>
))}

{ibcInAddress?.address && connected && (
<div className={'bg-gray-700 p-3'}>
<AddressViewComponent
addressView={
new AddressView({
addressView: {
case: 'decoded',
value: {
address: ibcInAddress.address,
},
},
})
}
/>
</div>
)}

<div
className="bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4"
role="alert"
>
<p className="font-bold">Info</p>
<p>
IBC Deposit addresses exist because source chains record the deposit
address. They serve as an additional layer of anonymity to not link
your deposit and actual addresses.
</p>
</div>

<div>
We will use&nbsp;
<a
href="https://go.skip.build/"
className="font-medium underline"
target="_blank"
rel="noopener noreferrer"
>
Skip Protocol
</a>
&nbsp; to bridge funds into Penumbra. Go to the Skip app, and input your
IBC Deposit address. Select your source chain and asset (we recommend
USDC, but any common asset is fine) and select Penumbra and USDC as the
destination chain. Then initiate the deposit and come back to this page.
</div>

<div
className="bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4"
role="alert"
>
<p className="font-bold">Info</p>
<p>
Penumbra supports paying fees in multiple tokens, including USDC. Prax
will always choose the best token to pay fees with depending on your
balances.
</p>
</div>

{notesWithMetadata.length === 0 && (
<div className="w-full bg-gray-700 text-white shadow-md rounded-lg p-4">
<div className="flex flex-row gap-3 items-center">
Expand Down
7 changes: 0 additions & 7 deletions components/Disconnect.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,6 @@ const Disconnect: React.FC = () => {

return (
<div className="py-3 flex flex-col gap-8">
<div>
Once you are done working with a page, you can disconnect your wallet.
To do this in Prax. You can go to the Settings, click Connected sites,
and click the trash button next to the site URL. This will disconnect
the extension from the site, after which the site can no longer access
your data.
</div>
{connected && (
<div className="w-full bg-white shadow-md rounded-lg p-4">
<div className="flex flex-row gap-3 items-center">
Expand Down
257 changes: 100 additions & 157 deletions components/Staking.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,175 +52,118 @@ const Staking: React.FC = () => {
<div className="py-3 flex flex-col gap-8">
<div className="space-y-6">
<p>
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.
Holders of UM can stake their tokens to participate in network validation and governance.
</p>

<div className="space-y-4">
<p>To stake with Prax, follow these steps:</p>
<ul className="list-disc pl-8 space-y-2">
<li>
First ensure you hold the Penumbra protocol's staking token 'UM'.
</li>
<li>Next, select the 'Stake' tab on your frontend.</li>
<li>
On the 'Stake' tab, you can see how much 'UM' you have available
to delegate, along with a list of possible validators.
</li>
</ul>
</div>

<p>For each validator, you will see some important data:</p>
<ul className="list-disc pl-8 space-y-2">
<li>
'VP': the voting power of the validator in the governance system,
</li>
<li>'Com': the commission rate that validator takes.</li>
</ul>

<div className="space-y-4">
<p>
Once you select a validator to stake with, you can click the
'Delegate' button.
</p>
<p>
Select how much 'UM' you wish to delegate, then press 'Delegate':
</p>
<img
className="max-w-full"
src="/images/delegation_amount_example.png"
alt="Delegation token amount selection"
/>
</div>

<p>
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':
</p>
<img
className="max-w-full"
src="/images/delegation_prax.png"
alt="Delegation prax"
/>

<p>
You should see a pop-up in the lower right hand of the page indicating
that the transaction was approved!
</p>

<img
className="max-w-full"
src="/images/delegation_popup.png"
alt="Delegation popup"
/>

<p>
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.
Use the
<a
className="underline px-1"
target={'_blank'}
href="https://stake.with.starlingcyber.net/#/staking"
rel="noreferrer"
>
Stake page
</a>
to delegate to a validator.
</p>
</div>

{delegationTokens.length === 0 && (
<div className="w-full bg-gray-700 text-white shadow-md rounded-lg p-4">
<div className="flex flex-row gap-3 items-center">
<div>Waiting for a staking delegation to occur</div>
<div
className="animate-spin h-5 w-5 border-2 border-blue-500
{delegationTokens.length === 0 && (
<div className="w-full bg-gray-700 text-white shadow-md rounded-lg p-4">
<div className="flex flex-row gap-3 items-center">
<div>Waiting for a staking delegation to occur</div>
<div
className="animate-spin h-5 w-5 border-2 border-blue-500
rounded-full border-t-transparent"
/>
/>
</div>
</div>
</div>
)}
)}

{delegationTokens.length > 0 && (
<div className="flex flex-col items-start">
<div
className="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 w-full"
role="alert"
>
<p className="font-bold">Staked UM successfully!</p>
</div>
<div
className="flex px-3
{delegationTokens.length > 0 && (
<div className="flex flex-col items-start">
<div
className="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 w-full"
role="alert"
>
<p className="font-bold">Staked UM successfully!</p>
</div>
<div
className="flex px-3
items-center gap-5 my-5 bg-gray-700 text-white p-3 w-full"
>
{delegationTokens?.map((balance) => {
const validator = validators?.find((validator) =>
getMetadataFromBalancesResponse(balance).base?.includes(
bech32mIdentityKey({
ik:
validator?.validator?.identityKey?.ik ?? new Uint8Array(),
}),
),
)?.validator;
return (
<div
className="flex flex-col gap-3 items-start justify-center"
key={balance.toJsonString()}
>
<div className="flex items-center gap-3 justify-center">
Successfully staked
<ValueViewComponent
valueView={
new ValueView({
valueView: {
value: new ValueView_KnownAssetId({
amount:
getBalanceView.pipe(getEquivalentValues)(
balance,
)[0].equivalentAmount,
metadata:
getBalanceView.pipe(getEquivalentValues)(
balance,
)[0].numeraire,
}),
case: 'knownAssetId',
},
})
}
/>{' '}
on
<a
target={'_blank'}
href={validator?.website}
className="underline"
rel="noreferrer"
>
{validator?.name}
</a>
</div>

{/*TODO: support ellipsis in the value view component*/}
>
{delegationTokens?.map((balance) => {
const validator = validators?.find((validator) =>
getMetadataFromBalancesResponse(balance).base?.includes(
bech32mIdentityKey({
ik:
validator?.validator?.identityKey?.ik ?? new Uint8Array(),
}),
),
)?.validator;
return (
<div
className={
'[&_*]:text-ellipsis flex items-center gap-3 justify-center'
}
className="flex flex-col gap-3 items-start justify-center"
key={balance.toJsonString()}
>
using delegation token:
<ValueViewComponent valueView={balance.balanceView} />
<div className="flex items-center gap-3 justify-center">
Successfully staked
<ValueViewComponent
valueView={
new ValueView({
valueView: {
value: new ValueView_KnownAssetId({
amount:
getBalanceView.pipe(getEquivalentValues)(
balance,
)[0].equivalentAmount,
metadata:
getBalanceView.pipe(getEquivalentValues)(
balance,
)[0].numeraire,
}),
case: 'knownAssetId',
},
})
}
/>{' '}
on
<a
target={'_blank'}
href={validator?.website}
className="underline"
rel="noreferrer"
>
{validator?.name}
</a>
</div>

{/*TODO: support ellipsis in the value view component*/}
<div
className={
'[&_*]:text-ellipsis flex items-center gap-3 justify-center'
}
>
using delegation token:
<ValueViewComponent valueView={balance.balanceView} />
</div>
</div>
</div>
);
})}
</div>
<div
className="bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4 mt-3 w-full"
role="alert"
>
<p className="font-bold">Info</p>
<p>
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.
</p>
);
})}
</div>
<div
className="bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4 mt-3 w-full"
role="alert"
>
<p className="font-bold">Info</p>
<p>
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.
</p>
</div>
</div>
</div>
)}
)}
</div>
</div>
);
};
Expand Down
Loading

0 comments on commit bd51413

Please sign in to comment.