Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

web: rewrite and update prax wallet section #55

Closed
wants to merge 1 commit into from
Closed

web: rewrite and update prax wallet section #55

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
129 changes: 60 additions & 69 deletions components/WalletInstall.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,28 +9,13 @@ import { useAddresses, useConnect, useWalletManifests } from './hooks';
const WalletInstall: React.FC = () => {
const { data: wallets, isLoading } = useWalletManifests();
const { connectionLoading, connected, onConnect } = useConnect();
const { data: addresses } = useAddresses(3);
const isPraxInstalled =
wallets &&
Object.values(wallets).some((manifest) => manifest.name.includes('Prax'));

return (
<div className="py-3 flex flex-col gap-8">
<>
<div>
In order to interact with Penumbra, you need a compatible wallet. One
such option is{' '}
<a
target={'_blank'}
className="underline"
href="https://chromewebstore.google.com/detail/prax-wallet/lkpmkhpnhknhmibgnmmhdhgdilepfghe"
rel="noreferrer"
>
Prax Wallet
</a>
. Visit the link and click Add to Chrome to install it, then come back
to this page.
</div>
{!isPraxInstalled && (
<button
type={'button'}
Expand All @@ -48,23 +33,10 @@ const WalletInstall: React.FC = () => {
<>
<div>Great! You've now installed the Prax Wallet extension.</div>

<div>
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.
</div>

<div>
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.
site permission to access your data, click the <b>Connect</b> button below.
</div>

{!isLoading &&
Expand All @@ -85,53 +57,72 @@ const WalletInstall: React.FC = () => {
))}

{connected && (
<div>
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.
</div>
)}

<div className="flex flex-col items-start gap-3 [&>*]:overflow-ellipsis [&>*]:max-w-full [&>*_button[title='Copy']]:hidden">
<h2 className="text-lg font-semibold">
Here are your first 3 accounts:
</h2>
{addresses?.map((address) => (
<div className="bg-gray-700 p-3" key={address.toJsonString()}>
<AddressViewComponent
key={address?.toBinary().toString()}
addressView={
{
addressView: {
value: {
address: address.address,
} as AddressView_Decoded,
case: 'decoded',
},
} as AddressView
}
/>
</div>
))}
{!connected && (
<>
<div>
Can't access accounts until you've connected your wallet
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 <b>never</b> access your recovery seed phrase.
</div>
)}
</div>

{connected && (
<div
className="bg-green-100 border-l-4 border-green-500 text-green-700 p-4"
role="alert"
>
<p className="font-bold">Quest complete!</p>
</div>
<div
className="bg-green-100 border-l-4 border-green-500 text-green-700 p-4"
role="alert"
>
<p className="font-bold">Quest complete!</p>
</div>
</>
)}
</>
)}
</div>
);
};

export default WalletInstall;
export const AddressDisplay: React.FC = () => {
const { data: wallets, isLoading } = useWalletManifests();
const { data: addresses } = useAddresses(3);
const { connected } = useConnect();
const isPraxInstalled =
wallets &&
Object.values(wallets).some((manifest) => manifest.name.includes('Prax'));

return isPraxInstalled && (
<div className="flex flex-col items-start gap-3 [&>*]:overflow-ellipsis [&>*]:max-w-full [&>*_button[title='Copy']]:hidden">
<h2 className="text-lg font-semibold">
Here are your first 3 accounts:
</h2>
{addresses?.map((address) => (
<div className="bg-gray-700 p-3" key={address.toJsonString()}>
<AddressViewComponent
key={address?.toBinary().toString()}
addressView={
{
addressView: {
value: {
address: address.address,
} as AddressView_Decoded,
case: 'decoded',
},
} as AddressView
}
/>
</div>
))}

{connected ? (
<div
className="w-full bg-green-100 border-l-4 border-green-500 text-green-700 p-4"
role="alert"
>
<p className="font-bold">Quest complete!</p>
</div>
) : (
<div>
Can't access accounts until you've connected your wallet
</div>
)}
</div>
);
};

export default WalletInstall;
61 changes: 38 additions & 23 deletions pages/web/prax.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import WalletInstall from '@/components/WalletInstall';
import WalletInstall, { AddressDisplay } from '@/components/WalletInstall';

# Prax Wallet Interactive Guide

Expand All @@ -9,52 +9,67 @@ that runs entirely on your computer.
This step-by-step tutorial is designed to help you navigate and use the Prax Wallet effectively.
Please follow each section in order to ensure the best experience.

<WalletInstall/>

## Installing the extension

The Penumbra Wallet web extension only supports the Google Chrome browser.
The Prax Wallet web extension only supports the Google Chrome browser.
You must run Chrome in order to follow the instructions below.

