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 144dd8dad..b3d01d845 100644 --- a/source/assets/locales/en.json +++ b/source/assets/locales/en.json @@ -314,12 +314,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 8584e70a7..a014ce699 100644 --- a/source/assets/locales/es.json +++ b/source/assets/locales/es.json @@ -316,12 +316,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": "SELECCIONAR 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 120ee6483..ac3892caa 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..2c26c07ea 100755 --- a/source/pages/Settings/ConnectHardwareWallet.tsx +++ b/source/pages/Settings/ConnectHardwareWallet.tsx @@ -1,21 +1,14 @@ // @ts-nocheck -import { Disclosure } from '@headlessui/react'; -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'; 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 { HardWallets } from 'scripts/Background/controllers/message-handler/types'; import { RootState } from 'state/store'; import { getController } from 'utils/browser'; @@ -23,8 +16,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 +28,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 +39,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'; @@ -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) @@ -180,165 +202,98 @@ 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 === HardWallets.LEDGER + ? 'LEDGER' + : 'TREZOR', + })} +

+

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

+
+ + ) : ( +
+

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

-

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

- {advancedSettings?.ledger && ( - -

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

)} - - {isLedger && ( -
-

- {isSysUTXOMainnet - ? t('settings.toUseLedger') - : t('settings.toUseLedgerEvm')} -

- - {isSysUTXOMainnet && ( -

- window.open( - 'https://github.com/osiastedian/ledger-app-syscoin' - ) - } - > - {t('settings.githubLink')} +

+
+ {selectedHardwareWallet && ( +
+

{t('settings.dontHaveWallet')}

+
+

+ {isLedger + ? t('settings.orderLedger') + : t('settings.orderTrezor')} + + {t('settings.buyNow')} +

- )} +
)} - -
-

- {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')} - -
- - - )} - -
- -
- - + - +
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', 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 };