chore(bridge-ui): ternary refactor

packages/bridge-ui/src/components/Bridge/NFTBridgeComponents/IDInput/IDInput.svelte

@@ -14,7 +14,7 @@
   export let limit = 1;
   // export let state: State = State.DEFAULT;
 
-  let typeClass = '';
+  let typeClass: string | null;
 
   export const clearIds = () => {
     enteredIds = [];
@@ -51,7 +51,7 @@
 
   $: state = State.DEFAULT;
 
-  $: typeClass = state === State.INVALID ? 'error' : '';
+  $: typeClass = state === State.INVALID ? 'error' : null;
 
   onDestroy(() => {
     clearIds();

packages/bridge-ui/src/components/Bridge/SharedBridgeComponents/Actions.svelte

@@ -62,34 +62,21 @@
     }
   });
 
-  $: isValidBalance =
-    isETH || isERC20 || isERC1155 ? $tokenBalance && $tokenBalance.value > 0n : isERC721 ? true : false;
+  $: isValidBalance = isETH || isERC20 || isERC1155 ? $tokenBalance && $tokenBalance.value > 0n : isERC721;
 
   // Basic conditions so we can even start the bridging process
-  $: hasAddress = $recipientAddress || $account?.address ? true : false;
+  $: hasAddress = $recipientAddress || Boolean($account?.address);
   $: hasNetworks = $connectedSourceChain?.id && $destNetwork?.id;
   $: hasBalance = !$insufficientBalance && !$computingBalance && !$errorComputingBalance && isValidBalance;
 
   $: canDoNothing = !hasAddress || !hasNetworks || !hasBalance || !$selectedToken || disabled;
 
-  // Conditions to disable/enable buttons
-  $: disableApprove =
-    checking ||
-    (!$selectedTokenIsBridged &&
-      (isERC20
-        ? canDoNothing || $insufficientBalance || $validatingAmount || approving || $allApproved || !$enteredAmount
-        : isERC721
-          ? $allApproved || approving
-          : isERC1155
-            ? $allApproved || approving
-            : approving));
-
   $: isERC20 = $selectedToken?.type === TokenType.ERC20;
   $: isERC721 = $selectedToken?.type === TokenType.ERC721;
   $: isERC1155 = $selectedToken?.type === TokenType.ERC1155;
   $: isETH = $selectedToken?.type === TokenType.ETH;
 
-  $: validApprovalStatus = $selectedTokenIsBridged ? true : $allApproved;
+  $: validApprovalStatus = $selectedTokenIsBridged || $allApproved;
 
   $: commonConditions =
     validApprovalStatus &&
@@ -103,24 +90,61 @@
     $allApproved &&
     !paused;
 
-  $: erc20ConditionsSatisfied =
-    commonConditions && !canDoNothing && !$insufficientAllowance && $tokenBalance && $enteredAmount;
-
-  $: erc721ConditionsSatisfied = commonConditions;
+  // Conditions to disable/enable buttons
+  $: disableApprove = true;
+  $: disableBridge = true;
+
+  // Conditions to disable/enable Approve button
+  $: {
+    const isERC20ApprovalDisabled = () => {
+      return canDoNothing || $insufficientBalance || $validatingAmount || approving || $allApproved || !$enteredAmount;
+    };
+
+    const isERC721ApprovalDisabled = () => {
+      return $allApproved || approving;
+    };
+
+    const isERC1155ApprovalDisabled = () => {
+      return $allApproved || approving;
+    };
+
+    const isDisableApprove = () => {
+      if (checking) return true;
+      if (!$selectedTokenIsBridged) {
+        switch (true) {
+          case isERC20:
+            return isERC20ApprovalDisabled();
+          case isERC721:
+            return isERC721ApprovalDisabled();
+          case isERC1155:
+            return isERC1155ApprovalDisabled();
+        }
+      }
+      return approving;
+    };
 
-  $: erc1155ConditionsSatisfied = commonConditions && $enteredAmount && $enteredAmount > 0;
+    disableApprove = isDisableApprove();
+  }
 
-  $: ethConditionsSatisfied = commonConditions && $enteredAmount && $enteredAmount > 0;
+  // Conditions to disable/enable Bridge button
+  $: {
+    const isDisableBridge = () => {
+      switch (true) {
+        case isERC20:
+          return !(commonConditions && !canDoNothing && !$insufficientAllowance && $tokenBalance && $enteredAmount);
+        case isERC721:
+          return !commonConditions;
+        case isERC1155:
+          return !(commonConditions && $enteredAmount && $enteredAmount > 0);
+        case isETH:
+          return !(commonConditions && $enteredAmount && $enteredAmount > 0);
+        default:
+          return !commonConditions;
+      }
+    };
 
-  $: disableBridge = isERC20
-    ? !erc20ConditionsSatisfied
-    : isERC721
-      ? !erc721ConditionsSatisfied
-      : isERC1155
-        ? !erc1155ConditionsSatisfied
-        : isETH
-          ? !ethConditionsSatisfied
-          : commonConditions;
+    disableBridge = isDisableBridge();
+  }
 </script>
 
 <div class="f-col w-full gap-4">

packages/bridge-ui/src/components/Button/ActionButton.svelte

@@ -18,7 +18,7 @@
     state = ButtonState.DEFAULT;
   }
 
