Draft: faucet

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."
   }
 }

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."
   }
 }

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."
+  } 
 }

source/components/Header/Header.tsx

@@ -70,7 +70,7 @@ export const Header: React.FC<IHeader> = ({ accountHeader = false }) => {
 
   return (
     <div className={accountHeader ? 'pb-32' : 'pb-12'}>
-      <div className="fixed z-50 w-full md:max-w-2xl">
+      <div className="fixed z-[888] w-full md:max-w-2xl">
         <div className="relative flex items-center justify-between p-2 py-6 w-full text-gray-300 bg-bkg-1">
           <NetworkMenu
             setActiveAccountModalIsOpen={setIsOpen}

source/components/Header/Menus/GeneralMenu.tsx

@@ -65,7 +65,7 @@ export const GeneralMenu: React.FC = () => {
   return (
     <Menu
       as="div"
-      className="absolute right-4 top-2 flex items-center gap-2 justify-evenly"
+      className="absolute z-[9999] right-4 top-2 flex items-center gap-2 justify-evenly"
     >
       <Tooltip content={truncate(currentTab.host)}>
         <div

source/components/Header/Menus/NetworkMenu.tsx

@@ -12,6 +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 { RootState } from 'state/store';
 import { getController } from 'utils/browser';
 import { NetworkType } from 'utils/types';
@@ -113,7 +114,7 @@ export const NetworkMenu: React.FC<INetworkComponent> = (
   return (
     <Menu
       as="div"
-      className="absolute w-full left-4 inline-block mr-8 text-left"
+      className="absolute z-[888] w-full left-4 inline-block mr-8 text-left"
     >
       {(menuprops) => (
         <>
@@ -250,11 +251,13 @@ export const NetworkMenu: React.FC<INetworkComponent> = (
                                       activeNetworkValidator(
                                         currentNetwork
                                       ) && (
-                                        <Icon
-                                          name="check"
-                                          className="absolute left-[21.5rem] bottom-2 w-4"
-                                          wrapperClassname="w-6"
-                                        />
+                                        <div className="absolute items-center flex gap-2 right-[1rem] ">
+                                          <Icon
+                                            name="check"
+                                            className="w-4 relative bottom-0.5"
+                                            wrapperClassname="w-6"
+                                          />
+                                        </div>
                                       )}
                                   </li>
                                 )
@@ -304,7 +307,7 @@ export const NetworkMenu: React.FC<INetworkComponent> = (
                                     : 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,
@@ -315,15 +318,26 @@ export const NetworkMenu: React.FC<INetworkComponent> = (
                                 <span className="ml-8 text-left">
                                   {currentNetwork.label}
                                 </span>
-
-                                {!isBitcoinBased &&
-                                  activeNetworkValidator(currentNetwork) && (
-                                    <Icon
-                                      name="check"
-                                      className="absolute left-[21.5rem] bottom-2 w-4"
-                                      wrapperClassname="w-6"
-                                    />
+                                <div className="absolute items-center flex gap-2 right-[1rem] ">
+                                  {!isBitcoinBased &&
+                                    activeNetworkValidator(currentNetwork) && (
+                                      <Icon
+                                        name="check"
+                                        className="w-4 relative bottom-0.5"
+                                        wrapperClassname="w-6"
+                                      />
+                                    )}
+                                  {Object.values(FaucetChainIds).includes(
+                                    currentNetwork.chainId
+                                  ) && (
+                                    <div className="flex justify-center w-[81px] h-max bg-alpha-whiteAlpha200 rounded-[100px] items-center gap-2 py-[2px] px-1 ">
+                                      <div className="w-2 h-2 bg-brand-green rounded-full" />
+                                      <p className="text-xs text-white">
+                                        Faucet
+                                      </p>
+                                    </div>
                                   )}
+                                </div>
                               </li>
                             ))}
                         </Disclosure.Panel>

source/components/Modal/FaucetAccessModal.tsx

@@ -0,0 +1,31 @@
+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';
+import { useHandleNetworkTokenNames } from 'pages/Faucet/Utils/NetworksInfos';
+
+export const FaucetAccessModal = () => {
+  const { navigate } = useUtils();
+  const { t } = useTranslation();
+  const { tokenSymbol, networkName } = useHandleNetworkTokenNames();
+
+  return (
+    <div
+      onClick={() => navigate('/faucet')}
+      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"
+    >
+      <div className="relative flex items-center">
+        <img className="relative z-20 w-4" src={rolluxLogo} />
+        <img className="relative left-[-6px] z-10 w-4" src={sysLogo} />
+      </div>
+      <h1 className="text-xs text-white max-w-[80%]">
+        {t('faucet.grabTextTwo', {
+          token: tokenSymbol,
+          rpcName: networkName,
+        })}
+      </h1>
+    </div>
+  );
+};

source/components/Modal/FaucetModal.tsx

@@ -0,0 +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';
+
+type FaucetFirstAccessModalProps = {
+  handleOnClose: () => void;
+};
+
+export const FaucetFirstAccessModal = ({
+  handleOnClose,
+}: FaucetFirstAccessModalProps) => {
+  const { t } = useTranslation();
+  const { tokenSymbol } = useHandleNetworkTokenNames();
+
+  return (
+    <div className="z-[88] border border-brand-blue400 left-[6%] absolute bottom-6 w-[352px] h-[91px]  flex items-center rounded-[20px]  bg-gradient-to-r from-[#7192C6] via-[#436AA8] to-[#314E7C]">
+      <div className="w-full relative p-[13px]">
+        <div className="relative bottom-[0.5rem] z-[9999]">
+          <img className="absolute z-20 w-16" src={rolluxLogo} />
+          <img className="absolute right-[13.6rem] z-10 w-16" src={sysLogo} />
+        </div>
+        <div className="relative ml-32">
+          <h1 className="text-base text-white w-[70%]">
+            {t('faucet.grabTextOne', {
+              token: tokenSymbol,
+            })}
+          </h1>
+        </div>
+      </div>
+      <img
+        className="absolute w-[352px] rounded-[20px] h-[91px] left-0 overflow-hidden"
+        src={image}
+      />
+      <span onClick={handleOnClose}>
+        <Icon
+          name="Close"
+          className="cursor-pointer absolute left-[90%] top-[10%] w-6 hover:opacity-70 transition-opacity"
+          isSvg
+        />
+      </span>
+    </div>
+  );
+};

source/pages/Faucet/Components/FaucetApiFeedback.tsx

@@ -0,0 +1,55 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { StatusModal } from 'components/Modal/StatusModal';
+
+type FaucetApiFeedbackProps = {
+  apiResponse: string;
+  apiTitle: string;
+  status?: string;
+};
+export const FaucetApiFeedback: React.FC<FaucetApiFeedbackProps> = ({
+  apiTitle,
+  apiResponse,
+  status,
+}) => {
+  const [isCopied, setIsCopied] = useState<boolean>(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 (
+    <>
+      <StatusModal
+        status="success"
+        show={isCopied}
+        title={t(`settings.successfullyCopied`)}
+        description=""
+      />
+      <div className="gap-1 w-[352px] h-[76px] flex flex-col mt-6 rounded-[20px] p-4 border border-dashed border-alpha-whiteAlpha300 bg-alpha-whiteAlpha100">
+        <h1 className="text-white text-sm">{apiTitle}</h1>
+        <p
+          onClick={() => (status ? handleCopyToClipboard() : null)}
+          className="text-white text-sm underline overflow-hidden"
+          style={{
+            cursor: status ? 'pointer' : 'default',
+          }}
+        >
+          {apiResponse}
+        </p>
+      </div>
+    </>
+  );
+};

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<FaucetCardAccountProps> = ({
+  accountName,
+  accountAddress,
+  accountImg,
+}) => {
+  useEffect(() => {
+    const placeholder = document.querySelector('.add-identicon');
+    if (!placeholder) return;
+
+    placeholder.innerHTML = toSvg(accountImg, 50, {
+      backColor: '#07152B',
+      padding: 1,
+    });
+  }, [accountImg]);
+  return (
+    <div className="mt-6 w-[352px] h-[70px] rounded-[20px] p-4 flex items-center border-dashed border-alpha-whiteAlpha300 bg-alpha-whiteAlpha100">
+      <div className="add-identicon ml-1 mr-2 my-2" />
+      <div className="flex flex-col">
+        <h1 className="text-white text-base font-medium">{accountName}</h1>
+        <p className="text-white text-xs">{accountAddress}</p>
+      </div>
+    </div>
+  );
+};