feat/94 - Extension: Storage updates (anoma#97)

* Begin setting up KeyRing & accounts storage

* Adding a simple typed state class to keyring

* Address helper to obtain ImplicitAddress, cargo update

* Continue hooking up KeyRing to services

* Fix broken imports, confirm message works in popup

* Adding msg type for fetch generated mnemonic, update tests

* Beginning components package; get styled-components with theme working

* Disable devtool sourcemapping, add plugin for extension reloading (all browsers)

* Properly include svg assets, port additional components into shared
package

* Fix issue on reloader plugin

* fix module resolution, clean up imports

* Remove unnecessary assignment

* Consolidate types from Keplr into our own

* Validate mnemonic phrase before storing, better error handling in wasm

* Minor clean up, better type State class so as not to instantiate
directly

* Adding mnemonic/password creation screens, added README for types

* Split set-up flow into new tab for initial account

* Begin wiring up account derivation in service, generate implicit address
to store and return

* Add account derivation to completion process, load and display accounts

* Better error-handling, add user feedback on account creation

* Adding AccountListing components

* Clean up configs, layout, fixed bug in key storage

* Improved naming conventions, add implementation for scrypt, tests

* Implement optional custom Scrypt params

* Updated documentation

* Add aes dependency, being basic implementation

* KeyRing state is no longer duplicated, storage is only source of truth

* Add icon for copy to clipboard, additional styling, update styled config

* description -> alias to match cli, clean up

* Adding UI for adding a new derived account with basic validation

* Fix bug where alias is not being saved

* Add "alias" as a field during setup

* Updating for consistency, rough pass at styling derivation form

* Move path items to number, validate inputs, set primes appropriately

* Begin implementing kdf derived key as bytes

* Fix naming on file extension, begin components for password auth

* Add basic login/logout functionality, hook up to service backend

* Clean up effects, check keyring status on auth

* Fix minor bug when locking/unlocking wallet. Switch to numeric input

* Fix sourcemap warning, reuse lock button wrapper, minor style

* Update kdf libs for password hashing, tests, serializing params to
JsValue

* Add serializable struct and associated tests (params + bytes)

* Fix naming convention, create storage type containing params

* Moving storage updates to separate PR

* Adding support for argon2 and scrypt pbkdf hashing

* Cover Scrypt in jest tests

* Clean up

* Remove unused dependencies in this branch

* 2 more dependencies that are unneeded

* Adding dependencies

* Clean up

* Add serialize to key+params (argon2), add tests

* Fix for Cargo

* Improve custom params, add salt as an option

* Initial implementation of AES+Argon2 with related tests

* Clarify naming in jest test

* Update scrypt to accept salt, optional params, similar tests with AES

* Clean up

* Add missing test for scrypt with provided salt, clean up

* Clean up Rust lib, begin to implement encrypt/decrypt in KeyRing

* Add simple Rng mod for generating random bytes

* Touch up TS types

* clean up tests

* Connect KeyRing instance to new storage types, update UI

* Minor styling, match account hierarchy to other wallets

* Improve naming conventions, comments, updated for consistency

* Couple minor fixes that slipped through the cracks

* Minor updates per feedback

* Minor updates per PR feedback

apps/extension/src/App/Accounts/AccountListing.components.ts

@@ -4,13 +4,14 @@ export const AccountListingContainer = styled.div`
   display: flex;
   flex-direction: row;
   width: 100%;
+  font-family: "Space Grotesk", sans-serif;
   background-color: ${(props) => props.theme.colors.utility1.main};
+  font-size: 11px;
   color: ${(props) => props.theme.colors.utility1.main40};
   box-sizing: border-box;
   border: 1px solid ${(props) => props.theme.colors.utility1.main};
   border-radius: 8px;
   box-sizing: border-box;
-  font-size: 10px;
   padding: 4px 8px;
 `;
 
@@ -21,20 +22,25 @@ export const Details = styled.div`
   flex: 3;
 `;
 
+export const DerivationPath = styled.div``;
+
+export const Address = styled.div``;
+
+export const Alias = styled.div`
+  color: ${(props) => props.theme.colors.utility1.main20};
+  font-weight: 500;
+  padding: 4px 0;
+`;
+
 export const Buttons = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
+  align-items: center;
   flex: 1;
 `;
 
-export const DerivationPath = styled.div``;
-
-export const Address = styled.div``;
-
-export const Alias = styled.div``;
-
-export const CopyToClipboard = styled.a`
+export const Button = styled.a`
   text-decoration: underline;
   padding: 5px;
   transition: "1 sec";

apps/extension/src/App/Accounts/AccountListing.tsx

@@ -1,3 +1,4 @@
+import { useNavigate } from "react-router-dom";
 import { Icon, IconName } from "@anoma/components";
 import {
   AccountListingContainer,
@@ -6,43 +7,63 @@ import {
   Details,
   Alias,
   DerivationPath,
-  CopyToClipboard,
+  Button,
 } from "./AccountListing.components";
 
-import { DerivedAccount } from "background/keyring";
+import { Bip44Path, DerivedAccount, KeyStoreType } from "background/keyring";
+import { TopLevelRoute } from "App/types";
 
 type Props = {
+  // The parent Bip44 "account"
+  parent?: number;
+  // The child account
   account: DerivedAccount;
+  parentAlias?: string;
 };
 
 const textToClipboard = (content: string): void => {
   navigator.clipboard.writeText(content);
 };
 
-const AccountListing = ({ account }: Props): JSX.Element => {
-  const { address, alias, bip44Path, establishedAddress } = account;
-  const coinType = "0'";
+const formatDerivationPath = (
+  isChildAccount: boolean,
+  { account, change, index = 0 }: Bip44Path
+): string => (isChildAccount ? `/${account}'/${change}/${index}` : "");
+
+const AccountListing = ({ account, parentAlias }: Props): JSX.Element => {
+  const { address, alias, path, establishedAddress, type } = account;
+  const navigate = useNavigate();
+  const isChildAccount = type !== KeyStoreType.Mnemonic;
 
   return (
     <AccountListingContainer>
       <Details>
-        {alias && <Alias>{alias}</Alias>}
         <DerivationPath>
-          m/44'/{coinType}/{`${bip44Path.account}'`}/{bip44Path.change}/
-          {bip44Path.index}
+          {isChildAccount && parentAlias}{" "}
+          {formatDerivationPath(isChildAccount, path)}
         </DerivationPath>
+        {alias && <Alias>{alias}</Alias>}
         <Address>{address}</Address>
         {establishedAddress && <Address>{establishedAddress}</Address>}
       </Details>
       <Buttons>
-        <CopyToClipboard
+        {type === KeyStoreType.Mnemonic && (
+          <Button
+            onClick={() => {
+              navigate(TopLevelRoute.AddAccount);
+            }}
+          >
+            <Icon iconName={IconName.Plus} />
+          </Button>
+        )}
+        <Button
           onClick={() => {
             textToClipboard(address);
           }}
           href="#"
         >
           <Icon iconName={IconName.Copy} />
-        </CopyToClipboard>
+        </Button>
       </Buttons>
     </AccountListingContainer>
   );

apps/extension/src/App/Accounts/Accounts.components.ts

@@ -4,7 +4,7 @@ export const AccountsContainer = styled.div`
   display: flex;
   flex-direction: column;
   height: 100%;
-  max-height: 400px;
+  max-height: 420px;
   width: 100%;
   box-sizing: border-box;
   padding: 0 8px;
@@ -24,34 +24,6 @@ export const AccountsListItem = styled.li`
   color: ${(props) => props.theme.colors.utility1.main60};
 `;
 
-export const ButtonContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  box-sizing: border-box;
-`;
-
-export const Button = styled.button`
-  display: flex;
-  flex-direction: row;
-  justify-contents: start;
-  align-items: center;
-  cursor: pointer;
-  color: ${(props) => props.theme.colors.utility1.main40};
-  background-color: ${(props) => props.theme.colors.utility1.main};
-  border: 1px solid ${(props) => props.theme.colors.utility1.main};
-  border-radius: 8px;
-
-  & > div > svg > path {
-    fill: ${(props) => props.theme.colors.utility1.main40};
-    stroke: ${(props) => props.theme.colors.utility1.main40};
-  }
-`;
-
-export const ButtonText = styled.span`
-  padding: 8px;
-`;
-
 export const ThemedScrollbarContainer = styled.div`
   overflow-y: auto;
 

apps/extension/src/App/Accounts/Accounts.tsx

@@ -1,15 +1,8 @@
-import { useNavigate } from "react-router-dom";
-import { Icon, IconName } from "@anoma/components";
-
-import { TopLevelRoute } from "App/types";
 import { DerivedAccount } from "background/keyring";
 import {
   AccountsContainer,
   AccountsList,
   AccountsListItem,
-  ButtonContainer,
-  Button,
-  ButtonText,
   ThemedScrollbarContainer,
 } from "./Accounts.components";
 import { AccountListing } from "App/Accounts";
@@ -19,24 +12,19 @@ type Props = {
 };
 
 const Accounts = ({ accounts }: Props): JSX.Element => {
-  const navigate = useNavigate();
+  const parentAccount = accounts[0];
+  const alias = parentAccount?.alias;
 
   return (
     <AccountsContainer>
       <ThemedScrollbarContainer>
         <AccountsList>
           {accounts.map((account) => (
             <AccountsListItem key={`account-${account.id}`}>
-              <AccountListing account={account} />
+              <AccountListing account={account} parentAlias={alias} />
             </AccountsListItem>
           ))}
         </AccountsList>
-        <ButtonContainer>
-          <Button onClick={() => navigate(TopLevelRoute.AddAccount)}>
-            <ButtonText>Derive new account</ButtonText>
-            <Icon iconName={IconName.Plus} />
-          </Button>
-        </ButtonContainer>
       </ThemedScrollbarContainer>
     </AccountsContainer>
   );