Skip to content

Commit

Permalink
feat(bridge-ui-v2): faucet (#14080)
Browse files Browse the repository at this point in the history
  • Loading branch information
jscriptcoder committed Jul 1, 2023
1 parent 32b9859 commit 82c5e36
Show file tree
Hide file tree
Showing 10 changed files with 146 additions and 34 deletions.
56 changes: 56 additions & 0 deletions packages/bridge-ui-v2/src/components/Alert/Alert.svelte
Original file line number Diff line number Diff line change
@@ -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>
1 change: 1 addition & 0 deletions packages/bridge-ui-v2/src/components/Alert/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default as Alert } from './Alert.svelte';
46 changes: 24 additions & 22 deletions packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -13,31 +13,33 @@
</script>

<Card title={$t('bridge.title')} text={$t('bridge.subtitle')}>
<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 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>

<div class="h-sep my-[35px]" />
<div class="h-sep" />

<Button type="primary" class="px-[28px] py-[14px]">
<span class="body-bold">{$t('bridge.bridge_button')}</span>
</Button>
<Button type="primary" class="px-[28px] py-[14px]">
<span class="body-bold">{$t('bridge.bridge_button')}</span>
</Button>
</div>
</Card>
2 changes: 1 addition & 1 deletion packages/bridge-ui-v2/src/components/Button/Button.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
};
const classes = classNames(
'btn h-auto min-h-fit border-0',
'btn w-full h-auto min-h-fit border-0',
type ? typeMap[type] : null,
shape ? shapeMap[shape] : null,
outline ? 'btn-outline' : null,
Expand Down
2 changes: 1 addition & 1 deletion packages/bridge-ui-v2/src/components/Card/Card.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
{#if text}
<p>{text}</p>
{/if}
<div class="f-col mt-6 md:mt-8">
<div class="f-col mt-[35px]">
<slot />
</div>
</div>
Expand Down
24 changes: 23 additions & 1 deletion packages/bridge-ui-v2/src/components/Faucet/Faucet.svelte
Original file line number Diff line number Diff line change
@@ -1,7 +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')}>TODO: Faucet</Card>
<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>
9 changes: 4 additions & 5 deletions packages/bridge-ui-v2/src/components/Header/Header.svelte
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
<script lang="ts">
import { t } from 'svelte-i18n';
import { Button } from '$components/Button';
import { Icon } from '$components/Icon';
import { LogoWithText } from '$components/Logo';
import { drawerToggleId } from '$components/SideNavigation';
import { web3modal } from '$libs/connect';
import { Button } from '../Button';
import { Icon } from '../Icon';
import { LogoWithText } from '../Logo';
import { drawerToggleId } from '../SideNavigation';
</script>

<header
Expand Down
36 changes: 33 additions & 3 deletions packages/bridge-ui-v2/src/components/Icon/Icon.svelte
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script lang="ts">
type IconType =
<script lang="ts" context="module">
export type IconType =
| 'bridge'
| 'faucet'
| 'activities'
Expand All @@ -9,9 +9,15 @@
| 'user-circle'
| 'chevron-down'
| 'x-close'
| 'x-close-circle'
| 'question-circle'
| 'up-down-circle';
| 'exclamation-circle'
| 'up-down-circle'
| 'check-circle'
| 'info-circle';
</script>

<script lang="ts">
export let type: IconType;
export let size = 20;
export let width = size;
Expand Down Expand Up @@ -77,17 +83,41 @@
<path
class={fillClass}
d="M6.28033 5.21967C5.98744 4.92678 5.51256 4.92678 5.21967 5.21967C4.92678 5.51256 4.92678 5.98744 5.21967 6.28033L8.93934 10L5.21967 13.7197C4.92678 14.0126 4.92678 14.4874 5.21967 14.7803C5.51256 15.0732 5.98744 15.0732 6.28033 14.7803L10 11.0607L13.7197 14.7803C14.0126 15.0732 14.4874 15.0732 14.7803 14.7803C15.0732 14.4874 15.0732 14.0126 14.7803 13.7197L11.0607 10L14.7803 6.28033C15.0732 5.98744 15.0732 5.51256 14.7803 5.21967C14.4874 4.92678 14.0126 4.92678 13.7197 5.21967L10 8.93934L6.28033 5.21967Z" />
{:else if type === 'x-close-circle'}
<path
class={fillClass}
fill-rule="evenodd"
clip-rule="evenodd"
d="M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM8.28033 7.21967C7.98744 6.92678 7.51256 6.92678 7.21967 7.21967C6.92678 7.51256 6.92678 7.98744 7.21967 8.28033L8.93934 10L7.21967 11.7197C6.92678 12.0126 6.92678 12.4874 7.21967 12.7803C7.51256 13.0732 7.98744 13.0732 8.28033 12.7803L10 11.0607L11.7197 12.7803C12.0126 13.0732 12.4874 13.0732 12.7803 12.7803C13.0732 12.4874 13.0732 12.0126 12.7803 11.7197L11.0607 10L12.7803 8.28033C13.0732 7.98744 13.0732 7.51256 12.7803 7.21967C12.4874 6.92678 12.0126 6.92678 11.7197 7.21967L10 8.93934L8.28033 7.21967Z" />
{:else if type === 'question-circle'}
<path
class={fillClass}
fill-rule="evenodd"
clip-rule="evenodd"
d="M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM8.93934 6.93931C8.64645 7.23221 8.17157 7.23221 7.87868 6.93931C7.58579 6.64642 7.58579 6.17155 7.87868 5.87865C9.05025 4.70708 10.9497 4.70708 12.1213 5.87865C13.2929 7.05023 13.2929 8.94972 12.1213 10.1213C11.7288 10.5138 11.2528 10.7756 10.75 10.9051V11.25C10.75 11.6642 10.4142 12 10 12C9.58579 12 9.25 11.6642 9.25 11.25V10.75C9.25 10.0297 9.81995 9.57826 10.3313 9.46322C10.5982 9.40318 10.8516 9.26969 11.0607 9.06063C11.6464 8.47485 11.6464 7.5251 11.0607 6.93931C10.4749 6.35353 9.52513 6.35353 8.93934 6.93931ZM10 15C10.5523 15 11 14.5523 11 14C11 13.4477 10.5523 13 10 13C9.44771 13 9 13.4477 9 14C9 14.5523 9.44771 15 10 15Z" />
{:else if type === 'exclamation-circle'}
<path
class={fillClass}
fill-rule="evenodd"
clip-rule="evenodd"
d="M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM10 5C10.4142 5 10.75 5.33579 10.75 5.75V10.25C10.75 10.6642 10.4142 11 10 11C9.58579 11 9.25 10.6642 9.25 10.25V5.75C9.25 5.33579 9.58579 5 10 5ZM10 15C10.5523 15 11 14.5523 11 14C11 13.4477 10.5523 13 10 13C9.44771 13 9 13.4477 9 14C9 14.5523 9.44771 15 10 15Z" />
{:else if type === 'up-down-circle'}
<path
class={fillClass}
fill-rule="evenodd"
clip-rule="evenodd"
d="M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM7.99322 5.46186C7.70033 5.16896 7.22545 5.16896 6.93256 5.46186L4.92865 7.46576C4.63576 7.75866 4.63576 8.23353 4.92865 8.52642C5.22155 8.81932 5.69642 8.81932 5.98931 8.52642L6.71289 7.80285V12.0039C6.71289 12.4181 7.04868 12.7539 7.46289 12.7539C7.8771 12.7539 8.21289 12.4181 8.21289 12.0039V7.80285L8.93647 8.52642C9.22936 8.81932 9.70423 8.81932 9.99713 8.52642C10.29 8.23353 10.29 7.75866 9.99713 7.46576L7.99322 5.46186ZM12.5371 7.24609C12.1229 7.24609 11.7871 7.58188 11.7871 7.99609V12.1972L11.0635 11.4736C10.7706 11.1807 10.2958 11.1807 10.0029 11.4736C9.70998 11.7665 9.70998 12.2413 10.0029 12.5342L12.0068 14.5381C12.1474 14.6788 12.3382 14.7578 12.5371 14.7578C12.736 14.7578 12.9268 14.6788 13.0674 14.5381L15.0713 12.5342C15.3642 12.2413 15.3642 11.7665 15.0713 11.4736C14.7785 11.1807 14.3036 11.1807 14.0107 11.4736L13.2871 12.1972V7.99609C13.2871 7.58188 12.9513 7.24609 12.5371 7.24609Z" />
{:else if type === 'check-circle'}
<path
class={fillClass}
fill-rule="evenodd"
clip-rule="evenodd"
d="M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM13.8566 8.19113C14.1002 7.85614 14.0261 7.38708 13.6911 7.14345C13.3561 6.89982 12.8871 6.97388 12.6434 7.30887L9.15969 12.099L7.28033 10.2197C6.98744 9.92678 6.51256 9.92678 6.21967 10.2197C5.92678 10.5126 5.92678 10.9874 6.21967 11.2803L8.71967 13.7803C8.87477 13.9354 9.08999 14.0149 9.30867 13.9977C9.52734 13.9805 9.72754 13.8685 9.85655 13.6911L13.8566 8.19113Z" />
{:else if type === 'info-circle'}
<path
class={fillClass}
fill-rule="evenodd"
clip-rule="evenodd"
d="M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM11 6C11 6.55228 10.5523 7 10 7C9.44771 7 9 6.55228 9 6C9 5.44772 9.44771 5 10 5C10.5523 5 11 5.44772 11 6ZM9 9C8.58579 9 8.25 9.33579 8.25 9.75C8.25 10.1642 8.58579 10.5 9 10.5H9.25338C9.41332 10.5 9.53213 10.6481 9.49743 10.8042L9.03829 12.8704C8.79542 13.9633 9.62706 15 10.7466 15H11C11.4142 15 11.75 14.6642 11.75 14.25C11.75 13.8358 11.4142 13.5 11 13.5H10.7466C10.5867 13.5 10.4679 13.3519 10.5026 13.1958L10.9617 11.1296C11.2046 10.0367 10.3729 9 9.25338 9H9Z" />
{/if}
</svg>
2 changes: 1 addition & 1 deletion packages/bridge-ui-v2/src/components/Icon/index.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
export { default as BllIcon } from './BLL.svelte';
export { default as EthIcon } from './ETH.svelte';
export { default as HorseIcon } from './HORSE.svelte';
export { default as Icon } from './Icon.svelte';
export { default as Icon, type IconType } from './Icon.svelte';
export { default as TaikoIcon } from './Taiko.svelte';
2 changes: 2 additions & 0 deletions packages/bridge-ui-v2/tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -172,6 +172,7 @@ export default {
dark: {
'color-scheme': 'dark',
'--btn-text-case': 'capitalize',
// '--rounded-box': '0.625rem', // 10px

'--primary-brand': '#C8047D', // pink-500
'--primary-content': '#F3F3F3', // grey-10
Expand Down Expand Up @@ -238,6 +239,7 @@ export default {

'color-scheme': 'light',
'--btn-text-case': 'capitalize',
'--rounded-box': '0.625rem', // 10px

'--primary-content': '#191E28', // grey-800
'--primary-background': '#FAFAFA', // grey-5
Expand Down

0 comments on commit 82c5e36

Please sign in to comment.