-  $: disabledColor = onPopup && $$restProps.disabled ? '!bg-dialog-interactive-disabled' : '';
+  $: disabledColor = onPopup && $$restProps.disabled ? '!bg-dialog-interactive-disabled' : null;
 
   $: commonClasses = classNames(
     'btn size-[56px] px-[28px] py-[14px] rounded-full flex-1 w-full items-center',

packages/bridge-ui/src/components/Button/Button.svelte

@@ -70,7 +70,7 @@
     // since we're showing some important information.
     loading ? 'btn-disabled !text-primary-content' : null,
 
-    $$restProps.disabled ? borderClasses : '',
+    $$restProps.disabled ? borderClasses : null,
 
     $$props.class,
   );

packages/bridge-ui/src/components/Dialogs/ClaimDialog/ClaimDialog.svelte

@@ -177,7 +177,7 @@
   }
 </script>
 
-<dialog id={dialogId} class="modal {isDesktopOrLarger ? '' : 'modal-bottom'}" class:modal-open={dialogOpen}>
+<dialog id={dialogId} class="modal {isDesktopOrLarger && 'modal-bottom'}" class:modal-open={dialogOpen}>
   <div class="modal-box relative w-full bg-neutral-background absolute md:min-h-[600px]">
     <div class="w-full f-between-center">
       <CloseButton onClick={closeDialog} />

packages/bridge-ui/src/components/Dialogs/Shared/ReviewStep.svelte

@@ -34,7 +34,7 @@
         <img
           alt="nft"
           src={imageUrl || ''}
-          class="rounded-[20px] bg-white max-w-[200px] {!imageLoaded || imageUrl === '' ? 'hidden' : ''}"
+          class="rounded-[20px] bg-white max-w-[200px] {!imageLoaded || imageUrl === '' ? 'hidden' : null}"
           on:load={handleImageLoad} />
       </div>
     {/if}

packages/bridge-ui/src/components/Dialogs/Stepper/DialogStep.svelte

@@ -7,8 +7,8 @@
 <li
   data-content=""
   class="step
-  {isActive ? 'step-primary' : ''} 
-  {stepIndex < currentStepIndex && !isActive ? 'step-previous' : ''}">
+  {isActive ? 'step-primary' : null} 
+  {stepIndex < currentStepIndex && (!isActive ? 'step-previous' : null)}">
   <slot />
 </li>
 

packages/bridge-ui/src/components/Icon/RotatingIcon.svelte

@@ -5,7 +5,7 @@
   export let size: number = 20;
 </script>
 
-<div class={loading ? 'rotating' : ''}>
+<div class={loading ? 'rotating' : null}>
   <Icon {type} {size} />
 </div>
 

packages/bridge-ui/src/components/NFTs/NFTInfoDialog.svelte

@@ -99,7 +99,7 @@
       <img
         alt="nft"
         src={imageUrl || ''}
-        class="rounded-[20px] self-center bg-white {!imageLoaded || imageUrl === '' ? 'hidden' : ''}"
+        class="rounded-[20px] self-center bg-white {!imageLoaded || imageUrl === '' ? 'hidden' : null}"
         on:load={handleImageLoad} />
       <div id="metadata">
         <div class="f-between-center">

packages/bridge-ui/src/components/Stepper/Step.svelte

@@ -7,8 +7,8 @@
 <li
   data-content=""
   class="step
-  {isActive ? 'step-primary' : ''} 
-  {stepIndex < currentStepIndex && !isActive ? 'step-previous' : ''}">
+  {isActive ? 'step-primary' : null} 
+  {stepIndex < currentStepIndex && !isActive ? 'step-previous' : null}">
   <slot />
 </li>
 

packages/bridge-ui/src/components/Transactions/Transaction.svelte

@@ -134,7 +134,7 @@
           <div class="f-col text-left">
             <div class="text-sm">{token?.name ? truncateString(token?.name, 15) : 'No Token Name'}</div>
             <div class="text-sm text-secondary-content">
-              {token?.metadata?.name ? truncateString(token?.metadata?.name, 15) : ''}
+              {token?.metadata?.name ? truncateString(token?.metadata?.name, 15) : null}
             </div>
             <div class="text-sm text-secondary-content">{token?.tokenId}</div>
           </div>
@@ -179,7 +179,7 @@
               </i>
               {truncateString(getChainName(Number(item.destChainId)), 8)}
             </div>
-            <span class="text-secondary-content">{token?.name ? truncateString(token?.name, 15) : ''}</span>
+            <span class="text-secondary-content">{token?.name ? truncateString(token?.name, 15) : null}</span>
           </div>
         {/if}
       </div>

packages/bridge-ui/src/components/Transactions/Transactions.svelte

@@ -243,7 +243,7 @@
         {#if renderTransactions}
           <div
             class="flex flex-col items-center"
-            style={isBlurred ? `filter: blur(5px); transition: filter ${transitionTime / 1000}s ease-in-out` : ''}>
+            style={isBlurred ? `filter: blur(5px); transition: filter ${transitionTime / 1000}s ease-in-out` : null}>
             {#each transactionsToShow as item (item.hash)}
               <Transaction {item} />
               <div class="h-sep !my-0 {isDesktopOrLarger ? 'display-inline' : 'hidden'}" />