From 3022984cb8684b6537bc70d55e122679313d98d2 Mon Sep 17 00:00:00 2001 From: GabriePrediger Date: Thu, 25 Apr 2024 07:42:17 -0300 Subject: [PATCH 01/11] feat: API integration --- source/pages/Home/Home.tsx | 23 +++++++++++++++- .../controllers/faucetController.ts | 27 +++++++++++++++++++ 2 files changed, 49 insertions(+), 1 deletion(-) create mode 100644 source/scripts/Background/controllers/faucetController.ts diff --git a/source/pages/Home/Home.tsx b/source/pages/Home/Home.tsx index c59b1e620..0dc977afa 100755 --- a/source/pages/Home/Home.tsx +++ b/source/pages/Home/Home.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useMemo, useState } from 'react'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useSelector } from 'react-redux'; import { useLocation } from 'react-router-dom'; @@ -9,6 +9,7 @@ import { Header, Icon, Button, Loading } from 'components/index'; import { StatusModal } from 'components/Modal/StatusModal'; import { ConnectHardwareWallet } from 'components/Modal/WarningBaseModal'; import { usePrice, useUtils } from 'hooks/index'; +import { claimFaucet } from 'scripts/Background/controllers/faucetController'; import { RootState } from 'state/store'; import { getController } from 'utils/browser'; import { @@ -118,6 +119,13 @@ export const Home = () => { return formatBalanceDecimals(fiatPriceValue, true); }, [fiatPriceValue, isTestnet, moreThanMillion]); + const handleFaucet = useCallback( + async (chainId: number, walletAddress: string) => { + await claimFaucet(chainId, walletAddress); + }, + [] + ); + return (
{accounts[activeAccount.type][activeAccount.id] && @@ -185,6 +193,19 @@ export const Home = () => { /> {t('buttons.receive')} + +
{isWalletImported && ( diff --git a/source/scripts/Background/controllers/faucetController.ts b/source/scripts/Background/controllers/faucetController.ts new file mode 100644 index 000000000..613a0dedc --- /dev/null +++ b/source/scripts/Background/controllers/faucetController.ts @@ -0,0 +1,27 @@ +import axios from 'axios'; + +const claimFaucet = async (chainId: number, walletAddress: string) => { + let wallet: string; + + if (chainId === 57) { + wallet = `nevm-mainnet`; + } else if (chainId === 5700) { + wallet = `nevm-testnet`; + } else if (chainId === 57000) { + wallet = `rollux-testnet`; + } else if (chainId === 570) { + wallet = `rollux-mainnet`; + } else { + wallet = ``; + } + + const { data } = await axios.get( + `https://chains.tools/api/faucet/claim?networkKey=${wallet}&walletAddress=${walletAddress}` + ); + + console.log(data); + return data; +}; + +export { claimFaucet }; +//nevm-testnet nevm-mainnet rollux-testnet rollux-mainnet From 95e87832b3319858706627a1d0db67c06cae686e Mon Sep 17 00:00:00 2001 From: GabriePrediger Date: Mon, 29 Apr 2024 14:12:21 -0300 Subject: [PATCH 02/11] feat: faucet modals --- source/assets/images/faucetmodal.png | Bin 0 -> 5053 bytes source/components/Modal/FaucetAccessModal.tsx | 21 ++++++++++ source/components/Modal/FaucetModal.tsx | 36 ++++++++++++++++++ source/pages/Home/Home.tsx | 18 ++------- 4 files changed, 61 insertions(+), 14 deletions(-) create mode 100644 source/assets/images/faucetmodal.png create mode 100644 source/components/Modal/FaucetAccessModal.tsx create mode 100644 source/components/Modal/FaucetModal.tsx diff --git a/source/assets/images/faucetmodal.png b/source/assets/images/faucetmodal.png new file mode 100644 index 0000000000000000000000000000000000000000..7f15444cf36838209f8b3258522a0267e5579ab4 GIT binary patch literal 5053 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 T*PYoi00000NkvXXu0mjfB^{}2 literal 0 HcmV?d00001 diff --git a/source/components/Modal/FaucetAccessModal.tsx b/source/components/Modal/FaucetAccessModal.tsx new file mode 100644 index 000000000..92d0a59ea --- /dev/null +++ b/source/components/Modal/FaucetAccessModal.tsx @@ -0,0 +1,21 @@ +import React from 'react'; + +import rolluxLogo from 'assets/images/rolluxChain.png'; +import sysLogo from 'assets/images/sysChain.svg'; + +interface IFaucetFirstAccessModal { + onClose?: () => any; + show?: boolean; +} + +export const FaucetAccessModal = () => ( +
+
+ + +
+

+ Grab $SYS with our faucet on the Rollux chain! +

+
+); diff --git a/source/components/Modal/FaucetModal.tsx b/source/components/Modal/FaucetModal.tsx new file mode 100644 index 000000000..6f2485355 --- /dev/null +++ b/source/components/Modal/FaucetModal.tsx @@ -0,0 +1,36 @@ +import React from 'react'; + +import { Icon } from '..'; +import image from 'assets/images/faucetmodal.png'; +import rolluxLogo from 'assets/images/rolluxChain.png'; +import sysLogo from 'assets/images/sysChain.svg'; + +interface IFaucetFirstAccessModal { + onClose?: () => any; + show?: boolean; +} + +export const FaucetFirstAccessModal = () => ( +
+
+
+ + +
+
+

+ Grab $SYS with our faucet! +

+
+
+ + +
+); diff --git a/source/pages/Home/Home.tsx b/source/pages/Home/Home.tsx index 0dc977afa..26e513a30 100755 --- a/source/pages/Home/Home.tsx +++ b/source/pages/Home/Home.tsx @@ -6,6 +6,8 @@ import { useLocation } from 'react-router-dom'; import { CustomJsonRpcProvider } from '@pollum-io/sysweb3-keyring'; import { Header, Icon, Button, Loading } from 'components/index'; +import { FaucetAccessModal } from 'components/Modal/FaucetAccessModal'; +import { FaucetFirstAccessModal } from 'components/Modal/FaucetModal'; import { StatusModal } from 'components/Modal/StatusModal'; import { ConnectHardwareWallet } from 'components/Modal/WarningBaseModal'; import { usePrice, useUtils } from 'hooks/index'; @@ -134,7 +136,8 @@ export const Home = () => { !isNetworkChanging ? ( <>
- + +
@@ -193,19 +196,6 @@ export const Home = () => { /> {t('buttons.receive')} - -
{isWalletImported && ( From 28a65ac72d84b9c00c34ff13a90a8b60252806d3 Mon Sep 17 00:00:00 2001 From: GabriePrediger Date: Mon, 29 Apr 2024 14:36:51 -0300 Subject: [PATCH 03/11] feat: faucet flag UI UX on network --- source/components/Header/Header.tsx | 2 +- .../components/Header/Menus/NetworkMenu.tsx | 42 +++++++++++++------ source/components/Modal/FaucetAccessModal.tsx | 2 +- source/components/Modal/FaucetModal.tsx | 2 +- 4 files changed, 33 insertions(+), 15 deletions(-) diff --git a/source/components/Header/Header.tsx b/source/components/Header/Header.tsx index 85897b776..6c2eb4f35 100755 --- a/source/components/Header/Header.tsx +++ b/source/components/Header/Header.tsx @@ -70,7 +70,7 @@ export const Header: React.FC = ({ accountHeader = false }) => { return (
-
+
= ( return ( {(menuprops) => ( <> @@ -250,11 +250,20 @@ export const NetworkMenu: React.FC = ( activeNetworkValidator( currentNetwork ) && ( - +
+ + +
+
+

+ Faucet +

+
+
)} ) @@ -304,7 +313,7 @@ export const NetworkMenu: React.FC = ( : index === arr.length - 1 ? 'rounded-bl-lg rounded-br-lg' : 'border-b border-dashed border-gray-600' - } flex flex-row items-center justify-start mx-auto p-2 max-w-95 text-white text-sm font-medium active:bg-opacity-40 bg-brand-blue500 focus:outline-none cursor-pointer transform transition duration-300`} + } flex relative flex-row items-center justify-start mx-auto p-2 max-w-95 text-white text-sm font-medium active:bg-opacity-40 bg-brand-blue500 focus:outline-none cursor-pointer transform transition duration-300`} onClick={() => handleChangeNetwork( currentNetwork, @@ -318,11 +327,20 @@ export const NetworkMenu: React.FC = ( {!isBitcoinBased && activeNetworkValidator(currentNetwork) && ( - +
+ + +
+
+

+ Faucet +

+
+
)} ))} diff --git a/source/components/Modal/FaucetAccessModal.tsx b/source/components/Modal/FaucetAccessModal.tsx index 92d0a59ea..9ffc9fcb5 100644 --- a/source/components/Modal/FaucetAccessModal.tsx +++ b/source/components/Modal/FaucetAccessModal.tsx @@ -9,7 +9,7 @@ interface IFaucetFirstAccessModal { } export const FaucetAccessModal = () => ( -
+
diff --git a/source/components/Modal/FaucetModal.tsx b/source/components/Modal/FaucetModal.tsx index 6f2485355..c44dde9fe 100644 --- a/source/components/Modal/FaucetModal.tsx +++ b/source/components/Modal/FaucetModal.tsx @@ -11,7 +11,7 @@ interface IFaucetFirstAccessModal { } export const FaucetFirstAccessModal = () => ( -
+
From 1e48a5df0f1ba4c721a2bee900fe2d696fddcfd6 Mon Sep 17 00:00:00 2001 From: GabriePrediger Date: Mon, 29 Apr 2024 16:07:24 -0300 Subject: [PATCH 04/11] feat: faucet steps component --- source/assets/images/faucet-error.svg | 4 ++ source/assets/images/faucet-loading.svg | 4 ++ source/assets/images/faucet-success.svg | 5 ++ .../Faucet/Components/FaucetApiFeedback.tsx | 17 +++++ .../Faucet/Components/FaucetCardAccount.tsx | 32 +++++++++ .../Faucet/Components/FaucetFeedback.tsx | 20 ++++++ source/pages/Faucet/Components/index.ts | 3 + source/pages/Faucet/Faucet.tsx | 72 +++++++++++++++++++ source/pages/Faucet/Utils/index.tsx | 25 +++++++ source/pages/Faucet/index.tsx | 1 + source/routers/index.tsx | 6 ++ 11 files changed, 189 insertions(+) create mode 100644 source/assets/images/faucet-error.svg create mode 100644 source/assets/images/faucet-loading.svg create mode 100644 source/assets/images/faucet-success.svg create mode 100644 source/pages/Faucet/Components/FaucetApiFeedback.tsx create mode 100644 source/pages/Faucet/Components/FaucetCardAccount.tsx create mode 100644 source/pages/Faucet/Components/FaucetFeedback.tsx create mode 100644 source/pages/Faucet/Components/index.ts create mode 100644 source/pages/Faucet/Faucet.tsx create mode 100644 source/pages/Faucet/Utils/index.tsx create mode 100644 source/pages/Faucet/index.tsx diff --git a/source/assets/images/faucet-error.svg b/source/assets/images/faucet-error.svg new file mode 100644 index 000000000..ffe9d6b33 --- /dev/null +++ b/source/assets/images/faucet-error.svg @@ -0,0 +1,4 @@ + + + + diff --git a/source/assets/images/faucet-loading.svg b/source/assets/images/faucet-loading.svg new file mode 100644 index 000000000..179d6689d --- /dev/null +++ b/source/assets/images/faucet-loading.svg @@ -0,0 +1,4 @@ + + + + diff --git a/source/assets/images/faucet-success.svg b/source/assets/images/faucet-success.svg new file mode 100644 index 000000000..5090ae89f --- /dev/null +++ b/source/assets/images/faucet-success.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/source/pages/Faucet/Components/FaucetApiFeedback.tsx b/source/pages/Faucet/Components/FaucetApiFeedback.tsx new file mode 100644 index 000000000..da80a12cd --- /dev/null +++ b/source/pages/Faucet/Components/FaucetApiFeedback.tsx @@ -0,0 +1,17 @@ +import React from 'react'; + +type FaucedApiFeedbackProps = { + apiResponse: string; + apiTitle: string; +}; +export const FaucetApiFeedback: React.FC = ({ + apiTitle, + apiResponse, +}) => ( +
+

{apiTitle}

+

+ {apiResponse} +

+
+); diff --git a/source/pages/Faucet/Components/FaucetCardAccount.tsx b/source/pages/Faucet/Components/FaucetCardAccount.tsx new file mode 100644 index 000000000..4d1e6f66b --- /dev/null +++ b/source/pages/Faucet/Components/FaucetCardAccount.tsx @@ -0,0 +1,32 @@ +import { toSvg } from 'jdenticon'; +import React, { useEffect } from 'react'; + +type FaucetCardAccountProps = { + accountAddress: string; + accountImg: string; + accountName: string; +}; +export const FaucetCardAccount: React.FC = ({ + accountName, + accountAddress, + accountImg, +}) => { + useEffect(() => { + const placeholder = document.querySelector('.add-identicon'); + if (!placeholder) return; + + placeholder.innerHTML = toSvg(accountImg, 50, { + backColor: '#07152B', + padding: 1, + }); + }, [accountImg]); + return ( +
+
+
+

{accountName}

+

{accountAddress}

+
+
+ ); +}; diff --git a/source/pages/Faucet/Components/FaucetFeedback.tsx b/source/pages/Faucet/Components/FaucetFeedback.tsx new file mode 100644 index 000000000..06fece1a0 --- /dev/null +++ b/source/pages/Faucet/Components/FaucetFeedback.tsx @@ -0,0 +1,20 @@ +import React from 'react'; + +type FaucedFeedbackProps = { + icon: string; + textFeedbackDesc: string; + textFeedbackTitle: string; +}; +export const FaucetFeedback: React.FC = ({ + icon, + textFeedbackDesc, + textFeedbackTitle, +}) => ( +
+ +

+ {textFeedbackTitle} +

+

{textFeedbackDesc}

+
+); diff --git a/source/pages/Faucet/Components/index.ts b/source/pages/Faucet/Components/index.ts new file mode 100644 index 000000000..51df4f69d --- /dev/null +++ b/source/pages/Faucet/Components/index.ts @@ -0,0 +1,3 @@ +export * from './FaucetApiFeedback'; +export * from './FaucetCardAccount'; +export * from './FaucetFeedback'; diff --git a/source/pages/Faucet/Faucet.tsx b/source/pages/Faucet/Faucet.tsx new file mode 100644 index 000000000..a7971d26a --- /dev/null +++ b/source/pages/Faucet/Faucet.tsx @@ -0,0 +1,72 @@ +import React, { useState } from 'react'; + +import errorIcon from 'assets/images/faucet-error.svg'; +import loadingIcon from 'assets/images/faucet-loading.svg'; +import successIcon from 'assets/images/faucet-success.svg'; +import { Layout } from 'components/Layout'; + +import { + FaucetApiFeedback, + FaucetCardAccount, + FaucetFeedback, +} from './Components'; +import { FaucetComponentStates } from './Utils'; + +export const Faucet = () => { + const [state, setState] = useState(`loading`); + const { account } = FaucetComponentStates(); + + return ( + + {state === `request` && ( + <> + + + + + )} + {state === `loading` && ( + <> + + + )} + {state === `error` && ( + <> + + + )} + {state === `success` && ( + <> + + + + )} + + ); +}; diff --git a/source/pages/Faucet/Utils/index.tsx b/source/pages/Faucet/Utils/index.tsx new file mode 100644 index 000000000..9397099ef --- /dev/null +++ b/source/pages/Faucet/Utils/index.tsx @@ -0,0 +1,25 @@ +import { toSvg } from 'jdenticon'; +import { useEffect, useState } from 'react'; +import { useSelector } from 'react-redux'; + +import { RootState } from 'state/store'; +import { ellipsis } from 'utils/format'; + +export const FaucetComponentStates = () => { + const activeAccount = useSelector( + (state: RootState) => state.vault.activeAccount + ); + const { accounts } = useSelector((state: RootState) => state.vault); + + const [account] = useState({ + img: accounts[activeAccount.type][activeAccount.id]?.xpub, + label: accounts[activeAccount.type][activeAccount.id]?.label, + address: ellipsis( + accounts[activeAccount.type][activeAccount.id]?.address, + 4, + 4 + ), + }); + + return { account }; +}; diff --git a/source/pages/Faucet/index.tsx b/source/pages/Faucet/index.tsx new file mode 100644 index 000000000..89d8bbf76 --- /dev/null +++ b/source/pages/Faucet/index.tsx @@ -0,0 +1 @@ +export { Faucet } from './Faucet'; diff --git a/source/routers/index.tsx b/source/routers/index.tsx index 521626668..96c923e7b 100644 --- a/source/routers/index.tsx +++ b/source/routers/index.tsx @@ -41,6 +41,7 @@ import { import { WarningModal } from 'components/Modal'; import { useUtils } from 'hooks/index'; import { ChainErrorPage } from 'pages/Chain'; +import { Faucet } from 'pages/Faucet'; import { SwitchNetwork } from 'pages/SwitchNetwork'; import { inactivityTime, @@ -198,6 +199,11 @@ export const Router = () => { element={} />} /> + } />} + /> + } />} From 515f8030c255c5cc260c2bbbf2ba5471d53d56cf Mon Sep 17 00:00:00 2001 From: GabriePrediger Date: Mon, 6 May 2024 17:46:33 -0300 Subject: [PATCH 05/11] feat: implemented faucet modals logic --- .../components/Header/Menus/GeneralMenu.tsx | 2 +- .../components/Header/Menus/NetworkMenu.tsx | 34 +++-- source/components/Modal/FaucetAccessModal.tsx | 28 ++-- source/components/Modal/FaucetModal.tsx | 19 ++- .../Faucet/Components/FaucetApiFeedback.tsx | 56 ++++++-- .../Faucet/Components/FaucetFeedback.tsx | 6 +- source/pages/Faucet/Faucet.tsx | 50 +++++--- source/pages/Faucet/Types/index.ts | 7 + .../Faucet/Utils/FaucetComponentStates.tsx | 120 ++++++++++++++++++ source/pages/Faucet/Utils/NetworksInfos.ts | 31 +++++ source/pages/Faucet/Utils/index.tsx | 25 ---- source/pages/Home/Home.tsx | 30 +++-- .../controllers/faucetController.ts | 16 +-- .../controllers/message-handler/types.ts | 7 + source/state/vault/index.ts | 17 +++ source/state/vault/types.ts | 3 + 16 files changed, 340 insertions(+), 111 deletions(-) create mode 100644 source/pages/Faucet/Types/index.ts create mode 100644 source/pages/Faucet/Utils/FaucetComponentStates.tsx create mode 100644 source/pages/Faucet/Utils/NetworksInfos.ts delete mode 100644 source/pages/Faucet/Utils/index.tsx diff --git a/source/components/Header/Menus/GeneralMenu.tsx b/source/components/Header/Menus/GeneralMenu.tsx index 551349c18..e8d800e45 100644 --- a/source/components/Header/Menus/GeneralMenu.tsx +++ b/source/components/Header/Menus/GeneralMenu.tsx @@ -66,7 +66,7 @@ export const GeneralMenu: React.FC = () => { return (
= ( > {(menuprops) => ( <> - + {activeNetwork.label} = ( className="w-4 relative bottom-0.5" wrapperClassname="w-6" /> - -
-
-

- Faucet -

-
)} @@ -324,24 +318,26 @@ export const NetworkMenu: React.FC = ( {currentNetwork.label} - - {!isBitcoinBased && - activeNetworkValidator(currentNetwork) && ( -
+
+ {!isBitcoinBased && + activeNetworkValidator(currentNetwork) && ( - -
-
-

- Faucet -

-
+ )} + {Object.values(FaucetChainIds).includes( + currentNetwork.chainId + ) && ( +
+
+

+ Faucet +

)} +
))} diff --git a/source/components/Modal/FaucetAccessModal.tsx b/source/components/Modal/FaucetAccessModal.tsx index 9ffc9fcb5..79a7622b0 100644 --- a/source/components/Modal/FaucetAccessModal.tsx +++ b/source/components/Modal/FaucetAccessModal.tsx @@ -2,20 +2,28 @@ import React from 'react'; import rolluxLogo from 'assets/images/rolluxChain.png'; import sysLogo from 'assets/images/sysChain.svg'; +import { useUtils } from 'hooks/useUtils'; interface IFaucetFirstAccessModal { onClose?: () => any; show?: boolean; } -export const FaucetAccessModal = () => ( -
-
- - +export const FaucetAccessModal = () => { + const { navigate } = useUtils(); + + return ( +
navigate('/faucet')} + className="cursor-pointer z-[88] py-2 justify-center absolute left-[4.3%] top-[8rem] w-[364px] flex items-center rounded-b-[20px] bg-brand-blue400" + > +
+ + +
+

+ Grab $SYS with our faucet on the Rollux chain! +

-

- Grab $SYS with our faucet on the Rollux chain! -

-
-); + ); +}; diff --git a/source/components/Modal/FaucetModal.tsx b/source/components/Modal/FaucetModal.tsx index c44dde9fe..20f7a8116 100644 --- a/source/components/Modal/FaucetModal.tsx +++ b/source/components/Modal/FaucetModal.tsx @@ -5,12 +5,7 @@ import image from 'assets/images/faucetmodal.png'; import rolluxLogo from 'assets/images/rolluxChain.png'; import sysLogo from 'assets/images/sysChain.svg'; -interface IFaucetFirstAccessModal { - onClose?: () => any; - show?: boolean; -} - -export const FaucetFirstAccessModal = () => ( +export const FaucetFirstAccessModal = ({ handleOnClose }: any) => (
@@ -27,10 +22,12 @@ export const FaucetFirstAccessModal = () => ( className="absolute w-[352px] rounded-[20px] h-[91px] left-0 overflow-hidden" src={image} /> - + + +
); diff --git a/source/pages/Faucet/Components/FaucetApiFeedback.tsx b/source/pages/Faucet/Components/FaucetApiFeedback.tsx index da80a12cd..58ed9524a 100644 --- a/source/pages/Faucet/Components/FaucetApiFeedback.tsx +++ b/source/pages/Faucet/Components/FaucetApiFeedback.tsx @@ -1,17 +1,55 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; +import { useTranslation } from 'react-i18next'; + +import { StatusModal } from 'components/Modal/StatusModal'; type FaucedApiFeedbackProps = { apiResponse: string; apiTitle: string; + status?: string; }; export const FaucetApiFeedback: React.FC = ({ apiTitle, apiResponse, -}) => ( -
-

{apiTitle}

-

- {apiResponse} -

-
-); + status, +}) => { + const [isCopied, setIsCopied] = useState(false); + const { t } = useTranslation(); + + const handleCopyToClipboard = () => { + setIsCopied(!isCopied); + navigator.clipboard.writeText(apiResponse); + }; + + useEffect(() => { + const timeoutDuration = 1000; + const timeoutId = setTimeout(() => { + setIsCopied(false); + }, timeoutDuration); + + return () => clearTimeout(timeoutId); + }, [isCopied]); + + return ( + <> + +
+

{apiTitle}

+

(status ? handleCopyToClipboard() : null)} + className="text-white text-sm underline overflow-hidden" + style={{ + cursor: status ? 'pointer' : 'default', + }} + > + {apiResponse} +

+
+ + ); +}; diff --git a/source/pages/Faucet/Components/FaucetFeedback.tsx b/source/pages/Faucet/Components/FaucetFeedback.tsx index 06fece1a0..34e297779 100644 --- a/source/pages/Faucet/Components/FaucetFeedback.tsx +++ b/source/pages/Faucet/Components/FaucetFeedback.tsx @@ -11,10 +11,12 @@ export const FaucetFeedback: React.FC = ({ textFeedbackTitle, }) => (
- +

{textFeedbackTitle}

-

{textFeedbackDesc}

+

+ {textFeedbackDesc} +

); diff --git a/source/pages/Faucet/Faucet.tsx b/source/pages/Faucet/Faucet.tsx index a7971d26a..4fc2b6ea0 100644 --- a/source/pages/Faucet/Faucet.tsx +++ b/source/pages/Faucet/Faucet.tsx @@ -1,42 +1,52 @@ -import React, { useState } from 'react'; +import React from 'react'; import errorIcon from 'assets/images/faucet-error.svg'; import loadingIcon from 'assets/images/faucet-loading.svg'; import successIcon from 'assets/images/faucet-success.svg'; +import { NeutralButton } from 'components/Button'; import { Layout } from 'components/Layout'; +import { ellipsis } from 'utils/format'; import { FaucetApiFeedback, FaucetCardAccount, FaucetFeedback, } from './Components'; -import { FaucetComponentStates } from './Utils'; +import { FaucetComponentStates } from './Utils/FaucetComponentStates'; export const Faucet = () => { - const [state, setState] = useState(`loading`); - const { account } = FaucetComponentStates(); + const { + account, + status, + handleFaucetButton, + faucetButtonLabel, + isLoading, + faucetRequestDetails, + errorMessage, + txHash, + } = FaucetComponentStates(); return ( - {state === `request` && ( + {status === `request` && !isLoading && ( <> )} - {state === `loading` && ( + {isLoading && ( <> { /> )} - {state === `error` && ( + {status === `error` && !isLoading && ( <> )} - {state === `success` && ( + {status === `success` && !isLoading && ( <> )} + {!isLoading && ( +
+ + {faucetButtonLabel} + +
+ )} ); }; diff --git a/source/pages/Faucet/Types/index.ts b/source/pages/Faucet/Types/index.ts new file mode 100644 index 000000000..1ac77b5b8 --- /dev/null +++ b/source/pages/Faucet/Types/index.ts @@ -0,0 +1,7 @@ +export type faucetTxDetailsProps = { + icon: string; + networkName: string; + quantity: number; + smartContract: string; + token: string; +}; diff --git a/source/pages/Faucet/Utils/FaucetComponentStates.tsx b/source/pages/Faucet/Utils/FaucetComponentStates.tsx new file mode 100644 index 000000000..58f9ca4f6 --- /dev/null +++ b/source/pages/Faucet/Utils/FaucetComponentStates.tsx @@ -0,0 +1,120 @@ +import { useCallback, useEffect, useMemo, useState } from 'react'; +import { useSelector } from 'react-redux'; + +import { faucetTxDetailsProps } from '../Types'; +import { useUtils } from 'hooks/useUtils'; +import { claimFaucet } from 'scripts/Background/controllers/faucetController'; +import { FaucetChainIds } from 'scripts/Background/controllers/message-handler/types'; +import { RootState } from 'state/store'; + +import { + faucetTxRolluxInfo, + faucetTxRolluxTestnetInfo, + faucetTxSyscoinNEVMInfo, + faucetTxSyscoinNEVMTestnetInfo, +} from './NetworksInfos'; + +export const FaucetComponentStates = () => { + const activeAccount = useSelector( + (state: RootState) => state.vault.activeAccount + ); + const { accounts, activeNetwork } = useSelector( + (state: RootState) => state.vault + ); + + const [status, setStatus] = useState(`request`); + const [isLoading, setIsLoading] = useState(false); + const [txHash, setTxHash] = useState(``); + + const [errorMessage, setErrorMessage] = useState(''); + + const [faucetTxDetailsInfo, setFaucetTxDetailsInfo] = useState( + {} as faucetTxDetailsProps + ); + + const { navigate } = useUtils(); + + const account = { + img: accounts[activeAccount.type][activeAccount.id]?.xpub, + label: accounts[activeAccount.type][activeAccount.id]?.label, + address: accounts[activeAccount.type][activeAccount.id]?.address, + }; + + const faucetRequestDetails = { + icon: faucetTxDetailsInfo?.icon, + tokenSymbol: faucetTxDetailsInfo?.token, + networkName: faucetTxDetailsInfo?.networkName, + grabText: `Grab ${faucetTxDetailsInfo.token} with our faucet to begin experiencing the ${faucetTxDetailsInfo.networkName} network!`, + tokenQuantity: `You can get ${faucetTxDetailsInfo.quantity} ${faucetTxDetailsInfo.token} per wallet address every 24h.`, + smartContract: faucetTxDetailsInfo.smartContract, + }; + + const handleRequestFaucet = async () => { + setIsLoading(true); + try { + const { data: request } = await claimFaucet( + activeNetwork.chainId, + account.address + ); + if (!request?.status) { + setStatus('error'); + setErrorMessage(request?.message); + } else { + setTxHash(request?.hash); + setStatus(`success`); + } + } catch (error) { + setStatus('error'); + setErrorMessage(error); + } finally { + setIsLoading(false); + } + }; + + const handleFaucetButton = useCallback(() => { + if (status === 'request' || status === 'error') { + return handleRequestFaucet(); + } else if (status === 'success') { + return navigate('/home'); + } else { + return; + } + }, [status]); + + const faucetButtonLabel = useMemo(() => { + let buttonName: string; + if (status === 'request') { + buttonName = 'Request Now'; + } else if (status === 'success') { + buttonName = 'Close'; + } else if (status === 'error') { + buttonName = 'Try again'; + } else { + return; + } + return buttonName; + }, [status]); + + useEffect(() => { + if (activeNetwork.chainId === FaucetChainIds.RolluxMainnet) { + setFaucetTxDetailsInfo(faucetTxRolluxInfo); + } else if (activeNetwork.chainId === FaucetChainIds.RolluxTestnet) { + setFaucetTxDetailsInfo(faucetTxRolluxTestnetInfo); + } else if (activeNetwork.chainId === FaucetChainIds.nevmMainnet) { + setFaucetTxDetailsInfo(faucetTxSyscoinNEVMInfo); + } else { + setFaucetTxDetailsInfo(faucetTxSyscoinNEVMTestnetInfo); + } + }, [activeNetwork]); + + return { + account, + status, + handleFaucetButton, + faucetButtonLabel, + isLoading, + faucetRequestDetails, + errorMessage, + txHash, + }; +}; diff --git a/source/pages/Faucet/Utils/NetworksInfos.ts b/source/pages/Faucet/Utils/NetworksInfos.ts new file mode 100644 index 000000000..ee1a5ddb1 --- /dev/null +++ b/source/pages/Faucet/Utils/NetworksInfos.ts @@ -0,0 +1,31 @@ +export const faucetTxRolluxInfo = { + icon: 'assets/images/rolluxChain.png', + token: '$SYS', + networkName: 'Rollux', + quantity: 0.001, + smartContract: '0x35EE5876Db071b527dC62FD3EE3c32e4304d8C23', +}; + +export const faucetTxRolluxTestnetInfo = { + icon: 'assets/images/rolluxChain.png', + token: '$TSYS', + networkName: 'Rollux Testnet', + quantity: 1, + smartContract: '0x35EE5876Db071b527dC62FD3EE3c32e4304d8C23', +}; + +export const faucetTxSyscoinNEVMInfo = { + icon: 'assets/images/sysChain.svg', + token: '$SYS', + networkName: 'Syscoin NEVM', + quantity: 0.01, + smartContract: '0x35EE5876Db071b527dC62FD3EE3c32e4304d8C23', +}; + +export const faucetTxSyscoinNEVMTestnetInfo = { + icon: 'assets/images/sysChain.svg', + token: '$TSYS', + networkName: 'Syscoin NEVM Testnet', + quantity: 1, + smartContract: '0x35EE5876Db071b527dC62FD3EE3c32e4304d8C23', +}; diff --git a/source/pages/Faucet/Utils/index.tsx b/source/pages/Faucet/Utils/index.tsx deleted file mode 100644 index 9397099ef..000000000 --- a/source/pages/Faucet/Utils/index.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { toSvg } from 'jdenticon'; -import { useEffect, useState } from 'react'; -import { useSelector } from 'react-redux'; - -import { RootState } from 'state/store'; -import { ellipsis } from 'utils/format'; - -export const FaucetComponentStates = () => { - const activeAccount = useSelector( - (state: RootState) => state.vault.activeAccount - ); - const { accounts } = useSelector((state: RootState) => state.vault); - - const [account] = useState({ - img: accounts[activeAccount.type][activeAccount.id]?.xpub, - label: accounts[activeAccount.type][activeAccount.id]?.label, - address: ellipsis( - accounts[activeAccount.type][activeAccount.id]?.address, - 4, - 4 - ), - }); - - return { account }; -}; diff --git a/source/pages/Home/Home.tsx b/source/pages/Home/Home.tsx index 26e513a30..d48c058eb 100755 --- a/source/pages/Home/Home.tsx +++ b/source/pages/Home/Home.tsx @@ -11,8 +11,8 @@ import { FaucetFirstAccessModal } from 'components/Modal/FaucetModal'; import { StatusModal } from 'components/Modal/StatusModal'; import { ConnectHardwareWallet } from 'components/Modal/WarningBaseModal'; import { usePrice, useUtils } from 'hooks/index'; -import { claimFaucet } from 'scripts/Background/controllers/faucetController'; -import { RootState } from 'state/store'; +import store, { RootState } from 'state/store'; +import { setFaucetModalState } from 'state/vault'; import { getController } from 'utils/browser'; import { ONE_MILLION, @@ -44,6 +44,7 @@ export const Home = () => { isBitcoinBased, lastLogin, isLoadingBalances, + faucetModal, } = useSelector((state: RootState) => state.vault); //* States @@ -121,11 +122,13 @@ export const Home = () => { return formatBalanceDecimals(fiatPriceValue, true); }, [fiatPriceValue, isTestnet, moreThanMillion]); - const handleFaucet = useCallback( - async (chainId: number, walletAddress: string) => { - await claimFaucet(chainId, walletAddress); - }, - [] + const handleOnClose = useCallback(() => { + store.dispatch(setFaucetModalState({ chainId: activeNetwork.chainId })); + }, []); + + const hasClosedFirstModal = useMemo( + () => !faucetModal[activeNetwork.chainId], + [faucetModal, activeNetwork.chainId] ); return ( @@ -136,8 +139,17 @@ export const Home = () => { !isNetworkChanging ? ( <>
- - + + {!isBitcoinBased && ( + <> + {!hasClosedFirstModal ? ( + + ) : ( + + )} + + )} +
diff --git a/source/scripts/Background/controllers/faucetController.ts b/source/scripts/Background/controllers/faucetController.ts index 613a0dedc..03d0e1c92 100644 --- a/source/scripts/Background/controllers/faucetController.ts +++ b/source/scripts/Background/controllers/faucetController.ts @@ -1,27 +1,25 @@ import axios from 'axios'; const claimFaucet = async (chainId: number, walletAddress: string) => { - let wallet: string; + let chainName: string; if (chainId === 57) { - wallet = `nevm-mainnet`; + chainName = `nevm-mainnet`; } else if (chainId === 5700) { - wallet = `nevm-testnet`; + chainName = `nevm-testnet`; } else if (chainId === 57000) { - wallet = `rollux-testnet`; + chainName = `rollux-testnet`; } else if (chainId === 570) { - wallet = `rollux-mainnet`; + chainName = `rollux-mainnet`; } else { - wallet = ``; + chainName = ``; } const { data } = await axios.get( - `https://chains.tools/api/faucet/claim?networkKey=${wallet}&walletAddress=${walletAddress}` + `https://chains.tools/api/faucet/claim?networkKey=${chainName}&walletAddress=${walletAddress}` ); - console.log(data); return data; }; export { claimFaucet }; -//nevm-testnet nevm-mainnet rollux-testnet rollux-mainnet diff --git a/source/scripts/Background/controllers/message-handler/types.ts b/source/scripts/Background/controllers/message-handler/types.ts index af875f982..73eecea6f 100644 --- a/source/scripts/Background/controllers/message-handler/types.ts +++ b/source/scripts/Background/controllers/message-handler/types.ts @@ -10,6 +10,13 @@ export enum HardWallets { TREZOR = 'TREZOR', } +export enum FaucetChainIds { + RolluxMainnet = 570, + RolluxTestnet = 57000, + nevmTestnet = 5700, + nevmMainnet = 57, +} + //TODO: addtype for rpc subscription notifications here export enum PaliEvents { accountsChanged = 'pali_accountsChanged', diff --git a/source/state/vault/index.ts b/source/state/vault/index.ts index 9fa81d67c..52459e616 100644 --- a/source/state/vault/index.ts +++ b/source/state/vault/index.ts @@ -79,6 +79,12 @@ export const initialState: IVaultState = { networks: initialNetworksState, error: false, isPolling: false, + faucetModal: { + 57: true, + 570: true, + 5700: true, + 57000: true, + }, currentBlock: undefined, coinsList: [], }; @@ -300,6 +306,16 @@ const VaultState = createSlice({ setIsNetworkChanging(state: IVaultState, action: PayloadAction) { state.isNetworkChanging = action.payload; }, + setFaucetModalState: ( + state: IVaultState, + action: PayloadAction<{ + chainId: number; + }> + ) => { + const { chainId } = action.payload; + + state.faucetModal[chainId] = false; + }, setIsDappAskingToChangeNetwork( state: IVaultState, action: PayloadAction @@ -816,6 +832,7 @@ export const { setTransactionStatusToAccelerated, setCoinsList, setIsLastTxConfirmed, + setFaucetModalState, } = VaultState.actions; export default VaultState.reducer; diff --git a/source/state/vault/types.ts b/source/state/vault/types.ts index 7a8b1e78a..6598f1132 100644 --- a/source/state/vault/types.ts +++ b/source/state/vault/types.ts @@ -28,6 +28,9 @@ export interface IVaultState { coinsList: any[]; currentBlock: ethers.providers.Block; error: boolean; + faucetModal: { + [k: number]: boolean; + }; hasErrorOndAppEVM: boolean; hasEthProperty: boolean; isBitcoinBased: boolean; From 495afc6495a8c1574ea43fa3bf6a404ea12a6222 Mon Sep 17 00:00:00 2001 From: Lucas Lovato Date: Mon, 6 May 2024 19:26:25 -0300 Subject: [PATCH 06/11] chore: adjust faucet modal handling --- source/components/Modal/FaucetModal.tsx | 4 +- source/pages/Faucet/Faucet.tsx | 1 + source/pages/Home/Home.tsx | 74 +++++++++++++------ .../Background/controllers/MainController.ts | 8 +- source/state/vault/index.ts | 10 +-- source/types/controllers.ts | 1 + 6 files changed, 67 insertions(+), 31 deletions(-) diff --git a/source/components/Modal/FaucetModal.tsx b/source/components/Modal/FaucetModal.tsx index 20f7a8116..3f35e9cbd 100644 --- a/source/components/Modal/FaucetModal.tsx +++ b/source/components/Modal/FaucetModal.tsx @@ -5,7 +5,9 @@ import image from 'assets/images/faucetmodal.png'; import rolluxLogo from 'assets/images/rolluxChain.png'; import sysLogo from 'assets/images/sysChain.svg'; -export const FaucetFirstAccessModal = ({ handleOnClose }: any) => ( +export const FaucetFirstAccessModal = ( + { handleOnClose }: any //todo: type handleClose +) => (
diff --git a/source/pages/Faucet/Faucet.tsx b/source/pages/Faucet/Faucet.tsx index 4fc2b6ea0..a96f5ac0b 100644 --- a/source/pages/Faucet/Faucet.tsx +++ b/source/pages/Faucet/Faucet.tsx @@ -27,6 +27,7 @@ export const Faucet = () => { } = FaucetComponentStates(); return ( + //! Question: is the label always like that? {status === `request` && !isLoading && ( <> diff --git a/source/pages/Home/Home.tsx b/source/pages/Home/Home.tsx index d48c058eb..90a5e8bd5 100755 --- a/source/pages/Home/Home.tsx +++ b/source/pages/Home/Home.tsx @@ -11,7 +11,7 @@ import { FaucetFirstAccessModal } from 'components/Modal/FaucetModal'; import { StatusModal } from 'components/Modal/StatusModal'; import { ConnectHardwareWallet } from 'components/Modal/WarningBaseModal'; import { usePrice, useUtils } from 'hooks/index'; -import store, { RootState } from 'state/store'; +import { RootState } from 'state/store'; import { setFaucetModalState } from 'state/vault'; import { getController } from 'utils/browser'; import { @@ -33,7 +33,7 @@ export const Home = () => { //* Selectors const { asset: fiatAsset, price: fiatPrice } = useSelector( - (state: RootState) => state.price.fiat + (priceState: RootState) => priceState.price.fiat ); const isWalletImported = state?.isWalletImported; const { @@ -45,7 +45,7 @@ export const Home = () => { lastLogin, isLoadingBalances, faucetModal, - } = useSelector((state: RootState) => state.vault); + } = useSelector((rootState: RootState) => rootState.vault); //* States const [isTestnet, setIsTestnet] = useState(false); @@ -55,19 +55,33 @@ export const Home = () => { //* Constants const { url } = activeNetwork; const controller = getController(); + const { wallet } = controller; + const { isInCooldown }: CustomJsonRpcProvider = controller.wallet.ethereumTransaction.web3Provider; + const isUnlocked = controller.wallet.isUnlocked() && accounts[activeAccount.type][activeAccount.id].address !== ''; + const bgColor = isNetworkChanging ? 'bg-bkg-2' : 'bg-bkg-3'; const { syscoin: syscoinBalance, ethereum: ethereumBalance } = accounts[activeAccount.type][activeAccount.id].balances; - const actualBalance = isBitcoinBased ? syscoinBalance : ethereumBalance; - const moreThanMillion = actualBalance >= ONE_MILLION; + const actualBalance = useMemo( + () => (isBitcoinBased ? syscoinBalance : ethereumBalance), + [syscoinBalance, ethereumBalance] + ); + + const moreThanMillion = useMemo( + () => actualBalance > ONE_MILLION, + [actualBalance] + ); - const moreThanTrillion = actualBalance > ONE_TRILLION; + const moreThanTrillion = useMemo( + () => actualBalance > ONE_TRILLION, + [actualBalance] + ); const closeModal = () => { setShowModalCongrats(false); @@ -109,7 +123,7 @@ export const Home = () => { actualBalance, ]); - const formatFiatAmmount = useMemo(() => { + const formatFiatAmount = useMemo(() => { if (isTestnet) { return null; } @@ -122,28 +136,44 @@ export const Home = () => { return formatBalanceDecimals(fiatPriceValue, true); }, [fiatPriceValue, isTestnet, moreThanMillion]); - const handleOnClose = useCallback(() => { - store.dispatch(setFaucetModalState({ chainId: activeNetwork.chainId })); - }, []); + const handleOnCloseFaucetModal = useCallback(() => { + wallet.setFaucetModalState(activeNetwork.chainId); + }, [activeNetwork, setFaucetModalState]); - const hasClosedFirstModal = useMemo( - () => !faucetModal[activeNetwork.chainId], - [faucetModal, activeNetwork.chainId] + const shouldShowFaucetFirstModal = useMemo( + () => faucetModal[activeNetwork.chainId], + [faucetModal, activeNetwork] ); - return ( -
- {accounts[activeAccount.type][activeAccount.id] && + const formattedBalance = useMemo( + () => + moreThanMillion + ? formatMillionNumber(actualBalance) + : formatBalanceDecimals(actualBalance || 0, false), + [actualBalance, moreThanMillion] + ); + + const shouldRenderHomePage = useMemo( + () => + accounts[activeAccount.type][activeAccount.id] && lastLogin && isUnlocked && - !isNetworkChanging ? ( + !isNetworkChanging, + [accounts, activeAccount, lastLogin, isUnlocked, isNetworkChanging] + ); + + return ( +
+ {shouldRenderHomePage ? ( <>
{!isBitcoinBased && ( <> - {!hasClosedFirstModal ? ( - + {shouldShowFaucetFirstModal ? ( + ) : ( )} @@ -157,9 +187,7 @@ export const Home = () => { id="home-balance" className={`font-rubik text-5xl font-medium`} > - {moreThanMillion - ? formatMillionNumber(actualBalance) - : formatBalanceDecimals(actualBalance || 0, false)}{' '} + {formattedBalance}{' '}

{

-

{formatFiatAmmount}

+

{formatFiatAmount}

diff --git a/source/scripts/Background/controllers/MainController.ts b/source/scripts/Background/controllers/MainController.ts index f60ab1597..5a7b96125 100644 --- a/source/scripts/Background/controllers/MainController.ts +++ b/source/scripts/Background/controllers/MainController.ts @@ -52,6 +52,7 @@ import { setTransactionStatusToAccelerated, setUpdatedNftsToState, setOpenDAppErrorModal, + setFaucetModalState as setFaucetState, } from 'state/vault'; import { IOmmitedAccount, @@ -121,6 +122,10 @@ const MainController = (walletState): IMainController => { store.dispatch(setEthProperty(exist)); }; + const setFaucetModalState = (chainId: number) => { + store.dispatch(setFaucetState(chainId)); + }; + const setAdvancedSettings = (advancedProperty: string, isActive: boolean) => { store.dispatch(setSettings({ advancedProperty, isActive })); }; @@ -1090,8 +1095,6 @@ const MainController = (walletState): IMainController => { activeNetwork.url ); - console.log('updatedNfts', updatedNfts); - const validateUpdatedAndPreviousNftsLength = updatedNfts.length < currentAccount.assets.nfts.length; @@ -1644,6 +1647,7 @@ const MainController = (walletState): IMainController => { validatePendingEvmTransactions, ...keyringManager, openDAppErrorModal, + setFaucetModalState, }; }; diff --git a/source/state/vault/index.ts b/source/state/vault/index.ts index 52459e616..42fadf444 100644 --- a/source/state/vault/index.ts +++ b/source/state/vault/index.ts @@ -308,13 +308,13 @@ const VaultState = createSlice({ }, setFaucetModalState: ( state: IVaultState, - action: PayloadAction<{ - chainId: number; - }> + action: PayloadAction ) => { - const { chainId } = action.payload; + if (state.isBitcoinBased) { + return; + } - state.faucetModal[chainId] = false; + state.faucetModal[action.payload] = false; }, setIsDappAskingToChangeNetwork( state: IVaultState, diff --git a/source/types/controllers.ts b/source/types/controllers.ts index cdac0c482..06d8dcc9f 100644 --- a/source/types/controllers.ts +++ b/source/types/controllers.ts @@ -126,6 +126,7 @@ export interface IMainController extends IKeyringManager { newTxValue: IEvmTransactionResponse ) => void; setEvmTransactionAsCanceled: (txHash: string, chainID: number) => void; + setFaucetModalState: (chainId: number) => void; setHasEthProperty: (exist: boolean) => void; setIsAutolockEnabled: (isEnabled: boolean) => void; setIsLastTxConfirmed: ( From a1af66eaf68a05494380d9404cd4cadf88955279 Mon Sep 17 00:00:00 2001 From: GabriePrediger Date: Tue, 7 May 2024 11:22:48 -0300 Subject: [PATCH 07/11] feat: translation and adjustments --- source/assets/locales/en.json | 15 ++++ source/assets/locales/es.json | 15 ++++ source/assets/locales/pt-br.json | 17 +++- .../components/Header/Menus/NetworkMenu.tsx | 2 +- source/components/Modal/FaucetAccessModal.tsx | 18 ++-- source/components/Modal/FaucetModal.tsx | 65 +++++++++------ .../Faucet/Components/FaucetApiFeedback.tsx | 4 +- .../Faucet/Components/FaucetFeedback.tsx | 4 +- source/pages/Faucet/Faucet.tsx | 24 ++++-- .../Faucet/Utils/FaucetComponentStates.tsx | 20 +++-- source/pages/Faucet/Utils/NetworksInfos.ts | 31 ------- source/pages/Faucet/Utils/NetworksInfos.tsx | 83 +++++++++++++++++++ 12 files changed, 211 insertions(+), 87 deletions(-) delete mode 100644 source/pages/Faucet/Utils/NetworksInfos.ts create mode 100644 source/pages/Faucet/Utils/NetworksInfos.tsx diff --git a/source/assets/locales/en.json b/source/assets/locales/en.json index afa95ac5d..2a81efafb 100644 --- a/source/assets/locales/en.json +++ b/source/assets/locales/en.json @@ -521,5 +521,20 @@ "walletSeedPhrasePage": { "keepSeedPhrase": "Keep your seed phrase secret!", "anyoneWithThisInfo": "Anyone with this information is able to steal your funds." + }, + "faucet": { + "grabTextOne":"Grab ${{token}} with our faucet!", + "grabTextTwo":"Grab ${{token}} with our faucet on the {{rpcName}}!", + "pleaseWait":"Please wait while we work our magic...", + "doNotClose":"Do not close the wallet.", + "ERROR":"ERROR!", + "CONGRATULATIONS":"CONGRATULATIONS!", + "someHasJust":"Some {{tokenSymbol}} has just been sent to your {{networkName}} wallet.", + "transactionHash":"Transaction hash", + "requestNow": "Request Now", + "Close": "Close", + "tryAgain": "Try again", + "withOurFaucet": "Grab {{token}} with our faucet to begin experiencing the {{networkName}} network!", + "youCanGet": "You can get {{quantity}} {{token}} per wallet address every 24h." } } \ No newline at end of file diff --git a/source/assets/locales/es.json b/source/assets/locales/es.json index 58170badc..d2dd45443 100644 --- a/source/assets/locales/es.json +++ b/source/assets/locales/es.json @@ -521,5 +521,20 @@ "walletSeedPhrasePage": { "keepSeedPhrase": "¡Mantén en secreto tu seed frase!", "anyoneWithThisInfo": "Cualquier persona con esta información puede robar tus fondos." + }, + "faucet": { + "grabTextOne": "¡Obtén ${{token}} con nuestra llave!", + "grabTextTwo": "¡Obtén ${{token}} con nuestra llave en el {{rpcName}}!", + "pleaseWait": "Por favor, espere mientras hacemos nuestra magia...", + "doNotClose": "No cierres la billetera.", + "ERROR": "¡ERROR!", + "CONGRATULATIONS": "¡FELICITACIONES!", + "someHasJust": "Algo de {{tokenSymbol}} acaba de ser enviado a tu billetera de {{networkName}}.", + "transactionHash": "Hash de transacción", + "requestNow": "Solicitar ahora", + "Close": "Cerrar", + "tryAgain": "Intentar de nuevo", + "withOurFaucet": "¡Obtén {{token}} con nuestra llave para comenzar a experimentar la red {{networkName}}!", + "youCanGet": "Puedes obtener {{quantity}} {{token}} por dirección de billetera cada 24 horas." } } diff --git a/source/assets/locales/pt-br.json b/source/assets/locales/pt-br.json index 916982ccf..9c654d463 100644 --- a/source/assets/locales/pt-br.json +++ b/source/assets/locales/pt-br.json @@ -393,5 +393,20 @@ "transactionDetails": "DETALLES DE LA TRANSACCIÓN", "importWallet": "Importar billetera", "congratulations": "PARABÉNS!" - } + }, + "faucet": { + "grabTextOne": "Pegue ${{token}} com nossa torneira!", + "grabTextTwo": "Pegue ${{token}} com nossa torneira no {{rpcName}}!", + "pleaseWait": "Por favor, aguarde enquanto trabalhamos nossa mágica...", + "doNotClose": "Não feche a carteira.", + "ERROR": "ERRO!", + "CONGRATULATIONS": "PARABÉNS!", + "someHasJust": "Algum {{tokenSymbol}} acabou de ser enviado para sua carteira {{networkName}}.", + "transactionHash": "Hash da transação", + "requestNow": "Solicitar agora", + "Close": "Fechar", + "tryAgain": "Tentar novamente", + "withOurFaucet": "Pegue {{token}} com nossa torneira para começar a experimentar a rede {{networkName}}!", + "youCanGet": "Você pode obter {{quantity}} {{token}} por endereço de carteira a cada 24 horas." + } } diff --git a/source/components/Header/Menus/NetworkMenu.tsx b/source/components/Header/Menus/NetworkMenu.tsx index eb23db268..6472237e3 100644 --- a/source/components/Header/Menus/NetworkMenu.tsx +++ b/source/components/Header/Menus/NetworkMenu.tsx @@ -330,7 +330,7 @@ export const NetworkMenu: React.FC = ( {Object.values(FaucetChainIds).includes( currentNetwork.chainId ) && ( -
+

Faucet diff --git a/source/components/Modal/FaucetAccessModal.tsx b/source/components/Modal/FaucetAccessModal.tsx index 79a7622b0..fcc8a4b28 100644 --- a/source/components/Modal/FaucetAccessModal.tsx +++ b/source/components/Modal/FaucetAccessModal.tsx @@ -1,28 +1,30 @@ import React from 'react'; +import { useTranslation } from 'react-i18next'; import rolluxLogo from 'assets/images/rolluxChain.png'; import sysLogo from 'assets/images/sysChain.svg'; import { useUtils } from 'hooks/useUtils'; - -interface IFaucetFirstAccessModal { - onClose?: () => any; - show?: boolean; -} +import { useHandleNetworkTokenNames } from 'pages/Faucet/Utils/NetworksInfos'; export const FaucetAccessModal = () => { const { navigate } = useUtils(); + const { t } = useTranslation(); + const { tokenSymbol, networkName } = useHandleNetworkTokenNames(); return (

navigate('/faucet')} - className="cursor-pointer z-[88] py-2 justify-center absolute left-[4.3%] top-[8rem] w-[364px] flex items-center rounded-b-[20px] bg-brand-blue400" + className="cursor-pointer z-[88] py-2 justify-center absolute left-[4.3%] top-[8rem] w-[364px] flex items-center rounded-b-[8px] bg-brand-blue400 opacity-100 hover:opacity-55" >
-

- Grab $SYS with our faucet on the Rollux chain! +

+ {t('faucet.grabTextTwo', { + token: tokenSymbol, + rpcName: networkName, + })}

); diff --git a/source/components/Modal/FaucetModal.tsx b/source/components/Modal/FaucetModal.tsx index 3f35e9cbd..f4b1d51fa 100644 --- a/source/components/Modal/FaucetModal.tsx +++ b/source/components/Modal/FaucetModal.tsx @@ -1,35 +1,48 @@ import React from 'react'; +import { useTranslation } from 'react-i18next'; import { Icon } from '..'; import image from 'assets/images/faucetmodal.png'; import rolluxLogo from 'assets/images/rolluxChain.png'; import sysLogo from 'assets/images/sysChain.svg'; +import { useHandleNetworkTokenNames } from 'pages/Faucet/Utils/NetworksInfos'; -export const FaucetFirstAccessModal = ( - { handleOnClose }: any //todo: type handleClose -) => ( -
-
-
- - -
-
-

- Grab $SYS with our faucet! -

+type FaucetFirstAccessModalProps = { + handleOnClose: () => void; +}; + +export const FaucetFirstAccessModal = ({ + handleOnClose, +}: FaucetFirstAccessModalProps) => { + const { t } = useTranslation(); + const { tokenSymbol } = useHandleNetworkTokenNames(); + + return ( +
+
+
+ + +
+
+

+ {t('faucet.grabTextOne', { + token: tokenSymbol, + })} +

+
-
- - - - -
-); + + + +
+ ); +}; diff --git a/source/pages/Faucet/Components/FaucetApiFeedback.tsx b/source/pages/Faucet/Components/FaucetApiFeedback.tsx index 58ed9524a..379586049 100644 --- a/source/pages/Faucet/Components/FaucetApiFeedback.tsx +++ b/source/pages/Faucet/Components/FaucetApiFeedback.tsx @@ -3,12 +3,12 @@ import { useTranslation } from 'react-i18next'; import { StatusModal } from 'components/Modal/StatusModal'; -type FaucedApiFeedbackProps = { +type FaucetApiFeedbackProps = { apiResponse: string; apiTitle: string; status?: string; }; -export const FaucetApiFeedback: React.FC = ({ +export const FaucetApiFeedback: React.FC = ({ apiTitle, apiResponse, status, diff --git a/source/pages/Faucet/Components/FaucetFeedback.tsx b/source/pages/Faucet/Components/FaucetFeedback.tsx index 34e297779..21cb884fb 100644 --- a/source/pages/Faucet/Components/FaucetFeedback.tsx +++ b/source/pages/Faucet/Components/FaucetFeedback.tsx @@ -1,11 +1,11 @@ import React from 'react'; -type FaucedFeedbackProps = { +type FaucetFeedbackProps = { icon: string; textFeedbackDesc: string; textFeedbackTitle: string; }; -export const FaucetFeedback: React.FC = ({ +export const FaucetFeedback: React.FC = ({ icon, textFeedbackDesc, textFeedbackTitle, diff --git a/source/pages/Faucet/Faucet.tsx b/source/pages/Faucet/Faucet.tsx index a96f5ac0b..20ffbb726 100644 --- a/source/pages/Faucet/Faucet.tsx +++ b/source/pages/Faucet/Faucet.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { useTranslation } from 'react-i18next'; import errorIcon from 'assets/images/faucet-error.svg'; import loadingIcon from 'assets/images/faucet-loading.svg'; @@ -13,6 +14,7 @@ import { FaucetFeedback, } from './Components'; import { FaucetComponentStates } from './Utils/FaucetComponentStates'; +import { useHandleNetworkTokenNames } from './Utils/NetworksInfos'; export const Faucet = () => { const { @@ -25,10 +27,11 @@ export const Faucet = () => { errorMessage, txHash, } = FaucetComponentStates(); + const { t } = useTranslation(); + const { networkName } = useHandleNetworkTokenNames(); return ( - //! Question: is the label always like that? - + {status === `request` && !isLoading && ( <> { )} @@ -51,8 +54,8 @@ export const Faucet = () => { <> )} @@ -60,7 +63,7 @@ export const Faucet = () => { <> @@ -69,11 +72,14 @@ export const Faucet = () => { <> diff --git a/source/pages/Faucet/Utils/FaucetComponentStates.tsx b/source/pages/Faucet/Utils/FaucetComponentStates.tsx index 58f9ca4f6..7b87c24eb 100644 --- a/source/pages/Faucet/Utils/FaucetComponentStates.tsx +++ b/source/pages/Faucet/Utils/FaucetComponentStates.tsx @@ -1,4 +1,5 @@ import { useCallback, useEffect, useMemo, useState } from 'react'; +import { useTranslation } from 'react-i18next'; import { useSelector } from 'react-redux'; import { faucetTxDetailsProps } from '../Types'; @@ -25,14 +26,13 @@ export const FaucetComponentStates = () => { const [status, setStatus] = useState(`request`); const [isLoading, setIsLoading] = useState(false); const [txHash, setTxHash] = useState(``); - const [errorMessage, setErrorMessage] = useState(''); - const [faucetTxDetailsInfo, setFaucetTxDetailsInfo] = useState( {} as faucetTxDetailsProps ); const { navigate } = useUtils(); + const { t } = useTranslation(); const account = { img: accounts[activeAccount.type][activeAccount.id]?.xpub, @@ -44,8 +44,14 @@ export const FaucetComponentStates = () => { icon: faucetTxDetailsInfo?.icon, tokenSymbol: faucetTxDetailsInfo?.token, networkName: faucetTxDetailsInfo?.networkName, - grabText: `Grab ${faucetTxDetailsInfo.token} with our faucet to begin experiencing the ${faucetTxDetailsInfo.networkName} network!`, - tokenQuantity: `You can get ${faucetTxDetailsInfo.quantity} ${faucetTxDetailsInfo.token} per wallet address every 24h.`, + grabText: t('faucet.withOurFaucet', { + token: faucetTxDetailsInfo.token, + networkName: faucetTxDetailsInfo.networkName, + }), + tokenQuantity: t('faucet.youCanGet', { + quantity: faucetTxDetailsInfo.quantity, + token: faucetTxDetailsInfo.token, + }), smartContract: faucetTxDetailsInfo.smartContract, }; @@ -84,11 +90,11 @@ export const FaucetComponentStates = () => { const faucetButtonLabel = useMemo(() => { let buttonName: string; if (status === 'request') { - buttonName = 'Request Now'; + buttonName = t('faucet.requestNow'); } else if (status === 'success') { - buttonName = 'Close'; + buttonName = t('faucet.Close'); } else if (status === 'error') { - buttonName = 'Try again'; + buttonName = t('faucet.tryAgain'); } else { return; } diff --git a/source/pages/Faucet/Utils/NetworksInfos.ts b/source/pages/Faucet/Utils/NetworksInfos.ts deleted file mode 100644 index ee1a5ddb1..000000000 --- a/source/pages/Faucet/Utils/NetworksInfos.ts +++ /dev/null @@ -1,31 +0,0 @@ -export const faucetTxRolluxInfo = { - icon: 'assets/images/rolluxChain.png', - token: '$SYS', - networkName: 'Rollux', - quantity: 0.001, - smartContract: '0x35EE5876Db071b527dC62FD3EE3c32e4304d8C23', -}; - -export const faucetTxRolluxTestnetInfo = { - icon: 'assets/images/rolluxChain.png', - token: '$TSYS', - networkName: 'Rollux Testnet', - quantity: 1, - smartContract: '0x35EE5876Db071b527dC62FD3EE3c32e4304d8C23', -}; - -export const faucetTxSyscoinNEVMInfo = { - icon: 'assets/images/sysChain.svg', - token: '$SYS', - networkName: 'Syscoin NEVM', - quantity: 0.01, - smartContract: '0x35EE5876Db071b527dC62FD3EE3c32e4304d8C23', -}; - -export const faucetTxSyscoinNEVMTestnetInfo = { - icon: 'assets/images/sysChain.svg', - token: '$TSYS', - networkName: 'Syscoin NEVM Testnet', - quantity: 1, - smartContract: '0x35EE5876Db071b527dC62FD3EE3c32e4304d8C23', -}; diff --git a/source/pages/Faucet/Utils/NetworksInfos.tsx b/source/pages/Faucet/Utils/NetworksInfos.tsx new file mode 100644 index 000000000..fe369b80b --- /dev/null +++ b/source/pages/Faucet/Utils/NetworksInfos.tsx @@ -0,0 +1,83 @@ +import { useMemo } from 'react'; +import { useSelector } from 'react-redux'; + +import { FaucetChainIds } from 'scripts/Background/controllers/message-handler/types'; +import { RootState } from 'state/store'; + +export const faucetTxRolluxInfo = { + icon: 'assets/images/rolluxChain.png', + token: '$SYS', + networkName: 'Rollux', + quantity: 0.001, + smartContract: '0x35EE5876Db071b527dC62FD3EE3c32e4304d8C23', +}; + +export const faucetTxRolluxTestnetInfo = { + icon: 'assets/images/rolluxChain.png', + token: '$TSYS', + networkName: 'Rollux Testnet', + quantity: 1, + smartContract: '0x35EE5876Db071b527dC62FD3EE3c32e4304d8C23', +}; + +export const faucetTxSyscoinNEVMInfo = { + icon: 'assets/images/sysChain.svg', + token: '$SYS', + networkName: 'Syscoin NEVM', + quantity: 0.01, + smartContract: '0x35EE5876Db071b527dC62FD3EE3c32e4304d8C23', +}; + +export const faucetTxSyscoinNEVMTestnetInfo = { + icon: 'assets/images/sysChain.svg', + token: '$TSYS', + networkName: 'Syscoin NEVM Testnet', + quantity: 1, + smartContract: '0x35EE5876Db071b527dC62FD3EE3c32e4304d8C23', +}; + +export const useHandleNetworkTokenNames = () => { + const { activeNetwork } = useSelector( + (rootState: RootState) => rootState.vault + ); + + const { token: tokenSymbol, network: networkName } = useMemo(() => { + let token: string; + let network: string; + + if (activeNetwork.isTestnet) { + token = 'TSYS'; + switch (activeNetwork.chainId) { + case FaucetChainIds.RolluxTestnet: + network = 'Rollux Testnet'; + break; + case FaucetChainIds.nevmTestnet: + network = 'Syscoin NEVM Testnet'; + break; + default: + network = ''; + break; + } + } else { + token = 'SYS'; + switch (activeNetwork.chainId) { + case FaucetChainIds.RolluxMainnet: + network = 'Rollux'; + break; + case FaucetChainIds.nevmMainnet: + network = 'Syscoin NEVM'; + break; + default: + network = ''; + break; + } + } + + return { token, network }; + }, [activeNetwork]); + + return { + tokenSymbol, + networkName, + }; +}; From 8a20339cf2cea5cd0ac6688c260f20a058e4692c Mon Sep 17 00:00:00 2001 From: GabriePrediger Date: Tue, 7 May 2024 12:48:33 -0300 Subject: [PATCH 08/11] fix: adjustments --- .../Faucet/Utils/FaucetComponentStates.tsx | 17 +++++---- source/pages/Faucet/Utils/NetworksInfos.tsx | 37 +++++++------------ .../controllers/faucetController.ts | 13 ++++--- 3 files changed, 30 insertions(+), 37 deletions(-) diff --git a/source/pages/Faucet/Utils/FaucetComponentStates.tsx b/source/pages/Faucet/Utils/FaucetComponentStates.tsx index 7b87c24eb..eb0ffc975 100644 --- a/source/pages/Faucet/Utils/FaucetComponentStates.tsx +++ b/source/pages/Faucet/Utils/FaucetComponentStates.tsx @@ -58,20 +58,21 @@ export const FaucetComponentStates = () => { const handleRequestFaucet = async () => { setIsLoading(true); try { - const { data: request } = await claimFaucet( - activeNetwork.chainId, - account.address - ); - if (!request?.status) { + const data = await claimFaucet(activeNetwork.chainId, account.address); + console.log(data, 'data'); + if (!data?.status || !data?.data?.status) { setStatus('error'); - setErrorMessage(request?.message); + setErrorMessage( + data?.data?.message ? data?.data?.message : data?.message + ); } else { - setTxHash(request?.hash); + setTxHash(data?.data?.hash); setStatus(`success`); } } catch (error) { + console.log(error, 'a'); setStatus('error'); - setErrorMessage(error); + setErrorMessage(errorMessage); } finally { setIsLoading(false); } diff --git a/source/pages/Faucet/Utils/NetworksInfos.tsx b/source/pages/Faucet/Utils/NetworksInfos.tsx index fe369b80b..12614ace0 100644 --- a/source/pages/Faucet/Utils/NetworksInfos.tsx +++ b/source/pages/Faucet/Utils/NetworksInfos.tsx @@ -45,32 +45,21 @@ export const useHandleNetworkTokenNames = () => { let token: string; let network: string; - if (activeNetwork.isTestnet) { + if (activeNetwork.chainId === FaucetChainIds.nevmMainnet) { + token = 'SYS'; + network = 'Syscoin NEVM'; + } else if (activeNetwork.chainId === FaucetChainIds.nevmTestnet) { token = 'TSYS'; - switch (activeNetwork.chainId) { - case FaucetChainIds.RolluxTestnet: - network = 'Rollux Testnet'; - break; - case FaucetChainIds.nevmTestnet: - network = 'Syscoin NEVM Testnet'; - break; - default: - network = ''; - break; - } - } else { + network = 'Syscoin NEVM Testnet'; + } else if (activeNetwork.chainId === FaucetChainIds.RolluxTestnet) { + token = 'TSYS'; + network = 'Rollux Testnet'; + } else if (activeNetwork.chainId === FaucetChainIds.RolluxMainnet) { token = 'SYS'; - switch (activeNetwork.chainId) { - case FaucetChainIds.RolluxMainnet: - network = 'Rollux'; - break; - case FaucetChainIds.nevmMainnet: - network = 'Syscoin NEVM'; - break; - default: - network = ''; - break; - } + network = 'Rollux'; + } else { + token = ''; + network = ''; } return { token, network }; diff --git a/source/scripts/Background/controllers/faucetController.ts b/source/scripts/Background/controllers/faucetController.ts index 03d0e1c92..73aaece49 100644 --- a/source/scripts/Background/controllers/faucetController.ts +++ b/source/scripts/Background/controllers/faucetController.ts @@ -14,12 +14,15 @@ const claimFaucet = async (chainId: number, walletAddress: string) => { } else { chainName = ``; } + try { + const { data } = await axios.get( + `https://chains.tools/api/faucet/claim?networkKey=${chainName}&walletAddress=${walletAddress}` + ); - const { data } = await axios.get( - `https://chains.tools/api/faucet/claim?networkKey=${chainName}&walletAddress=${walletAddress}` - ); - - return data; + return data; + } catch (err) { + return err; + } }; export { claimFaucet }; From 980cd6f6873b5b6c9d5b4ebd541ba8e5b79c7b1c Mon Sep 17 00:00:00 2001 From: GabriePrediger Date: Wed, 8 May 2024 16:24:33 -0300 Subject: [PATCH 09/11] fix: modal validations --- source/pages/Home/Home.tsx | 24 ++++++++++--------- .../controllers/faucetController.ts | 1 - 2 files changed, 13 insertions(+), 12 deletions(-) diff --git a/source/pages/Home/Home.tsx b/source/pages/Home/Home.tsx index 90a5e8bd5..1611bbf92 100755 --- a/source/pages/Home/Home.tsx +++ b/source/pages/Home/Home.tsx @@ -11,6 +11,7 @@ import { FaucetFirstAccessModal } from 'components/Modal/FaucetModal'; import { StatusModal } from 'components/Modal/StatusModal'; import { ConnectHardwareWallet } from 'components/Modal/WarningBaseModal'; import { usePrice, useUtils } from 'hooks/index'; +import { FaucetChainIds } from 'scripts/Background/controllers/message-handler/types'; import { RootState } from 'state/store'; import { setFaucetModalState } from 'state/vault'; import { getController } from 'utils/browser'; @@ -168,17 +169,18 @@ export const Home = () => { <>
- {!isBitcoinBased && ( - <> - {shouldShowFaucetFirstModal ? ( - - ) : ( - - )} - - )} + {!isBitcoinBased && + Object.values(FaucetChainIds).includes(activeNetwork.chainId) && ( + <> + {shouldShowFaucetFirstModal ? ( + + ) : ( + + )} + + )}
diff --git a/source/scripts/Background/controllers/faucetController.ts b/source/scripts/Background/controllers/faucetController.ts index 73aaece49..a6eaa1342 100644 --- a/source/scripts/Background/controllers/faucetController.ts +++ b/source/scripts/Background/controllers/faucetController.ts @@ -18,7 +18,6 @@ const claimFaucet = async (chainId: number, walletAddress: string) => { const { data } = await axios.get( `https://chains.tools/api/faucet/claim?networkKey=${chainName}&walletAddress=${walletAddress}` ); - return data; } catch (err) { return err; From 74c37ac747a9c80d4e2b060b864f15b835ec2880 Mon Sep 17 00:00:00 2001 From: Gabriel Prediger <61945626+GabrielPrediger@users.noreply.github.com> Date: Fri, 26 Jul 2024 09:51:58 -0300 Subject: [PATCH 10/11] fix: removed git warns on faucet ui ux branch (#603) --- source/pages/Settings/CustomRPC.tsx | 2 +- source/pages/Transactions/SignEth.tsx | 14 ++++++++------ .../controllers/promises/cancellablesPromises.ts | 3 ++- .../Background/controllers/transactions/queue.ts | 4 +++- source/state/vault/types.ts | 1 + 5 files changed, 15 insertions(+), 9 deletions(-) diff --git a/source/pages/Settings/CustomRPC.tsx b/source/pages/Settings/CustomRPC.tsx index 566387add..1608ec3be 100644 --- a/source/pages/Settings/CustomRPC.tsx +++ b/source/pages/Settings/CustomRPC.tsx @@ -33,7 +33,7 @@ const CustomRPCView = () => { >(null); const [isSyscoinRpc, setIsSyscoinRpc] = useState(Boolean(isSyscoinSelected)); const { activeNetwork, isBitcoinBased } = useSelector( - (state: RootState) => state.vault + (stateRoot: RootState) => stateRoot.vault ); const { wallet } = getController(); const { alert, navigate } = useUtils(); diff --git a/source/pages/Transactions/SignEth.tsx b/source/pages/Transactions/SignEth.tsx index 7a0f33fc5..c0a21a3db 100644 --- a/source/pages/Transactions/SignEth.tsx +++ b/source/pages/Transactions/SignEth.tsx @@ -26,13 +26,15 @@ const EthSign: React.FC = () => { const tabLabel = ['Details', 'Data']; const url = browser.runtime.getURL('app.html'); const { accounts, activeAccount: activeAccountMeta } = useSelector( - (state: RootState) => state.vault + (stateRoot: RootState) => stateRoot.vault ); const activeAccount = accounts[activeAccountMeta.type][activeAccountMeta.id]; const activeNetwork = useSelector( - (state: RootState) => state.vault.activeNetwork + (stateRoot: RootState) => stateRoot.vault.activeNetwork + ); + const { isBitcoinBased } = useSelector( + (stateRoot: RootState) => stateRoot.vault ); - const { isBitcoinBased } = useSelector((state: RootState) => state.vault); const { label, balances, address } = activeAccount; const { currency } = activeNetwork; @@ -229,12 +231,12 @@ const EthSign: React.FC = () => {
- {tabLabel?.map((tabLabel, index) => ( + {tabLabel?.map((tabLabelItem, index) => (
setState(tabLabel)} + onClick={() => setState(tabLabelItem)} className={` ${ - tabLabel === state + tabLabelItem === state ? 'bg-brand-blue600' : 'bg-alpha-whiteAlpha200' } rounded-t-[20px] py-[8px] px-[16px] h-[40px] w-[92px] text-base font-normal cursor-pointer hover:opacity-60 text-center`} diff --git a/source/scripts/Background/controllers/promises/cancellablesPromises.ts b/source/scripts/Background/controllers/promises/cancellablesPromises.ts index 9f6444709..325e34bf6 100644 --- a/source/scripts/Background/controllers/promises/cancellablesPromises.ts +++ b/source/scripts/Background/controllers/promises/cancellablesPromises.ts @@ -3,6 +3,7 @@ export interface IPromiseProps { promise: Promise<{}>; } +// eslint-disable-next-line no-shadow export enum PromiseTargets { ASSETS = 'assets', BALANCE = 'balance', @@ -29,7 +30,7 @@ export class CancellablePromises { reject: (reason?: any) => void ) => void ): { cancel: () => void; currentPromise: Promise } => { - let cancel = () => {}; + let cancel: () => void; const currentPromise: Promise = new Promise((resolve, reject) => { cancel = () => { diff --git a/source/scripts/Background/controllers/transactions/queue.ts b/source/scripts/Background/controllers/transactions/queue.ts index 826cb389f..040f887ff 100644 --- a/source/scripts/Background/controllers/transactions/queue.ts +++ b/source/scripts/Background/controllers/transactions/queue.ts @@ -44,7 +44,9 @@ export class Queue { } else { this.queue.push( new Promise(async (resolve) => { - await new Promise((resolve) => this.waiting.push(resolve)); + await new Promise((resolvePromise) => + this.waiting.push(resolvePromise) + ); const result = await this.runFn(fn); return resolve(result); }) diff --git a/source/state/vault/types.ts b/source/state/vault/types.ts index 6598f1132..8be932a03 100644 --- a/source/state/vault/types.ts +++ b/source/state/vault/types.ts @@ -76,6 +76,7 @@ export type PaliAccount = { [id: number]: IPaliAccount; }; +// eslint-disable-next-line no-shadow export enum TransactionsType { Ethereum = 'ethereum', Syscoin = 'syscoin', From 96ca04529881baf779a4fcd578bb5b6b31ec3e9e Mon Sep 17 00:00:00 2001 From: GabriePrediger Date: Tue, 30 Jul 2024 10:29:29 -0300 Subject: [PATCH 11/11] fixed: git apointments --- .../components/Header/Menus/NetworkMenu.tsx | 2 +- source/pages/Faucet/Faucet.tsx | 7 +-- source/pages/Faucet/Types/index.ts | 29 +++++++++++ .../Faucet/Utils/FaucetComponentStates.tsx | 41 ++++++++------- source/pages/Faucet/Utils/NetworksInfos.tsx | 50 ++++--------------- source/pages/Faucet/consts/index.ts | 31 ++++++++++++ source/pages/Home/Home.tsx | 2 +- .../controllers/faucetController.ts | 10 ++-- .../controllers/message-handler/types.ts | 7 --- 9 files changed, 102 insertions(+), 77 deletions(-) create mode 100644 source/pages/Faucet/consts/index.ts diff --git a/source/components/Header/Menus/NetworkMenu.tsx b/source/components/Header/Menus/NetworkMenu.tsx index 6472237e3..d83b90495 100644 --- a/source/components/Header/Menus/NetworkMenu.tsx +++ b/source/components/Header/Menus/NetworkMenu.tsx @@ -12,7 +12,7 @@ import btcIcon from 'assets/images/btcIcon.svg'; import ethIcon from 'assets/images/ethIcon.svg'; import { Icon } from 'components/index'; import { useUtils } from 'hooks/index'; -import { FaucetChainIds } from 'scripts/Background/controllers/message-handler/types'; +import { FaucetChainIds } from 'pages/Faucet/Types'; import { RootState } from 'state/store'; import { getController } from 'utils/browser'; import { NetworkType } from 'utils/types'; diff --git a/source/pages/Faucet/Faucet.tsx b/source/pages/Faucet/Faucet.tsx index 20ffbb726..dac7ea2c5 100644 --- a/source/pages/Faucet/Faucet.tsx +++ b/source/pages/Faucet/Faucet.tsx @@ -13,6 +13,7 @@ import { FaucetCardAccount, FaucetFeedback, } from './Components'; +import { FaucetStatusResponse } from './Types'; import { FaucetComponentStates } from './Utils/FaucetComponentStates'; import { useHandleNetworkTokenNames } from './Utils/NetworksInfos'; @@ -32,7 +33,7 @@ export const Faucet = () => { return ( - {status === `request` && !isLoading && ( + {status === FaucetStatusResponse.REQUEST && !isLoading && ( <> { /> )} - {status === `error` && !isLoading && ( + {status === FaucetStatusResponse.ERROR && !isLoading && ( <> { /> )} - {status === `success` && !isLoading && ( + {status === FaucetStatusResponse.SUCCESS && !isLoading && ( <> { const activeAccount = useSelector( @@ -23,9 +25,9 @@ export const FaucetComponentStates = () => { (state: RootState) => state.vault ); - const [status, setStatus] = useState(`request`); + const [status, setStatus] = useState(FaucetStatusResponse.REQUEST); const [isLoading, setIsLoading] = useState(false); - const [txHash, setTxHash] = useState(``); + const [txHash, setTxHash] = useState(''); const [errorMessage, setErrorMessage] = useState(''); const [faucetTxDetailsInfo, setFaucetTxDetailsInfo] = useState( {} as faucetTxDetailsProps @@ -59,19 +61,17 @@ export const FaucetComponentStates = () => { setIsLoading(true); try { const data = await claimFaucet(activeNetwork.chainId, account.address); - console.log(data, 'data'); if (!data?.status || !data?.data?.status) { - setStatus('error'); + setStatus(FaucetStatusResponse.ERROR); setErrorMessage( data?.data?.message ? data?.data?.message : data?.message ); } else { setTxHash(data?.data?.hash); - setStatus(`success`); + setStatus(FaucetStatusResponse.SUCCESS); } } catch (error) { - console.log(error, 'a'); - setStatus('error'); + setStatus(FaucetStatusResponse.ERROR); setErrorMessage(errorMessage); } finally { setIsLoading(false); @@ -79,9 +79,12 @@ export const FaucetComponentStates = () => { }; const handleFaucetButton = useCallback(() => { - if (status === 'request' || status === 'error') { + if ( + status === FaucetStatusResponse.REQUEST || + status === FaucetStatusResponse.ERROR + ) { return handleRequestFaucet(); - } else if (status === 'success') { + } else if (status === FaucetStatusResponse.SUCCESS) { return navigate('/home'); } else { return; @@ -90,11 +93,11 @@ export const FaucetComponentStates = () => { const faucetButtonLabel = useMemo(() => { let buttonName: string; - if (status === 'request') { + if (status === FaucetStatusResponse.REQUEST) { buttonName = t('faucet.requestNow'); - } else if (status === 'success') { + } else if (status === FaucetStatusResponse.SUCCESS) { buttonName = t('faucet.Close'); - } else if (status === 'error') { + } else if (status === FaucetStatusResponse.ERROR) { buttonName = t('faucet.tryAgain'); } else { return; diff --git a/source/pages/Faucet/Utils/NetworksInfos.tsx b/source/pages/Faucet/Utils/NetworksInfos.tsx index 12614ace0..5ec48fa54 100644 --- a/source/pages/Faucet/Utils/NetworksInfos.tsx +++ b/source/pages/Faucet/Utils/NetworksInfos.tsx @@ -1,41 +1,9 @@ import { useMemo } from 'react'; import { useSelector } from 'react-redux'; -import { FaucetChainIds } from 'scripts/Background/controllers/message-handler/types'; +import { FaucetChainIds, FaucetChainNames, FaucetChainSymbols } from '../Types'; import { RootState } from 'state/store'; -export const faucetTxRolluxInfo = { - icon: 'assets/images/rolluxChain.png', - token: '$SYS', - networkName: 'Rollux', - quantity: 0.001, - smartContract: '0x35EE5876Db071b527dC62FD3EE3c32e4304d8C23', -}; - -export const faucetTxRolluxTestnetInfo = { - icon: 'assets/images/rolluxChain.png', - token: '$TSYS', - networkName: 'Rollux Testnet', - quantity: 1, - smartContract: '0x35EE5876Db071b527dC62FD3EE3c32e4304d8C23', -}; - -export const faucetTxSyscoinNEVMInfo = { - icon: 'assets/images/sysChain.svg', - token: '$SYS', - networkName: 'Syscoin NEVM', - quantity: 0.01, - smartContract: '0x35EE5876Db071b527dC62FD3EE3c32e4304d8C23', -}; - -export const faucetTxSyscoinNEVMTestnetInfo = { - icon: 'assets/images/sysChain.svg', - token: '$TSYS', - networkName: 'Syscoin NEVM Testnet', - quantity: 1, - smartContract: '0x35EE5876Db071b527dC62FD3EE3c32e4304d8C23', -}; - export const useHandleNetworkTokenNames = () => { const { activeNetwork } = useSelector( (rootState: RootState) => rootState.vault @@ -46,17 +14,17 @@ export const useHandleNetworkTokenNames = () => { let network: string; if (activeNetwork.chainId === FaucetChainIds.nevmMainnet) { - token = 'SYS'; - network = 'Syscoin NEVM'; + token = FaucetChainSymbols.SYS; + network = FaucetChainNames.SYSCOIN_NEVM; } else if (activeNetwork.chainId === FaucetChainIds.nevmTestnet) { - token = 'TSYS'; - network = 'Syscoin NEVM Testnet'; + token = FaucetChainSymbols.TSYS; + network = FaucetChainNames.SYSCOIN_NEVM_TESTNET; } else if (activeNetwork.chainId === FaucetChainIds.RolluxTestnet) { - token = 'TSYS'; - network = 'Rollux Testnet'; + token = FaucetChainSymbols.TSYS; + network = FaucetChainNames.ROLLUX_TESTNET; } else if (activeNetwork.chainId === FaucetChainIds.RolluxMainnet) { - token = 'SYS'; - network = 'Rollux'; + token = FaucetChainSymbols.SYS; + network = FaucetChainNames.ROLLUX; } else { token = ''; network = ''; diff --git a/source/pages/Faucet/consts/index.ts b/source/pages/Faucet/consts/index.ts new file mode 100644 index 000000000..ee1a5ddb1 --- /dev/null +++ b/source/pages/Faucet/consts/index.ts @@ -0,0 +1,31 @@ +export const faucetTxRolluxInfo = { + icon: 'assets/images/rolluxChain.png', + token: '$SYS', + networkName: 'Rollux', + quantity: 0.001, + smartContract: '0x35EE5876Db071b527dC62FD3EE3c32e4304d8C23', +}; + +export const faucetTxRolluxTestnetInfo = { + icon: 'assets/images/rolluxChain.png', + token: '$TSYS', + networkName: 'Rollux Testnet', + quantity: 1, + smartContract: '0x35EE5876Db071b527dC62FD3EE3c32e4304d8C23', +}; + +export const faucetTxSyscoinNEVMInfo = { + icon: 'assets/images/sysChain.svg', + token: '$SYS', + networkName: 'Syscoin NEVM', + quantity: 0.01, + smartContract: '0x35EE5876Db071b527dC62FD3EE3c32e4304d8C23', +}; + +export const faucetTxSyscoinNEVMTestnetInfo = { + icon: 'assets/images/sysChain.svg', + token: '$TSYS', + networkName: 'Syscoin NEVM Testnet', + quantity: 1, + smartContract: '0x35EE5876Db071b527dC62FD3EE3c32e4304d8C23', +}; diff --git a/source/pages/Home/Home.tsx b/source/pages/Home/Home.tsx index 4ebc0bff5..4f7af9e04 100755 --- a/source/pages/Home/Home.tsx +++ b/source/pages/Home/Home.tsx @@ -12,7 +12,7 @@ import { StatusModal } from 'components/Modal/StatusModal'; import { WalletProviderDefaultModal } from 'components/Modal/WalletProviderDafault'; import { ConnectHardwareWallet } from 'components/Modal/WarningBaseModal'; import { usePrice, useUtils } from 'hooks/index'; -import { FaucetChainIds } from 'scripts/Background/controllers/message-handler/types'; +import { FaucetChainIds } from 'pages/Faucet/Types'; import { RootState } from 'state/store'; import { setFaucetModalState } from 'state/vault'; import { getController } from 'utils/browser'; diff --git a/source/scripts/Background/controllers/faucetController.ts b/source/scripts/Background/controllers/faucetController.ts index a6eaa1342..0d9f4f1ff 100644 --- a/source/scripts/Background/controllers/faucetController.ts +++ b/source/scripts/Background/controllers/faucetController.ts @@ -4,15 +4,15 @@ const claimFaucet = async (chainId: number, walletAddress: string) => { let chainName: string; if (chainId === 57) { - chainName = `nevm-mainnet`; + chainName = 'nevm-mainnet'; } else if (chainId === 5700) { - chainName = `nevm-testnet`; + chainName = 'nevm-testnet'; } else if (chainId === 57000) { - chainName = `rollux-testnet`; + chainName = 'rollux-testnet'; } else if (chainId === 570) { - chainName = `rollux-mainnet`; + chainName = 'rollux-mainnet'; } else { - chainName = ``; + chainName = ''; } try { const { data } = await axios.get( diff --git a/source/scripts/Background/controllers/message-handler/types.ts b/source/scripts/Background/controllers/message-handler/types.ts index 73eecea6f..af875f982 100644 --- a/source/scripts/Background/controllers/message-handler/types.ts +++ b/source/scripts/Background/controllers/message-handler/types.ts @@ -10,13 +10,6 @@ export enum HardWallets { TREZOR = 'TREZOR', } -export enum FaucetChainIds { - RolluxMainnet = 570, - RolluxTestnet = 57000, - nevmTestnet = 5700, - nevmMainnet = 57, -} - //TODO: addtype for rpc subscription notifications here export enum PaliEvents { accountsChanged = 'pali_accountsChanged',