TW-1448: "Welcome" page and "Create wallet" flow (#1146)

* TW-1448 Redesign 'Create account' page * TW-1448 Add a flow for seed phrase verification * TW-1448 Refactor and fix some bugs * TW-1448 Use a new flow for creating other HD wallets * TW-1448 Remove unused imports * TW-1448 Some bugfixes * TW-1448 Fix buttons labels * TW-1448 Fix some UI/UX bugs + refactor changes * TW-1448 Additonal refactoring * TW-1448 Move some links to a config file * TW-1448 Refactoring according to comments * TW-1448 Refactoring according to comments * TW-1448 Fix possible undefined box size * TW-1448 Revert excessive changes
madfish-solutions · Jun 10, 2024 · 5ed8737 · 5ed8737
1 parent 738e23c
commit 5ed8737
Show file tree

Hide file tree

Showing 164 changed files with 2,460 additions and 1,790 deletions.
diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
@@ -298,14 +298,14 @@
   "advancedUser": {
     "message": "I'm an advanced user"
   },
-  "analytics": {
-    "message": "Analytics"
+  "usageAnalytics": {
+    "message": "Usage Analytics"
   },
   "analyticsCollecting": {
     "message": "anonymous information collecting"
   },
   "analyticsInputDescription": {
-    "message": "I agree to the $analyticsLink$",
+    "message": "By pressing this button you are agree to the $analyticsLink$",
     "placeholders": {
       "analyticsLink": {
         "content": "$1"
@@ -621,6 +621,21 @@
   "requirements": {
     "message": "Requirements:"
   },
+  "eightCharacters": {
+    "message": "8 characters"
+  },
+  "atLeastOneNumber": {
+    "message": "At least one number"
+  },
+  "specialCharacter": {
+    "message": "Special character"
+  },
+  "atLeastOneLowercase": {
+    "message": "At least one lowercase letter"
+  },
+  "atLeastOneCapital": {
+    "message": "At least one capital letter"
+  },
   "atLeast8Characters": {
     "message": "At least 8 characters - the more characters, the better."
   },
@@ -756,6 +771,12 @@
   "createNewWallet": {
     "message": "Create a new Wallet"
   },
+  "welcomeQuote": {
+    "message": "“The only function of economic forecasting is\nto make astrology look more respectable.”"
+  },
+  "welcomeQuoteAuthor": {
+    "message": "© John Kenneth Galbraith"
+  },
   "createNewWalletDescription": {
     "message": "New to Temple Wallet? Let's set it up! This will create a new wallet and seed phrase"
   },
@@ -886,9 +907,15 @@
     "message": "Processing..."
   },
   "importWallet": {
-    "message": "Import Your Wallet"
+    "message": "Import Wallet"
   },
   "createWallet": {
+    "message": "Create Wallet"
+  },
+  "importYourWallet": {
+    "message": "Import Your Wallet"
+  },
+  "createYourWallet": {
     "message": "Create Your Wallet"
   },
   "errorImportingKukaiWallet": {
@@ -999,6 +1026,12 @@
     "message": "Connect Ledger",
     "description": "Ledger = https://www.ledger.com/"
   },
+  "continueWithGoogleDrive": {
+    "message": "Continue with Google Drive"
+  },
+  "or": {
+    "message": "or"
+  },
   "importExistingWallet": {
     "message": "Import existing Wallet"
   },
@@ -2888,6 +2921,20 @@
   "sellDetailsDescription": {
     "message": "Sell TEZ to fiat. Get fiat to Visa, Mastercard cards."
   },
+  "twTermsAndPrivacyLinks": {
+    "message": "By pressing $buttonContent$ you agree with the $termsOfUse$ and $privacyPolicy$",
+    "placeholders": {
+      "buttonContent": {
+        "content": "$1"
+      },
+      "termsOfUse": {
+        "content": "$2"
+      },
+      "privacyPolicy": {
+        "content": "$3"
+      }
+    }
+  },
   "privacyAndPolicyLinks": {
     "message": "By clicking $buttonContent$ you agree with \n$termsOfUse$ and $privacyPolicy$",
     "placeholders": {
@@ -3181,13 +3228,78 @@
   "selectedAccountCannotSignTx": { "message": "Selected account cannot sign transactions" },
   "attributes": { "message": "Attributes" },
   "properties": { "message": "Properties" },
-  "viewAds": {
-    "message": "View Ads"
+  "earnRewardsWithAds": {
+    "message": "Earn Rewards with Ads"
   },
-  "viewAdsDescription": {
-    "message": "I agree to share data(wallet address, IP) and get cashback at Temple Keys for viewing ads"
+  "earnRewardsWithAdsDescription": {
+    "message": "By enabling this checkbox, you agree to share your wallet address and IP to receive ads and rewards in TKEY token."
   },
   "dropdownNoItems": {
     "message": "No items"
+  },
+  "backupYourWallet": {
+    "message": "Backup your wallet"
+  },
+  "backupWalletDescription": {
+    "message": "Save access to your wallet using backup"
+  },
+  "useGoogleDrive": {
+    "message": "Use Google Drive"
+  },
+  "backupManually": {
+    "message": "Backup Manually"
+  },
+  "backupYourSeedPhrase": {
+    "message": "Backup your Seed Phrase"
+  },
+  "notedSeedPhraseDown": {
+    "message": "I’ve noted it down"
+  },
+  "manualBackupWarning": {
+    "message": "Note down your seed phrase and keep it safe. Write the words in order and keep them stored safely. $neverShareSeedPhrase$ or $enterSeedPhrase$ it into any apps.",
+    "placeholders": {
+      "neverShareSeedPhrase": {
+        "content": "$1"
+      },
+      "enterSeedPhrase": {
+        "content": "$2"
+      }
+    }
+  },
+  "neverShareSeedPhrase": {
+    "message": "Never share"
+  },
+  "enterSeedPhrase": {
+    "message": "enter"
+  },
+  "copyMnemonic": {
+    "message": "Copy"
+  },
+  "verifySeedPhraseInputTitle": {
+    "message": "Fill the fields to verify your seed backup"
+  },
+  "verifySeedPhraseInputDescription": {
+    "message": "Arrange words correctly in the order your seed phrase display them"
+  },
+  "wordsBoxLabel": {
+    "message": "Pick the words you need"
+  },
+  "verifySeedPhraseError": {
+    "message": "Wrong combination. Try again."
+  },
+  "backupSuccessful": {
+    "message": "You successfully backed up your wallet"
+  },
+  "walletCreatedSuccessfully": {
+    "message": "Wallet has been created successfully"
+  },
+  "failedToLoadMnemonic": {
+    "message": "Failed to load mnemonic to backup, please try again"
+  },
+  "createPassword": {
+    "message": "Create Password"
+  },
+  "enterYourPassword": {
+    "message": "Enter your password"
   }
 }
diff --git a/public/_locales/en_GB/messages.json b/public/_locales/en_GB/messages.json
@@ -1799,11 +1799,5 @@
   },
   "unknownError": {
     "message": "Unknown error"
-  },
-  "viewAds": {
-    "message": "View Ads"
-  },
-  "viewAdsDescription": {
-    "message": "I agree to share data(wallet address, IP) and get cashback at Temple Keys for viewing ads"
   }
 }
diff --git a/src/app/PageRouter.tsx b/src/app/PageRouter.tsx
@@ -14,7 +14,6 @@ import Home from 'app/pages/Home/Home';
 import ImportAccount from 'app/pages/ImportAccount';
 import ManageAssets from 'app/pages/ManageAssets';
 import { CreateAnotherWallet } from 'app/pages/NewWallet/CreateAnotherWallet';
-import { CreateWallet } from 'app/pages/NewWallet/CreateWallet';
 import { ImportWallet } from 'app/pages/NewWallet/ImportWallet';
 import AttentionPage from 'app/pages/Onboarding/pages/AttentionPage';
 import Receive from 'app/pages/Receive/Receive';
@@ -77,7 +76,6 @@ const ROUTE_MAP = Woozie.createMap<RouteContext>([
     '/explore/:tezosChainId?/:assetSlug?',
     onlyReady(({ tezosChainId, assetSlug }) => <Home tezosChainId={tezosChainId} assetSlug={assetSlug} />)
   ],
-  ['/create-wallet', onlyNotReady(() => <CreateWallet />)],
   ['/create-another-wallet', onlyReady(() => <CreateAnotherWallet />)],
   ['/import-account/:tabSlug?', onlyReady(({ tabSlug }) => <ImportAccount tabSlug={tabSlug} />)],
   ['/connect-ledger', onlyReady(onlyInFullPage(() => <ConnectLedger />))],
@@ -143,10 +141,6 @@ function onlyReady(factory: RouteFactory): RouteFactory {
   return (params, ctx) => (ctx.ready ? factory(params, ctx) : Woozie.SKIP);
 }
 
-function onlyNotReady(factory: RouteFactory): RouteFactory {
-  return (params, ctx) => (ctx.ready ? Woozie.SKIP : factory(params, ctx));
-}
-
 function onlyInFullPage(factory: RouteFactory): RouteFactory {
   return (params, ctx) => (!ctx.fullPage ? <OpenInFullPage /> : factory(params, ctx));
 }
diff --git a/src/app/atoms/ActionListItem.tsx b/src/app/atoms/ActionListItem.tsx
@@ -34,7 +34,7 @@ export const ActionListItem = memo<ActionListItemProps>(
         : onClick,
       children: (
         <>
-          {Icon && <IconBase Icon={Icon} size={16} className={danger ? 'text-text-error' : 'text-secondary'} />}
+          {Icon && <IconBase Icon={Icon} size={16} className={danger ? 'text-error' : 'text-secondary'} />}
 
           {children}
         </>

diff --git a/src/app/atoms/Alert.tsx b/src/app/atoms/Alert.tsx
@@ -1,20 +1,42 @@
 import React, { FC, HTMLAttributes, ReactNode, useEffect, useRef } from 'react';
 
-import classNames from 'clsx';
+import clsx from 'clsx';
 
-import { ReactComponent as CloseIcon } from 'app/icons/close.svg';
+import { ReactComponent as CloseIcon } from 'app/icons/base/x.svg';
+import { ReactComponent as ErrorIcon } from 'app/icons/typed-msg/error.svg';
+import { ReactComponent as InfoIcon } from 'app/icons/typed-msg/info.svg';
+import { ReactComponent as SuccessIcon } from 'app/icons/typed-msg/success.svg';
+import { ReactComponent as WarningIcon } from 'app/icons/typed-msg/warning.svg';
 import { setAnotherSelector, setTestID } from 'lib/analytics';
 import { t } from 'lib/i18n';
 
 import { AlertSelectors } from './Alert.selectors';
 
+type AlertType = 'success' | 'warning' | 'error' | 'delegate' | 'info';
+
 type AlertProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {
-  type?: 'success' | 'warning' | 'error' | 'delegate';
+  type?: AlertType;
   title?: ReactNode;
   description: ReactNode;
   autoFocus?: boolean;
   closable?: boolean;
-  onClose?: () => void;
+  onClose?: EmptyFn;
+};
+
+const backgroundClassNames: Record<AlertType, string> = {
+  success: 'bg-success-low',
+  warning: 'bg-warning-low',
+  error: 'bg-error-low',
+  delegate: 'bg-secondary-low',
+  info: 'bg-secondary-low'
+};
+
+const icons: Record<AlertType, ImportedSVGComponent | undefined> = {
+  success: SuccessIcon,
+  warning: WarningIcon,
+  error: ErrorIcon,
+  delegate: undefined,
+  info: InfoIcon
 };
 
 export const Alert: FC<AlertProps> = ({
@@ -28,62 +50,51 @@ export const Alert: FC<AlertProps> = ({
   ...rest
 }) => {
   const ref = useRef<HTMLDivElement>(null);
+  const Icon = icons[type];
+
+  const descriptionElement = (
+    <div
+      className="text-font-description flex-1 max-h-32 break-words overflow-y-auto"
+      {...setTestID(AlertSelectors.alertDescription)}
+    >
+      {description}
+    </div>
+  );
 
   useEffect(() => {
     if (autoFocus) {
       ref.current?.focus();
     }
   }, [autoFocus]);
 
-  const [bgColorClassName, borderColorClassName, textColorClassName, titleColorClassName] = (() => {
-    switch (type) {
-      case 'success':
-        return ['bg-green-100', 'border-green-400', 'text-green-700', 'text-green-700'];
-      case 'warning':
-        return ['bg-yellow-100', 'border-yellow-400', 'text-yellow-700', 'text-yellow-700'];
-      case 'error':
-        return ['bg-red-100', 'border-red-400', 'text-red-700', 'text-red-700'];
-      case 'delegate':
-        return ['bg-blue-150', 'border-blue-500', 'text-blue-750', 'text-blue-500'];
-    }
-  })();
-
   return (
     <div
       ref={ref}
-      className={classNames(
-        'relative w-full px-4 pt-3',
-        bgColorClassName,
-        'border',
-        borderColorClassName,
-        'rounded-md',
-        className
-      )}
+      className={clsx('relative w-full p-3 rounded-md', backgroundClassNames[type], className)}
       tabIndex={-1}
       role="alert"
       aria-label={t('alert')}
       {...rest}
     >
       {title && (
         <h2
-          className={classNames('mb-1 text-lg font-semibold', titleColorClassName)}
+          className="mb-1 text-lg font-semibold"
           {...setTestID(AlertSelectors.alertTitle)}
           {...setAnotherSelector('type', type)}
         >
           {title}
         </h2>
       )}
-      {description && (
-        <div
-          className={classNames('pb-3 text-sm max-h-32 font-light break-words overflow-y-auto', textColorClassName)}
-          {...setTestID(AlertSelectors.alertDescription)}
-        >
-          {description}
+      {description && !Icon && descriptionElement}
+      {description && Icon && (
+        <div className="w-full flex items-start gap-x-1">
+          <Icon className="w-6 h-auto" />
+          {descriptionElement}
         </div>
       )}
       {closable && (
         <button className="absolute top-3 right-3" onClick={onClose} type="button">
-          <CloseIcon className="w-auto h-5 stroke-current" style={{ strokeWidth: 2 }} />
+          <CloseIcon className="w-auto h-5 stroke-current" />
         </button>
       )}
     </div>

diff --git a/src/app/atoms/AssetField.tsx b/src/app/atoms/AssetField.tsx
@@ -93,7 +93,7 @@ const AssetField = forwardRef<HTMLInputElement, AssetFieldProps>(
         onChange={handleChange}
         onFocus={handleFocus}
         onBlur={handleBlur}
-        extraInner={assetSymbol}
+        extraRightInner={assetSymbol}
         {...rest}
       />
     );