Merge branch 'main' into contestable-zkrollup

packages/bridge-ui-v2/README.md

@@ -41,14 +41,14 @@ source .env
 
 **Detailed process**
 
-These are are the additional configuration files that have to be filled in:
+These are the additional configuration files that have to be filled in:
 
 | Name                                    | Description                                                                              |
 | --------------------------------------- | ---------------------------------------------------------------------------------------- |
 | **/config/configuredBridges.json**      | Defines the chains that are connected via taiko bridges and lists the contract addresses |
 | **/config/configuredChains.json**       | Defines some metadata for the chains, such as name, icons, explorer URL, etc.            |
 | **/config/configuredRelayer.json**      | If chains have a relayer, the URL and the chain IDs it covers are entered here           |
-| **/config/configuredCustomTokens.json** | Defines a list of tokens that should be availabe in the token dropdowns                  |
+| **/config/configuredCustomTokens.json** | Defines a list of tokens that should be available in the token dropdowns                  |
 
 ---
 
@@ -73,7 +73,7 @@ To get started, open your terminal in `/packages/bridge-ui-v2/`
 
    This command exports the json as base64 string to your .env file
 
-4. Now whenver a build is triggered it will generate the config files based on the .env file in `src/generated/`
+4. Now whenever a build is triggered it will generate the config files based on the .env file in `src/generated/`
    <br>**Note: In the** `config/schemas` **folder are schemas that will validate the correct json format and report any errors in your initial json configurations, so check the log output for any errors!**
    <br>
 

packages/bridge-ui-v2/scripts/vite-plugins/generateBridgeConfig.ts

