From f4996edc07d6f366b1cf1134f48c621bd509e7ca Mon Sep 17 00:00:00 2001 From: GabrielPrediger Date: Fri, 23 Feb 2024 12:06:17 -0300 Subject: [PATCH 1/3] feat(HardWallet): new layout --- palette.js | 5 - source/assets/icons/hardwallet.svg | 3 + source/assets/locales/en.json | 6 +- source/assets/locales/es.json | 6 +- source/assets/locales/pt-br.json | 4 +- .../pages/Settings/ConnectHardwareWallet.tsx | 256 +++++++----------- source/utils/i18n.ts | 2 +- 7 files changed, 117 insertions(+), 165 deletions(-) create mode 100644 source/assets/icons/hardwallet.svg diff --git a/palette.js b/palette.js index 1f60e6a22..afea109ff 100644 --- a/palette.js +++ b/palette.js @@ -108,11 +108,6 @@ module.exports = { whiteAlpha300: 'rgba(255, 255, 255, 0.16)', }, - alpha: { - whiteAlpha300: 'rgba(255, 255, 255, 0.16)', - whiteAlpha200: 'rgba(255, 255, 255, 0.08)', - }, - extraColors: { red: '#D70000', }, diff --git a/source/assets/icons/hardwallet.svg b/source/assets/icons/hardwallet.svg new file mode 100644 index 000000000..522927b61 --- /dev/null +++ b/source/assets/icons/hardwallet.svg @@ -0,0 +1,3 @@ + + + diff --git a/source/assets/locales/en.json b/source/assets/locales/en.json index 20d8c988e..f38772c48 100644 --- a/source/assets/locales/en.json +++ b/source/assets/locales/en.json @@ -313,12 +313,14 @@ "permissions": "Permissions", "viewTheAddresses": "View the addresses of your permitted accounts", "errorCreatingHardWallet": "Error creating hardware wallet.", - "hardwareWallet": "HARDWARE WALLET", - "selectTheHardware": "Select the hardware wallet you'd like", + "hardwareWallet": "CONNECT HARDWALLET", + "selectTheHardware": "SELECT HARDWALLET:", "toConnect": "to connect", "toAddAccount": "to add account", "toPali": "to Pali", "dontHaveWallet": "Don't have a hardware wallet?", + "connectYourWalletAndClick": "CONNECT YOUR {{hardwalletName}} AND CLICK TO CONNECT!", + "youCanUseAny": "You can use any {{hardwalletName}} device.", "orderTrezor": "Order a Trezor wallet and keep your funds in cold storage.", "orderLedger": "Order a Ledger wallet and keep your funds in cold storage.", "buyNow": "Buy now", diff --git a/source/assets/locales/es.json b/source/assets/locales/es.json index 5ab97c336..a13e9d93c 100644 --- a/source/assets/locales/es.json +++ b/source/assets/locales/es.json @@ -315,12 +315,14 @@ "addNewChain": "Agregar Nueva Cadena", "viewTheAddresses": "Ver las direcciones de tus cuentas permitidas", "errorCreatingHardWallet": "Error al crear monedero hardware.", - "hardwareWallet": "MONEDERO HARDWARE", - "selectTheHardware": "Selecciona el monedero hardware que desees", + "hardwareWallet": "CONECTAR HARDWALLET", + "selectTheHardware": "SELECT HARDWALLET:", "toConnect": "conectar", "toAddAccount": "para agregar una cuenta", "toPali": "a Pali", "dontHaveWallet": "¿No tienes un monedero hardware?", + "connectYourWalletAndClick": "CONECTA TU MONEDERO {{hardwalletName}} Y HAZ CLIC PARA CONECTAR", + "youCanUseAny": "Puedes usar cualquier dispositivo {{hardwalletName}}.", "orderTrezor": "Ordena un monedero Trezor y guarda tus fondos en almacenamiento en frío.", "orderLedger": "Ordena un monedero Ledger y guarda tus fondos en almacenamiento en frío.", "buyNow": "Comprar ahora", diff --git a/source/assets/locales/pt-br.json b/source/assets/locales/pt-br.json index 143ac2e93..a72182606 100644 --- a/source/assets/locales/pt-br.json +++ b/source/assets/locales/pt-br.json @@ -289,7 +289,9 @@ "allYourSettings": "All your settings, like custom tokens and imported accounts, will get lost, however, your funds it’s saved!", "setAutoLockTime": "Configurar tempo de bloqueio automático", "defaultMinutes": "Padrão: 5 minutos após inatividade.", - "maximumMinutes": "Máximo: 120 minutos." + "maximumMinutes": "Máximo: 120 minutos.", + "connectYourWalletAndClick": "CONECTE SUA {{hardwalletName}} E CLIQUE PARA CONECTAR!", + "youCanUseAny": "Você pode usar qualquer dispositivo {{hardwalletName}}." }, "start": { "getStarted": "Get started", diff --git a/source/pages/Settings/ConnectHardwareWallet.tsx b/source/pages/Settings/ConnectHardwareWallet.tsx index 3851ca0c8..0ea8ded9f 100755 --- a/source/pages/Settings/ConnectHardwareWallet.tsx +++ b/source/pages/Settings/ConnectHardwareWallet.tsx @@ -1,5 +1,4 @@ // @ts-nocheck -import { Disclosure } from '@headlessui/react'; import React, { FC, useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useSelector } from 'react-redux'; @@ -7,14 +6,7 @@ import { useSelector } from 'react-redux'; import { CustomJsonRpcProvider } from '@pollum-io/sysweb3-keyring'; import { validateEthRpc, validateSysRpc } from '@pollum-io/sysweb3-network'; -import { - Layout, - Icon, - Tooltip, - NeutralButton, - DefaultModal, - Card, -} from 'components/index'; +import { Layout, Tooltip, DefaultModal, Button } from 'components/index'; import { useUtils } from 'hooks/index'; import { RootState } from 'state/store'; import { getController } from 'utils/browser'; @@ -23,8 +15,7 @@ const ConnectHardwareWalletView: FC = () => { const [isTestnet, setIsTestnet] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false); const [isLoading, setIsLoading] = useState(false); - const [selectedHardwareWallet, setSelectedHardwareWallet] = - useState('trezor'); + const [selectedHardwareWallet, setSelectedHardwareWallet] = useState(); const [isReconnect, setIsReconnect] = useState(false); const { activeNetwork, isBitcoinBased, accounts, advancedSettings } = useSelector((state: RootState) => state.vault); @@ -36,15 +27,6 @@ const ConnectHardwareWalletView: FC = () => { const { slip44 } = activeNetwork; const isSysUTXOMainnet = isBitcoinBased && activeNetwork.chainId === 57; - const ledgerButtonColor = - selectedHardwareWallet === 'ledger' - ? 'bg-bkg-3 border-brand-deepPink cursor-pointer' - : 'bg-bkg-1 border-brand-royalblue cursor-pointer'; - - const trezorButtonColor = - selectedHardwareWallet === 'trezor' - ? 'bg-bkg-3 border-brand-deepPink' - : 'bg-bkg-1 border-brand-royalblue'; const modalTitle = isReconnect ? t('settings.ledgerConnected') @@ -56,6 +38,24 @@ const ConnectHardwareWalletView: FC = () => { const controller = getController(); + const trezorSelectedButtonStyle = `${ + selectedHardwareWallet === 'trezor' + ? 'bg-brand-blue400 border-2 border-brand-blue400 cursor-pointer' + : 'bg-transparent border-2 border-white ' + }`; + + const ledgerSelectedButtonStyle = `${ + selectedHardwareWallet === 'ledger' + ? 'bg-brand-blue400 border-2 border-brand-blue400 cursor-pointer' + : 'bg-transparent border-2 border-white ' + }`; + + const confirmButtonDisbledStyle = `${ + isTestnet || selectedHardwareWallet === undefined + ? 'opacity-60' + : 'opacity-100' + }`; + const { isInCooldown }: CustomJsonRpcProvider = controller.wallet.ethereumTransaction.web3Provider; const isLedger = selectedHardwareWallet === 'ledger'; @@ -180,153 +180,101 @@ const ConnectHardwareWalletView: FC = () => { window.close(); }} /> -
+
+
+ +
-

- {t('settings.selectTheHardware')}{' '} - {!trezorAccounts.length - ? t('settings.toConnect') - : t('settings.toAddAccount')}{' '} - {t('settings.toPali')} -

+ {selectedHardwareWallet ? ( + <> +
+

+ {t('settings.connectYourWalletAndClick', { + hardwalletName: + selectedHardwareWallet === 'ledger' ? 'LEDGER' : 'TREZOR', + })} +

+

+ {t('settings.youCanUseAny', { + hardwalletName: + selectedHardwareWallet === 'ledger' ? 'Ledger' : 'Trezor', + })} +

+
+ + ) : ( +
+

+ {t('settings.selectTheHardware')}{' '} +

-

setSelectedHardwareWallet('trezor')} - id="trezor-btn" - > - Trezor -

- {advancedSettings?.ledger && ( - -

{ - if (isSysUTXOMainnet || !isBitcoinBased) { - setSelectedHardwareWallet('ledger'); - } - return; - }} + + {advancedSettings?.ledger && ( + - {t('settings.githubLink')} -

+ + )}
)} - -
-

- {t('settings.dontHaveWallet')} -
-
- {isLedger ? t('settings.orderLedger') : t('settings.orderTrezor')} -

- -

- window.open( - isLedger ? 'https://www.ledger.com/' : 'https://trezor.io/' - ) - } - > - {t('settings.buyNow')} -

