feat: add the possibility of overriding button error texts (#1584)

* feat: adding possibility of override error texts * feat: improve shield button text
anoma · Jan 27, 2025 · 58bb84d · 58bb84d
1 parent 4ee780f
commit 58bb84d
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 26 deletions.
diff --git a/apps/namadillo/src/App/Masp/MaspShield.tsx b/apps/namadillo/src/App/Masp/MaspShield.tsx
@@ -155,6 +155,9 @@ export const MaspShield: React.FC = () => {
         isSubmitting={isPerformingTransfer}
         errorMessage={generalErrorMessage}
         onSubmitTransfer={onSubmitTransfer}
+        buttonTextErrors={{
+          NoAmount: "Define an amount to shield",
+        }}
       />
     </Panel>
   );

diff --git a/apps/namadillo/src/App/Masp/MaspUnshield.tsx b/apps/namadillo/src/App/Masp/MaspUnshield.tsx
@@ -157,6 +157,9 @@ export const MaspUnshield: React.FC = () => {
         isSubmitting={isPerformingTransfer}
         errorMessage={generalErrorMessage}
         onSubmitTransfer={onSubmitTransfer}
+        buttonTextErrors={{
+          NoAmount: "Define an amount to unshield",
+        }}
       />
     </Panel>
   );

diff --git a/apps/namadillo/src/App/Transfer/TransferModule.tsx b/apps/namadillo/src/App/Transfer/TransferModule.tsx
@@ -73,6 +73,7 @@ export type TransferModuleProps = {
   isSubmitting?: boolean;
   errorMessage?: string;
   onSubmitTransfer: (params: OnSubmitTransferParams) => void;
+  buttonTextErrors?: Partial<Record<ValidationResult, string>>;
 } & (
   | { isIbcTransfer?: false; ibcOptions?: undefined }
   | { isIbcTransfer: true; ibcOptions: IbcOptions }
@@ -101,6 +102,7 @@ export const TransferModule = ({
   requiresIbcChannels,
   onSubmitTransfer,
   errorMessage,
+  buttonTextErrors = {},
 }: TransferModuleProps): JSX.Element => {
   const [walletSelectorModalOpen, setWalletSelectorModalOpen] = useState(false);
   const [sourceChainModalOpen, setSourceChainModalOpen] = useState(false);
@@ -213,44 +215,49 @@ export const TransferModule = ({
     setWalletSelectorModalOpen(true);
   };
 
+  const getButtonTextError = (
+    id: ValidationResult,
+    defaultText: string
+  ): string => {
+    if (buttonTextErrors.hasOwnProperty(id) && buttonTextErrors[id]) {
+      return buttonTextErrors[id];
+    }
+
+    return defaultText;
+  };
+
   const getButtonText = (): string => {
     if (isSubmitting) {
       return submittingText || "Submitting...";
     }
 
-    if (validationResult === "NoSourceWallet") {
-      return "Select Wallet";
-    }
+    const getText = getButtonTextError.bind(null, validationResult);
+    switch (validationResult) {
+      case "NoSourceWallet":
+        return getText("Select Wallet");
 
-    if (
-      validationResult === "NoSourceChain" ||
-      validationResult === "NoDestinationChain"
-    ) {
-      return "Select Chain";
-    }
+      case "NoSourceChain":
+      case "NoDestinationChain":
+        return getText("Select Chain");
 
-    if (
-      validationResult === "NoSelectedAsset" &&
-      source.onChangeSelectedAsset
-    ) {
-      return "Select Asset";
-    }
+      case "NoSelectedAsset":
+        return getText("Select Asset");
 
-    // TODO: this should be updated for nfts
-    if (validationResult === "NoAmount") {
-      return "Define an amount to transfer";
-    }
+      case "NoDestinationWallet":
+        return getText("Select Destination Wallet");
 
-    if (!availableAmountMinusFees) {
-      return "Wallet amount not available";
-    }
+      case "NoAmount":
+        return getText("Define an amount to transfer");
 
-    if (validationResult === "NoTransactionFee") {
-      return "No transaction fee is set";
+      case "NoTransactionFee":
+        return getText("No transaction fee is set");
+
+      case "NotEnoughBalance":
+        return getText("Not enough balance");
     }
 
-    if (validationResult === "NotEnoughBalance") {
-      return "Not enough balance";
+    if (!availableAmountMinusFees) {
+      return getText("Wallet amount not available");
     }
 
     return "Submit";