From d634033e6dd3459d30bd248b9d809c4c1b5f910f Mon Sep 17 00:00:00 2001 From: Korbinian Date: Tue, 25 Jul 2023 13:54:55 +0200 Subject: [PATCH] feat(bridge-ui-v2): NFT Bridge UI initial setup (#14261) --- lefthook.yml | 2 +- packages/bridge-ui-v2/.prettierrc | 11 +- packages/bridge-ui-v2/package.json | 22 +- packages/bridge-ui-v2/src/app.html | 2 +- .../Activities/ListWithDetailsView.svelte | 272 ++++++++-------- .../src/components/Bridge/AddressInput.svelte | 71 +++++ .../src/components/Bridge/Bridge.svelte | 26 +- .../src/components/Bridge/BridgeTabs.svelte | 19 ++ .../src/components/Bridge/NFTBridge.svelte | 130 ++++++++ .../src/components/Bridge/NFTIdInput.svelte | 36 +++ .../ChainSelector/ChainSelector.svelte | 3 +- .../src/components/ClickMask/ClickMask.svelte | 5 +- .../ConnectButton/ConnectButton.svelte | 2 +- .../src/components/Header/Header.svelte | 22 +- .../components/LinkButton/LinkButton.svelte | 2 +- .../NotificationToast/ItemToast.svelte | 3 +- .../src/components/OnAccount/OnAccount.svelte | 3 +- .../src/components/OnNetwork/OnNetwork.svelte | 3 +- .../SideNavigation/SideNavigation.svelte | 66 ++-- .../TokenDropdown/DialogView.svelte | 2 +- .../TokenDropdown/DropdownView.svelte | 3 +- packages/bridge-ui-v2/src/i18n/en.json | 75 +++-- .../src/libs/token/detectContractType.ts | 62 ++++ .../src/libs/token/fetch1155Images.ts | 47 +++ .../src/libs/token/fetchErc721Images.ts | 44 +++ packages/bridge-ui-v2/src/libs/token/index.ts | 3 + .../bridge-ui-v2/src/libs/util/Deferred.ts | 3 +- packages/bridge-ui-v2/src/libs/util/noop.ts | 2 + .../bridge-ui-v2/src/routes/nft/+page.svelte | 8 + packages/bridge-ui-v2/src/stores/index.ts | 1 + packages/bridge-ui-v2/src/stores/nfts.ts | 5 + packages/bridge-ui-v2/src/types.d.ts | 4 + pnpm-lock.yaml | 296 ++++++++++-------- 33 files changed, 885 insertions(+), 370 deletions(-) create mode 100644 packages/bridge-ui-v2/src/components/Bridge/AddressInput.svelte create mode 100644 packages/bridge-ui-v2/src/components/Bridge/BridgeTabs.svelte create mode 100644 packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte create mode 100644 packages/bridge-ui-v2/src/components/Bridge/NFTIdInput.svelte create mode 100644 packages/bridge-ui-v2/src/libs/token/detectContractType.ts create mode 100644 packages/bridge-ui-v2/src/libs/token/fetch1155Images.ts create mode 100644 packages/bridge-ui-v2/src/libs/token/fetchErc721Images.ts create mode 100644 packages/bridge-ui-v2/src/libs/util/noop.ts create mode 100644 packages/bridge-ui-v2/src/routes/nft/+page.svelte create mode 100644 packages/bridge-ui-v2/src/stores/nfts.ts create mode 100644 packages/bridge-ui-v2/src/types.d.ts diff --git a/lefthook.yml b/lefthook.yml index f8ec27262a..75ccbde2bd 100644 --- a/lefthook.yml +++ b/lefthook.yml @@ -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} diff --git a/packages/bridge-ui-v2/.prettierrc b/packages/bridge-ui-v2/.prettierrc index aa5a4f5d3d..dcc8f6261b 100644 --- a/packages/bridge-ui-v2/.prettierrc +++ b/packages/bridge-ui-v2/.prettierrc @@ -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" + } + } + ] } diff --git a/packages/bridge-ui-v2/package.json b/packages/bridge-ui-v2/package.json index 3df4a3959c..8d87b15bf0 100644 --- a/packages/bridge-ui-v2/package.json +++ b/packages/bridge-ui-v2/package.json @@ -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", @@ -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": { diff --git a/packages/bridge-ui-v2/src/app.html b/packages/bridge-ui-v2/src/app.html index be167ec1d9..39b9d4df54 100644 --- a/packages/bridge-ui-v2/src/app.html +++ b/packages/bridge-ui-v2/src/app.html @@ -1,4 +1,4 @@ - + diff --git a/packages/bridge-ui-v2/src/components/Activities/ListWithDetailsView.svelte b/packages/bridge-ui-v2/src/components/Activities/ListWithDetailsView.svelte index 021b55d32c..f664644387 100644 --- a/packages/bridge-ui-v2/src/components/Activities/ListWithDetailsView.svelte +++ b/packages/bridge-ui-v2/src/components/Activities/ListWithDetailsView.svelte @@ -25,150 +25,148 @@
-
+ + + + + +
2.5 BLL
+ +
+ + {$t('activities.status.failed')} +
+ + + + +