more processingfee warnings

taikoxyz · Jun 3, 2024 · 23d9435 · 23d9435
1 parent 214e720
commit 23d9435
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 31 deletions.
diff --git a/...ui/src/components/Bridge/FungibleBridgeComponents/ImportStep/TokenInput/TokenInput.svelte b/...ui/src/components/Bridge/FungibleBridgeComponents/ImportStep/TokenInput/TokenInput.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
-  import { type Address,zeroAddress } from 'viem';
+  import { type Address, zeroAddress } from 'viem';
   import { formatUnits, parseUnits } from 'viem/utils';
 
   import { FlatAlert } from '$components/Alert';

diff --git a/...bridge-ui/src/components/Bridge/SharedBridgeComponents/ProcessingFee/ProcessingFee.svelte b/...bridge-ui/src/components/Bridge/SharedBridgeComponents/ProcessingFee/ProcessingFee.svelte
@@ -5,7 +5,7 @@
 
   import Alert from '$components/Alert/Alert.svelte';
   import FlatAlert from '$components/Alert/FlatAlert.svelte';
-  import { processingFee, processingFeeMethod } from '$components/Bridge/state';
+  import { gasLimitZero, processingFee, processingFeeMethod } from '$components/Bridge/state';
   import { ActionButton, CloseButton } from '$components/Button';
   import { InputBox } from '$components/InputBox';
   import { LoadingText } from '$components/LoadingText';
@@ -67,15 +67,19 @@
 
   function closeModal() {
     modalOpen = false;
+    manuallyConfirmed = false;
   }
 
   function openModal() {
     tempProcessingFeeMethod = $processingFeeMethod;
     modalOpen = true;
+    $gasLimitZero = false;
+    manuallyConfirmed = false;
   }
 
   function cancelModal() {
     inputBox?.clear();
+    $gasLimitZero = false;
 
     if (tempProcessingFeeMethod === ProcessingFeeMethod.CUSTOM) {
       tempprocessingFee = $processingFee;
@@ -118,6 +122,15 @@
     }
   }
 
