TW-1360: [EVM] Home page design (#1136)

* loadChainId() uses FastRpcClient cache * TW-1345: Seed derivation for EVM. Refactor. + useTezosNetwork() * TW-1345: Seed derivation for EVM. Refactor. const { rpcUrl } = useTezosNetwork(); * TW-1345: Seed derivation for EVM. Refactor. + useTezosAccountAddress() * TW-1345: Seed derivation for EVM. Refactor. WIP: + useTezosAccount() * TW-1345: Seed derivation for EVM. Refactor. WIP: + useTezosRelevantAccounts() * TW-1345: Seed derivation for EVM. Refactor. WIP: TempleAccount -> StoredAccount * TW-1345: Seed derivation for EVM. Refactor. useTezosAccount() * TW-1345: Seed derivation for EVM. Refactor useChainId() * TW-1345: Seed derivation for EVM. Refactor. loadTezosChainId() * TW-1345: Seed derivation for EVM. Refactor. -- NewBlockTriggersProvider & useBlockTriggers * TW-1345: Seed derivation for EVM. Refactor. + useOnTezosBlock() * TW-1345: Seed derivation for EVM. Refactor. TempleNetwork -> StoredNetwork * TW-1345: Seed derivation for EVM. Refactor. temple/hooks -> temple/front * TW-1345: Seed derivation for EVM. Refactor. + temple/front/tzdns * TW-1345: Seed derivation for EVM. Fix unit tests * TW-1345: Seed derivation for EVM. WIP: + StoredHDAccount.evmAddress * TW-1345: Seed derivation for EVM. WIP: Refactor * TW-1345: Seed derivation for EVM. WIP: Refactor * TW-1345: Seed derivation for EVM. WIP: Refactor * TW-1345: Seed derivation for EVM. Fix unit tests * TW-1345: Seed derivation for EVM. WIP: + StoredWatchOnlyAccount.chain * TW-1345: Seed derivation for EVM. WIP: Watch-only accounts. + useTezosAccountAddress() * TW-1345: Seed derivation for EVM. WIP: Watch-only accounts. ++ useTezosAccountAddress() * TW-1345: Seed derivation for EVM. WIP: Watch-only accounts. +++ useTezosAccountAddress() * TW-1345: Seed derivation for EVM. WIP: Watch-only accounts. useTezosAccountAddress() + <WithTezosDataLoading> * TW-1345: Seed derivation for EVM. Refactor * TW-1345: Seed derivation for EVM. Watch-only accounts. + Importing * TW-1345: Seed derivation for EVM. 'Receive' page. + EVM address * TW-1345: Seed derivation for EVM. + StoredImportedAccount.chain * TW-1345: Seed derivation for EVM. <MainBanner>. + Gas balance of EVM-only accounts * TW-1345: Seed derivation for EVM. Fix derivation: 'accountIndex' -> 'addressIndex' * TW-1345: Seed derivation for EVM. Fix migration: + Saving pub(priv)Keys * TW-1345: Seed derivation for EVM. Migration refactor * TW-1345: Seed derivation for EVM. Migration refactor * TW-1345: Seed derivation for EVM. --publicKeyHash. WIP * TW-1345: Seed derivation for EVM. --publicKeyHash. WIP. Delegate page * TW-1345: Seed derivation for EVM. --publicKeyHash. WIP. Confirm window & CURRENT_ACCOUNT_ID + ADS_VIEWER_TEZOS_ADDRESS_STORAGE_KEY storage keys * TW-1345: Seed derivation for EVM. --publicKeyHash. WIP. Fix searchAndFilterItems() * TW-1345: Seed derivation for EVM. --publicKeyHash. WIP. Vault. New accounts concatenation * TW-1345: Seed derivation for EVM. --publicKeyHash. WIP. Pages 'InternalConfirmation' & 'AliceBobWithdraw' * TW-1345: Seed derivation for EVM. --publicKeyHash. WIP. useFilteredContacts() only for Tezos accounts * TW-1345: Seed derivation for EVM. Fix Reveal Private Key feature * TW-1345: Seed derivation for EVM. Fix Reveal Secrets pages * TW-1345: Seed derivation for EVM. Fix listing EVM watch-only accounts in menu * TW-1345: Seed derivation for EVM. Fix connected account in Confirm Page * TW-1345: Seed derivation for EVM. --publicKeyHash. WIP. Fix ADs viewer Tezos address * TW-1345: Seed derivation for EVM. --publicKeyHash. WIP. Reduced useTezos() usage * TW-1345: Seed derivation for EVM. Fix some translations * TW-1345: Seed derivation for EVM. --publicKeyHash. + useTezosWithSigner() * TW-1345: Seed derivation for EVM. Refactor. Renaming * TW-1345: Seed derivation for EVM. Refactor. Moved under * TW-1345: Seed derivation for EVM. Tune unit tests * TW-1345: Seed derivation for EVM. Clean-up * TW-1345: Seed derivation for EVM. GitHub Actions. + Code quality checks for PRs to epics' branches * TW-1345: Seed derivation for EVM. Fix code quality check * TW-1413: EVM Networks. Refactor * TW-1413: EVM Networks. Refactor * TW-1413: EVM Networks. MIGRATIONS. Tezos networks * TW-1413: EVM Networks. + Dropdown Select * TW-1413: EVM Networks. Settings. + EVM Networks * TW-1413: EVM Networks. + getReadOnlyEvm() * TW-1413: EVM Networks. + StoredTezosNetwork.chainId. -- 'DailyNet', 'MondayNet' & 'localhost' * TW-1413: EVM Networks. + NetworkBase.testnet?: boolean * TW-1413: EVM Networks. Refactor + useChainIDsCheck() * TW-1413: EVM Networks. Fix <NetworkButton> analytics props * TW-1413: EVM Networks. WIP: AddAsset page. * TW-1413: EVM Networks. -- isTezosNetwork() * TW-1413: EVM Networks. WIP: -- useTezosNetwork(). -- useTezosWithSigner() * TW-1413: EVM Networks. WIP: -- useTezosNetwork() * TW-1413: EVM Networks. WIP: -- isTezosNetwork(). + <ChainSelector> * TW-1413: EVM Networks. WIP: -- isTezosNetwork(). useBalance(..., network) * TW-1413: EVM Networks. -- useTezosNetwork(). In TZDNS hooks * TW-1413: EVM Networks. -- useTezosNetwork(). Refactor * TW-1413: EVM Networks. WIP: -- useTezosNetwork(). -- useGas() * TW-1413: EVM Networks. WIP: -- useTezosNetwork(). In <InFiat> * TW-1413: EVM Networks. WIP: -- useTezosNetwork(). In CustomTezosChainIdContext * TW-1413: EVM Networks. WIP: -- useTezosNetwork(). In Block Explorers * TW-1413: EVM Networks. WIP: -- useTezosNetwork(). In InternalConfirmation * TW-1413: EVM Networks. WIP: -- useTezosNetwork(). In some root hooks * TW-1413: EVM Networks. WIP: -- useTezosNetwork(). In useMetadataLoading() * TW-1413: EVM Networks. WIP: -- useTezosNetwork(). In useAssetsLoading() * TW-1413: EVM Networks. WIP: -- useTezosNetwork(). WIP: In useBalancesLoading(). + class TempleTzktSubscription * TW-1413: EVM Networks. WIP: -- useTezosNetwork(). WIP: In useBalancesLoading(). + class TempleTezosBlockSubscription * TW-1413: EVM Networks. WIP: -- useTezosNetwork(). WIP: <WithDataLoading> -> <AppDataLoadings> * TW-1413: EVM Networks. WIP: -- useTezosNetwork(). WIP: <AppBalancesLoading>. -- class TempleTezosBlockSubscription * TW-1413: EVM Networks. WIP: -- useTezosNetwork(). WIP: <AppBalancesLoading>. -- class TempleTzktSubscription * TW-1413: EVM Networks. Refactor * TW-1413: EVM Networks. Refactor. enum TempleChainName -> TempleChainKind * TW-1413: EVM Networks. Refactor. -- loadAccountTokensActions & loadAccountCollectiblesActions * TW-1413: EVM Networks. Refactor. useTempleReady() * TW-1413: EVM Networks. <AppRootHooks> fix running-out loading cycles * TW-1413: EVM Networks. Fix build. 'babel-loader' -> 'ts-loader' * TW-1413: EVM Networks. Build. Restrict React from BG script * TW-1413: EVM Networks. Settings page * TW-1413: EVM Networks. -- TODO.md * TW-1413: EVM Networks. Fix pipeline. -- 'yarn ts:e2e' * TW-1413: EVM Networks. Fix useEnabledChains() * TW-1413: EVM Networks. Refactor * TW-1413: EVM Networks. Settings. Networs. + Chain toggle * TW-1360: EVM Design. Home page. WIP * TW-1360: EVM Design. Home page. WIP. Account addresses + copy * TW-1360: EVM Design. Home page. WIP. Menu dropdown * TW-1360: EVM Design. Home page. WIP. + Toaster * TW-1360: EVM Design. Home page. WIP. Fix icons sizing. + <IconBase> * TW-1360: EVM Design. Home page. WIP. Assets Search field * TW-1360: EVM Design. Home page. WIP. TailwindCSS v3 * TW-1360: EVM Design. Home page. WIP. Menu drop-down. Test Mode toggle. + <ToggleSwitch> * TW-1360: EVM Design. Home page. WIP. Menu drop-down. + 'Notifications' btn * TW-1360: EVM Design. Home page. WIP. + <CaptionAlert> * TW-1360: EVM Design. Home page. WIP. Content padding * TW-1360: EVM Design. Home page. WIP. Rename 'Temple - Tezos & EVM Wallet' * TW-1360: EVM Design. Home page. WIP. Restored <AccountsDropdown> * TW-1360: EVM Design. Home page. WIP. + Icons naming convention * TW-1360: EVM Design. Home page. WIP. Fix icons scaling * TW-1360: EVM Design. Home page. WIP. ++ Icons scaling logic * TW-1360: EVM Design. Home page. WIP. -- Unused icons. + CheckUnusedImportsPlugin * TW-1360: EVM Design. Home page. WIP. ++ WebPack * TW-1360: EVM Design. Home page. WIP. + <AccountsModal>. + Rubik font family * TW-1360: EVM Design. Home page. WIP. + Portal Events Leak Guard * TW-1360: EVM Design. Home page. -- AccountsDropdown * TW-1360: EVM Design. Home page. Moved 'History' button * TW-1360: EVM Design. Home page. Layouts * TW-1360: EVM Design. Home page. Text Fonts * TW-1360: EVM Design. Home page. + <SuspenseContainer> * TW-1360: EVM Design. Home page. Fix scroll-to collectibles tab smoothness * TW-1360: EVM Design. Home page. + <TotalEquity> * TW-1360: EVM Design. Home page. Clean-up * TW-1360: EVM Design. Home page. Icons moved * TW-1360: EVM Design. Home page. Icons moved * TW-1360: EVM Design. Home page. + <NetworkLogoBase> * TW-1360: EVM Design. Home page. + <StyledButton> * TW-1360: EVM Design. Home page. Fix PageModal scrolling * TW-1360: EVM Design. Home page. Fix Unlock screen layout * TW-1360: EVM Design. Home page. Fix PageModal inset in popup * TW-1360: EVM Design. Home page. Custom App Scroll * TW-1360: EVM Design. Home page. Refactor * TW-1360: EVM Design. Home page. Refactor * TW-1360: EVM Design. Home page. Fix Onboarding overlay title * TW-1360: EVM Design. Home page. Popup window size + refactor
madfish-solutions · May 16, 2024 · 0ed3842 · 0ed3842
1 parent 3dd92d8
commit 0ed3842
Show file tree

Hide file tree

Showing 362 changed files with 5,654 additions and 5,305 deletions.
diff --git a/README.md b/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.

diff --git a/package.json b/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",

diff --git a/public/_locales/de/messages.json b/public/_locales/de/messages.json
@@ -1,6 +1,6 @@
 {
   "appName": {
-    "message": "Temple - Tezos Wallet"
+    "message": "Temple Wallet"
   },
   "showIncomingTransactions": {
     "message": "Eingehende Transaktionen anzeigen"

diff --git a/public/_locales/en/messages.json b/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"
   },

diff --git a/public/_locales/en_GB/messages.json b/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",

diff --git a/public/_locales/tr/messages.json b/public/_locales/tr/messages.json
@@ -1,6 +1,6 @@
 {
   "appName": {
-    "message": "Temple - Tezos Wallet"
+    "message": "Temple Wallet"
   },
   "showIncomingTransactions": {
     "message": "Gelen İşlemleri Göster"

diff --git a/public/_locales/uk/messages.json b/public/_locales/uk/messages.json
@@ -1,6 +1,6 @@
 {
   "appName": {
-    "message": "Temple - Tezos Wallet"
+    "message": "Temple Wallet"
   },
   "showIncomingTransactions": {
     "message": "Показати вхідні транзакції"

diff --git a/public/confirm.html b/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>
diff --git a/public/fullpage.html b/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>
diff --git a/public/options.html b/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>
diff --git a/public/popup.html b/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>
diff --git a/src/app/App.tsx b/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>
+);
diff --git a/src/app/ConfirmPage.tsx b/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} />;

diff --git a/src/app/PageRouter.tsx b/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 />)],

diff --git a/src/app/a11y/ContentFader/index.tsx b/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')} />;