Skip to content

Commit

Permalink
feat(bridge-ui-v2): NFT Bridge UI initial setup (#14261)
Browse files Browse the repository at this point in the history
  • Loading branch information
@KorbinianK
KorbinianK authored Jul 25, 2023
1 parent 0da6399 commit d634033
Show file tree
Hide file tree
Showing 33 changed files with 885 additions and 370 deletions.
2 changes: 1 addition & 1 deletion lefthook.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ pre-commit:
run: pnpm -F bridge-ui lint:fix && git add {staged_files}
bridge-ui-v2:
glob: "packages/bridge-ui-v2/**.{js,ts,css,svelte}"
run: pnpm -F bridge-ui-v2 lint:fix && git add {staged_files}
run: pnpm -F bridge-ui-v2 svelte:check && pnpm -F bridge-ui-v2 lint:fix && git add {staged_files}
protocol_sol:
glob: "packages/protocol/**.{sol}"
run: pnpm -F protocol lint:sol && git add {staged_files}
Expand Down
11 changes: 8 additions & 3 deletions packages/bridge-ui-v2/.prettierrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,13 @@
"singleQuote": true,
"trailingComma": "all",
"bracketSameLine": true,

"plugins": ["prettier-plugin-svelte"],
"pluginSearchDirs": ["."],
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
"overrides": [
{
"files": "*.svelte",
"options": {
"parser": "svelte"
}
}
]
}
22 changes: 12 additions & 10 deletions packages/bridge-ui-v2/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,16 @@
"test:unit:watch": "vitest",
"svelte:check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --ignore ./wagmi.config.ts",
"svelte:check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --ignore ./wagmi.config.ts --watch",
"format": "prettier --plugin-search-dir . --write .",
"lint": "prettier --plugin-search-dir . --check . && eslint .",
"format": "prettier --write .",
"lint": "prettier --check . && eslint .",
"lint:fix": "pnpm format && eslint . --fix",
"generate:abi": "pnpm wagmi generate"
},
"devDependencies": {
"@playwright/test": "^1.28.1",
"@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/adapter-auto": "^2.1.0",
"@sveltejs/adapter-static": "^2.0.2",
"@sveltejs/kit": "^1.5.0",
"@sveltejs/kit": "^1.22.3",
"@types/debug": "^4.1.7",
"@typescript-eslint/eslint-plugin": "^5.45.0",
"@typescript-eslint/parser": "^5.45.0",
Expand All @@ -35,17 +35,19 @@
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-simple-import-sort": "^10.0.0",
"eslint-plugin-svelte": "^2.26.0",
"ethereum-address": "^0.0.4",
"postcss": "^8.4.24",
"prettier": "^2.8.0",
"prettier-plugin-svelte": "^2.8.1",
"svelte": "^3.54.0",
"svelte-check": "^3.4.4",
"prettier": "^3.0.0",
"prettier-plugin-svelte": "^3.0.0",
"svelte": "^4.1.0",
"svelte-check": "^3.4.6",
"tailwindcss": "^3.3.2",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"typescript": "^5.1.6",
"vite": "^4.3.0",
"vite-tsconfig-paths": "^4.2.0",
"vitest": "^0.32.2"
"vitest": "^0.32.2",
"vitest-fetch-mock": "^0.2.2"
},
"type": "module",
"dependencies": {
Expand Down
2 changes: 1 addition & 1 deletion packages/bridge-ui-v2/src/app.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
Expand Down
272 changes: 135 additions & 137 deletions packages/bridge-ui-v2/src/components/Activities/ListWithDetailsView.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,150 +25,148 @@
</script>

<div>
<ul class="space-y-[10px]">
<li
class="f-between-center pb-[10px] border-b border-b-divider-border"
on:click={openDetails}
on:keydown={onItemKeydown}>
<div class="space-y-[5px]">
<div class="body-bold f-items-center space-x-[6px] text-white">
<span>Sepolia</span>
<i role="img" aria-label="arrow to">
<Icon type="arrow-right" />
</i>
<span>Taiko</span>
</div>
<div class="text-primary-content">2.5 ETH</div>
<button
class="f-between-center pb-[10px] border-b border-b-divider-border"
on:click={openDetails}
on:keydown={onItemKeydown}>
<div class="space-y-[5px]">
<div class="body-bold f-items-center space-x-[6px] text-white">
<span>Sepolia</span>
<i role="img" aria-label="arrow to">
<Icon type="arrow-right" />
</i>
<span>Taiko</span>
</div>
<div class="f-items-center justify-end space-x-1">
<StatusDot type="pending" />
<span>{$t('activities.status.initiated')}</span>
</div>
</li>

<li
class="f-between-center pb-[10px] border-b border-b-divider-border"
on:click={openDetails}
on:keydown={onItemKeydown}>
<div class="space-y-[5px]">
<div class="body-bold f-items-center space-x-[6px] text-white">
<span>Taiko</span>
<i role="img" aria-label="arrow to">
<Icon type="arrow-right" />
</i>
<span>Sepolia</span>
</div>
<div class="text-primary-content">0.342 ETH</div>
</div>
<div class="f-items-center justify-end space-x-1">
<StatusDot type="pending" />
<span>{$t('activities.status.pending')}</span>
</div>
</li>

<li
class="f-between-center pb-[10px] border-b border-b-divider-border"
on:click={openDetails}
on:keydown={onItemKeydown}>
<div class="space-y-[5px]">
<div class="body-bold f-items-center space-x-[6px] text-white">
<span>Taiko</span>
<i role="img" aria-label="arrow to">
<Icon type="arrow-right" />
</i>
<span>Sepolia</span>
</div>
<div class="text-primary-content">7 HORSE</div>
</div>
<div class="f-items-center justify-end space-x-1">
<button class="status-btn w-full">
{$t('activities.button.claim')}
</button>
</div>
</li>

<li
class="f-between-center pb-[10px] border-b border-b-divider-border"
on:click={openDetails}
on:keydown={onItemKeydown}>
<div class="space-y-[5px]">
<div class="body-bold f-items-center space-x-[6px] text-white">
<span>Taiko</span>
<i role="img" aria-label="arrow to">
<Icon type="arrow-right" />
</i>
<span>Sepolia</span>
</div>
<div class="text-primary-content">3 BLL</div>
</div>
<div class="f-items-center justify-end space-x-1">
<button class="status-btn w-full">
{$t('activities.button.retry')}
</button>
</div>
</li>

<li
class="f-between-center pb-[10px] border-b border-b-divider-border"
on:click={openDetails}
on:keydown={onItemKeydown}>
<div class="space-y-[5px]">
<div class="body-bold f-items-center space-x-[6px] text-white">
<span>Sepolia</span>
<i role="img" aria-label="arrow to">
<Icon type="arrow-right" />
</i>
<span>Taiko</span>
</div>
<div class="text-primary-content">3.204 ETH</div>
<div class="text-primary-content">2.5 ETHHH</div>
</div>
<div class="f-items-center justify-end space-x-1">
<StatusDot type="pending" />
<span>{$t('activities.status.initiated')}</span>
</div>
</button>

<button
class="f-between-center pb-[10px] border-b border-b-divider-border"
on:click={openDetails}
on:keydown={onItemKeydown}>
<div class="space-y-[5px]">
<div class="body-bold f-items-center space-x-[6px] text-white">
<span>Taiko</span>
<i role="img" aria-label="arrow to">
<Icon type="arrow-right" />
</i>
<span>Sepolia</span>
</div>
<div class="f-items-center justify-end space-x-1">
<StatusDot type="success" />
<span>{$t('activities.status.claimed')}</span>
<div class="text-primary-content">0.342 ETH</div>
</div>
<div class="f-items-center justify-end space-x-1">
<StatusDot type="pending" />
<span>{$t('activities.status.pending')}</span>
</div>
</button>

<button
class="f-between-center pb-[10px] border-b border-b-divider-border"
on:click={openDetails}
on:keydown={onItemKeydown}>
<div class="space-y-[5px]">
<div class="body-bold f-items-center space-x-[6px] text-white">
<span>Taiko</span>
<i role="img" aria-label="arrow to">
<Icon type="arrow-right" />
</i>
<span>Sepolia</span>
</div>
</li>

<li
class="f-between-center pb-[10px] border-b border-b-divider-border"
on:click={openDetails}
on:keydown={onItemKeydown}>
<div class="space-y-[5px]">
<div class="body-bold f-items-center space-x-[6px] text-white">
<span>Sepolia</span>
<i role="img" aria-label="arrow to">
<Icon type="arrow-right" />
</i>
<span>Taiko</span>
</div>
<div class="text-primary-content">2.5 BLL</div>
<div class="text-primary-content">7 HORSE</div>
</div>
<div class="f-items-center justify-end space-x-1">
<button class="status-btn w-full">
{$t('activities.button.claim')}
</button>
</div>
</button>

<button
class="f-between-center pb-[10px] border-b border-b-divider-border"
on:click={openDetails}
on:keydown={onItemKeydown}>
<div class="space-y-[5px]">
<div class="body-bold f-items-center space-x-[6px] text-white">
<span>Taiko</span>
<i role="img" aria-label="arrow to">
<Icon type="arrow-right" />
</i>
<span>Sepolia</span>
</div>
<div class="f-items-center justify-end space-x-1">
<StatusDot type="error" />
<span>{$t('activities.status.failed')}</span>
<div class="text-primary-content">3 BLL</div>
</div>
<div class="f-items-center justify-end space-x-1">
<button class="status-btn w-full">
{$t('activities.button.retry')}
</button>
</div>
</button>

<button
class="f-between-center pb-[10px] border-b border-b-divider-border"
on:click={openDetails}
on:keydown={onItemKeydown}>
<div class="space-y-[5px]">
<div class="body-bold f-items-center space-x-[6px] text-white">
<span>Sepolia</span>
<i role="img" aria-label="arrow to">
<Icon type="arrow-right" />
</i>
<span>Taiko</span>
</div>
</li>

<li
class="f-between-center pb-[10px] border-b border-b-divider-border"
on:click={openDetails}
on:keydown={onItemKeydown}>
<div class="space-y-[5px]">
<div class="body-bold f-items-center space-x-[6px] text-white">
<span>Taiko</span>
<i role="img" aria-label="arrow to">
<Icon type="arrow-right" />
</i>
<span>Sepolia</span>
</div>
<div class="text-primary-content">1.203 HORSE</div>
<div class="text-primary-content">3.204 ETH</div>
</div>
<div class="f-items-center justify-end space-x-1">
<StatusDot type="success" />
<span>{$t('activities.status.claimed')}</span>
</div>
</button>

<button
class="f-between-center pb-[10px] border-b border-b-divider-border"
on:click={openDetails}
on:keydown={onItemKeydown}>
<div class="space-y-[5px]">
<div class="body-bold f-items-center space-x-[6px] text-white">
<span>Sepolia</span>
<i role="img" aria-label="arrow to">
<Icon type="arrow-right" />
</i>
<span>Taiko</span>
</div>
<div class="f-items-center justify-end space-x-1">
<button class="status-btn w-full">
{$t('activities.button.release')}
</button>
<div class="text-primary-content">2.5 BLL</div>
</div>
<div class="f-items-center justify-end space-x-1">
<StatusDot type="error" />
<span>{$t('activities.status.failed')}</span>
</div>
</button>

<button
class="f-between-center pb-[10px] border-b border-b-divider-border"
on:click={openDetails}
on:keydown={onItemKeydown}>
<div class="space-y-[5px]">
<div class="body-bold f-items-center space-x-[6px] text-white">
<span>Taiko</span>
<i role="img" aria-label="arrow to">
<Icon type="arrow-right" />
</i>
<span>Sepolia</span>
</div>
</li>
</ul>
<div class="text-primary-content">1.203 HORSE</div>
</div>
<div class="f-items-center justify-end space-x-1">
<button class="status-btn w-full">
{$t('activities.button.release')}
</button>
</div>
</button>

<dialog id={dialogId} class="modal modal-bottom" class:modal-open={detailsOpen}>
<div class="modal-box relative px-6 py-[30px] bg-neutral-background">
Expand Down
Loading

0 comments on commit d634033

Please sign in to comment.