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

Jump to bottom

Minor Transfer wizard static page #3113

Merged
merged 2 commits into from
Jan 5, 2024
Merged

Minor Transfer wizard static page #3113

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
41f6fe4
feat: transfer wizard static page update
hcho112 Jan 4, 2024
cdb76a3
chore: lint fixes
hcho112 Jan 4, 2024
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
47 changes: 3 additions & 44 deletions packages/frontend/src/routes/TransferWizardWrapper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,7 @@ import React from 'react';
import styled from 'styled-components';

import Container from '../components/common/styled/Container.css';
import cleanUpKeysImg from '../images/wallet-migration/screenshots/clean-up-keys.png';
import logOutImg from '../images/wallet-migration/screenshots/log-out.png';
import secureAccountsImg from '../images/wallet-migration/screenshots/secure-accounts.png';
import transferAccountsImg from '../images/wallet-migration/screenshots/transfer-your-accounts.png';

const Table = styled.table`
Expand All @@ -25,9 +23,6 @@ const Warning = styled.p`
color: #980000;
`;

const Important = styled.p`
color: #ff0000;
`;

const ScreenshotImg = styled.img`
width: 300px;
Expand Down Expand Up @@ -139,49 +134,13 @@ export const TransferWizardWrapper = () => {
</Table>
<br />
<h3>How does the Wizard Work?</h3>
<p>The Transfer Wizard is designed to improve the security posture of your connected accounts before migrating them to a new wallet by rotating your keys, cleaning up old keys, and securely transferring your accounts to a new wallet. You can access the Wallet Transfer Wizard from the banner at the top of wallet.near.org. </p>
<p>The Transfer Wizard is designed to improve the security posture of your connected accounts before migrating them to a new wallet by securely transferring your accounts to a new wallet. You can access the Wallet Transfer Wizard from the banner at the top of wallet.near.org. </p>
<Warning><b>Note</b>: The wizard does not support unfunded accounts (implicit accounts) or accounts using Ledger. You can import your Ledger accounts manually to a supported wallet.</Warning>
<hr />
<Table>
<tr>
<Td>
<p><b>Step 1. Secure Your Accounts</b></p>
<p>The first recommended security step is to rotate your keys, generating a new 12-word recovery phrase. This process is similar to updating your password.</p>
<ol type="1">
<li>Generate a new recovery phrase</li>
<li>
Securely write down or save your new recovery phrase
<ol type="a">
<li>Confirm the account it recovers</li>
<li>Don't confuse it with your old recovery phrase</li>
</ol>
</li>
<li>Verify your new recovery phrase</li>
<li>Keep your new phrase in a safe place</li>
</ol>
<Important><b>Note</b>: Your recovery phrase grants full access to your account. Keep it in a safe place and never share it with anyone. Pagoda or the NEAR Foundation cannot help recover lost accounts or assets.</Important>
</Td>
<ImageTd>
<ScreenshotImg alt="Secure Accounts" src={secureAccountsImg} />
</ImageTd>
</tr>
<tr>
<Td>
<p><b>Step2. Clean Up Your Keys</b></p>
<p>Next, NEAR wants to reduce the amount of apps that you've shared keys with, similar to revoking access for third-parties. This may cause you to be disconnected from some apps.</p>
<ol type="1">
<li>Review suggested keys to remove (optional)</li>
<li>Enter your recovery phrase to confirm removal</li>
<li>Remove outdated and unnecessary keys. You may need to log back in to certain apps if you remove their limited access key. </li>
</ol>
</Td>
<ImageTd>
<ScreenshotImg alt="Clean up Keys" src={cleanUpKeysImg} />
</ImageTd>
</tr>
<tr>
<Td>
<p><b>Step 3. Transfer Your Accounts</b></p>
<p><b>Step 1. Transfer Your Accounts</b></p>
<p>Next, you will use the Wallet Selector to select your destination wallet and transfer your accounts. It's best to know which wallet you plan to use prior to starting the transfer. <a target="blank" href="https://docs.google.com/spreadsheets/d/1Q9ZEeWpFHgcPthSCvzyiVcaKdBIcdS3r96v48OYsDBM">List of Supported Wallets</a></p>
<ol type="1">
<li>Choose the wallet you want to transfer your accounts to</li>
Expand All @@ -198,7 +157,7 @@ export const TransferWizardWrapper = () => {
</tr>
<tr>
<Td>
<p><b>Step 4. Log Out of Near.org</b></p>
<p><b>Step 2. Log Out of Near.org</b></p>
<p>The final step is to log out of the NEAR Wallet and begin using your new wallet.</p>
<ol type="1">
<li>Return to wallet.near.org after successful account transfer and tap <i>"Complete"</i> in the "Complete the Transfer" panel</li>
Expand Down