-
- - - {({ open }) => ( - <> - - {t('connections.learnMore')} - - - - -
-

- 1 - {t('settings.connectToAHardwareWallet')} -

- - - {t('settings.connectYourHardwareWallet')} - - -

- 2 - {t('settings.startUsingSys')} -

- - - {t('settings.useYourHardwareAccount')} - -
- - - )} -
- -
- + {selectedHardwareWallet && ( +
+

{t('settings.dontHaveWallet')}

+
+

+ {isLedger + ? t('settings.orderLedger') + : t('settings.orderTrezor')} + + window.open( + isLedger + ? 'https://www.ledger.com/' + : 'https://trezor.io/' + ) + } + > + {t('settings.buyNow')} + +

+
+
+ )} +
diff --git a/source/utils/i18n.ts b/source/utils/i18n.ts index 005c6c625..3cc3a27a2 100644 --- a/source/utils/i18n.ts +++ b/source/utils/i18n.ts @@ -53,7 +53,7 @@ i18next lowerCaseLng: true, fallbackLng: determineLngFn, keySeparator: '.', - interpolation: { escapeValue: false }, + interpolation: { escapeValue: true }, }); export { i18next }; From 18b7078709fa9021abb904166652e1e700af632e Mon Sep 17 00:00:00 2001 From: GabrielPrediger Date: Fri, 23 Feb 2024 13:32:20 -0300 Subject: [PATCH 2/3] fix(i18): es translation --- source/assets/locales/es.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/assets/locales/es.json b/source/assets/locales/es.json index a13e9d93c..b32b9fce1 100644 --- a/source/assets/locales/es.json +++ b/source/assets/locales/es.json @@ -316,7 +316,7 @@ "viewTheAddresses": "Ver las direcciones de tus cuentas permitidas", "errorCreatingHardWallet": "Error al crear monedero hardware.", "hardwareWallet": "CONECTAR HARDWALLET", - "selectTheHardware": "SELECT HARDWALLET:", + "selectTheHardware": "SELECCIONAR HARDWALLET:", "toConnect": "conectar", "toAddAccount": "para agregar una cuenta", "toPali": "a Pali", From 7d9d16420edb96720a55acc94e168c03ddf455a8 Mon Sep 17 00:00:00 2001 From: GabrielPrediger Date: Thu, 29 Feb 2024 16:32:38 -0300 Subject: [PATCH 3/3] fix(CncHardwareWallet): code improvment --- .../pages/Settings/ConnectHardwareWallet.tsx | 57 +++++++++++-------- .../controllers/message-handler/types.ts | 6 ++ 2 files changed, 38 insertions(+), 25 deletions(-) diff --git a/source/pages/Settings/ConnectHardwareWallet.tsx b/source/pages/Settings/ConnectHardwareWallet.tsx index 0ea8ded9f..2c26c07ea 100755 --- a/source/pages/Settings/ConnectHardwareWallet.tsx +++ b/source/pages/Settings/ConnectHardwareWallet.tsx @@ -1,5 +1,5 @@ // @ts-nocheck -import React, { FC, useEffect, useState } from 'react'; +import React, { FC, useCallback, useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useSelector } from 'react-redux'; @@ -8,6 +8,7 @@ import { validateEthRpc, validateSysRpc } from '@pollum-io/sysweb3-network'; import { Layout, Tooltip, DefaultModal, Button } from 'components/index'; import { useUtils } from 'hooks/index'; +import { HardWallets } from 'scripts/Background/controllers/message-handler/types'; import { RootState } from 'state/store'; import { getController } from 'utils/browser'; @@ -157,6 +158,27 @@ const ConnectHardwareWalletView: FC = () => { } }; + const ledgerTooltipContent = useMemo( + () => + isSysUTXOMainnet || !isBitcoinBased + ? '' + : t('settings.ledgerOnlyAvailable'), + [isSysUTXOMainnet, isBitcoinBased] + ); + + const supportTooltipContent = useMemo( + () => + isTestnet && + (isLedger + ? t('settings.ledgerDoesntSupport') + : t('settings.trezorDoesntSupport')), + [isTestnet, isLedger] + ); + + const handleHardwalletBuyNow = useCallback(() => { + window.open(isLedger ? 'https://www.ledger.com/' : 'https://trezor.io/'); + }, [isLedger]); + useEffect(() => { verifyIfIsTestnet().then((isTestnetResponse) => setIsTestnet(isTestnetResponse) @@ -194,13 +216,17 @@ const ConnectHardwareWalletView: FC = () => {

