Merge branch 'main' into fork-demo

.eslintrc.js

@@ -1,5 +1,12 @@
 // This is a non-ESM JS file, so this rule can't be followed.
 /* eslint-disable @typescript-eslint/no-var-requires */
+const {
+  rules: {
+    "@typescript-eslint/naming-convention":
+      airbnbTypeScriptNamingConventionRules,
+  },
+} = require("eslint-config-airbnb-typescript/lib/shared")
+
 const {
   rules: { "no-param-reassign": airbnbNoParamReassignRules },
 } = require("eslint-config-airbnb-base/rules/best-practices")
@@ -28,6 +35,22 @@ module.exports = {
     // The rule is also mostly irrelevant to this codebase due to TypeScript
     // usage (where .tsx is required).
     "react/jsx-filename-extension": [0],
+    "@typescript-eslint/naming-convention": [
+      ...airbnbTypeScriptNamingConventionRules,
+      // Allow underscore-only identifiers to indicate ignored positional variables.
+      {
+        selector: "variable",
+        format: null,
+        filter: {
+          regex: "^_+$",
+          match: true,
+        },
+        custom: {
+          regex: "^_+$",
+          match: true,
+        },
+      },
+    ],
     // TypeScript allows us to declare props that are non-optional internally
     // but are interpreted as optional externally if they have defaultProps
     // defined; the following two adjustments disable eslint-plugin-react

background/redux-slices/accounts.ts

@@ -17,7 +17,7 @@ export const enum AccountType {
   ReadOnly = "read-only",
   Imported = "imported",
   Ledger = "ledger",
-  NewSeed = "newSeed",
+  Internal = "internal",
 }
 
 const availableDefaultNames = [

background/redux-slices/keyrings.ts

@@ -7,7 +7,7 @@ import { Keyring, KeyringMetadata } from "../services/keyring/index"
 
 type KeyringsState = {
   keyrings: Keyring[]
-  keyringMetadata: { [keyringId: string]: { source: "import" | "newSeed" } }
+  keyringMetadata: { [keyringId: string]: { source: "import" | "internal" } }
   importing: false | "pending" | "done"
   status: "locked" | "unlocked" | "uninitialized"
   keyringToVerify: {
@@ -36,7 +36,7 @@ export const emitter = new Emittery<Events>()
 
 interface ImportKeyring {
   mnemonic: string
-  source: "newSeed" | "import"
+  source: "internal" | "import"
   path?: string
 }
 

background/redux-slices/selectors/accountsSelectors.ts

@@ -196,7 +196,7 @@ const getAccountType = (
   address: string,
   signingMethod: SigningMethod,
   addressSources: {
-    [address: string]: "import" | "newSeed"
+    [address: string]: "import" | "internal"
   }
 ): AccountType => {
   if (signingMethod == null) {
@@ -208,7 +208,7 @@ const getAccountType = (
   if (addressSources[address] === "import") {
     return AccountType.Imported
   }
-  return AccountType.NewSeed
+  return AccountType.Internal
 }
 
 export const selectAccountTotalsByCategory = createSelector(

background/redux-slices/selectors/keyringsSelectors.ts

@@ -33,7 +33,7 @@ export const selectSourcesByAddress = createSelector(
     keyrings,
     keyringMetadata
   ): {
-    [keyringId: string]: "import" | "newSeed"
+    [keyringId: string]: "import" | "internal"
   } =>
     Object.fromEntries(
       keyrings

background/services/keyring/index.ts

@@ -35,7 +35,7 @@ export type Keyring = {
 }
 
 export interface KeyringMetadata {
-  source: "import" | "newSeed"
+  source: "import" | "internal"
 }
 
 interface SerializedKeyringData {
@@ -311,7 +311,7 @@ export default class KeyringService extends BaseService<Events> {
    */
   async importKeyring(
     mnemonic: string,
-    source: "import" | "newSeed",
+    source: "import" | "internal",
     path?: string
   ): Promise<string> {
     this.requireUnlocked()

provider-bridge-shared/runtime-typechecks.ts

@@ -62,10 +62,10 @@ export function isPortResponseEvent(arg: unknown): arg is PortResponseEvent {
 }
 
 export const AllowedQueryParamPage = {
-  signTransaction: "/signTransaction",
-  dappPermission: "/dappPermission",
-  signData: "/signData",
-  personalSignData: "/personalSign",
+  signTransaction: "/sign-transaction",
+  dappPermission: "/dapp-permission",
+  signData: "/sign-data",
+  personalSignData: "/personal-sign",
 } as const
 
 export type AllowedQueryParamPageType =

ui/components/AccountsNotificationPanel/AccountsNotificationPanelAccounts.tsx

@@ -32,7 +32,7 @@ const walletTypeDetails: { [key in AccountType]: WalletTypeInfo } = {
     title: "Import",
     icon: "./images/[email protected]",
   },
-  [AccountType.NewSeed]: {
+  [AccountType.Internal]: {
     title: "Tally",
     icon: "./images/[email protected]", // FIXME: Icon is cut off - we should get a better one
   },
@@ -171,7 +171,7 @@ export default function AccountsNotificationPanelAccounts({
   }, [onCurrentAddressChange, pendingSelectedAddress, selectedAccountAddress])
 
   const accountTypes = [
-    AccountType.NewSeed,
+    AccountType.Internal,
     AccountType.Imported,
     AccountType.ReadOnly,
   ]
@@ -211,7 +211,7 @@ export default function AccountsNotificationPanelAccounts({
                     accountType={accountType}
                     walletNumber={idx + 1}
                     onClickAddAddress={
-                      accountType === "imported" || accountType === "newSeed"
+                      accountType === "imported" || accountType === "internal"
                         ? () => {
                             if (accountTotalsByKeyringId[0].keyringId) {
                               dispatch(
@@ -261,7 +261,7 @@ export default function AccountsNotificationPanelAccounts({
           icon="plus"
           iconSize="medium"
           iconPosition="left"
-          linkTo="/onboarding/addWallet"
+          linkTo="/onboarding/add-wallet"
         >
           Add Wallet
         </SharedButton>

ui/components/HiddenDevPanel/HiddenDevPanel.tsx

@@ -15,7 +15,7 @@ export default function HiddenDevPanel(): ReactElement {
           icon="arrow_right"
           iconSize="large"
           onClick={() => {
-            history.push("/onboarding/infoIntro")
+            history.push("/onboarding/info-intro")
           }}
         >
           Enter Onboarding

ui/components/Onboarding/OnboardingDerivationPathSelect.tsx

@@ -11,7 +11,14 @@ import SharedModal from "../Shared/SharedModal"
 import SharedSelect from "../Shared/SharedSelect"
 
 // TODO make this network specific
-const initialDerivationPaths: { value: string; label: string }[] = [
+const initialDerivationPaths: {
+  value: string
+  label: string
+}[] = [
+  {
+    value: "m/44'/60'/x'/0/0",
+    label: "Ledger Live",
+  },
   {
     value: "m/44'/60'/0'/0",
     label: "Ethereum",

ui/components/Shared/SharedAssetInput.tsx

@@ -125,7 +125,7 @@ function SelectAssetMenuContent<T extends AnyAsset>(
         </div>
       </div>
       <div className="divider" />
-      <ul>
+      <ul className="assets_list">
         {sortedFilteredAssets.map((assetWithOptionalAmount) => {
           const { asset } = assetWithOptionalAmount
           return (
@@ -180,7 +180,12 @@ function SelectAssetMenuContent<T extends AnyAsset>(
             width: 384px;
             border-bottom: 1px solid var(--hunter-green);
             margin-top: 15px;
-            margin-bottom: 8.5px;
+          }
+          .assets_list {
+            display: block;
+            overflow: scroll;
+            height: calc(100% - 98px);
+            width: 100%;
           }
         `}
       </style>

ui/components/Swap/SwapQuote.tsx

@@ -63,7 +63,7 @@ export default function SwapQuote({
           gasPrice,
       })
     )
-    history.push("/signTransaction")
+    history.push("/sign-transaction")
   }, [
     finalQuote,
     dispatch,

ui/pages/EarnDeposit.tsx

@@ -178,7 +178,7 @@ export default function EarnDeposit(): ReactElement {
                 type="primary"
                 size="large"
                 isDisabled={hasError}
-                linkTo={!isApproved ? "/signTransaction" : "/signData"}
+                linkTo={!isApproved ? "/sign-transaction" : "/sign-data"}
                 onClick={!isApproved ? approve : enable}
               >
                 {!isApproved ? "Approve" : "Enable"}

ui/pages/Ledger/LedgerImportAccounts.tsx

@@ -35,7 +35,12 @@ function usePageData({
   const firstIndex = pageIndex * addressesPerPage
   const lastIndex = (pageIndex + 1) * addressesPerPage - 1
   for (let i = firstIndex; i <= lastIndex; i += 1) {
-    paths.push(`${parentPath}/${i}`)
+    if (parentPath.includes("x")) {
+      const formattedString = parentPath.slice().replace("x", `${i}`)
+      paths.push(formattedString)
+    } else {
+      paths.push(`${parentPath}/${i}`)
+    }
   }
 
   const items = paths.map((path) => {

ui/pages/Onboarding/OnboardingAddWallet.tsx

@@ -26,7 +26,7 @@ export default function OnboardingStartTheHunt(): ReactElement {
           <SharedButton
             type="tertiary"
             size="medium"
-            linkTo="/onboarding/viewOnlyWallet"
+            linkTo="/onboarding/view-only-wallet"
           >
             Preview an address
           </SharedButton>
@@ -39,7 +39,7 @@ export default function OnboardingStartTheHunt(): ReactElement {
             <SharedButton
               type="tertiary"
               size="medium"
-              linkTo="/onboarding/importMetamask"
+              linkTo="/onboarding/import-metamask"
             >
               Import recovery phrase
             </SharedButton>
@@ -70,7 +70,7 @@ export default function OnboardingStartTheHunt(): ReactElement {
               <SharedButton
                 type="secondary"
                 size="medium"
-                linkTo="/onboarding/onboardingInterstitialCreatePhrase"
+                linkTo="/onboarding/onboarding-interstitial-create-phrase"
               >
                 Create new wallet
               </SharedButton>

ui/pages/Onboarding/OnboardingInfoIntro.tsx

@@ -55,7 +55,7 @@ export default function OnboardingInfoIntro(): ReactElement {
   const [redirectToAddWallet, setRedirectToAddWallet] = useState(false)
 
   if (redirectToAddWallet) {
-    return <Redirect push to="/onboarding/addWallet" />
+    return <Redirect push to="/onboarding/add-wallet" />
   }
 
   return (

ui/pages/Onboarding/OnboardingInterstitialCreatePhrase.tsx

@@ -13,7 +13,7 @@ export default function OnboardingInterstitialCreatePhrase(): ReactElement {
     async function generateThenContinue() {
       if (areKeyringsUnlocked) {
         await dispatch(generateNewKeyring())
-        history.push("/onboarding/saveSeed")
+        history.push("/onboarding/save-seed")
       }
     },
     [areKeyringsUnlocked, dispatch, history]

ui/pages/Onboarding/OnboardingSaveSeed.tsx

@@ -60,7 +60,7 @@ export default function OnboardingSaveSeed(): ReactElement {
           size="medium"
           icon="arrow_right"
           iconSize="large"
-          linkTo="/onboarding/verifySeed"
+          linkTo="/onboarding/verify-seed"
         >
           I wrote it down
         </SharedButton>

ui/pages/Onboarding/OnboardingVerifySeed.tsx

@@ -20,7 +20,10 @@ function SuccessMessage({ mnemonic }: { mnemonic: string[] }) {
           type="primary"
           onClick={async () => {
             await dispatch(
-              importKeyring({ mnemonic: mnemonic.join(" "), source: "newSeed" })
+              importKeyring({
+                mnemonic: mnemonic.join(" "),
+                source: "internal",
+              })
             )
             history.push("/")
           }}

ui/pages/Popup.tsx

@@ -73,7 +73,7 @@ export function Main(): ReactElement {
   function saveHistoryEntries(routeHistoryEntities: Location[]) {
     const isNotOnKeyringRelatedPage =
       routeHistoryEntities[routeHistoryEntities.length - 1].pathname !==
-        "/signTransaction" &&
+        "/sign-transaction" &&
       !routeHistoryEntities[routeHistoryEntities.length - 1].pathname.includes(
         "/keyring/"
       )
@@ -187,12 +187,6 @@ export function Main(): ReactElement {
       <>
         <style jsx global>
           {`
-            body {
-              width: 384px;
-              height: 594px;
-              scrollbar-width: none;
-            }
-
             ::-webkit-scrollbar {
               width: 0px;
               background: transparent;

ui/pages/Send.tsx

@@ -174,7 +174,7 @@ export default function Send(): ReactElement {
                 hasError
               }
               linkTo={{
-                pathname: "/signTransaction",
+                pathname: "/sign-transaction",
                 state: {
                   redirectTo: {
                     path: "/singleAsset",

ui/pages/Swap.tsx

@@ -239,7 +239,7 @@ export default function Swap(): ReactElement {
       })
     )
 
-    history.push("/signTransaction")
+    history.push("/sign-transaction")
   }
 
   const updateSwapData = useCallback(

ui/pages/Wallet.tsx

@@ -35,7 +35,7 @@ export default function Wallet(): ReactElement {
 
   // If an account doesn't exist, display onboarding
   if (!hasAccounts) {
-    return <Redirect to="/onboarding/infoIntro" />
+    return <Redirect to="/onboarding/info-intro" />
   }
 
   return (

ui/public/index.css

@@ -46,6 +46,12 @@ body {
   background-color: var(--hunter-green);
 }
 
+body.popup {
+  width: 384px;
+  height: 594px;
+  scrollbar-width: none;
+}
+
 a {
   text-decoration: none;
 }
@@ -132,4 +138,3 @@ label {
   opacity: 60%;
   background-color: var(--green-120);
 }
-

ui/public/popup.html

@@ -5,7 +5,7 @@
     <link rel="stylesheet" href="./fonts.css" />
     <link rel="stylesheet" href="./index.css" />
   </head>
-  <body>
+  <body class="popup">
     <div id="tally-root" />
     <script src="../ui.js" type="text/javascript"></script>
   </body>