forked from anoma/namada
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat/60 - Extension: Account Creation (anoma#71)
* 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 * 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 * Remove unnecessary folders, directly link build to App and Setup * Minor changes per PR feedback * Linting, final bit of PR feedback * Commiting artifacts for legacy @anoma/wasm package, remove from build * Fix e2e tests (don't run wasm:build - it's unnecessary) * Disable unit test workflow on PR push (until we have updated wasm) * Disable reporting on unit tests for now (until building against latest Namada) * Disable unit test reporting for now
- Loading branch information
Showing
162 changed files
with
6,987 additions
and
335 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,3 @@ | ||
| *.css | ||
| *.svg | ||
| webpack.config.js |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
52 changes: 52 additions & 0 deletions
52
apps/extension/src/App/Accounts/AccountListing.components.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import styled from "styled-components"; | ||
|
|
||
| export const AccountListingContainer = styled.div` | ||
| display: flex; | ||
| flex-direction: row; | ||
| width: 100%; | ||
| background-color: ${(props) => props.theme.colors.utility1.main}; | ||
| 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; | ||
| `; | ||
|
|
||
| export const Details = styled.div` | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: flex-start; | ||
| flex: 3; | ||
| `; | ||
|
|
||
| export const Buttons = styled.div` | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: flex-end; | ||
| flex: 1; | ||
| `; | ||
|
|
||
| export const DerivationPath = styled.div``; | ||
|
|
||
| export const Address = styled.div``; | ||
|
|
||
| export const Alias = styled.div``; | ||
|
|
||
| export const CopyToClipboard = styled.a` | ||
| text-decoration: underline; | ||
| padding: 5px; | ||
| transition: "1 sec"; | ||
| border-radius: 4px; | ||
| & > div > svg > path { | ||
| fill: ${(props) => props.theme.colors.utility1.main40}; | ||
| stroke: ${(props) => props.theme.colors.utility1.main40}; | ||
| } | ||
| &:active { | ||
| border: 1px solid ${(props) => props.theme.colors.primary.main}; | ||
| background-color: ${(props) => props.theme.colors.primary.main}; | ||
| } | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| import { Icon, IconName } from "@anoma/components"; | ||
| import { | ||
| AccountListingContainer, | ||
| Address, | ||
| Buttons, | ||
| Details, | ||
| Alias, | ||
| DerivationPath, | ||
| CopyToClipboard, | ||
| } from "./AccountListing.components"; | ||
|
|
||
| import { DerivedAccount } from "background/keyring"; | ||
|
|
||
| type Props = { | ||
| account: DerivedAccount; | ||
| }; | ||
|
|
||
| const textToClipboard = (content: string): void => { | ||
| navigator.clipboard.writeText(content); | ||
| }; | ||
|
|
||
| const AccountListing = ({ account }: Props): JSX.Element => { | ||
| const { address, alias, bip44Path, establishedAddress } = account; | ||
| const coinType = "0'"; | ||
|
|
||
| return ( | ||
| <AccountListingContainer> | ||
| <Details> | ||
| {alias && <Alias>{alias}</Alias>} | ||
| <DerivationPath> | ||
| m/44'/{coinType}/{`${bip44Path.account}'`}/{bip44Path.change}/ | ||
| {bip44Path.index} | ||
| </DerivationPath> | ||
| <Address>{address}</Address> | ||
| {establishedAddress && <Address>{establishedAddress}</Address>} | ||
| </Details> | ||
| <Buttons> | ||
| <CopyToClipboard | ||
| onClick={() => { | ||
| textToClipboard(address); | ||
| }} | ||
| href="#" | ||
| > | ||
| <Icon iconName={IconName.Copy} /> | ||
| </CopyToClipboard> | ||
| </Buttons> | ||
| </AccountListingContainer> | ||
| ); | ||
| }; | ||
|
|
||
| export default AccountListing; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| import styled from "styled-components"; | ||
|
|
||
| export const AccountsContainer = styled.div` | ||
| display: flex; | ||
| flex-direction: column; | ||
| height: 100%; | ||
| width: 100%; | ||
| box-sizing: border-box; | ||
| padding: 0 8px; | ||
| `; | ||
|
|
||
| export const AccountsList = styled.ul` | ||
| list-style-type: none; | ||
| padding: 0; | ||
| margin: 0 0 8px; | ||
| width: 100%; | ||
| `; | ||
|
|
||
| export const AccountsListItem = styled.li` | ||
| padding: 2px 0; | ||
| background-color: ${(props) => props.theme.colors.utility1.main80}; | ||
| 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; | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| 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, | ||
| } from "./Accounts.components"; | ||
| import { AccountListing } from "App/Accounts"; | ||
|
|
||
| type Props = { | ||
| accounts: DerivedAccount[]; | ||
| }; | ||
|
|
||
| const Accounts = ({ accounts }: Props): JSX.Element => { | ||
| const navigate = useNavigate(); | ||
|
|
||
| return ( | ||
| <AccountsContainer> | ||
| <AccountsList> | ||
| {accounts.map((account) => ( | ||
| <AccountsListItem key={`account-${account.id}`}> | ||
| <AccountListing account={account} /> | ||
| </AccountsListItem> | ||
| ))} | ||
| </AccountsList> | ||
| <ButtonContainer> | ||
| <Button onClick={() => navigate(TopLevelRoute.WalletAddAccount)}> | ||
| <ButtonText>Derive new account</ButtonText> | ||
| <Icon iconName={IconName.Plus} /> | ||
| </Button> | ||
| </ButtonContainer> | ||
| </AccountsContainer> | ||
| ); | ||
| }; | ||
|
|
||
| export default Accounts; |
Oops, something went wrong.