Visit the Web Store page to download the [Prax Wallet](https://chromewebstore.google.com/detail/prax-wallet/lkpmkhpnhknhmibgnmmhdhgdilepfghe), and click **Add to Chrome** to install it.

Visit the [Prax Wallet](https://chromewebstore.google.com/detail/prax-wallet/lkpmkhpnhknhmibgnmmhdhgdilepfghe) page in the Chrome Web Store, and click **Add to Chrome** to install it. Then, come back to this page.
<WalletInstall/>
## Generating a wallet

When you first open the extension, you'll be offered to import a pre-existing wallet. If you don't already have one, choose **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 import your wallet on a fresh installation, or
on a different machine. 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.
This will guide you through the process of creating a **recovery seed phrase**. This is a list of 12 or 24 words that can be used to restore your wallet in case you forget your password, switch to a new machine, or delete the extension.

During the guided tutorial, you'll also need to set a password to protect your wallet. The password
is *not* the same as the recovery seed phrase. The password is used to restrict access to the web wallet
on your computer.

Make sure to store both the password and the recovery seed phrase securely, for example in a password manager.

Re-enter portions of the recovery seed phrase when prompted, to confirm that you've saved it properly.

<AddressDisplay/>

## Select your preferred RPC endpoint

Once you import or generate a wallet, you will be prompted to select an RPC endpoint, which is the URL the extension uses to sync with the network.
These are hosted by the community (including yourself, if you like), and those provided in the UI are typically offered by known validators.
You may also provide your own custom endpoint, whether that is a community provider not provided as a default option, or hosted on a node you run yourself.
Prax Wallet needs a way to connect to the blockchain. This is done by selecting a **RPC endpoint**, which is the URL the extension uses to sync with the network. These are hosted by the community (including yourself, if you like), and those provided in the UI are typically offered by known validators.

By default, Prax Wallet will select a public RPC endpoint. You can change the endpoint at any time, by clicking on the Prax Wallet extension icon in the Chrome toolbar, and selecting the Settings menu in the upper left corner. Then, select **RPC**:

![Prax Wallet Settings](/images/prax-settings.png)

From there, you can select a default endpoint, or choose **Custom RPC** to specify your own endpoint, whether that is a community provider not provided as a default option, or hosted on a node you run yourself.

![Prax Wallet RPC](/images/prax-rpc.png)

## Select your preferred frontend app

The extension will prompt you to select a frontend app to use with the wallet. This is a web interface that you will use to interact with the blockchain.
The provided options are community-hosted frontends, and you may also provide your own custom frontend URL.
By default, Prax Wallet will select a frontend app to use with the wallet. This is a web interface that you will use to interact with the blockchain.

The provided options are community-hosted frontends, and you may also provide your own custom frontend URL. You can change the frontend app at any time, by clicking on the Prax Wallet extension icon in the Chrome toolbar, and selecting the Settings menu in the upper left corner. Then, select **Default Frontend**:

![Prax Wallet Settings](/images/prax-settings.png)

This will take you to a page where you can select a default frontend, or choose **Custom frontend** to specify your own frontend URL.

![Prax Wallet Frontend](/images/prax-frontend.png)

Connecting a frontend to your wallet grants the frontend provider a full viewing key for your wallet in order to decrypt and display relevant information, such as your wallet balance.
*This means that the front-end provider has read access (only) to your wallet and all of its activity.* This is necessary for the encrypted data on-chain to be parsed and rendered in a human-readable format.
*This means that the front-end provider has read access (only, meaning that they cannot spend your funds) to your wallet and all of its activity.* This is necessary for the encrypted data on-chain to be parsed and rendered in a human-readable format. See [Selective Disclosure](/disclosure) for more information on viewing keys.

However, this means that you should only connect to frontend providers that you trust, because they can see any actions taken by the connected wallet by using the provided full viewing key.
If you desire greater privacy than this provides, you can always run your own frontend, or utilize the command-line client, [`pcli`](./pcli.md), to interact with the blockchain directly.

## Updating to a new version of the extension

The extension should be automatically updated every time a new version is released.
You can view the latest version of the extension on the [Prax Wallet] page at the
You can view the latest version of the extension on the [Prax Wallet](https://chromewebstore.google.com/detail/prax-wallet/lkpmkhpnhknhmibgnmmhdhgdilepfghe) page at the Chrome Web Store. To force a check for updates:
Chrome Web Store. To force a check for updates:

1. Click the three-dot icon in the top right corner of the browser.
2. From the drop-down menu, choose **Extensions -> Manage Extensions**.
3. Select **Update** on the top panel.

After updating the extension manually, it may be helpful to clear the local cache,
as described above.

[Prax Wallet] https://chromewebstore.google.com/detail/prax-wallet/lkpmkhpnhknhmibgnmmhdhgdilepfghe
After updating the extension manually, it may be helpful to [clear the local cache](https://support.google.com/accounts/answer/32050?hl=en&co=GENIE.Platform%3DDesktop).
Binary file added public/images/prax-frontend.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/prax-rpc.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/prax-settings.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.