feat(bridge-ui-v2): env vars (#14034)

Co-authored-by: David <david@taiko.xyz>

.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

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=

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",

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>

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;

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',
+    }),
   },
 };
 

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: {

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}'],