TW-1360: [EVM] Home page design

README.md

@@ -1,4 +1,4 @@
-# Temple - Tezos Wallet
+# Temple Wallet
 
 Cryptocurrency wallet for [Tezos blockchain](https://tezos.com) as Web Extension for your Browser.<br>
 Providing ability to manage NFT, tez tokens and interact with dApps.

package.json

@@ -40,6 +40,7 @@
     "@dicebear/avatars-jdenticon-sprites": "4.2.5",
     "@firebase/app": "^0.10.1",
     "@firebase/messaging": "^0.12.8",
+    "@fontsource/rubik": "^5.0.20",
     "@google/model-viewer": "3.1.1",
     "@hypelab/sdk-react": "^1.0.3",
     "@jitsu/sdk-js": "madfish-solutions/jitsu-js#87c49de334f5747952f7beda573b95ceb5d86903",
@@ -56,7 +57,7 @@
     "@redux-devtools/remote": "^0.8.0",
     "@reduxjs/toolkit": "^1.8.5",
     "@rnw-community/shared": "^0.48.0",
-    "@svgr/webpack": "6.4.0",
+    "@svgr/webpack": "^8",
     "@taquito/ledger-signer": "19.0.2",
     "@taquito/local-forging": "19.0.2",
     "@taquito/michel-codec": "19.0.2",
@@ -81,6 +82,7 @@
     "@types/elliptic": "6.4.14",
     "@types/fontfaceobserver": "0.0.6",
     "@types/jest": "27.0.3",
+    "@types/jsx-ast-utils": "^3.3.1",
     "@types/ledgerhq__hw-transport": "4.21.3",
     "@types/ledgerhq__hw-transport-u2f": "4.21.2",
     "@types/libsodium-wrappers": "0.7.8",
@@ -107,7 +109,7 @@
     "assert": "1.5.0",
     "async-mutex": "^0.4.0",
     "async-retry": "1.3.3",
-    "autoprefixer": "10.4.2",
+    "autoprefixer": "^10",
     "axios": "0.26.1",
     "bignumber.js": "9.1.0",
     "bip39": "3.0.4",
@@ -120,8 +122,8 @@
     "create-file-webpack": "^1.0.2",
     "cross-env": "7.0.3",
     "crypto-browserify": "3.12.0",
-    "css-loader": "6.7.1",
-    "css-minimizer-webpack-plugin": "^4.2.1",
+    "css-loader": "^7",
+    "css-minimizer-webpack-plugin": "^6",
     "currency-codes": "^2.1.0",
     "date-fns": "2.15.0",
     "debounce": "^1.2.1",
@@ -140,14 +142,14 @@
     "eslint-plugin-react-hooks": "^4",
     "eslint-webpack-plugin": "^4",
     "fast-glob": "^3.2.12",
-    "file-loader": "6.2.0",
     "fontfaceobserver": "2.1.0",
     "fuse.js": "6.4.6",
     "graphql": "^16.6.0",
     "graphql-request": "^6.1.0",
     "html-webpack-plugin": "^5.5.0",
     "inter-ui": "3.13.1",
     "jest": "27.4.5",
+    "jsx-ast-utils": "^3",
     "libsodium": "0.7.8",
     "libsodium-wrappers": "0.7.8",
     "lodash": "4.17.21",
@@ -157,10 +159,10 @@
     "node-forge": "^1.3.1",
     "npm-run-all": "^4.1.5",
     "path-browserify": "1.0.1",
-    "postcss": "8.4.17",
-    "postcss-flexbugs-fixes": "5.0.2",
-    "postcss-loader": "4.3.0",
-    "postcss-preset-env": "7.3.3",
+    "postcss": "^8",
+    "postcss-flexbugs-fixes": "^5",
+    "postcss-loader": "^8",
+    "postcss-preset-env": "^9",
     "prettier": "^2.7.1",
     "process": "^0.11.10",
     "qs": "^6.11.1",
@@ -170,9 +172,10 @@
     "react-dev-utils": "^12",
     "react-dom": "18.2.0",
     "react-hook-form": "5.3.1",
+    "react-hot-toast": "^2.4.1",
     "react-infinite-scroll-component": "^6.1.0",
     "react-json-view": "1.21.3",
-    "react-modal": "3.15.1",
+    "react-modal": "^3",
     "react-qr-svg": "2.2.2",
     "react-redux": "^8.0.2",
     "react-text-mask": "^5.5.0",
@@ -185,7 +188,7 @@
     "scryptsy": "2.1.0",
     "stream-browserify": "3.0.0",
     "swr": "2.2.4",
-    "tailwindcss": "2.2.19",
+    "tailwindcss": "^3",
     "terser-webpack-plugin": "^5",
     "three": "^0.151.2",
     "timers-browserify": "^2.0.12",

public/_locales/de/messages.json

@@ -1,6 +1,6 @@
 {
   "appName": {
-    "message": "Temple - Tezos Wallet"
+    "message": "Temple Wallet"
   },
   "showIncomingTransactions": {
     "message": "Eingehende Transaktionen anzeigen"

public/_locales/en/messages.json

@@ -1,6 +1,6 @@
 {
   "appName": {
-    "message": "Temple - Tezos Wallet"
+    "message": "Temple Wallet"
   },
   "showIncomingTransactions": {
     "message": "Show Incoming Transactions"
@@ -41,7 +41,7 @@
     "message": "Open new tab"
   },
   "maximiseView": {
-    "message": "Maximize view"
+    "message": "View Full Screen"
   },
   "selectFile": {
     "message": "Select file"
@@ -2245,6 +2245,9 @@
   "social": {
     "message": "Social"
   },
+  "market": {
+    "message": "Market"
+  },
   "marketplace": {
     "message": "Marketplace"
   },
@@ -2853,9 +2856,6 @@
   "topUpCrypto": {
     "message": "Crypto"
   },
-  "topUpDebit": {
-    "message": "Debit/Credit Card"
-  },
   "overdueTransaction": {
     "message": "Transaction is overdue"
   },

public/_locales/en_GB/messages.json

@@ -1,6 +1,6 @@
 {
   "appName": {
-    "message": "Temple - Tezos Wallet"
+    "message": "Temple Wallet"
   },
   "showIncomingTransactions": {
     "message": "Show Incoming Transactions"
@@ -30,7 +30,7 @@
     "message": "Open new tab"
   },
   "maximiseView": {
-    "message": "Maximise view"
+    "message": "View Full Screen"
   },
   "selectFileOfFormat": {
     "message": "Select $format$ file",

public/_locales/tr/messages.json

@@ -1,6 +1,6 @@
 {
   "appName": {
-    "message": "Temple - Tezos Wallet"
+    "message": "Temple Wallet"
   },
   "showIncomingTransactions": {
     "message": "Gelen İşlemleri Göster"

public/_locales/uk/messages.json

@@ -1,6 +1,6 @@
 {
   "appName": {
-    "message": "Temple - Tezos Wallet"
+    "message": "Temple Wallet"
   },
   "showIncomingTransactions": {
     "message": "Показати вхідні транзакції"

public/confirm.html

@@ -6,7 +6,7 @@
     <link rel="shortcut icon" href="misc/icon-38.png">
     <title>Confirm | Temple Wallet</title>
   </head>
-  <body class="bg-primary-white">
+  <body class="bg-document">
     <div id="root"></div>
   </body>
 </html>

public/fullpage.html

@@ -1,12 +1,12 @@
 <!DOCTYPE html>
-<html lang="" style="min-width: 640px">
+<html lang="" style="min-width: 392px;">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
     <link rel="shortcut icon" href="misc/icon-38.png">
-    <title>Temple - Tezos Wallet</title>
+    <title>Temple Wallet</title>
   </head>
-  <body class="bg-primary-white" style="min-height: calc(100vh + 1px)">
+  <body class="bg-document">
     <div id="root"></div>
   </body>
 </html>

public/options.html

@@ -1,12 +1,12 @@
 <!DOCTYPE html>
-<html lang="" style="min-width: 640px">
+<html lang="" style="min-width: 360px">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
     <link rel="shortcut icon" href="misc/icon-38.png">
     <title>Options | Temple Wallet</title>
   </head>
-  <body>
+  <body class="bg-document">
     <div id="root"></div>
   </body>
 </html>

public/popup.html

@@ -2,17 +2,18 @@
 <html
   lang=""
   class="no-scrollbar<% if (process.env.TARGET_BROWSER === "firefox") { %> overflow-x-hidden<% } %>"
-  style="width: 360px; height: 604px;"
+  style="width: 384px; height: 600px;"
 >
   <head>
     <meta charset="utf-8" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
     />
-    <title>Temple - Tezos Wallet</title>
+    <title>Temple Wallet</title>
   </head>
-  <body class="bg-white" style="width: 360px; min-height: calc(100vh + 1px);">
-    <div id="root"></div>
+
+  <body class="bg-document">
+    <div id="root" ></div>
   </body>
 </html>

src/app/App.tsx

@@ -1,11 +1,11 @@
-import React, { ComponentProps, FC, Suspense } from 'react';
+import React, { PropsWithChildren, ComponentProps, FC, Suspense } from 'react';
 
 import 'lib/local-storage/migrations';
 import 'lib/lock-up/run-checks';
 import 'lib/ledger/proxy/foreground';
 import 'lib/keep-bg-worker-alive/script';
 
-import AwaitFonts from 'app/a11y/AwaitFonts';
+import AwaitFontFamily from 'app/a11y/AwaitFonts';
 import AwaitI18N from 'app/a11y/AwaitI18N';
 import BootAnimation from 'app/a11y/BootAnimation';
 import DisableOutlinesForClick from 'app/a11y/DisableOutlinesForClick';
@@ -22,8 +22,9 @@ import * as Woozie from 'lib/woozie';
 import { LoadHypelabScript } from './load-hypelab-script';
 import { AppRootHooks } from './root-hooks';
 import { StoreProvider } from './store/provider';
+import { ToasterProvider } from './toaster';
 
-interface Props extends React.PropsWithChildren {
+interface Props extends PropsWithChildren {
   env: ComponentProps<typeof AppEnvProvider>;
 }
 
@@ -40,14 +41,15 @@ export const App: FC<Props> = ({ env }) => (
 
           <LoadHypelabScript />
 
-          <AwaitFonts name="Inter" weights={[300, 400, 500, 600]} className="antialiased font-inter">
+          <AwaitFonts>
             <BootAnimation>
               {env.confirmWindow ? (
                 <ConfirmPage />
               ) : (
                 <>
                   <AppRootHooks />
                   <PageRouter />
+                  <ToasterProvider />
                 </>
               )}
             </BootAnimation>
@@ -67,3 +69,13 @@ const AppProvider: FC<Props> = ({ children, env }) => (
     </StoreProvider>
   </AppEnvProvider>
 );
+
+const FONTS_WEIGHTS = [300, 400, 500, 600];
+
+const AwaitFonts: FC<PropsWithChildren> = ({ children }) => (
+  <AwaitFontFamily name="Inter" weights={FONTS_WEIGHTS} className="antialiased font-inter">
+    <AwaitFontFamily name="Rubik" weights={FONTS_WEIGHTS} className="antialiased">
+      {children}
+    </AwaitFontFamily>
+  </AwaitFontFamily>
+);

src/app/ConfirmPage.tsx

@@ -1,4 +1,6 @@
-import React, { FC, Fragment, memo, Suspense, useCallback, useMemo, useState } from 'react';
+import React, { FC, Fragment, memo, useCallback, useMemo, useState } from 'react';
+
+import clsx from 'clsx';
 
 import { Alert, FormSubmitButton, FormSecondaryButton } from 'app/atoms';
 import AccountTypeBadge from 'app/atoms/AccountTypeBadge';
@@ -9,8 +11,8 @@ import Money from 'app/atoms/Money';
 import Name from 'app/atoms/Name';
 import Spinner from 'app/atoms/Spinner/Spinner';
 import SubTitle from 'app/atoms/SubTitle';
-import ErrorBoundary from 'app/ErrorBoundary';
-import ContentContainer from 'app/layouts/ContentContainer';
+import { SuspenseContainer } from 'app/atoms/SuspenseContainer';
+import { LAYOUT_CONTAINER_CLASSNAME } from 'app/layouts/containers';
 import Unlock from 'app/pages/Unlock/Unlock';
 import AccountBanner from 'app/templates/AccountBanner';
 import Balance from 'app/templates/Balance';
@@ -40,21 +42,20 @@ const ConfirmPage = memo(() => {
 
   if (ready)
     return (
-      <ContentContainer padding={false} className="min-h-screen flex flex-col items-center justify-center">
-        <ErrorBoundary whileMessage={t('fetchingConfirmationDetails')}>
-          <Suspense
-            fallback={
-              <div className="flex items-center justify-center h-screen">
-                <div>
-                  <Spinner theme="primary" className="w-20" />
-                </div>
+      <div className={clsx(LAYOUT_CONTAINER_CLASSNAME, 'min-h-screen flex flex-col items-center justify-center')}>
+        <SuspenseContainer
+          errorMessage={t('fetchingConfirmationDetails')}
+          loader={
+            <div className="flex items-center justify-center h-screen">
+              <div>
+                <Spinner theme="primary" className="w-20" />
               </div>
-            }
-          >
-            <ConfirmDAppForm />
-          </Suspense>
-        </ErrorBoundary>
-      </ContentContainer>
+            </div>
+          }
+        >
+          <ConfirmDAppForm />
+        </SuspenseContainer>
+      </div>
     );
 
   return <Unlock canImportNew={false} />;

src/app/PageRouter.tsx

@@ -4,7 +4,6 @@ import RootSuspenseFallback from 'app/a11y/RootSuspenseFallback';
 import { OpenInFullPage, useAppEnv } from 'app/env';
 import { AccountSettings } from 'app/pages/AccountSettings';
 import AddAsset from 'app/pages/AddAsset/AddAsset';
-import { Buy } from 'app/pages/Buy/Buy';
 import Exolix from 'app/pages/Buy/Crypto/Exolix/Exolix';
 import { BuyWithCreditCard } from 'app/pages/BuyWithCreditCard/BuyWithCreditCard';
 import CollectiblePage from 'app/pages/Collectibles/CollectiblePage';
@@ -25,12 +24,13 @@ import { Swap } from 'app/pages/Swap/Swap';
 import Unlock from 'app/pages/Unlock/Unlock';
 import Welcome from 'app/pages/Welcome/Welcome';
 import { AliceBobWithdraw } from 'app/pages/Withdraw/Debit/AliceBob/AliceBobWithdraw';
-import { Withdraw } from 'app/pages/Withdraw/Withdraw';
 import { usePageRouterAnalytics } from 'lib/analytics';
 import { Notifications, NotificationsItem } from 'lib/notifications/components';
 import { useTempleClient } from 'lib/temple/front';
 import * as Woozie from 'lib/woozie';
 
+import { Market } from './pages/Market';
+
 interface RouteContext {
   popup: boolean;
   fullPage: boolean;
@@ -96,10 +96,9 @@ const ROUTE_MAP = Woozie.createMap<RouteContext>([
   ],
   ['/add-asset', onlyReady(onlyInFullPage(() => <AddAsset />))],
   ['/settings/:tabSlug?', onlyReady(({ tabSlug }) => <Settings tabSlug={tabSlug} />)],
-  ['/buy', onlyReady(onlyInFullPage(() => <Buy />))],
+  ['/market', onlyReady(onlyInFullPage(() => <Market />))],
   ['/buy/crypto/exolix', onlyReady(onlyInFullPage(() => <Exolix />))],
   ['/buy/debit', onlyReady(onlyInFullPage(() => <BuyWithCreditCard />))],
-  ['/withdraw', onlyReady(onlyInFullPage(() => <Withdraw />))],
   ['/withdraw/debit/alice-bob', onlyReady(onlyInFullPage(() => <AliceBobWithdraw />))],
   ['/attention', onlyReady(onlyInFullPage(() => <AttentionPage />))],
   ['/notifications', onlyReady(() => <Notifications />)],

src/app/a11y/ContentFader/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import clsx from 'clsx';
+
+import ModStyles from './styles.module.css';
+
+export const ACTIVATE_CONTENT_FADER_CLASSNAME = ModStyles.fadeContent;
+
+export const ContentFader = () => <div className={clsx(ModStyles.contentFader, 'z-content-fade')} />;