Merge branch 'development' into TW-1125-epic-assets-rework

.eslintrc

@@ -43,7 +43,7 @@
           }
         ],
         "pathGroupsExcludedImportTypes": ["react"],
-        "groups": [["external", "builtin"], "internal", ["parent", "sibling", "index"]],
+        "groups": [["external", "builtin"], "internal", "parent", "sibling", "index"],
         "alphabetize": {
           "order": "asc",
           "caseInsensitive": true

e2e/src/utils/browser-context.utils.ts

@@ -3,6 +3,7 @@ import { Browser } from 'puppeteer';
 import { PuppeteerScreenRecorder } from 'puppeteer-screen-recorder';
 
 import { BrowserContext } from '../classes/browser-context.class';
+
 import { getExtensionId } from './browser.utils';
 import { RETRY_OPTIONS } from './timing.utils';
 

package.json

@@ -30,6 +30,7 @@
     "@apollo/client": "^3.7.2",
     "@babel/core": "7.19.3",
     "@babel/runtime": "^7.19.0",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@dicebear/avatars": "4.2.5",
     "@dicebear/avatars-bottts-sprites": "4.2.5",
     "@dicebear/avatars-jdenticon-sprites": "4.2.5",
@@ -125,7 +126,7 @@
     "eslint": "^8.17.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-import-resolver-typescript": "^3",
-    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-no-type-assertion": "^1.3.0",
     "eslint-plugin-prettier": "^4",
     "eslint-webpack-plugin": "^3.2.0",
@@ -216,6 +217,7 @@
     "@taquito/contracts-library": "17.0.0",
     "@taquito/tzip16": "17.0.0",
     "bignumber.js": "9.1.0",
+    "eslint-plugin-import": "2.29.0",
     "graphql-request": "^6.1.0",
     "json5": "^2.2.2"
   }

public/_locales/de/messages.json

