feat(bridge-ui-v2): bridge form (#14056)

packages/bridge-ui-v2/CHANGELOG.md

@@ -2,15 +2,13 @@
 
 ## [2.1.0](https://github.com/taikoxyz/taiko-mono/compare/bridge-ui-v2-v2.0.0...bridge-ui-v2-v2.1.0) (2023-06-26)
 
-
 ### Features
 
-* **bridge-ui-v2:** env vars ([#14034](https://github.com/taikoxyz/taiko-mono/issues/14034)) ([fccc0a7](https://github.com/taikoxyz/taiko-mono/commit/fccc0a7252b93148559a0438ee23366f04fc86f6))
-* **bridge-ui-v2:** initial setup v2 ([#14013](https://github.com/taikoxyz/taiko-mono/issues/14013)) ([429bf7a](https://github.com/taikoxyz/taiko-mono/commit/429bf7a1619b9554f999db29d236ce0c9c6236da))
-* **bridge-ui-v2:** tailwind config and other setups ([#14016](https://github.com/taikoxyz/taiko-mono/issues/14016)) ([be294c6](https://github.com/taikoxyz/taiko-mono/commit/be294c66764d658423d58902076594afdc470e96))
-* **bridge-ui-v2:** use web3modal ([#14043](https://github.com/taikoxyz/taiko-mono/issues/14043)) ([911c701](https://github.com/taikoxyz/taiko-mono/commit/911c701ae738a9f2e12c14455c23951845d0c4c2))
-
+- **bridge-ui-v2:** env vars ([#14034](https://github.com/taikoxyz/taiko-mono/issues/14034)) ([fccc0a7](https://github.com/taikoxyz/taiko-mono/commit/fccc0a7252b93148559a0438ee23366f04fc86f6))
+- **bridge-ui-v2:** initial setup v2 ([#14013](https://github.com/taikoxyz/taiko-mono/issues/14013)) ([429bf7a](https://github.com/taikoxyz/taiko-mono/commit/429bf7a1619b9554f999db29d236ce0c9c6236da))
+- **bridge-ui-v2:** tailwind config and other setups ([#14016](https://github.com/taikoxyz/taiko-mono/issues/14016)) ([be294c6](https://github.com/taikoxyz/taiko-mono/commit/be294c66764d658423d58902076594afdc470e96))
+- **bridge-ui-v2:** use web3modal ([#14043](https://github.com/taikoxyz/taiko-mono/issues/14043)) ([911c701](https://github.com/taikoxyz/taiko-mono/commit/911c701ae738a9f2e12c14455c23951845d0c4c2))
 
 ### Bug Fixes
 
-* **bridge-ui-v2:** fixing vercel build ([#14052](https://github.com/taikoxyz/taiko-mono/issues/14052)) ([3332e70](https://github.com/taikoxyz/taiko-mono/commit/3332e70bb3b821ab4efbcfe4aed4dbc3ed614850))
+- **bridge-ui-v2:** fixing vercel build ([#14052](https://github.com/taikoxyz/taiko-mono/issues/14052)) ([3332e70](https://github.com/taikoxyz/taiko-mono/commit/3332e70bb3b821ab4efbcfe4aed4dbc3ed614850))

packages/bridge-ui-v2/src/app.d.ts

@@ -11,6 +11,7 @@ declare global {
   type Maybe<T> = T | null | undefined;
   type MaybeArray<T> = T | T[] | null | undefined;
   type MaybePromise<T> = T | Promise<T> | null | undefined;
+  type Position = 'top' | 'top-right' | 'right' | 'bottom-right' | 'bottom' | 'bottom-left' | 'left' | 'top-left';
 }
 
 export {};

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

@@ -0,0 +1,7 @@
+<script>
+  import { t } from 'svelte-i18n';
+
+  import { Card } from '$components/Card';
+</script>
+
+<Card title={$t('activities.title')} text={$t('activities.subtitle')}>TODO: Activities</Card>

packages/bridge-ui-v2/src/components/Activities/index.ts

@@ -0,0 +1 @@
+export { default as Activities } from './Activities.svelte';

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

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { classNames } from '$libs/util/classNames';
+
+  import { Icon, type IconType } from '../Icon';
+
+  type AlertType = 'success' | 'warning' | 'error' | 'info';
+  type AlertTypeDetails = {
+    class: string;
+    iconType: IconType;
+    iconFillClass: string;
+  };
+
+  export let type: AlertType;
+  export let forceColumnFlow = false;
+
+  let typeMap: Record<AlertType, AlertTypeDetails> = {
+    success: {
+      class: 'alert-success',
+      iconType: 'check-circle',
+      iconFillClass: 'fill-success-content',
+    },
+    warning: {
+      class: 'alert-warning',
+      iconType: 'exclamation-circle',
+      iconFillClass: 'fill-warning-content',
+    },
+    error: {
+      class: 'alert-danger',
+      iconType: 'x-close-circle',
+      iconFillClass: 'fill-error-content',
+    },
+    info: {
+      class: 'alert-info',
+      iconType: 'info-circle',
+      iconFillClass: 'fill-info-content',
+    },
+  };
+
+  const classes = classNames(
+    'alert gap-[5px] py-[12px] px-[20px] rounded-[10px]',
+    type ? typeMap[type].class : null,
+    forceColumnFlow ? 'grid-flow-col text-left' : null,
+    $$props.class,
+  );
+  const iconType = typeMap[type].iconType;
+  const iconFillClass = typeMap[type].iconFillClass;
+</script>
+
+<div class={classes}>
+  <div class="self-start">
+    <Icon type={iconType} fillClass={iconFillClass} size={24} />
+  </div>
+  <div class="callout-regular">
+    <slot />
+  </div>
+</div>

packages/bridge-ui-v2/src/components/Alert/index.ts

@@ -0,0 +1 @@
+export { default as Alert } from './Alert.svelte';

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

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { t } from 'svelte-i18n';
+
+  import { InputBox } from '$components/InputBox';
+  import { uid } from '$libs/util/uid';
+
+  let inputId = `input-${uid()}`;
+</script>
+
+<div class="f-col space-y-2">
+  <div class="f-between-center text-secondary-content body-regular">
+    <label for={inputId}>{$t('amount_input.label')}</label>
+    <div>
+      <span>{$t('amount_input.balance')}:</span>
+      <span>399.92 ETH</span>
+    </div>
+  </div>
+  <div class="relative f-items-center">
+    <InputBox
+      id={inputId}
+      type="number"
+      placeholder="0.01"
+      min="0"
+      class="w-full input-box outline-none py-6 pr-16 px-[26px] title-subsection-bold placeholder:text-tertiary-content" />
+    <button class="absolute right-6 uppercase">{$t('amount_input.max_button')}</button>
+  </div>
+</div>

packages/bridge-ui-v2/src/components/AmountInput/index.ts

@@ -0,0 +1 @@
+export { default } from './AmountInput.svelte';

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

@@ -0,0 +1,45 @@
+<script>
+  import { t } from 'svelte-i18n';
+
+  import AmountInput from '$components/AmountInput';
+  import Button from '$components/Button/Button.svelte';
+  import { Card } from '$components/Card';
+  import { ChainSelector } from '$components/ChainSelector';
+  import Icon from '$components/Icon/Icon.svelte';
+  import { ProcessingFee } from '$components/ProcessingFee';
+  import { RecipientInput } from '$components/RecipientInput';
+  import { TokenDropdown } from '$components/TokenDropdown';
+  import { tokens } from '$libs/token';
+</script>
+
+<Card title={$t('bridge.title')} text={$t('bridge.subtitle')}>
+  <div class="space-y-[35px]">
+    <div class="space-y-4">
+      <div class="space-y-2">
+        <ChainSelector label={$t('chain.from')} />
+        <TokenDropdown {tokens} />
+      </div>
+
+      <AmountInput />
+
+      <div class="f-justify-center">
+        <button>
+          <Icon type="up-down-circle" size={36} />
+        </button>
+      </div>
+
+      <div class="space-y-2">
+        <ChainSelector label={$t('chain.to')} />
+        <RecipientInput />
+      </div>
+    </div>
+
+    <ProcessingFee />
+
+    <div class="h-sep" />
+
+    <Button type="primary" class="px-[28px] py-[14px]">
+      <span class="body-bold">{$t('bridge.bridge_button')}</span>
+    </Button>
+  </div>
+</Card>

packages/bridge-ui-v2/src/components/Bridge/index.ts

@@ -0,0 +1 @@
+export { default as Bridge } from './Bridge.svelte';

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

@@ -1,12 +1,20 @@
 <script lang="ts">
   import { classNames } from '$libs/util/classNames';
 
-  type ButtonType = 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'ghost';
-  type ButtonSize = 'lg' | 'md' | 'sm' | 'xs';
+  type ButtonType =
+    | 'neutral'
+    | 'primary'
+    | 'secondary'
+    | 'accent'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'error'
+    | 'ghost'
+    | 'link';
   type ButtonShape = 'circle' | 'square';
 
   export let type: Maybe<ButtonType> = null;
-  export let size: Maybe<ButtonSize> = null;
   export let shape: Maybe<ButtonShape> = null;
   export let outline = false;
   export let block = false;
@@ -26,13 +34,7 @@
     warning: 'btn-warning',
     error: 'btn-error',
     ghost: 'btn-ghost',
-  };
-
-  const sizeMap: Record<ButtonSize, string> = {
-    lg: 'btn-lg',
-    md: 'btn-md',
-    sm: 'btn-sm',
-    xs: 'btn-xs',
+    link: 'btn-link',
   };
 
   const shapeMap: Record<ButtonShape, string> = {
@@ -41,9 +43,8 @@
   };
 
   const classes = classNames(
-    'btn btn-sm md:btn-md',
+    'btn w-full h-auto min-h-fit border-0',
     type ? typeMap[type] : null,
-    size ? sizeMap[size] : null,
     shape ? shapeMap[shape] : null,
     outline ? 'btn-outline' : null,
     block ? 'btn-block' : null,

packages/bridge-ui-v2/src/components/Button/index.ts

@@ -1 +1 @@
-export { default } from './Button.svelte';
+export { default as Button } from './Button.svelte';

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+  export let title: string;
+  export let text = '';
+</script>
+
+<div class="card w-full md:w-[524px] md:bg-elevated-background rounded-[20px] md:border md:border-neutral-background">
+  <div class="card-body p-4 md:p-12 body-regular">
+    <h2 class="card-title title-screen-bold">{title}</h2>
+    {#if text}
+      <p>{text}</p>
+    {/if}
+    <div class="f-col mt-[35px]">
+      <slot />
+    </div>
+  </div>
+</div>

packages/bridge-ui-v2/src/components/Card/index.ts

@@ -0,0 +1 @@
+export { default as Card } from './Card.svelte';

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

@@ -0,0 +1,102 @@
+<script lang="ts">
+  import type { ComponentType } from 'svelte';
+  import { noop, onDestroy } from 'svelte/internal';
+  import { t } from 'svelte-i18n';
+
+  import { EthIcon, Icon, TaikoIcon } from '$components/Icon';
+  import { PUBLIC_L1_CHAIN_ID, PUBLIC_L2_CHAIN_ID } from '$env/static/public';
+  import { chains, type ExtendedChain } from '$libs/chain';
+  import { uid } from '$libs/util/uid';
+
+  export let label: string;
+  export let onChange: (chain: ExtendedChain) => void = noop;
+
+  let chainToIconMap: Record<string, ComponentType> = {
+    [PUBLIC_L1_CHAIN_ID]: EthIcon,
+    [PUBLIC_L2_CHAIN_ID]: TaikoIcon,
+  };
+
+  let buttonId = `button-${uid()}`;
+  let dialogId = `dialog-${uid()}`;
+  let selectedChain: ExtendedChain;
+  let modalOpen = false;
+
+  function closeModal() {
+    modalOpen = false;
+  }
+
+  function openModal() {
+    modalOpen = true;
+  }
+
+  function selectChain(chain: ExtendedChain) {
+    selectedChain = chain;
+    onChange?.(chain); // TODO: data binding? 🤔
+    closeModal();
+  }
+
+  function onChainKeydown(event: KeyboardEvent, chain: ExtendedChain) {
+    if (event.key === 'Enter') {
+      selectChain(chain);
+    }
+  }
+
+  onDestroy(closeModal);
+</script>
+
+<div class="ChainSelector">
+  <div class="f-items-center space-x-[10px]">
+    <label class="text-secondary-content body-regular" for={buttonId}>{label}:</label>
+    <button
+      id={buttonId}
+      type="button"
+      aria-haspopup="dialog"
+      aria-controls={dialogId}
+      aria-expanded={modalOpen}
+      class="px-2 py-[6px] body-small-regular bg-neutral-background rounded-md min-w-[150px]"
+      on:click={openModal}>
+      <div class="f-items-center space-x-2">
+        {#if !selectedChain}
+          <span>{$t('chain_selector.placeholder')}…</span>
+        {/if}
+        {#if selectedChain}
+          <i role="img" aria-label={selectedChain.name}>
+            <svelte:component this={chainToIconMap[selectedChain.id]} size={20} />
+          </i>
+          <span>{selectedChain.name}</span>
+        {/if}
+      </div>
+    </button>
+  </div>
+
+  <dialog id={dialogId} class="modal" class:modal-open={modalOpen}>
+    <div class="modal-box relative px-6 py-[21px] bg-primary-base-background text-primary-base-content">
+      <button class="absolute right-6 top-[21px]" on:click={closeModal}>
+        <Icon type="x-close" fillClass="fill-secondary-icon" />
+      </button>
+      <h3 class="title-body-bold">{$t('chain_selector.placeholder')}</h3>
+      <ul class="menu space-y-4">
+        {#each chains as chain (chain.id)}
+          <li
+            role="menuitem"
+            tabindex="0"
+            on:click={() => selectChain(chain)}
+            on:keydown={(event) => onChainKeydown(event, chain)}>
+            <!-- TODO: agree on hover:bg color -->
+            <div class="f-row justify-between hover:text-primary-base-content hover:bg-grey-10">
+              <div class="f-items-center space-x-4">
+                <i role="img" aria-label={chain.name}>
+                  <svelte:component this={chainToIconMap[chain.id]} size={32} />
+                </i>
+                <span class="body-bold">{chain.name}</span>
+              </div>
+              <span class="body-regular">{chain.network}</span>
+            </div>
+          </li>
+        {/each}
+      </ul>
+    </div>
+
+    <div class="overlay-backdrop" />
+  </dialog>
+</div>

packages/bridge-ui-v2/src/components/ChainSelector/index.ts

@@ -0,0 +1 @@
+export { default as ChainSelector } from './ChainSelector.svelte';

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

@@ -0,0 +1,29 @@
+<script>
+  import { t } from 'svelte-i18n';
+
+  import { Alert } from '$components/Alert';
+  import { Button } from '$components/Button';
+  import { Card } from '$components/Card';
+  import { ChainSelector } from '$components/ChainSelector';
+  import { TokenDropdown } from '$components/TokenDropdown';
+  import { testERC20Tokens } from '$libs/token';
+</script>
+
+<Card title={$t('faucet.title')} text={$t('faucet.subtitle')}>
+  <div class="space-y-[35px]">
+    <div class="space-y-2">
+      <ChainSelector label={$t('faucet.currently_on')} />
+      <TokenDropdown tokens={testERC20Tokens} />
+    </div>
+
+    <Button type="primary" class="px-[28px] py-[14px]">
+      <span class="body-bold">{$t('faucet.mint_button')}</span>
+    </Button>
+
+    <div class="h-sep" />
+
+    <Alert type="warning" forceColumnFlow>
+      {$t('faucet.warning_message')}
+    </Alert>
+  </div>
+</Card>

packages/bridge-ui-v2/src/components/Faucet/index.ts

@@ -0,0 +1 @@
+export { default as Faucet } from './Faucet.svelte';