Merge branch 'development' of https://github.com/madfish-solutions/te…

…mplewallet-extension into TW-1101-e-hide-ad-banner-on-click-x-button
madfish-solutions · Jan 9, 2024 · 64c69eb · 64c69eb
2 parents bade3f1 + df8e7ca
commit 64c69eb
Show file tree

Hide file tree

Showing 23 changed files with 121 additions and 79 deletions.
diff --git a/public/_locales/de/messages.json b/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"

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

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

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

diff --git a/public/_locales/ja/messages.json b/public/_locales/ja/messages.json
@@ -12,7 +12,7 @@
     "message": "アカウントをインポート"
   },
   "createAccount": {
-    "message": "アカウントを作成または復元する"
+    "message": "アカウントを作成"
   },
   "faucetFileTitle": {
     "message": "フォーセットファイル"

diff --git a/public/_locales/ko/messages.json b/public/_locales/ko/messages.json
@@ -12,7 +12,7 @@
     "message": "계정 불러오기"
   },
   "createAccount": {
-    "message": "계정 생성 또는 복원"
+    "message": "계정 만들기"
   },
   "faucetFileTitle": {
     "message": "수도꼭지 파일"

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

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

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

diff --git a/public/_locales/zh_CN/messages.json b/public/_locales/zh_CN/messages.json
@@ -12,7 +12,7 @@
     "message": "导入账户"
   },
   "createAccount": {
-    "message": "创建或恢复帐户"
+    "message": "创建一个帐户"
   },
   "faucetFileTitle": {
     "message": "Faucet文件"

diff --git a/public/_locales/zh_TW/messages.json b/public/_locales/zh_TW/messages.json
@@ -12,7 +12,7 @@
     "message": "匯入帳戶"
   },
   "createAccount": {
-    "message": "創建或恢復帳戶"
+    "message": "建立一個帳戶"
   },
   "faucetFileTitle": {
     "message": "水龍頭檔案"

diff --git a/src/app/atoms/AccountTypeBadge.tsx b/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' }}
     >

diff --git a/src/app/atoms/CleanButton.tsx b/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>
   );
 };

diff --git a/src/app/icons/sad-search.svg b/src/app/icons/sad-search.svg
diff --git a/src/app/layouts/PageLayout/Header/AccountDropdown/AccountItem.tsx b/src/app/layouts/PageLayout/Header/AccountDropdown/AccountItem.tsx
@@ -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]

diff --git a/src/app/layouts/PageLayout/Header/AccountDropdown/ActionButton.tsx b/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} />

diff --git a/src/app/layouts/PageLayout/Header/AccountDropdown/index.tsx b/src/app/layouts/PageLayout/Header/AccountDropdown/index.tsx
@@ -11,17 +11,22 @@ import { ReactComponent as DownloadIcon } from 'app/icons/download.svg';
 import { ReactComponent as LinkIcon } from 'app/icons/link.svg';
 import { ReactComponent as LockIcon } from 'app/icons/lock.svg';
 import { ReactComponent as MaximiseIcon } from 'app/icons/maximise.svg';
+import { ReactComponent as SadSearchIcon } from 'app/icons/sad-search.svg';
 import { ReactComponent as SettingsIcon } from 'app/icons/settings.svg';
 import SearchField from 'app/templates/SearchField';
 import { T, t } from 'lib/i18n';
 import { useAccount, useRelevantAccounts, useSetAccountPkh, useTempleClient, useGasToken } from 'lib/temple/front';
 import { PopperRenderProps } from 'lib/ui/Popper';
+import { searchAndFilterItems } from 'lib/utils/search-items';
 import { HistoryAction, navigate } from 'lib/woozie';
 
 import { AccountItem } from './AccountItem';
 import { ActionButtonProps, ActionButton } from './ActionButton';
 import { AccountDropdownSelectors } from './selectors';
 
