86a3w2hx7 - fix: return faucet flow and use migration controller to add new state

package.json

@@ -1,6 +1,6 @@
 {
   "name": "paliwallet",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "A Non-Custodial Crypto Wallet",
   "private": true,
   "repository": {

source/assets/locales/en.json

@@ -520,5 +520,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

@@ -520,5 +520,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/components/Modal/FaucetAccessModal.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+
+import rolluxLogo from 'assets/images/rolluxChain.png';
+import sysLogo from 'assets/images/sysChain.svg';
+import { useUtils } from 'hooks/useUtils';
+import { RootState } from 'state/store';
+import { faucetNetworkData } from 'utils/constants';
+
+export const FaucetAccessModal = () => {
+  const { navigate } = useUtils();
+  const { t } = useTranslation();
+
+  const {
+    activeNetwork: { chainId },
+  } = useSelector((state: RootState) => state.vault);
+
+  const currentNetworkData = faucetNetworkData?.[chainId];
+
+  return (
+    <div
+      onClick={() => navigate('/faucet')}
+      className="cursor-pointer z-[49] 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: currentNetworkData?.token,
+          rpcName: currentNetworkData?.network,
+        })}
+      </h1>
+    </div>
+  );
+};

source/components/Modal/FaucetFirstAccessModal.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+
+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 { RootState } from 'state/store';
+import { faucetNetworkData } from 'utils/constants';
+
+type FaucetFirstAccessModalProps = {
+  handleOnClose: () => void;
+};
+
+export const FaucetFirstAccessModal = ({
+  handleOnClose,
+}: FaucetFirstAccessModalProps) => {
+  const { t } = useTranslation();
+
+  const {
+    activeNetwork: { chainId },
+  } = useSelector((state: RootState) => state.vault);
+
+  const currentNetworkData = faucetNetworkData?.[chainId];
+
+  return (
+    <div className="z-[49] 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: currentNetworkData?.token,
+            })}
+          </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/components/Modal/index.tsx

@@ -1 +1,3 @@
 export * from './Modal';
+export * from './FaucetAccessModal';
+export * from './FaucetFirstAccessModal';

source/components/index.tsx

@@ -15,3 +15,4 @@ export * from './Loading';
 export * from './FiatComponent';
 export * from './Fee';
 export * from './KeepAliveContainer';
+export * from './Modal';

source/config/consts.js

