Feature/include connect v2 and tbtc bridge (v1) (#1052)

.github/workflows/build.yml

@@ -303,12 +303,78 @@ jobs:
  name: build-token-bridge
  path: connect-loader/apps/connect/dist
 
+ tbtc-bridge-v1:
+ name: "tBTC Bridge v1"
+ runs-on: "ubuntu-latest"
+ concurrency:
+ group: ${{ github.ref }}-${{inputs.name}}-tbtc-bridge-v1
+ cancel-in-progress: true
+ environment: ${{inputs.environment}}
+ outputs:
+ pkg-version: ${{ steps.set-version.outputs._PKG_VERSION }}
+ steps:
+ - name: Set up Node environment
+ uses: actions/setup-node@v3
+ with:
+ node-version: v18.17.1
+ # - name: Checkout Wormhole Connect
+ # uses: actions/checkout@v3
+ # with:
+ # repository: wormhole-foundation/wormhole-connect
+ # ref: ${{inputs.connect-branch}}
+ # path: wormhole-connect
+ # - name: Build Wormhole Connect
+ # id: wormhole-connect
+ # run: |
+ # npm install -g husky
+ # pushd wormhole-connect
+ # npm ci --workspaces --if-present
+ # sed -i -e 's|vite build",|vite build --base=${{inputs.public-url}}/assets/wormhole-connect/",|g' wormhole-connect/package.json
+ # npm run build
+ # echo "_JS_SHA_384=$(shasum -b -a 384 wormhole-connect/dist/main.js | awk '{ print $1 }' | xxd -r -p | base64)" >> "${GITHUB_OUTPUT}"
+ # echo "_CSS_SHA_384=$(shasum -b -a 384 wormhole-connect/dist/main.css | awk '{ print $1 }' | xxd -r -p | base64)" >> "${GITHUB_OUTPUT}"
+ - name: Checkout Custom Wormhole Connect Loader
+ uses: actions/checkout@v3
+ with:
+ ref: ${{ inputs.project-branch }}
+ path: connect-loader
+ - name: Setup Git
+ run: |
+ pushd connect-loader
+ git config user.name "xLabs CI"
+ git config user.email "devops@xlabs.xyz"
+ - name: Set Portal Bridge Version 
+ id: set-version
+ run: |
+ pushd connect-loader/apps/connect-v1
+ echo "_PKG_VERSION=$(node -p -e "require('./package.json').version")-${{inputs.separator}}$(echo ${{ github.sha }} | cut -c -10)" >> "${GITHUB_OUTPUT}"
+ - name: Build Custom Wormhole Connect Loader
+ env:
+ PUBLIC_URL: "${{ inputs.public-url }}"
+ VITE_PUBLIC_URL: ${{ inputs.public-url }}
+ VITE_APP_VERSION: ${{ steps.set-version.outputs._PKG_VERSION }}
+ VITE_APP_CLUSTER: ${{ vars.REACT_APP_CLUSTER }}
+ # VITE_APP_JS_WC_INTEGRITY_SHA_384: ${{ steps.wormhole-connect.outputs._JS_SHA_384 }}
+ # VITE_APP_CSS_WC_INTEGRITY_SHA_384: ${{ steps.wormhole-connect.outputs._CSS_SHA_384 }}
+ VITE_APP_WALLET_CONNECT_PROJECT_ID: ${{ secrets.REACT_APP_WALLET_CONNECT_PROJECT_ID }}
+ run: |
+ pushd connect-loader/apps/connect-v1
+ npm ci
+ echo 'VITE_APP_VERSION=$npm_package_version' > .env
+ npm run build:tbtc-bridge
+ - name: Upload Portal Bridge Artifact
+ uses: actions/upload-artifact@v3
+ with:
+ name: build-tbtc-bridge-v1
+ path: connect-loader/apps/connect-v1/dist
+
  publish:
  name: "Publish"
  needs:
  - advanced-tools
  - usdc-bridge
  - token-bridge
+ - tbtc-bridge-v1
  - rewards-dashboard
  - redirects
  - docs
@@ -324,6 +390,11 @@ jobs:
  uses: actions/download-artifact@v3
  with:
  name: build-token-bridge
+ - name: Download Artifact
+ uses: actions/download-artifact@v3
+ with:
+ name: build-tbtc-bridge-v1
+ path: tbtc-bridge
  - name: Download Artifact
  uses: actions/download-artifact@v3
  with:

apps/connect-v1/.eslintrc.cjs

@@ -0,0 +1,19 @@
+module.exports = {
+ root: true,
+ env: { browser: true, es2020: true },
+ extends: [
+ 'eslint:recommended',
+ 'plugin:@typescript-eslint/recommended',
+ 'plugin:react-hooks/recommended',
+ ],
+ ignorePatterns: ['dist', '.eslintrc.cjs'],
+ parser: '@typescript-eslint/parser',
+ plugins: ['react-refresh'],
+ rules: {
+ '@typescript-eslint/no-explicit-any': 0,
+ 'react-refresh/only-export-components': [
+ 'warn',
+ { allowConstantExport: true },
+ ],
+ },
+ }

apps/connect-v1/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+.idea/
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.vscode
+.env
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# ethereum contracts
+/contracts
+/src/ethers-contracts
+
+.yalc
+yalc.lock
+public/wormhole-connect/
+wormhole-connect/node_modules/
+dist/

apps/connect-v1/.prettierrc.json

@@ -0,0 +1,13 @@
+{
+ "printWidth": 80,
+ "tabWidth": 2,
+ "useTabs": false,
+ "semi": true,
+ "singleQuote": false,
+ "quoteProps": "as-needed",
+ "jsxSingleQuote": false,
+ "trailingComma": "es5",
+ "bracketSpacing": true,
+ "bracketSameLine": false,
+ "arrowParens": "always"
+}

apps/connect-v1/README.md

@@ -0,0 +1,69 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+ parserOptions: {
+ ecmaVersion: 'latest',
+ sourceType: 'module',
+ project: ['./tsconfig.json', './tsconfig.node.json'],
+ tsconfigRootDir: __dirname,
+ },
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+
+
+## Create a new banner
+
+Go to `apps/connect/public/data/banners.json` and add a new item with this format:
+
+```
+[
+ {
+ "id": "string",
+ "background": "red",
+ "content": {
+ "text": "Lorem ipsum",
+ "color": "papayawhip",
+ "size": "30px"
+ },
+ "button": {
+ "label": "Click here!",
+ "background": "red",
+ "href": "https://portalbridge.com"
+ },
+ "since": "2023-12-22T01:06:52.211Z",
+ "until": "2023-12-25T01:06:52.211Z"
+ },
+ {
+ "id": "string",
+ "background": "yellow",
+ "content": {
+ "text": "Lorem ipsum",
+ "color": "white",
+ "size": "15px"
+ },
+ "button": {
+ "label": "Click here!",
+ "background": "green",
+ "href": "https://portalbridge.com"
+ },
+ "since": "2023-12-22T01:06:52.211Z",
+ "until": "2023-12-25T01:06:52.211Z"
+ }
+]
+```

apps/connect-v1/index.html

@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <link rel="icon" href="favicon.ico" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <meta name="theme-color" content="#000000" />
+ <meta property="og:type" content="website" />
+ <meta property="og:image" content="wormhole.png" />
+ <meta property="og:image:alt" content="Wormhole logo" />
+ <meta name="twitter:site" content="@portalbridge_" />
+ <meta name="twitter:creator" content="@portalbridge_" />
+ <meta name="twitter:card" content="summary_large_image" />
+ <link rel="apple-touch-icon" href="logo192.png" />
+ <link rel="manifest" href="manifest.json" />
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+ <link
+ href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap"
+ rel="stylesheet"
+ />
+ </head>
+ <body>
+ <div id="root"></div>
+ <script type="module" src="/src/main.tsx"></script>
+ </body>
+</html>

apps/connect-v1/jest.config.ts

@@ -0,0 +1,36 @@
+import type { Config } from "jest";
+
+export default {
+ coverageProvider: "v8",
+ verbose: true,
+ moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node", "html"],
+ testMatch: ["<rootDir>/src/**/*.test.ts", "<rootDir>/src/**/*.test.tsx"],
+ maxWorkers: "50%",
+ setupFilesAfterEnv: ["<rootDir>/jest.setup.tsx"],
+ testEnvironment: "jsdom",
+ transform: {
+ "^.+\\.(t|j)sx?$": "@swc/jest",
+ },
+ moduleNameMapper: {
+ "@env": "<rootDir>/src/env/index.ts",
+ uuid: require.resolve("uuid"),
+ },
+ collectCoverageFrom: [
+ "<rootDir>/src/**/*.{ts,tsx,js,jsx}",
+ "!<rootDir>/src/**/*.d.ts",
+ "!<rootDir>/src/main.tsx",
+ "!<rootDir>/src/utils/constants.ts",
+ "!<rootDir>/src/utils/styles.ts",
+ "!<rootDir>/src/env/**/*.*",
+ "!<rootDir>/src/theme/**/*.*",
+ ],
+ coverageThreshold: {
+ global: {
+ // statements: 100,
+ // branches: 100,
+ // functions: 100,
+ // lines: 100
+ },
+ },
+ coverageReporters: ["lcov", "text", "text-summary"],
+} as Config;

apps/connect-v1/jest.setup.tsx

@@ -0,0 +1,12 @@
+import "@testing-library/jest-dom";
+import { TextEncoder, TextDecoder } from "util";
+import React from "react";
+
+window.React = global.React = React;
+
+Object.assign(global, {
+ TextDecoder,
+ TextEncoder,
+});
+
+jest.mock("./src/env/env-vars.ts", () => ({ envVars: process.env }));