@@ -26,7 +26,9 @@ export function generateBridgeConfig() {
     async buildStart() {
       logger.info('Plugin initialized.');
       let configuredBridgesConfigFile;
-      if (!skip) {
+      if (skip) {
+        configuredBridgesConfigFile = '';
+      } else {
         if (!process.env.CONFIGURED_BRIDGES) {
           throw new Error(
             'CONFIGURED_BRIDGES is not defined in environment. Make sure to run the export step in the documentation.',
@@ -42,8 +44,6 @@ export function generateBridgeConfig() {
         if (!isValid) {
           throw new Error('encoded configuredBridges.json is not valid.');
         }
-      } else {
-        configuredBridgesConfigFile = '';
       }
 
       const tsFilePath = path.resolve(outputPath);

packages/bridge-ui-v2/scripts/vite-plugins/generateChainConfig.ts

@@ -157,11 +157,8 @@ enum LayerType {
 const _formatObjectToTsLiteral = (obj: ChainConfigMap): string => {
   const formatValue = (value: ChainConfig): string => {
     if (typeof value === 'string') {
-      if (typeof value === 'string') {
-        if (Object.values(LayerType).includes(value as LayerType)) {
-          return `LayerType.${value}`; // This line is using LayerType as an enum, but it is now a type
-        }
-        return `"${value}"`;
+      if (Object.values(LayerType).includes(value as LayerType)) {
+        return `LayerType.${value}`; // This line is using LayerType as an enum, but it is now a type
       }
       return `"${value}"`;
     }

packages/bridge-ui-v2/scripts/vite-plugins/generateCustomTokenConfig.ts

@@ -27,7 +27,9 @@ export function generateCustomTokenConfig() {
       logger.info('Plugin initialized.');
       let configuredTokenConfigFile;
 
-      if (!skip) {
+      if (skip) {
+        configuredTokenConfigFile = '';
+      } else {
         if (!process.env.CONFIGURED_CUSTOM_TOKEN) {
           throw new Error(
             'CONFIGURED_CUSTOM_TOKEN is not defined in environment. Make sure to run the export step in the documentation.',
@@ -43,8 +45,6 @@ export function generateCustomTokenConfig() {
         if (!isValid) {
           throw new Error('encoded configuredBridges.json is not valid.');
         }
-      } else {
-        configuredTokenConfigFile = '';
       }
       const tsFilePath = path.resolve(outputPath);
 

packages/bridge-ui-v2/scripts/vite-plugins/generateEventIndexerConfig.ts

@@ -29,7 +29,9 @@ export function generateEventIndexerConfig() {
       logger.info('Plugin initialized.');
       let configuredEventIndexerConfigFile;
 
-      if (!skip) {
+      if (skip) {
+        configuredEventIndexerConfigFile = '';
+      } else {
         if (!process.env.CONFIGURED_EVENT_INDEXER) {
           throw new Error(
             'CONFIGURED_EVENT_INDEXER is not defined in environment. Make sure to run the export step in the documentation.',
@@ -44,8 +46,6 @@ export function generateEventIndexerConfig() {
         if (!isValid) {
           throw new Error('encoded configuredBridges.json is not valid.');
         }
-      } else {
-        configuredEventIndexerConfigFile = '';
       }
       // Path to where you want to save the generated Typ eScript file
       const tsFilePath = path.resolve(outputPath);

packages/bridge-ui-v2/scripts/vite-plugins/generateRelayerConfig.ts

@@ -29,7 +29,9 @@ export function generateRelayerConfig() {
       logger.info('Plugin initialized.');
       let configuredRelayerConfigFile;
 
-      if (!skip) {
+      if (skip) {
+        configuredRelayerConfigFile = '';
+      } else {
         if (!process.env.CONFIGURED_RELAYER) {
           throw new Error(
             'CONFIGURED_RELAYER is not defined in environment. Make sure to run the export step in the documentation.',
@@ -44,8 +46,6 @@ export function generateRelayerConfig() {
         if (!isValid) {
           throw new Error('encoded configuredBridges.json is not valid.');
         }
-      } else {
-        configuredRelayerConfigFile = '';
       }
       // Path to where you want to save the generated Typ eScript file
       const tsFilePath = path.resolve(outputPath);

packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ImportStep.svelte

@@ -322,6 +322,7 @@ Automatic NFT Input
             </Button>
 
             <IconFlipper
+              type="swap-rotate"
               iconType1="list"
               iconType2="cards"
               selectedDefault="cards"

packages/bridge-ui-v2/src/components/Bridge/NFTBridgeSteps/ReviewStep.svelte

@@ -108,6 +108,7 @@ NFT List or Card View
     </div>
     <div class="flex gap-2">
       <IconFlipper
+        type="swap-rotate"
         iconType1="list"
         iconType2="cards"
         selectedDefault="list"

packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte

@@ -47,6 +47,7 @@
     small ? 'w-auto' : 'w-full',
     readOnly ? '' : 'dark:hover:bg-tertiary-interactive-hover',
     'flex justify-start content-center',
+    $$props.class,
   );
 
   let iconSize = small ? 'w-5 h-5' : 'w-7 h-7';
@@ -66,7 +67,7 @@
     // We want to inform the user that they need to connect
     // their wallet if they want to change the network
     if (!$account.isConnected) {
-      warningToast({title: $t('messages.account.required')});
+      warningToast({ title: $t('messages.account.required') });
       return;
     }
     addEscKeyListener();
@@ -89,10 +90,10 @@
       } catch (err) {
         console.error(err);
         if (err instanceof SwitchChainError) {
-          warningToast({title: $t('messages.network.pending')});
+          warningToast({ title: $t('messages.network.pending') });
         }
         if (err instanceof UserRejectedRequestError) {
-          warningToast({title: $t('messages.network.rejected')});
+          warningToast({ title: $t('messages.network.rejected') });
         }
       } finally {
         switchingNetwork = false;

packages/bridge-ui-v2/src/components/Header/Header.svelte

@@ -9,6 +9,7 @@
   import { account } from '$stores/account';
 
   $: isBridgePage = $page.route.id === '/' || $page.route.id === '/nft';
+  $: isTransactionsPage = $page.route.id === '/transactions';
 </script>
 
 <header
@@ -31,7 +32,7 @@
   <LogoWithText width={77} height={21} class="md:hidden" textFillClass={'fill-primary-content'} />
 
   <div class="flex justify-end w-full">
-    {#if isBridgePage}
+    {#if isBridgePage || isTransactionsPage}
       <BridgeTabs class="hidden md:flex md:flex-1" />
     {/if}
 

packages/bridge-ui-v2/src/components/Icon/IconFlipper.svelte

@@ -11,16 +11,22 @@
 
   export let selectedDefault: IconType = iconType1;
 
+  export let flipped: boolean = false;
+
+  export let type: 'swap-rotate' | 'swap-flip' | '' = '';
+
   const dispatch = createEventDispatcher();
 
   function handleLabelClick() {
     selectedDefault = selectedDefault === iconType1 ? iconType2 : iconType1;
+    flipped = !flipped;
     dispatch('labelclick');
   }
 
-  $: isDefault = selectedDefault === iconType1;
+  // $: isDefault = selectedDefault === iconType1;
+  $: isDefault = !flipped;
 
-  $: classes = classNames('swap swap-rotate btn-neutral', $$props.class);
+  $: classes = classNames('swap  btn-neutral', type, $$props.class);
 </script>
 
 <div role="button" tabindex="0" class={classes} on:click={handleLabelClick} on:keypress={handleLabelClick}>

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

@@ -32,6 +32,8 @@
   };
 
   $: currentChain = $network?.id;
+
+  $: imgUrl = nft.metadata?.image || placeholderUrl;
 </script>
 
 <dialog id={dialogId} class="modal modal-bottom md:modal-middle" class:modal-open={modalOpen}>
@@ -41,10 +43,7 @@
     <div class="f-col w-full space-y-[30px]">
       <h3 class="title-body-bold">{$t('bridge.nft.step.import.nft_card.title')}</h3>
 
-      <img
-        alt="placeholder nft"
-        src={nft.metadata?.image || placeholderUrl}
-        class="rounded-[20px] self-center bg-white" />
+      <img alt="nft" src={imgUrl} class="rounded-[20px] self-center bg-white" />
       <div id="metadata">
         <div class="f-between-center">
           <div class="text-secondary-content">{$t('common.collection')}</div>

packages/bridge-ui-v2/src/components/TokenDropdown/TokenDropdown.svelte

@@ -69,7 +69,7 @@
     // In order to select a token, we only need the source chain to be selected,
     // unless it's an imported token...
     if (!chain) {
-      warningToast({title: $t('messages.network.required')});
+      warningToast({ title: $t('messages.network.required') });
       return;
     }
 
@@ -78,7 +78,7 @@
     if (token.imported) {
       // ... in the case of imported tokens, we also require the destination chain to be selected.    if (!destChain) {
       if (!destChain) {
-        warningToast({title: $t('messages.network.required_dest')});
+        warningToast({ title: $t('messages.network.required_dest') });
         return;
       }
 

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

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import { t } from 'svelte-i18n';
+
+  import IconFlipper from '$components/Icon/IconFlipper.svelte';
+  import { MessageStatus } from '$libs/bridge';
+  import { classNames } from '$libs/util/classNames';
+  import { closeOnEscapeOrOutsideClick } from '$libs/util/customActions';
+
+  export let selectedStatus: MessageStatus | null = null;
+
+  let flipped = false;
+
+  let iconFlipperComponent: IconFlipper;
+
+  let menuOpen = false;
+
+  const options = [
+    { value: null, label: $t('transactions.filter.all') },
+    { value: MessageStatus.NEW, label: $t('transactions.filter.processing') },
+    { value: MessageStatus.RETRIABLE, label: $t('transactions.filter.retry') },
+    { value: MessageStatus.DONE, label: $t('transactions.filter.claimed') },
+    { value: MessageStatus.FAILED, label: $t('transactions.filter.failed') },
+  ];
+
+  const selectOption = (option: (typeof options)[0]) => {
+    selectedStatus = option.value;
+    menuOpen = false;
+  };
+
+  const toggleMenu = () => {
+    menuOpen = !menuOpen;
+    flipped = !flipped;
+  };
+
+  $: menuClasses = classNames(
+    'menu absolute right-0 w-[210px] p-3 mt-2 rounded-[10px] bg-neutral-background z-10  box-shadow-small',
+    menuOpen ? 'visible opacity-100' : 'invisible opacity-0',
+  );
+</script>
+
+<div class="relative">
+  <button
+    aria-haspopup="listbox"
+    aria-expanded={menuOpen}
+    class="f-between-center w-[210px] min-h-[36px] max-h-[36px] px-6 bg-neutral border-0 shadow-none outline-none rounded-[6px]"
+    on:click|stopPropagation={toggleMenu}>
+    <span class="text-primary-content font-bold">
+      {selectedStatus !== null
+        ? options.find((option) => option.value === selectedStatus)?.label
+        : $t('transactions.filter.all')}
+    </span>
+    <IconFlipper
+      bind:flipped
+      bind:this={iconFlipperComponent}
+      iconType1="chevron-left"
+      iconType2="chevron-down"
+      selectedDefault="chevron-left"
+      size={15} />
+  </button>
+
+  {#if menuOpen}
+    <ul
+      role="listbox"
+      class={menuClasses}
+      use:closeOnEscapeOrOutsideClick={{ enabled: menuOpen, callback: () => (menuOpen = false) }}>
+      {#each options as option (option.value)}
+        <li
+          role="option"
+          aria-selected={option.value === selectedStatus}
+          tabindex="0"
+          class="flex items-center h-[56px] px-3 cursor-pointer rounded-[6px]"
+          on:click={() => selectOption(option)}
+          on:keydown={() => selectOption(option)}>
+          <span class="flex w-full h-[56px] text-primary-content font-bold">{option.label}</span>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>