{t('settings.connectYourWalletAndClick', { hardwalletName: - selectedHardwareWallet === 'ledger' ? 'LEDGER' : 'TREZOR', + selectedHardwareWallet === HardWallets.LEDGER + ? 'LEDGER' + : 'TREZOR', })}

{t('settings.youCanUseAny', { hardwalletName: - selectedHardwareWallet === 'ledger' ? 'Ledger' : 'Trezor', + selectedHardwareWallet === HardWallets.LEDGER + ? 'Ledger' + : 'Trezor', })}

@@ -219,13 +245,7 @@ const ConnectHardwareWalletView: FC = () => { Trezor {advancedSettings?.ledger && ( - + diff --git a/source/scripts/Background/controllers/message-handler/types.ts b/source/scripts/Background/controllers/message-handler/types.ts index 4507c55b3..af875f982 100644 --- a/source/scripts/Background/controllers/message-handler/types.ts +++ b/source/scripts/Background/controllers/message-handler/types.ts @@ -4,6 +4,12 @@ export type Message = { id: string; type: string; }; + +export enum HardWallets { + LEDGER = 'LEDGER', + TREZOR = 'TREZOR', +} + //TODO: addtype for rpc subscription notifications here export enum PaliEvents { accountsChanged = 'pali_accountsChanged',