refactor: clean up onboarding and imports (#116)

Author: danwag06

src/assets/panda-logo-wide.png

@@ -30,7 +30,7 @@ export type WifKeys = {
   ordPk: string;
 };
 
-export type SupportedWalletImports = 'relayx' | 'twetch' | 'aym';
+export type SupportedWalletImports = 'relayx' | 'twetch' | 'aym' | 'panda' | 'wif';
 
 export const useKeys = () => {
   const [bsvAddress, setBsvAddress] = useState('');

src/hooks/useKeys.ts

@@ -1,19 +1,19 @@
-import styled from 'styled-components';
-import { ColorThemeProps } from '../../theme';
-import { useNavigate } from 'react-router-dom';
 import { useEffect, useState } from 'react';
-import { useSnackbar } from '../../hooks/useSnackbar';
+import { useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
 import { BackButton } from '../../components/BackButton';
-import { Text, HeaderText } from '../../components/Reusable';
-import { Input } from '../../components/Input';
 import { Button } from '../../components/Button';
-import { PandaHead } from '../../components/PandaHead';
-import { useKeys } from '../../hooks/useKeys';
-import { useBottomMenu } from '../../hooks/useBottomMenu';
+import { Input } from '../../components/Input';
 import { PageLoader } from '../../components/PageLoader';
+import { PandaHead } from '../../components/PandaHead';
+import { HeaderText, Text } from '../../components/Reusable';
 import { Show } from '../../components/Show';
-import { sleep } from '../../utils/sleep';
+import { useBottomMenu } from '../../hooks/useBottomMenu';
+import { useKeys } from '../../hooks/useKeys';
+import { useSnackbar } from '../../hooks/useSnackbar';
 import { useTheme } from '../../hooks/useTheme';
+import { ColorThemeProps } from '../../theme';
+import { sleep } from '../../utils/sleep';
 
 const Content = styled.div`
   display: flex;
@@ -107,7 +107,9 @@ export const CreateWallet = () => {
       <BackButton onClick={() => navigate('/')} />
       <Content>
         <HeaderText theme={theme}>Create a password</HeaderText>
-        <Text theme={theme}>This is used to unlock your wallet.</Text>
+        <Text style={{ marginBottom: '1rem' }} theme={theme}>
+          This is used to unlock your wallet.
+        </Text>
         <FormContainer onSubmit={handleKeyGeneration}>
           <Input
             theme={theme}
@@ -123,7 +125,7 @@ export const CreateWallet = () => {
             value={passwordConfirm}
             onChange={(e) => setPasswordConfirm(e.target.value)}
           />
-          <Text theme={theme} style={{ margin: '3rem 0 1rem' }}>
+          <Text theme={theme} style={{ margin: '1rem 0 1rem' }}>
             Make sure you are in a safe place and no one is watching.
           </Text>
           <Button theme={theme} type="primary" label="Generate Seed" isSubmit />

src/pages/onboarding/CreateWallet.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 import aymLogo from '../../assets/aym-logo.png';
+import pandaLogoWide from '../../assets/panda-logo-wide.png';
 import relayXLogo from '../../assets/relayx-logo.png';
 import twetchLogo from '../../assets/twetch-logo.png';
 import { BackButton } from '../../components/BackButton';
@@ -65,8 +66,8 @@ const ExpertImportWrapper = styled.div`
 const WalletText = styled(Text)<ColorThemeProps>`
   color: ${({ theme }) => theme.white};
   margin: 0;
-  font-weight: 700;
-  font-size: 1.1rem;
+  font-weight: 600;
+  font-size: 1rem;
   text-align: center;
 `;
 
@@ -137,11 +138,17 @@ export const RestoreWallet = () => {
 
   const handleWalletSelection = (wallet?: SupportedWalletImports) => {
     setImportWallet(wallet);
+    if (wallet === 'wif') {
+      navigate('/import-wallet');
+      return;
+    }
     setStep(2);
   };
 
   const getRestoreTitle = () => {
-    return importWallet === 'relayx'
+    return importWallet === 'panda'
+      ? 'Restore Panda Wallet'
+      : importWallet === 'relayx'
       ? 'Restore Relay Wallet'
       : importWallet === 'twetch'
       ? 'Restore Twetch Wallet'
@@ -249,18 +256,24 @@ export const RestoreWallet = () => {
           onClick={() => handleWalletSelection(wallet)}
           element={
             <>
+              <Show when={wallet === 'panda'}>
+                <WalletLogo src={pandaLogoWide} style={{ height: '2.25rem' }} />
+              </Show>
               <Show when={wallet === 'relayx'}>
-                <WalletLogo src={relayXLogo} />
+                <WalletLogo src={relayXLogo} style={{ height: '1,75rem' }} />
               </Show>
               <Show when={wallet === 'twetch'}>
-                <WalletLogo src={twetchLogo} />
+                <WalletLogo src={twetchLogo} style={{ height: '1.25rem' }} />
               </Show>
               <Show when={wallet === 'aym'}>
                 <WalletLogo src={aymLogo} style={{ height: '2rem' }} />
               </Show>
               <Show when={!wallet}>
                 <WalletText theme={theme}>Other Wallet</WalletText>
               </Show>
+              <Show when={wallet === 'wif'}>
+                <WalletText theme={theme}>WIF (1Sat, SHUA, etc)</WalletText>
+              </Show>
             </>
           }
         />
@@ -272,11 +285,11 @@ export const RestoreWallet = () => {
     <>
       <BackButton onClick={() => navigate('/')} />
       <Content>
-        <HeaderText theme={theme}>Restore from Wallet</HeaderText>
+        <HeaderText theme={theme}>Restore a Wallet</HeaderText>
         <Text theme={theme} style={{ marginBottom: '1rem', width: '90%' }}>
-          Select from a wallet you'd like to restore from.
+          Select the wallet you'd like to restore from
         </Text>
-        {availableWallets(['relayx', 'twetch', 'aym', undefined])}
+        {availableWallets(['panda', 'relayx', 'twetch', 'aym', undefined, 'wif'])}
       </Content>
     </>
   );

src/pages/onboarding/RestoreWallet.tsx

@@ -71,13 +71,6 @@ export const Start = () => {
           </Text>
           <Button theme={theme} type="primary" label="Create New Wallet" onClick={() => navigate('/create-wallet')} />
           <Button theme={theme} type="secondary" label="Restore Wallet" onClick={() => navigate('/restore-wallet')} />
-          <Button
-            theme={theme}
-            type="secondary"
-            label="Import"
-            onClick={() => navigate('/import-wallet')}
-            style={{ margin: '0' }}
-          />
           <GithubIcon
             src={gihubIcon}
             onClick={() => window.open('https://github.com/Panda-Wallet/panda-wallet', '_blank')}