diff --git a/.github/workflows/bridge-ui-v2.yml b/.github/workflows/bridge-ui-v2.yml
index 1a53c832d6f..0b7da856a1a 100644
--- a/.github/workflows/bridge-ui-v2.yml
+++ b/.github/workflows/bridge-ui-v2.yml
@@ -24,6 +24,13 @@ jobs:
- name: Install pnpm dependencies
uses: ./.github/actions/install-pnpm-dependencies
+ # This step is needed because the .env file is not committed to the repository
+ # and the Svelte check complains about not finding the exports from $env/static/public,
+ # which will be generated based on the .env file when running `svelte-kit sync`
+ - name: Copy .env.example to .env
+ working-directory: ./packages/bridge-ui-v2
+ run: cp .env.example .env
+
- name: Svelte check
working-directory: ./packages/bridge-ui-v2
run: pnpm svelte:check
@@ -37,9 +44,3 @@ jobs:
run: pnpm test:unit
# TODO: Playwright tests?
-
- - name: Upload coverage to Codecov
- uses: codecov/codecov-action@v3
- with:
- directory: ./packages/bridge-ui-v2/coverage
- flags: bridge-ui
diff --git a/packages/bridge-ui-v2/.env.example b/packages/bridge-ui-v2/.env.example
new file mode 100644
index 00000000000..282ca9d172c
--- /dev/null
+++ b/packages/bridge-ui-v2/.env.example
@@ -0,0 +1,66 @@
+# Chain Names
+export export PUBLIC_L1_CHAIN_NAME=""
+export export PUBLIC_L2_CHAIN_NAME=""
+export PUBLIC_L3_CHAIN_NAME=""
+
+
+# Chain Ids
+export PUBLIC_L1_CHAIN_ID=
+export PUBLIC_L2_CHAIN_ID=
+export PUBLIC_L3_CHAIN_ID=
+
+
+# RPC Urls
+export PUBLIC_L1_RPC_URL=https://
+export PUBLIC_L2_RPC_URL=https://
+export PUBLIC_L3_RPC_URL=https://
+
+
+# Explorer Urls
+export PUBLIC_L1_EXPLORER_URL=https://
+export PUBLIC_L2_EXPLORER_URL=https://
+export PUBLIC_L3_EXPLORER_URL=https://
+
+
+# Relayer API
+export PUBLIC_RELAYER_URL=https://
+
+
+# Use the bridge guide Urls
+export PUBLIC_GUIDE_URL=https://
+
+
+# Cross Chain (Taiko) Contract address
+export PUBLIC_L1_CROSS_CHAIN_SYNC_ADDRESS=0x
+export PUBLIC_L2_CROSS_CHAIN_SYNC_ADDRESS=0x
+export PUBLIC_L3_CROSS_CHAIN_SYNC_ADDRESS=0x
+
+
+# Token Vault Contract address
+export PUBLIC_L1_TOKEN_VAULT_ADDRESS=0x
+export PUBLIC_L2_TOKEN_VAULT_ADDRESS=0x
+export PUBLIC_L3_TOKEN_VAULT_ADDRESS=0x
+
+
+# Bridge Contract address
+export PUBLIC_L1_BRIDGE_ADDRESS=0x
+export PUBLIC_L2_BRIDGE_ADDRESS=0x
+export PUBLIC_L3_BRIDGE_ADDRESS=0x
+
+
+# Signal Service Contract address
+export PUBLIC_L1_SIGNAL_SERVICE_ADDRESS=0x
+export PUBLIC_L2_SIGNAL_SERVICE_ADDRESS=0x
+export PUBLIC_L3_SIGNAL_SERVICE_ADDRESS=0x
+
+
+# Test token List
+export PUBLIC_TEST_ERC20=[]
+
+
+# Sentry
+export PUBLIC_SENTRY_DSN=https://
+
+export SENTRY_ORG=
+export SENTRY_PROJECT=
+export SENTRY_AUTH_TOKEN=
diff --git a/packages/bridge-ui-v2/package.json b/packages/bridge-ui-v2/package.json
index b7bd0e1e909..d03290e2c23 100644
--- a/packages/bridge-ui-v2/package.json
+++ b/packages/bridge-ui-v2/package.json
@@ -19,6 +19,7 @@
"devDependencies": {
"@playwright/test": "^1.28.1",
"@sveltejs/adapter-auto": "^2.0.0",
+ "@sveltejs/adapter-static": "^2.0.2",
"@sveltejs/kit": "^1.5.0",
"@typescript-eslint/eslint-plugin": "^5.45.0",
"@typescript-eslint/parser": "^5.45.0",
@@ -37,6 +38,7 @@
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"vite": "^4.3.0",
+ "vite-tsconfig-paths": "^4.2.0",
"vitest": "^0.32.2"
},
"type": "module",
diff --git a/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte b/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte
index b94030f1389..ef59e7520a4 100644
--- a/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte
+++ b/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte
@@ -3,13 +3,11 @@
</script>
<script lang="ts">
+ import { PUBLIC_GUIDE_URL, PUBLIC_L2_EXPLORER_URL } from '$env/static/public';
+
import Icon from '../Icon';
import LinkButton from '../LinkButton';
import { LogoWithText } from '../Logo';
-
- // TODO: env vars
- let explorerUrl = 'https://explorer.internal.taiko.xyz/';
- let guideUrl = 'https://taiko.xyz/docs/guides/use-the-bridge';
</script>
<div class="drawer md:drawer-open">
@@ -46,13 +44,13 @@
</LinkButton>
</li>
<li>
- <LinkButton href={explorerUrl} target="_blank">
+ <LinkButton href={PUBLIC_L2_EXPLORER_URL} target="_blank">
<Icon type="explorer" />
<span>Exploreer</span>
</LinkButton>
</li>
<li>
- <LinkButton href={guideUrl} target="_blank">
+ <LinkButton href={PUBLIC_GUIDE_URL} target="_blank">
<Icon type="guide" />
<span>Guide</span>
</LinkButton>
diff --git a/packages/bridge-ui-v2/src/routes/+layout.ts b/packages/bridge-ui-v2/src/routes/+layout.ts
index 74938a8fec7..aa0759303be 100644
--- a/packages/bridge-ui-v2/src/routes/+layout.ts
+++ b/packages/bridge-ui-v2/src/routes/+layout.ts
@@ -2,6 +2,7 @@
* Entry point
*/
-// Setting this to false turns your app into an SPA
+// When setting this to false your entire app will only be rendered on the client,
+// which essentially means you turn your app into an SPA.
// See https://kit.svelte.dev/docs/page-options#ssr
export const ssr = false;
diff --git a/packages/bridge-ui-v2/svelte.config.js b/packages/bridge-ui-v2/svelte.config.js
index d9776794202..4d177cd46f4 100644
--- a/packages/bridge-ui-v2/svelte.config.js
+++ b/packages/bridge-ui-v2/svelte.config.js
@@ -1,4 +1,4 @@
-import adapter from '@sveltejs/adapter-auto';
+import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/kit/vite';
/** @type {import('@sveltejs/kit').Config} */
@@ -8,10 +8,10 @@ const config = {
preprocess: vitePreprocess(),
kit: {
- // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
- // If your environment is not supported or you settled on a specific environment, switch out the adapter.
- // See https://kit.svelte.dev/docs/adapters for more information about adapters.
- adapter: adapter(),
+ // https://kit.svelte.dev/docs/single-page-apps
+ adapter: adapter({
+ fallback: 'index.html',
+ }),
},
};
diff --git a/packages/bridge-ui-v2/tailwind.config.js b/packages/bridge-ui-v2/tailwind.config.js
index 149aaf731ca..c9c5c38b697 100644
--- a/packages/bridge-ui-v2/tailwind.config.js
+++ b/packages/bridge-ui-v2/tailwind.config.js
@@ -155,7 +155,7 @@ export default {
utils: true, // adds responsive and modifier utility classes
rtl: false, // rotate style direction from left-to-right to right-to-left. You also need to add dir="rtl" to your html tag and install `tailwindcss-flip` plugin for Tailwind CSS.
prefix: '', // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
- logs: true, // Shows info about daisyUI version and used config in the console when building your CSS
+ logs: false, // Shows info about daisyUI version and used config in the console when building your CSS
themes: [
{
dark: {
diff --git a/packages/bridge-ui-v2/vite.config.ts b/packages/bridge-ui-v2/vite.config.ts
index 86857fa0534..83e51c7015b 100644
--- a/packages/bridge-ui-v2/vite.config.ts
+++ b/packages/bridge-ui-v2/vite.config.ts
@@ -1,8 +1,15 @@
import { sveltekit } from '@sveltejs/kit/vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
import { defineConfig } from 'vitest/config';
export default defineConfig({
- plugins: [sveltekit()],
+ plugins: [
+ sveltekit(),
+
+ // This plugin gives vite the ability to resolve imports using TypeScript's path mapping.
+ // https://www.npmjs.com/package/vite-tsconfig-paths
+ tsconfigPaths(),
+ ],
test: {
globals: true,
include: ['src/**/*.{test,spec}.{js,ts}'],
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 89a08b66b09..0a300d9fa0a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -224,6 +224,9 @@ importers:
'@sveltejs/adapter-auto':
specifier: ^2.0.0
version: 2.1.0(@sveltejs/kit@1.20.4)
+ '@sveltejs/adapter-static':
+ specifier: ^2.0.2
+ version: 2.0.2(@sveltejs/kit@1.20.4)
'@sveltejs/kit':
specifier: ^1.5.0
version: 1.20.4(svelte@3.59.1)(vite@4.3.9)
@@ -278,6 +281,9 @@ importers:
vite:
specifier: ^4.3.0
version: 4.3.9
+ vite-tsconfig-paths:
+ specifier: ^4.2.0
+ version: 4.2.0(typescript@5.1.3)(vite@4.3.9)
vitest:
specifier: ^0.32.2
version: 0.32.2
@@ -5036,6 +5042,14 @@ packages:
import-meta-resolve: 3.0.0
dev: true
+ /@sveltejs/adapter-static@2.0.2(@sveltejs/kit@1.20.4):
+ resolution: {integrity: sha512-9wYtf6s6ew7DHUHMrt55YpD1FgV7oWql2IGsW5BXquLxqcY9vjrqCFo0TzzDpo+ZPZkW/v77k0eOP6tsAb8HmQ==}
+ peerDependencies:
+ '@sveltejs/kit': ^1.5.0
+ dependencies:
+ '@sveltejs/kit': 1.20.4(svelte@3.59.1)(vite@4.3.9)
+ dev: true
+
/@sveltejs/kit@1.20.4(svelte@3.59.1)(vite@4.3.9):
resolution: {integrity: sha512-MmAzIuMrP7A+8fqDVbxm6ekGHRHL/+Fk8sQPAzPG4G2TxUDtHdn/WcIxeEqHzARMf0OtGSC+VPyOSFuw2Cy2Mg==}
engines: {node: ^16.14 || >=18}
@@ -14160,7 +14174,6 @@ packages:
/globrex@0.1.2:
resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
- dev: false
/globule@1.3.4:
resolution: {integrity: sha512-OPTIfhMBh7JbBYDpa5b+Q5ptmMWKwcNcFSR/0c6t8V4f3ZAVBEsKNY37QdVqmLRYSMhOUGYrY0QhSoEpzGr/Eg==}
@@ -23275,6 +23288,19 @@ packages:
yn: 3.1.1
dev: true
+ /tsconfck@2.1.1(typescript@5.1.3):
+ resolution: {integrity: sha512-ZPCkJBKASZBmBUNqGHmRhdhM8pJYDdOXp4nRgj/O0JwUwsMq50lCDRQP/M5GBNAA0elPrq4gAeu4dkaVCuKWww==}
+ engines: {node: ^14.13.1 || ^16 || >=18}
+ hasBin: true
+ peerDependencies:
+ typescript: ^4.3.5 || ^5.0.0
+ peerDependenciesMeta:
+ typescript:
+ optional: true
+ dependencies:
+ typescript: 5.1.3
+ dev: true
+
/tsconfig-paths@3.14.1:
resolution: {integrity: sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ==}
dependencies:
@@ -24077,6 +24103,23 @@ packages:
vite: 3.2.4
dev: true
+ /vite-tsconfig-paths@4.2.0(typescript@5.1.3)(vite@4.3.9):
+ resolution: {integrity: sha512-jGpus0eUy5qbbMVGiTxCL1iB9ZGN6Bd37VGLJU39kTDD6ZfULTTb1bcc5IeTWqWJKiWV5YihCaibeASPiGi8kw==}
+ peerDependencies:
+ vite: '*'
+ peerDependenciesMeta:
+ vite:
+ optional: true
+ dependencies:
+ debug: 4.3.4
+ globrex: 0.1.2
+ tsconfck: 2.1.1(typescript@5.1.3)
+ vite: 4.3.9
+ transitivePeerDependencies:
+ - supports-color
+ - typescript
+ dev: true
+
/vite@3.2.4:
resolution: {integrity: sha512-Z2X6SRAffOUYTa+sLy3NQ7nlHFU100xwanq1WDwqaiFiCe+25zdxP1TfCS5ojPV2oDDcXudHIoPnI1Z/66B7Yw==}
engines: {node: ^14.18.0 || >=16.0.0}