+const isMacOS = /Mac OS/.test(navigator.userAgent);
+const searchHotkey = ` (${isMacOS ? '⌘' : 'Ctrl + '}K)`;
+
 type AccountDropdownProps = PopperRenderProps;
 
 interface TDropdownAction extends ActionButtonProps {
@@ -39,16 +44,15 @@ const AccountDropdown: FC<AccountDropdownProps> = ({ opened, setOpened }) => {
   const [searchValue, setSearchValue] = useState('');
   const [attractSelectedAccount, setAttractSelectedAccount] = useState(true);
 
-  const isShowSearch = useMemo(() => allAccounts.length > 5, [allAccounts.length]);
-
   const filteredAccounts = useMemo(() => {
     if (searchValue.length === 0) {
       return allAccounts;
-    } else {
-      const lowerCaseSearchValue = searchValue.toLowerCase();
-
-      return allAccounts.filter(currentAccount => currentAccount.name.toLowerCase().includes(lowerCaseSearchValue));
     }
+
+    return searchAndFilterItems(allAccounts, searchValue.toLowerCase(), [
+      { name: 'name', weight: 0.5 },
+      { name: 'publicKeyHash', weight: 0.5 }
+    ]);
   }, [searchValue, allAccounts]);
 
   const closeDropdown = useCallback(() => {
@@ -136,7 +140,7 @@ const AccountDropdown: FC<AccountDropdownProps> = ({ opened, setOpened }) => {
 
   useEffect(() => {
     if (searchValue) setAttractSelectedAccount(false);
-    else if (opened === false) setAttractSelectedAccount(true);
+    else if (!opened) setAttractSelectedAccount(true);
   }, [opened, searchValue]);
 
   return (
@@ -158,11 +162,11 @@ const AccountDropdown: FC<AccountDropdownProps> = ({ opened, setOpened }) => {
 
         <Button
           className={classNames(
-            'px-2 py-1',
+            'px-2 py-0.5',
             'rounded-md',
-            'border border-gray-700',
+            'border border-gray-200',
             'flex items-center',
-            'text-white text-shadow-black',
+            'text-gray-200',
             'text-sm',
             'transition duration-300 ease-in-out',
             'opacity-20',
@@ -177,39 +181,32 @@ const AccountDropdown: FC<AccountDropdownProps> = ({ opened, setOpened }) => {
       </div>
 
       <div className="my-2">
-        {isShowSearch && (
-          <SearchField
-            value={searchValue}
-            className={classNames(
-              'py-2 pl-8 pr-4',
-              'bg-transparent',
-              'border border-white border-opacity-10',
-              'focus:outline-none',
-              'transition ease-in-out duration-200',
-              'rounded-md rounded-b-none',
-              'text-white text-sm leading-tight'
-            )}
-            placeholder={t('searchByName')}
-            searchIconClassName="h-5 w-auto"
-            searchIconWrapperClassName="px-2 text-white opacity-75"
-            cleanButtonStyle={{ backgroundColor: 'transparent' }}
-            cleanButtonIconStyle={{ stroke: 'white' }}
-            onValueChange={setSearchValue}
-          />
-        )}
-
-        <div
+        <SearchField
+          value={searchValue}
           className={classNames(
-            'overflow-y-auto rounded border border-gray-700 shadow-inner',
-            isShowSearch && 'border-t-0 rounded-t-none'
+            'py-2 pl-8 pr-8',
+            'bg-transparent',
+            'border border-gray-200 border-opacity-20',
+            'focus:outline-none',
+            'transition ease-in-out duration-200',
+            'rounded-md rounded-b-none',
+            'text-gray-500 placeholder-gray-600 text-sm leading-tight'
           )}
-          style={{ maxHeight: isShowSearch ? '12rem' : '14.25rem' }}
-        >
+          placeholder={t('searchAccount', [searchHotkey])}
+          searchIconClassName="h-5 w-auto text-gray-600 stroke-current"
+          searchIconWrapperClassName="px-2"
+          cleanButtonClassName="border-gray-600"
+          cleanButtonIconClassName="text-gray-600 stroke-current"
+          cleanButtonStyle={{ backgroundColor: 'transparent' }}
+          onValueChange={setSearchValue}
+        />
+
+        <div className="overflow-y-auto rounded border border-gray-200 border-opacity-20 shadow-inner border-t-0 rounded-t-none h-48">
           <div className="flex flex-col">
             {filteredAccounts.length === 0 ? (
-              <p className="text-center text-white text-sm p-10">
-                <T id="noResults" />
-              </p>
+              <div className="h-48 flex justify-center items-center">
+                <SadSearchIcon />
+              </div>
             ) : (
               filteredAccounts.map(acc => (
                 <AccountItem

diff --git a/src/app/pages/CreateAccount/CreateAccount.tsx b/src/app/pages/CreateAccount/CreateAccount.tsx
@@ -105,11 +105,7 @@ const CreateAccount: FC = () => {
             testID={CreateAccountSelectors.accountNameInputField}
           />
 
-          <FormSubmitButton
-            className="capitalize"
-            loading={submitting}
-            testID={CreateAccountSelectors.createOrRestoreButton}
-          >
+          <FormSubmitButton loading={submitting} testID={CreateAccountSelectors.createOrRestoreButton}>
             <T id="createAccount" />
           </FormSubmitButton>
         </form>

diff --git a/src/app/templates/DAppsList.tsx b/src/app/templates/DAppsList.tsx
@@ -112,6 +112,7 @@ const DAppsList = () => {
           searchIconClassName="h-4 w-auto"
           searchIconWrapperClassName="px-2 text-gray-700"
           value={searchString}
+          isCleanButtonVisible={Boolean(searchString)}
           onValueChange={setSearchString}
         />
         <div className={classNames(popup ? 'mb-4' : 'mb-6', 'w-full flex justify-between')}>