@@ -9,7 +9,7 @@
     "message": "Kryptowährungs-Wallet für Tezos-Blockchain als Web-Erweiterung für Ihren Browser."
   },
   "createAccount": {
-    "message": "Konto erstellen oder wiederherstellen"
+    "message": "Konto erstellen"
   },
   "importAccount": {
     "message": "Konto importieren"
@@ -1455,8 +1455,13 @@
   "searchAssets": {
     "message": "Vermögenswerte suchen..."
   },
-  "searchByName": {
-    "message": "Nach Name suchen..."
+  "searchAccount": {
+    "message": "Suchen$hotkey$",
+    "placeholders": {
+      "hotkey": {
+        "content": "$1"
+      }
+    }
   },
   "deployNew": {
     "message": "Neu bereitstellen"

public/_locales/en/messages.json

@@ -9,7 +9,7 @@
     "message": "🔐💰Cryptocurrency wallet for Tezos blockchain as Web Extension for your Browser."
   },
   "createAccount": {
-    "message": "Create or Restore account"
+    "message": "Create account"
   },
   "importAccount": {
     "message": "Import account"
@@ -1744,8 +1744,13 @@
   "searchAssets": {
     "message": "Search assets..."
   },
-  "searchByName": {
-    "message": "Search by name..."
+  "searchAccount": {
+    "message": "Search$hotkey$",
+    "placeholders": {
+      "hotkey": {
+        "content": "$1"
+      }
+    }
   },
   "deployNew": {
     "message": "Deploy new"

public/_locales/en_GB/messages.json

@@ -9,7 +9,7 @@
     "message": "🔐💰Cryptocurrency wallet for Tezos blockchain as Web Extension for your Browser."
   },
   "createAccount": {
-    "message": "Create or Restore account"
+    "message": "Create account"
   },
   "totalEquityValue": {
     "message": "Total Equity Value"

public/_locales/fr/messages.json

@@ -12,7 +12,7 @@
     "message": "Importer un compte"
   },
   "createAccount": {
-    "message": "Créer ou restaurer un compte"
+    "message": "Créer un compte"
   },
   "faucetFileTitle": {
     "message": "Fichier Faucet"

public/_locales/ja/messages.json

@@ -12,7 +12,7 @@
     "message": "アカウントをインポート"
   },
   "createAccount": {
-    "message": "アカウントを作成または復元する"
+    "message": "アカウントを作成"
   },
   "faucetFileTitle": {
     "message": "フォーセットファイル"

public/_locales/ko/messages.json

@@ -12,7 +12,7 @@
     "message": "계정 불러오기"
   },
   "createAccount": {
-    "message": "계정 생성 또는 복원"
+    "message": "계정 만들기"
   },
   "faucetFileTitle": {
     "message": "수도꼭지 파일"

public/_locales/pt/messages.json

@@ -9,7 +9,7 @@
     "message": "Carteira de criptomoedas para blocos em cadeia Tezos como extensão da Web para o seu Browser."
   },
   "createAccount": {
-    "message": "Criar ou restaurar conta"
+    "message": "Criar conta"
   },
   "importAccount": {
     "message": "Importar conta"
@@ -1455,8 +1455,13 @@
   "searchAssets": {
     "message": "Procurar ativos..."
   },
-  "searchByName": {
-    "message": "Procurar por nome..."
+  "searchAccount": {
+    "message": "Procurar$hotkey$",
+    "placeholders": {
+      "hotkey": {
+        "content": "$1"
+      }
+    }
   },
   "deployNew": {
     "message": "Implantar novo"

public/_locales/tr/messages.json

@@ -9,7 +9,7 @@
     "message": "Tarayıcınızda Web Uzantısı olarak Tezos blokzinciri için kripto para cüzdanı."
   },
   "createAccount": {
-    "message": "Hesap Oluştur veya Geri Yükle"
+    "message": "Bir hesap oluşturun"
   },
   "importAccount": {
     "message": "Hesabı içe aktar"
@@ -1455,8 +1455,13 @@
   "searchAssets": {
     "message": "Varlıkları ara..."
   },
-  "searchByName": {
-    "message": "Ada göre ara..."
+  "searchAccount": {
+    "message": "Aramak$hotkey$",
+    "placeholders": {
+      "hotkey": {
+        "content": "$1"
+      }
+    }
   },
   "deployNew": {
     "message": "Yeni dağıt"

public/_locales/uk/messages.json

@@ -9,7 +9,7 @@
     "message": "🔐💰Криптовалютний гаманець для блокчейну Тезос як Розширення для твого браузеру"
   },
   "createAccount": {
-    "message": "Створити або відновити аккаунт"
+    "message": "Створити аккаунт"
   },
   "importAccount": {
     "message": "Імпортувати аккаунт"

public/_locales/zh_CN/messages.json

@@ -12,7 +12,7 @@
     "message": "导入账户"
   },
   "createAccount": {
-    "message": "创建或恢复帐户"
+    "message": "创建一个帐户"
   },
   "faucetFileTitle": {
     "message": "Faucet文件"

public/_locales/zh_TW/messages.json

@@ -12,7 +12,7 @@
     "message": "匯入帳戶"
   },
   "createAccount": {
-    "message": "創建或恢復帳戶"
+    "message": "建立一個帳戶"
   },
   "faucetFileTitle": {
     "message": "水龍頭檔案"

src/app/atoms/AccountTypeBadge.tsx

@@ -16,8 +16,8 @@ const AccountTypeBadge = memo<AccountTypeBadgeProps>(({ account, darkTheme = fal
   return title ? (
     <span
       className={clsx(
-        'rounded border border-opacity-25 px-1 py-px ml-2 leading-tight text-opacity-50',
-        darkTheme ? 'border-white text-white' : 'border-black text-black'
+        'rounded border px-1 py-px ml-2 leading-none text-xxxxs font-medium',
+        darkTheme ? 'border-gray-500 text-gray-500' : 'border-black text-black'
       )}
       style={{ fontSize: '0.6rem' }}
     >

src/app/atoms/CleanButton.tsx

@@ -8,12 +8,14 @@ import useTippy from 'lib/ui/useTippy';
 
 type CleanButtonProps = HTMLAttributes<HTMLButtonElement> & {
   bottomOffset?: string;
+  iconClassName?: string;
   iconStyle?: React.CSSProperties;
 };
 
 const CleanButton: FC<CleanButtonProps> = ({
   bottomOffset = '0.4rem',
   className,
+  iconClassName,
   style = {},
   iconStyle = {},
   ...rest
@@ -48,7 +50,7 @@ const CleanButton: FC<CleanButtonProps> = ({
       tabIndex={-1}
       {...rest}
     >
-      <CloseIcon className="w-auto h-4 stroke-current" style={iconStyle} />
+      <CloseIcon className={classNames('w-auto h-4 stroke-current', iconClassName)} style={iconStyle} />
     </button>
   );
 };

src/app/atoms/index.ts

@@ -47,3 +47,5 @@ export { Stepper } from './Stepper/Stepper';
 export { DataPlaceholder } from './DataPlaceholder';
 
 export { default as ABContainer } from './ABContainer';
+
+export { PageTitle } from './PageTitle';

src/app/layouts/PageLayout.tsx

@@ -17,12 +17,13 @@ import { DonationBanner } from '../atoms/DonationBanner/DonationBanner';
 import { useOnboardingProgress } from '../pages/Onboarding/hooks/useOnboardingProgress.hook';
 import { AdvertisingBanner } from '../templates/advertising/advertising-banner/advertising-banner';
 import { AdvertisingOverlay } from '../templates/advertising/advertising-overlay/advertising-overlay';
-import { PageLayoutSelectors } from './PageLayout.selectors';
+
 import { ChangelogOverlay } from './PageLayout/ChangelogOverlay/ChangelogOverlay';
 import ConfirmationOverlay from './PageLayout/ConfirmationOverlay';
 import Header from './PageLayout/Header';
 import { NewsletterOverlay } from './PageLayout/NewsletterOverlay/NewsletterOverlay';
 import { OnRampOverlay } from './PageLayout/OnRampOverlay/OnRampOverlay';
+import { PageLayoutSelectors } from './PageLayout.selectors';
 
 interface PageLayoutProps extends PropsWithChildren, ToolbarProps {
   contentContainerStyle?: React.CSSProperties;

src/app/layouts/PageLayout/Header.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useMemo } from 'react';
 
 import classNames from 'clsx';
 
@@ -12,28 +12,25 @@ import { useTempleClient, useAccount } from 'lib/temple/front';
 import Popper from 'lib/ui/Popper';
 import { Link } from 'lib/woozie';
 
-import styles from './Header.module.css';
-import { HeaderSelectors } from './Header.selectors';
 import AccountDropdown from './Header/AccountDropdown';
 import NetworkSelect from './Header/NetworkSelect';
+import styles from './Header.module.css';
+import { HeaderSelectors } from './Header.selectors';
 
 const Header: FC = () => {
-  const appEnv = useAppEnv();
+  const { fullPage } = useAppEnv();
   const { ready } = useTempleClient();
 
-  return (
-    <header className={classNames('bg-primary-orange', styles['inner-shadow'], appEnv.fullPage && 'pb-20 -mb-20')}>
-      <ContentContainer className="py-4">
-        <div className={classNames(appEnv.fullPage && 'px-4')}>
-          <div className="flex items-stretch">
-            <Link to="/" className="flex-shrink-0 pr-4" testID={HeaderSelectors.templeLogoIcon}>
-              <div className="flex items-center">
-                <Logo hasTitle={appEnv.fullPage} white />
-              </div>
-            </Link>
+  const logoStyles = useMemo(() => ({ height: fullPage ? 64 : 52, marginTop: 0, marginBottom: 0 }), [fullPage]);
 
-            {ready && <Control />}
-          </div>
+  return (
+    <header className={classNames('bg-primary-orange', styles['inner-shadow'], fullPage && 'pb-20 -mb-20')}>
+      <ContentContainer className="pt-4 pb-3">
+        <div className={classNames('flex justify-between items-center', fullPage && 'px-4')}>
+          <Link to="/" className="flex-shrink-0 pr-4" testID={HeaderSelectors.templeLogoIcon}>
+            <Logo hasTitle={fullPage} white style={logoStyles} />
+          </Link>
+          <div className="flex items-stretch">{ready && <Control />}</div>
         </div>
       </ContentContainer>
     </header>

src/app/layouts/PageLayout/Header/AccountDropdown/AccountItem.tsx

@@ -5,10 +5,10 @@ import classNames from 'clsx';
 import { Name, Button, HashShortView, Money, Identicon } from 'app/atoms';
 import AccountTypeBadge from 'app/atoms/AccountTypeBadge';
 import Balance from 'app/templates/Balance';
+import { setAnotherSelector, setTestID } from 'lib/analytics';
 import { TempleAccount } from 'lib/temple/types';
 import { useScrollIntoViewOnMount } from 'lib/ui/use-scroll-into-view';
 
-import { setAnotherSelector, setTestID } from '../../../../../lib/analytics';
 import { AccountDropdownSelectors } from './selectors';
 
 interface AccountItemProps {
@@ -31,7 +31,7 @@ export const AccountItem: React.FC<AccountItemProps> = ({ account, selected, gas
         'text-white text-shadow-black overflow-hidden',
         'transition ease-in-out duration-200',
         selected && 'shadow',
-        selected ? 'bg-gray-700 bg-opacity-40' : 'hover:bg-white hover:bg-opacity-5',
+        selected ? 'bg-gray-700 bg-opacity-40' : 'hover:bg-gray-700 hover:bg-opacity-20',
         !selected && 'opacity-65 hover:opacity-100'
       ),
     [selected]

src/app/layouts/PageLayout/Header/AccountDropdown/ActionButton.tsx

@@ -20,18 +20,18 @@ export const ActionButton: React.FC<ActionButtonProps> = ({ Icon, linkTo, onClic
     className: classNames(
       'block w-full flex items-center px-2 whitespace-nowrap overflow-hidden',
       'rounded text-white text-shadow-black text-sm',
-      'hover:bg-white hover:bg-opacity-10',
+      'hover:bg-gray-700 hover:bg-opacity-30',
       'transition ease-in-out duration-200'
     ),
     style: {
-      paddingTop: '0.375rem',
-      paddingBottom: '0.375rem'
+      paddingTop: '0.5rem',
+      paddingBottom: '0.5rem'
     },
     onClick,
     children: (
       <>
-        <div className="flex items-center w-8">
-          <Icon className="w-auto h-6 stroke-current" />
+        <div className="flex items-center w-6">
+          <Icon className="w-auto h-4 stroke-current" />
         </div>
 
         <T id={i18nKey} />