@@ -74,7 +74,7 @@ const MV2_OPTIONS = {
 const MV3_OPTIONS = {
   manifest_version: 3,
   name: 'Pali Wallet',
-  version: '3.0.0',
+  version: '3.0.1',
   icons: {
     16: 'assets/icons/favicon-16.png',
     32: 'assets/icons/favicon-32.png',

source/constants/trustedApps.json

@@ -82,6 +82,7 @@
   "metabase.one",
   "cryptokitties.co",
   "bridge.syscoin.org",
+  "faucet.syscoin.org",
   "luxy.io",
   "app.pegasys.finance",
   "beta.pegasys.finance",

source/pages/Faucet/Faucet.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+
+import { FaucetStatusResponse } from '../../types/faucet';
+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 { RootState } from 'state/store';
+import { faucetNetworkData } from 'utils/constants';
+import { ellipsis } from 'utils/format';
+
+import {
+  FaucetApiFeedback,
+  FaucetCardAccount,
+  FaucetFeedback,
+} from './components';
+import { useFaucetComponentStates } from './hooks';
+
+export const Faucet: React.FC = () => {
+  const { t } = useTranslation();
+
+  const {
+    account,
+    status,
+    handleFaucetButton,
+    faucetButtonLabel,
+    isLoading,
+    faucetRequestDetails,
+    errorMessage,
+    txHash,
+  } = useFaucetComponentStates();
+
+  const {
+    activeNetwork: { chainId },
+  } = useSelector((state: RootState) => state.vault);
+
+  const currentFaucetNetwork = faucetNetworkData?.[chainId];
+
+  const renderFaucetContent = () => {
+    switch (status) {
+      case FaucetStatusResponse.REQUEST:
+        return (
+          !isLoading && (
+            <>
+              <FaucetFeedback
+                icon={faucetRequestDetails.icon}
+                textFeedbackTitle={faucetRequestDetails.grabText}
+                textFeedbackDesc={faucetRequestDetails.tokenQuantity}
+              />
+              <FaucetApiFeedback
+                apiTitle="Smart Contract"
+                apiResponse={faucetRequestDetails.smartContract}
+              />
+              <FaucetCardAccount
+                accountXpub={account.xpub}
+                accountName={account.label}
+                accountAddress={ellipsis(account.address, 8, 8)}
+              />
+            </>
+          )
+        );
+      case FaucetStatusResponse.SUCCESS:
+        return (
+          !isLoading && (
+            <>
+              <FaucetFeedback
+                icon={successIcon}
+                textFeedbackTitle={t('faucet.CONGRATULATIONS')}
+                textFeedbackDesc={t('faucet.someHasJust', {
+                  tokenSymbol: faucetRequestDetails.tokenSymbol,
+                  networkName: faucetRequestDetails.networkName,
+                })}
+              />
+              <FaucetApiFeedback
+                apiTitle={t('faucet.transactionHash')}
+                status={status}
+                apiResponse={txHash}
+              />
+            </>
+          )
+        );
+      case FaucetStatusResponse.ERROR:
+        return (
+          !isLoading && (
+            <>
+              <FaucetFeedback
+                icon={errorIcon}
+                textFeedbackTitle={t('faucet.ERROR')}
+                textFeedbackDesc={errorMessage}
+              />
+            </>
+          )
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <Layout title={currentFaucetNetwork?.network} canGoBack>
+      {isLoading && (
+        <FaucetFeedback
+          icon={loadingIcon}
+          textFeedbackTitle={t('faucet.pleaseWait')}
+          textFeedbackDesc={t('faucet.doNotClose')}
+        />
+      )}
+      {renderFaucetContent()}
+      {!isLoading && (
+        <div className="w-full px-4 absolute bottom-12 md:static">
+          <NeutralButton type="button" fullWidth onClick={handleFaucetButton}>
+            {faucetButtonLabel}
+          </NeutralButton>
+        </div>
+      )}
+    </Layout>
+  );
+};

source/pages/Faucet/components/FaucetApiFeedback.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { StatusModal } from 'components/Modal/StatusModal';
+import { useUtils } from 'hooks/useUtils';
+
+type FaucetApiFeedbackProps = {
+  apiResponse: string;
+  apiTitle: string;
+  status?: string;
+};
+export const FaucetApiFeedback: React.FC<FaucetApiFeedbackProps> = ({
+  apiTitle,
+  apiResponse,
+  status,
+}) => {
+  const { useCopyClipboard } = useUtils();
+  const { t } = useTranslation();
+
+  const [copied, copyText] = useCopyClipboard();
+
+  const handleCopyToClipboard = () => copyText(apiResponse);
+
+  return (
+    <>
+      <StatusModal
+        status="success"
+        show={copied}
+        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,33 @@
+import { toSvg } from 'jdenticon';
+import React, { useEffect } from 'react';
+
+type FaucetCardAccountProps = {
+  accountAddress: string;
+  accountName: string;
+  accountXpub: string;
+};
+export const FaucetCardAccount: React.FC<FaucetCardAccountProps> = ({
+  accountName,
+  accountAddress,
+  accountXpub,
+}) => {
+  useEffect(() => {
+    const placeholder = document.querySelector('.add-identicon');
+    if (!placeholder) return;
+
+    placeholder.innerHTML = toSvg(accountXpub, 50, {
+      backColor: '#07152B',
+      padding: 1,
+    });
+  }, [accountXpub]);
+
+  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>
+  );
+};