chore(deposits): update faucet feedback i18n (#3132)

Co-authored-by: m.ray <16125548+MadalinaRaicu@users.noreply.github.com>
Co-authored-by: candida-d <62548908+candida-d@users.noreply.github.com>

libs/deposits/src/lib/deposit-form.tsx

@@ -392,7 +392,7 @@ const FormButton = ({ approved, selectedAsset }: FormButtonProps) => {
         data-testid="deposit-submit"
         variant={isActive ? 'primary' : 'default'}
         fill={true}
-        disabled={invalidChain || (selectedAsset && !approved)}
+        disabled={invalidChain}
       >
         {t('Deposit')}
       </Button>

libs/deposits/src/lib/faucet-notification.tsx

@@ -3,6 +3,7 @@ import { useEnvironment } from '@vegaprotocol/environment';
 import { t } from '@vegaprotocol/i18n';
 import { ExternalLink, Intent, Notification } from '@vegaprotocol/ui-toolkit';
 import { EthTxStatus, useEthTransactionStore } from '@vegaprotocol/web3';
+import { getFaucetError } from './get-faucet-error';
 
 interface FaucetNotificationProps {
   isActive: boolean;
@@ -36,13 +37,13 @@ export const FaucetNotification = ({
   }
 
   if (tx.status === EthTxStatus.Error) {
+    const errorMessage = getFaucetError(tx.error, selectedAsset.symbol);
     return (
       <div className="mb-4">
         <Notification
           intent={Intent.Danger}
           testId="faucet-error"
-          // @ts-ignore tx.error not typed correctly
+          message={errorMessage}
-          message={t(`Faucet failed: ${tx.error?.reason}`)}
         />
       </div>
     );
@@ -55,7 +56,7 @@ export const FaucetNotification = ({
           intent={Intent.Warning}
           testId="faucet-requested"
           message={t(
-            `Go to your Ethereum wallet and approve the faucet transaction for ${selectedAsset?.symbol}`
+            `Confirm the transaction in your Ethereum wallet to use the ${selectedAsset?.symbol} faucet`
           )}
         />
       </div>
@@ -69,14 +70,21 @@ export const FaucetNotification = ({
           intent={Intent.Primary}
           testId="faucet-pending"
           message={
-            <p>
+            <>
-              {t('Faucet pending...')}{' '}
+              <p className="mb-2">
+                {t(
+                  'Your request for funds from the %s faucet is being confirmed by the Ethereum network',
+                  selectedAsset.symbol
+                )}{' '}
+              </p>
               {tx.txHash && (
-                <ExternalLink href={`${ETHERSCAN_URL}/tx/${tx.txHash}`}>
+                <p>
-                  {t('View on Etherscan')}
+                  <ExternalLink href={`${ETHERSCAN_URL}/tx/${tx.txHash}`}>
-                </ExternalLink>
+                    {t('View on Etherscan')}
+                  </ExternalLink>
+                </p>
               )}
-            </p>
+            </>
           }
         />
       </div>
@@ -90,14 +98,21 @@ export const FaucetNotification = ({
           intent={Intent.Success}
           testId="faucet-confirmed"
           message={
-            <p>
+            <>
-              {t('Faucet successful')}{' '}
+              <p className="mb-2">
+                {t(
+                  '%s has been deposited in your Ethereum wallet',
+                  selectedAsset.symbol
+                )}{' '}
+              </p>
               {tx.txHash && (
-                <ExternalLink href={`${ETHERSCAN_URL}/tx/${tx.txHash}`}>
+                <p>
-                  {t('View on Etherscan')}
+                  <ExternalLink href={`${ETHERSCAN_URL}/tx/${tx.txHash}`}>
-                </ExternalLink>
+                    {t('View on Etherscan')}
+                  </ExternalLink>
+                </p>
               )}
-            </p>
+            </>
           }
         />
       </div>

libs/deposits/src/lib/get-faucet-error.ts

@@ -0,0 +1,24 @@
+import { t } from '@vegaprotocol/i18n';
+import type { TxError } from '@vegaprotocol/web3';
+
+export const getFaucetError = (error: TxError | null, symbol: string) => {
+  const reasonMap: {
+    [reason: string]: string;
+  } = {
+    'faucet not enabled': t(
+      'The %s faucet is not available at this time',
+      symbol
+    ),
+    'must wait faucetCallLimit between faucet calls': t(
+      'You have exceeded the maximum number of faucet attempts allowed'
+    ),
+    'user rejected transaction': t(
+      'The faucet transaction was rejected by the connected Ethereum wallet'
+    ),
+  };
+  // render a customized failure message from the map above or fallback
+  // to a non generic error message
+  return error && 'reason' in error && reasonMap[error.reason]
+    ? reasonMap[error.reason]
+    : t('Faucet of %s failed', symbol);
+};