+  const handleGasLimitZero = () => {
+    $gasLimitZero = !$gasLimitZero;
+    if ($gasLimitZero) {
+      tempProcessingFeeMethod = ProcessingFeeMethod.NONE;
+    } else {
+      tempProcessingFeeMethod = ProcessingFeeMethod.RECOMMENDED;
+    }
+  };
+
   function unselectNoneIfNotEnoughETH(method: ProcessingFeeMethod, enoughEth: boolean) {
     if (method === ProcessingFeeMethod.NONE && enoughEth === false) {
       $processingFeeMethod = ProcessingFeeMethod.RECOMMENDED;
@@ -135,6 +148,12 @@
     updateProcessingFee($processingFeeMethod, recommendedAmount);
   }
   $: unselectNoneIfNotEnoughETH($processingFeeMethod, hasEnoughEth);
+
+  $: manuallyConfirmed = false;
+
+  $: needsConfirmation = tempProcessingFeeMethod !== ProcessingFeeMethod.RECOMMENDED || $gasLimitZero;
+
+  $: confirmDisabled = needsConfirmation && !manuallyConfirmed;
 </script>
 
 {#if small}
@@ -228,6 +247,7 @@
                 id="input-recommended"
                 class="radio w-6 h-6 checked:bg-primary-interactive-accent hover:border-primary-interactive-hover"
                 type="radio"
+                disabled={$gasLimitZero}
                 value={ProcessingFeeMethod.RECOMMENDED}
                 name="processingFeeMethod"
                 bind:group={tempProcessingFeeMethod} />
@@ -256,6 +276,14 @@
 
               {#if !hasEnoughEth}
                 <FlatAlert type="error" message={$t('processing_fee.none.warning')} />
+              {:else if tempProcessingFeeMethod === ProcessingFeeMethod.NONE}
+                <div class="my-5">
+                  <Alert type="warning">
+                    <span class="body-small">
+                      {$t('processing_fee.none.alert')}
+                    </span>
+                  </Alert>
+                </div>
               {/if}
             </li>
 
@@ -273,42 +301,82 @@
                 id="input-custom"
                 class="radio w-6 h-6 checked:bg-primary-interactive-accent hover:border-primary-interactive-hover"
                 type="radio"
+                disabled={$gasLimitZero}
                 value={ProcessingFeeMethod.CUSTOM}
                 name="processingFeeMethod"
                 bind:group={tempProcessingFeeMethod} />
             </li>
-          </ul>
-          <div class="relative f-items-center my-[20px]">
+
+            <div class="relative f-items-center my-[20px]">
+              {#if tempProcessingFeeMethod === ProcessingFeeMethod.CUSTOM}
+                <InputBox
+                  type="number"
+                  min="0"
+                  placeholder="0.0015"
+                  disabled={tempProcessingFeeMethod !== ProcessingFeeMethod.CUSTOM}
+                  class="w-full input-box p-6 pr-16 title-subsection-bold placeholder:text-tertiary-content"
+                  on:input={inputProcessFee}
+                  bind:this={inputBox} />
+                <span class="absolute right-6 uppercase body-bold text-secondary-content">ETH</span>
+              {/if}
+            </div>
+
             {#if tempProcessingFeeMethod === ProcessingFeeMethod.CUSTOM}
-              <InputBox
-                type="number"
-                min="0"
-                placeholder="0.01"
-                disabled={tempProcessingFeeMethod !== ProcessingFeeMethod.CUSTOM}
-                class="w-full input-box p-6 pr-16 title-subsection-bold placeholder:text-tertiary-content"
-                on:input={inputProcessFee}
-                bind:this={inputBox} />
-              <span class="absolute right-6 uppercase body-bold text-secondary-content">ETH</span>
+              <div class="my-5">
+                <Alert type="warning">
+                  <span class="body-small">
+                    {$t('processing_fee.custom.warning')}
+                  </span>
+                </Alert>
+              </div>
             {/if}
-          </div>
-          {#if tempProcessingFeeMethod !== ProcessingFeeMethod.RECOMMENDED}
-            <div class="my-5">
-              <Alert type="warning">
-                <span class="body-small">
-                  {$t('processing_fee.custom.warning')}
-                </span>
-              </Alert>
+
+            <div class="f-between-center">
+              <div class="f-col mr-[18px]">
+                <label for="input-custom" class="body-bold"> {$t('processing_fee.gasLimit.title')}</label>
+                <span class="body-small-regular text-secondary-content">{$t('processing_fee.gasLimit.message')}</span>
+              </div>
+              <input
+                type="checkbox"
+                checked={$gasLimitZero}
+                on:click={handleGasLimitZero}
+                class="checkbox checkbox-primary" />
             </div>
-          {/if}
 
-          <div class="grid grid-cols-2 gap-[20px]">
-            <ActionButton on:click={cancelModal} priority="secondary">
-              <span class="body-bold">{$t('common.cancel')}</span>
-            </ActionButton>
-            <ActionButton priority="primary" on:click={confirmChanges}>
-              <span class="body-bold">{$t('common.confirm')}</span>
-            </ActionButton>
-          </div>
+            {#if $gasLimitZero}
+              <div class="my-5">
+                <Alert type="warning">
+                  <span class="body-small">
+                    {$t('processing_fee.gasLimit.warning.message')}
+                  </span>
+                </Alert>
+              </div>
+            {/if}
+            {#if needsConfirmation}
+              <div class="h-sep" />
+              <div class="f-between-center">
+                <div class="f-col mr-[18px]">
+                  <label for="input-custom" class="body-bold"> Confirm changes</label>
+                  <span class="body-small-regular text-secondary-content">"I understand the changes I've made"</span>
+                </div>
+                <input
+                  type="checkbox"
+                  checked={manuallyConfirmed}
+                  on:click={() => (manuallyConfirmed = !manuallyConfirmed)}
+                  class="checkbox checkbox-primary" />
+              </div>
+              <div class="h-sep" />
+            {/if}
+            <div class="grid grid-cols-2 gap-[20px]">
+              <ActionButton on:click={cancelModal} priority="secondary">
+                <span class="body-bold">{$t('common.cancel')}</span>
+              </ActionButton>
+
+              <ActionButton priority="primary" on:click={confirmChanges} disabled={confirmDisabled} onPopup>
+                <span class="body-bold">{$t('common.confirm')}</span>
+              </ActionButton>
+            </div>
+          </ul>
         </div>
       </div>
     </dialog>

diff --git a/packages/bridge-ui/src/components/Bridge/state.ts b/packages/bridge-ui/src/components/Bridge/state.ts
@@ -26,6 +26,7 @@ export const enteredAmount = writable<bigint>(BigInt(0));
 export const destNetwork = writable<Maybe<Chain>>(null);
 export const destOptions = writable<Chain[]>(chains);
 export const processingFee = writable<bigint>(BigInt(0));
+export const gasLimitZero = writable<boolean>(false);
 export const processingFeeMethod = writable<ProcessingFeeMethod>(ProcessingFeeMethod.RECOMMENDED);
 export const recipientAddress = writable<Maybe<Address>>(null);
 

diff --git a/packages/bridge-ui/src/i18n/en.json b/packages/bridge-ui/src/i18n/en.json
@@ -383,12 +383,20 @@
     "custom": {
       "label": "Custom",
       "text": "Customize your processing fee",
-      "warning": "Setting the processing fee to 'None' requires manual claiming and prevents others from claiming on your behalf. Fees set below the recommended level may not attract any relayers. Please adjust values only if you understand the consequences."
+      "warning": "Fees set below the recommended level may not attract any relayers. Please adjust values only if you understand the consequences."
     },
     "customized": "Customized",
     "description": "The payment you provide to the relayer for handling your bridge message on the destination chain.",
+    "gasLimit": {
+      "message": "No other account can pay your gas fees when claiming",
+      "title": "Only allow sender to claim",
+      "warning": {
+        "message": "This will prevent any relayer from claiming for you, you will have to claim manually. Do not use this option if you are not 100% sure what you are doing. "
+      }
+    },
     "link": "Customize fee",
     "none": {
+      "alert": "Setting the processing fee to 'None' will require manual claiming.  No relayer will claim for you.",
       "label": "None",
       "text": "Use ETH to manually claim your bridged token later",
       "warning": "Insufficient ETH to cover the gas fees for claiming."