diff --git a/.github/workflows/build-non-prod.yml b/.github/workflows/build-non-prod.yml deleted file mode 100644 index 764eb4bfd..000000000 --- a/.github/workflows/build-non-prod.yml +++ /dev/null @@ -1,328 +0,0 @@ -name: Build Non Prod - -on: - workflow_call: - inputs: - name: - type: string - required: true - separator: - type: string - required: true - connect-branch: - type: string - required: true - default: development - advanced-tools-branch: - type: string - required: true - default: main - environment: - type: string - required: true - default: Cloudflare-Preview - outputs: - branch-sha: - description: "Branch SHA" - value: ${{ jobs.branch-sha.outputs.value }} - pkg-version: - description: "NPM Package Version" - value: ${{ jobs.token-bridge.outputs.pkg-version }} -jobs: - branch-sha: - name: Compute Branch Sha - runs-on: ubuntu-latest - concurrency: - group: ${{ github.ref }}-${{inputs.name}}-sha - outputs: - value: ${{ steps.set-version.outputs._BRANCH_NAME_SHA }} - steps: - - name: Set Version - id: set-version - run: echo "_BRANCH_NAME_SHA=$(echo ${{ github.event.pull_request.head.ref }} | sha256sum | cut -c -10)" >> "${GITHUB_OUTPUT}" - - docs: - name: "Documentation" - runs-on: "ubuntu-latest" - concurrency: - group: ${{ github.ref }}-${{inputs.name}}-docs - needs: - - branch-sha - steps: - - name: Checkout repository - uses: actions/checkout@v3 - - name: Set up Node environment - uses: actions/setup-node@v3 - with: - node-version: v16.19.1 - - name: Install dependencies - run: | - pushd apps/docs - npm ci - - name: Build - env: - PUBLIC_URL: "/${{ needs.branch-sha.outputs.value }}/docs" - run: | - pushd apps/docs - npm run build - - name: Upload Artifact - uses: actions/upload-artifact@v3 - with: - name: build-docs - path: apps/docs/build - - advanced-tools: - name: "Advance Tools" - runs-on: xlabs-large-runner - concurrency: - group: ${{ github.ref }}-${{inputs.name}}-advanced-tools - cancel-in-progress: true - environment: ${{inputs.environment}} - needs: - - branch-sha - steps: - - name: Checkout repository - uses: actions/checkout@v3 - with: - repository: xLabs/portal-bridge-ui - # TODO replace with the advance tools branch after cutover - ref: ${{inputs.advanced-tools-branch}} - - name: Set up Node environment - uses: actions/setup-node@v3 - with: - node-version: v18.17.1 - - name: Setup Git - run: | - git config user.name "xLabs CI" - git config user.email "devops@xlabs.xyz" - - name: Install dependencies - run: npm ci - - name: Set Version - id: set-version - run: npm version $(node -p -e "require('./package.json').version")-${{inputs.separator}}$(echo ${{ github.sha }} | cut -c -10) - - name: Build - env: - PUBLIC_URL: "/${{ needs.branch-sha.outputs.value }}/advanced-tools" - NODE_OPTIONS: "--max-old-space-size=10240" - GENERATE_SOURCEMAP: false - REACT_APP_BASE_URL: "/${{ needs.branch-sha.outputs.value }}" - REACT_APP_CLUSTER: ${{ vars.REACT_APP_CLUSTER }} - REACT_APP_SOLANA_API_URL: ${{ vars.REACT_APP_SOLANA_API_URL }} - REACT_APP_COVALENT_API_KEY: ${{ secrets.REACT_APP_COVALENT_API_KEY }} - REACT_APP_WALLET_CONNECT_PROJECT_ID: ${{ secrets.REACT_APP_WALLET_CONNECT_PROJECT_ID }} - run: | - echo 'REACT_APP_VERSION=$npm_package_version' > .env - npm run build - cd build - npm run set-version - - name: Upload Artifact - uses: actions/upload-artifact@v3 - with: - name: build-advanced-tools - path: build - - redirects: - name: "Redirects" - runs-on: "ubuntu-latest" - concurrency: - group: ${{ github.ref }}-${{inputs.name}}-redirects - cancel-in-progress: true - needs: - - branch-sha - steps: - - name: Set up Node environment - uses: actions/setup-node@v3 - with: - node-version: v18.17.1 - - name: Checkout Portal Bridge - uses: actions/checkout@v3 - - name: Build Redirects - env: - PUBLIC_URL: "/${{ needs.branch-sha.outputs.value }}" - run: | - pushd apps/redirects - npm ci - npm run build - - name: Upload Portal Bridge Artifact - uses: actions/upload-artifact@v3 - with: - name: build-redirects - path: apps/redirects/dist - - usdc-bridge: - name: "USDC Bridge" - runs-on: "ubuntu-latest" - concurrency: - group: ${{ github.ref }}-${{inputs.name}}-usdc-bridge - cancel-in-progress: true - environment: ${{inputs.environment}} - needs: - - branch-sha - 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 - run: | - npm install -g husky - pushd wormhole-connect - npm ci --workspaces --if-present - npm run build - npm link --workspaces --if-present - - name: Checkout Custom Wormhole Connect Loader - uses: actions/checkout@v3 - with: - 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 - npm version $(node -p -e "require('./package.json').version")-${{inputs.separator}}$(echo ${{ github.sha }} | cut -c -10) - echo "_PKG_VERSION=$(node -p -e "require('./package.json').version")" >> "${GITHUB_OUTPUT}" - - name: Build Custom Wormhole Connect Loader - env: - PUBLIC_URL: "/${{ needs.branch-sha.outputs.value }}" - VITE_APP_VERSION: ${{ steps.set-version.outputs._PKG_VERSION }} - VITE_APP_CLUSTER: ${{ vars.REACT_APP_CLUSTER }} - run: | - pushd connect-loader/apps/connect - npm ci - npm link @wormhole-foundation/wormhole-connect - echo 'VITE_APP_VERSION=$npm_package_version' > .env - npm run build:usdc-bridge - - name: Upload Portal Bridge Artifact - uses: actions/upload-artifact@v3 - with: - name: build-usdc-bridge - path: connect-loader/apps/connect/dist - - token-bridge: - name: "Token Bridge" - runs-on: "ubuntu-latest" - concurrency: - group: ${{ github.ref }}-${{inputs.name}}-token-bridge - cancel-in-progress: true - environment: ${{inputs.environment}} - needs: - - branch-sha - 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 - run: | - npm install -g husky - pushd wormhole-connect - npm ci --workspaces --if-present - npm run build - npm link --workspaces --if-present - - name: Checkout Custom Wormhole Connect Loader - uses: actions/checkout@v3 - with: - 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 - 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: "/${{ needs.branch-sha.outputs.value }}" - VITE_APP_VERSION: ${{ steps.set-version.outputs._PKG_VERSION }} - VITE_APP_CLUSTER: ${{ vars.REACT_APP_CLUSTER }} - run: | - pushd connect-loader/apps/connect - npm ci - npm link @wormhole-foundation/wormhole-connect - echo 'VITE_APP_VERSION=$npm_package_version' > .env - npm run build:token-bridge - - name: Upload Portal Bridge Artifact - uses: actions/upload-artifact@v3 - with: - name: build-token-bridge - path: connect-loader/apps/connect/dist - - publish: - name: "Publish" - needs: - - advanced-tools - - usdc-bridge - - token-bridge - - redirects - - docs - runs-on: "ubuntu-latest" - concurrency: - group: ${{ github.ref }}-${{inputs.name}}-publish - cancel-in-progress: true - permissions: - contents: read - packages: write - steps: - - name: Download Artifact - uses: actions/download-artifact@v3 - with: - name: build-token-bridge - - name: Download Artifact - uses: actions/download-artifact@v3 - with: - name: build-usdc-bridge - path: usdc-bridge - - name: Download Artifact - uses: actions/download-artifact@v3 - with: - name: build-advanced-tools - path: advanced-tools - - name: Download Artifact - uses: actions/download-artifact@v3 - with: - name: build-docs - path: docs - - name: Download Artifact - uses: actions/download-artifact@v3 - with: - name: build-redirects - - name: Set up GitHub NPM registry - uses: actions/setup-node@v3 - with: - node-version: v16.19.1 - registry-url: https://npm.pkg.github.com - - name: Create Package.json - run: | - jq -n --arg version ${{ needs.token-bridge.outputs.pkg-version }} '{"name": "@xlabs/portal-bridge-ui", "version": $version }' > package.json - - name: Upload Portal Bridge Artifact - uses: actions/upload-artifact@v3 - with: - name: build-all - path: . - - name: Publish - env: - NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }} - run: npm publish \ No newline at end of file diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml new file mode 100644 index 000000000..c92ea2ea4 --- /dev/null +++ b/.github/workflows/checks.yml @@ -0,0 +1,35 @@ +name: Code Standards Checks + +on: pull_request + +jobs: + linter: + runs-on: "ubuntu-latest" + steps: + - name: Set up Node environment + uses: actions/setup-node@v3 + with: + node-version: v18.17.1 + - name: Checkout repository + uses: actions/checkout@v3 + - name: Install dependencies + working-directory: ./apps/connect + run: npm ci + - name: Run prettier + working-directory: ./apps/connect + run: npm run lint + prettier: + runs-on: "ubuntu-latest" + steps: + - name: Set up Node environment + uses: actions/setup-node@v3 + with: + node-version: v18.17.1 + - name: Checkout repository + uses: actions/checkout@v3 + - name: Install dependencies + working-directory: ./apps/connect + run: npm ci + - name: Run prettier + working-directory: ./apps/connect + run: npm run prettier diff --git a/.github/workflows/connect.yml b/.github/workflows/connect.yml deleted file mode 100644 index a818a1730..000000000 --- a/.github/workflows/connect.yml +++ /dev/null @@ -1,248 +0,0 @@ -name: Portal Bridge [Manual] - -on: - workflow_dispatch: - inputs: - connect-branch: - description: 'connect branch bame' - required: true - default: 'portal-bridge' - portal-branch: - description: 'portal branch bame' - required: true - default: 'advance' - network: - type: choice - description: 'cluster branch bame' - required: true - default: 'testnet' - options: - - testnet - - mainnet - -jobs: - branch-sha: - name: Compute Branch Sha - runs-on: ubuntu-latest - outputs: - value: ${{ steps.set-version.outputs._BRANCH_NAME_SHA }} - steps: - - name: Set Version - id: set-version - run: echo "_BRANCH_NAME_SHA=$(echo ${{ inputs.connect-branch }}_${{ inputs.portal-branch }} | sha256sum | cut -c -10)" >> "${GITHUB_OUTPUT}" - - docs: - name: "Build Portal Bridge Documentation" - runs-on: "ubuntu-latest" - concurrency: - group: ${{ github.ref }}-portal-docs-preview - needs: - - branch-sha - steps: - - name: Checkout repository - uses: actions/checkout@v3 - - name: Set up Node environment - uses: actions/setup-node@v3 - with: - node-version: v16.19.1 - - name: Install dependencies - run: | - pushd apps/docs - npm ci - - name: Build - env: - PUBLIC_URL: "/${{ needs.branch-sha.outputs.value }}/docs" - run: | - pushd apps/docs - npm run build - - name: Upload Artifact - uses: actions/upload-artifact@v3 - with: - name: preview-docs-build - path: apps/docs/build - - portal: - name: "Build Portal Bridge [Advance]" - runs-on: xlabs-large-runner - concurrency: - group: ${{ github.ref }}-portal-preview - cancel-in-progress: true - environment: Cloudflare-Preview - needs: - - branch-sha - steps: - - name: Checkout repository - uses: actions/checkout@v3 - with: - repository: xlabs/portal-bridge-ui - ref: ${{ inputs.portal-branch }} - - name: Set up Node environment - uses: actions/setup-node@v3 - with: - node-version: v18.17.1 - - name: Setup Git - run: | - git config user.name "xLabs CI" - git config user.email "devops@xlabs.xyz" - - name: Install dependencies - run: npm install - - name: Set Version - id: set-version - run: npm version $(node -p -e "require('./package.json').version")-P$(echo ${{ github.sha }} | cut -c -10) - - name: Build - env: - PUBLIC_URL: "/${{ needs.branch-sha.outputs.value }}/advance" - NODE_OPTIONS: "--max-old-space-size=10240" - REACT_APP_CLUSTER: ${{ inputs.network }} - REACT_APP_SOLANA_API_URL: ${{ vars.REACT_APP_SOLANA_API_URL }} - REACT_APP_COVALENT_API_KEY: ${{ secrets.REACT_APP_COVALENT_API_KEY }} - REACT_APP_WALLET_CONNECT_PROJECT_ID: ${{ secrets.REACT_APP_WALLET_CONNECT_PROJECT_ID }} - run: | - pushd public - npm run set-version - popd - echo 'REACT_APP_VERSION=$npm_package_version' > .env - npm run build - - name: Upload Artifact - uses: actions/upload-artifact@v3 - with: - name: preview-advance-build - path: build - - connect: - name: "Build Portal Bridge [Connect]" - runs-on: "ubuntu-latest" - concurrency: - group: ${{ github.ref }}-connect-preview - cancel-in-progress: true - environment: Cloudflare-Preview - needs: - - branch-sha - 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: Checkout Portal Bridge - uses: actions/checkout@v3 - with: - path: portal - - name: Setup Git - run: | - pushd portal - git config user.name "xLabs CI" - git config user.email "devops@xlabs.xyz" - - name: Set Portal Bridge Version - id: set-version - run: | - pushd portal/apps/connect - npm version $(node -p -e "require('./package.json').version")-P$(echo ${{ github.sha }} | cut -c -10) - echo "_PKG_VERSION=$(node -p -e "require('./package.json').version")" >> "${GITHUB_OUTPUT}" - - name: Build Portal Bridge - env: - PUBLIC_URL: "/${{ needs.branch-sha.outputs.value }}" - VITE_APP_VERSION: ${{ steps.set-version.outputs._PKG_VERSION }} - VITE_APP_CLUSTER: ${{ inputs.network }} - VITE_APP_ADVANCE_PATH: "/${{ needs.branch-sha.outputs.value }}/advance" - run: | - npm install -g husky - pushd wormhole-connect - npm ci --workspaces --if-present - npm run build - npm link --workspaces --if-present - popd - pushd portal/apps/connect - npm ci - npm link @wormhole-foundation/wormhole-connect - pushd public - npm run set-version - popd - echo 'VITE_APP_VERSION=$npm_package_version' > .env - npm run build - - name: Upload Portal Bridge Artifact - uses: actions/upload-artifact@v3 - with: - name: preview-connect-build - path: portal/apps/connect/dist - - publish: - name: "Publish" - needs: - - portal - - connect - - docs - runs-on: "ubuntu-latest" - concurrency: - group: ${{ github.ref }}-publish-preview - cancel-in-progress: true - permissions: - contents: read - packages: write - steps: - - name: Download Artifact - uses: actions/download-artifact@v3 - with: - name: preview-connect-build - - name: Download Artifact - uses: actions/download-artifact@v3 - with: - name: preview-advance-build - path: advance - - name: Download Artifact - uses: actions/download-artifact@v3 - with: - name: preview-docs-build - path: docs - - name: Set up GitHub NPM registry - uses: actions/setup-node@v3 - with: - node-version: v16.19.1 - registry-url: https://npm.pkg.github.com - - name: Publish - env: - NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }} - run: npm publish - - deploy: - name: "Deploy Preview" - needs: - - publish - - branch-sha - - connect - runs-on: "ubuntu-latest" - concurrency: - group: ${{ github.ref }}-deploy-preview - cancel-in-progress: true - permissions: - contents: write - environment: Cloudflare-Preview - steps: - - name: Checkout preview branch - uses: actions/checkout@v3 - with: - ref: preview - - name: Setup Git - run: | - git config user.name "xLabs CI" - git config user.email "devops@xlabs.xyz" - - name: Trigger a preview Deploy - run: | - sleep 30s - mkdir -p preview/${{ needs.branch-sha.outputs.value }} - pushd preview/${{ needs.branch-sha.outputs.value }} - [[ ! -f .latest ]] && touch .latest - [[ ! -f .artifacts ]] && touch .artifacts - cat .latest >> .artifacts - echo ${{ needs.connect.outputs.pkg-version }} > .latest - git add .artifacts .latest - git commit -m"Update preview artifacts ${{ needs.connect.outputs.pkg-version }}" - git push - echo "The preview URL is: ${{ vars.PREVIEW_ROOT_URL }}/${{ needs.branch-sha.outputs.value }}/" >> ${GITHUB_STEP_SUMMARY} diff --git a/.github/workflows/prettier.yml b/.github/workflows/prettier.yml deleted file mode 100644 index ca3d784b7..000000000 --- a/.github/workflows/prettier.yml +++ /dev/null @@ -1,12 +0,0 @@ -name: Prettier Check - -on: pull_request - -jobs: - prettier: - runs-on: "ubuntu-latest" - steps: - - name: Checkout repository - uses: actions/checkout@v3 - - name: Run prettier - run: npx prettier@3.0.2 --check ./src diff --git a/apps/connect/.eslintrc.cjs b/apps/connect/.eslintrc.cjs new file mode 100644 index 000000000..fb155b935 --- /dev/null +++ b/apps/connect/.eslintrc.cjs @@ -0,0 +1,18 @@ +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: { + 'react-refresh/only-export-components': [ + 'warn', + { allowConstantExport: true }, + ], + }, + } \ No newline at end of file diff --git a/apps/connect/package-lock.json b/apps/connect/package-lock.json index 91c95e8ae..685ca1496 100644 --- a/apps/connect/package-lock.json +++ b/apps/connect/package-lock.json @@ -27,6 +27,7 @@ "eslint": "^8.45.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.3", + "prettier": "^3.1.0", "typescript": "^5.0.2", "vite": "^4.4.5" } @@ -2254,6 +2255,21 @@ "node": ">= 0.8.0" } }, + "node_modules/prettier": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.1.0.tgz", + "integrity": "sha512-TQLvXjq5IAibjh8EpBIkNKxO749UEWABoiIZehEPiY4GNpVdhaFKqSTu+QrlU6D2dPAfubRmtJTi4K4YkQ5eXw==", + "dev": true, + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/prop-types": { "version": "15.8.1", "license": "MIT", diff --git a/apps/connect/package.json b/apps/connect/package.json index 395d8e176..e694a032f 100644 --- a/apps/connect/package.json +++ b/apps/connect/package.json @@ -11,6 +11,7 @@ "dev": "vite", "build": "tsc && vite build", "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", + "prettier": "prettier --check ./src", "postinstall": "npm link @wormhole-foundation/wormhole-connect", "preview": "vite preview" }, @@ -33,6 +34,7 @@ "eslint": "^8.45.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.3", + "prettier": "^3.1.0", "typescript": "^5.0.2", "vite": "^4.4.5" } diff --git a/apps/connect/src/App.tsx b/apps/connect/src/App.tsx index 1279082da..efafdf1f4 100644 --- a/apps/connect/src/App.tsx +++ b/apps/connect/src/App.tsx @@ -1,4 +1,7 @@ -import type { ChainName, WormholeConnectConfig } from "@wormhole-foundation/wormhole-connect"; +import type { + ChainName, + WormholeConnectConfig, +} from "@wormhole-foundation/wormhole-connect"; import { useMemo } from "react"; import customTheme from "./theme/connect"; import mui from "./theme/portal"; @@ -34,8 +37,8 @@ export default function Root() { }, }), bridgeDefaults: { - fromNetwork: sourceChain as ChainName || null, - toNetwork: targetChain as ChainName || null, + fromNetwork: (sourceChain as ChainName) || null, + toNetwork: (targetChain as ChainName) || null, }, }), [txHash, transactionId, sourceChain, targetChain] diff --git a/apps/connect/src/components/ConnectLoader.tsx b/apps/connect/src/components/ConnectLoader.tsx index 752dd516c..c1784c582 100644 --- a/apps/connect/src/components/ConnectLoader.tsx +++ b/apps/connect/src/components/ConnectLoader.tsx @@ -6,7 +6,6 @@ import CircularProgress from "@mui/material/CircularProgress"; import Box from "@mui/material/Box"; export type WormholeLoaderProps = { - // eslint-disable-next-line @typescript-eslint/no-explicit-any config: WormholeConnectConfig; }; diff --git a/apps/connect/src/components/atoms/Background.tsx b/apps/connect/src/components/atoms/Background.tsx index e7e88bfae..924f3e5ce 100644 --- a/apps/connect/src/components/atoms/Background.tsx +++ b/apps/connect/src/components/atoms/Background.tsx @@ -10,74 +10,69 @@ const Container = styled("div")(() => ({ justifyContent: "space-between", minHeight: "100vh", position: "relative", - overflow: "hidden" + overflow: "hidden", })); const ContainerFooter = styled("div")(() => ({ display: "column", flexDirection: "row", - alignItems: "flex-end" + alignItems: "flex-end", })); -export default function Background({ - children, -}: { - children: JSX.Element[]; -}) { +export default function Background({ children }: { children: JSX.Element[] }) { return ( {children} - - - - - - - - - + + + + + + + + + + - - - - + + ); } diff --git a/apps/connect/src/components/atoms/BuiltBy.tsx b/apps/connect/src/components/atoms/BuiltBy.tsx index dcfd92b3a..878c88722 100644 --- a/apps/connect/src/components/atoms/BuiltBy.tsx +++ b/apps/connect/src/components/atoms/BuiltBy.tsx @@ -1,6 +1,5 @@ -import Footer from "./Footer" +import Footer from "./Footer"; export default function BuiltBy() { - return + return ; } - \ No newline at end of file diff --git a/apps/connect/src/components/atoms/Footer.tsx b/apps/connect/src/components/atoms/Footer.tsx index 5d4e8f269..65d58d829 100644 --- a/apps/connect/src/components/atoms/Footer.tsx +++ b/apps/connect/src/components/atoms/Footer.tsx @@ -18,7 +18,7 @@ const Footer = styled(Typography)(({ theme, left, right }) => ({ position: "absolute", left, right, - bottom: "28px", + bottom: "28px", }, color: "#C9CAE8", fontFamily: "Poppins", diff --git a/apps/connect/src/components/atoms/NewsBar.tsx b/apps/connect/src/components/atoms/NewsBar.tsx index 8b99f8e3b..57182b336 100644 --- a/apps/connect/src/components/atoms/NewsBar.tsx +++ b/apps/connect/src/components/atoms/NewsBar.tsx @@ -1,9 +1,11 @@ import NewBarButton from "./NewsBarButton"; -import useBannerMessageConfig, { type Message } from "../../hooks/useBannerMessage"; +import useBannerMessageConfig, { + type Message, +} from "../../hooks/useBannerMessage"; import Bar from "./Bar"; export type NewsBarProps = { - messages: Message[] + messages: Message[]; }; export default function NewsBar({ messages }: NewsBarProps) { diff --git a/apps/connect/src/env.d.ts b/apps/connect/src/env.d.ts index 3bcf5aa70..bd6b2eaaa 100644 --- a/apps/connect/src/env.d.ts +++ b/apps/connect/src/env.d.ts @@ -1,11 +1,11 @@ /// interface ImportMetaEnv { - readonly VITE_APP_VERSION: string - readonly VITE_APP_CLUSTER: 'testnet' | 'mainnet' - // more env variables... + readonly VITE_APP_VERSION: string; + readonly VITE_APP_CLUSTER: "testnet" | "mainnet"; + // more env variables... } interface ImportMeta { - readonly env: ImportMetaEnv -} \ No newline at end of file + readonly env: ImportMetaEnv; +} diff --git a/apps/connect/src/hooks/useQueryParams.ts b/apps/connect/src/hooks/useQueryParams.ts index 3dd7e062a..472e3bac5 100644 --- a/apps/connect/src/hooks/useQueryParams.ts +++ b/apps/connect/src/hooks/useQueryParams.ts @@ -1,15 +1,15 @@ import { useMemo } from "react"; export function useQueryParams() { - const query = new URLSearchParams(window.location.search); - const txHash = useMemo(() => query.get("txHash"), [query]); - const transactionId = useMemo(() => query.get("transactionId"), []); - const sourceChain = useMemo(() => query.get("sourceChain"), []); - const targetChain = useMemo(() => query.get("targetChain"), []); - return { - txHash, - transactionId, - sourceChain, - targetChain - } -}; \ No newline at end of file + const query = useMemo(() => new URLSearchParams(window.location.search), []); + const txHash = useMemo(() => query.get("txHash"), [query]); + const transactionId = useMemo(() => query.get("transactionId"), [query]); + const sourceChain = useMemo(() => query.get("sourceChain"), [query]); + const targetChain = useMemo(() => query.get("targetChain"), [query]); + return { + txHash, + transactionId, + sourceChain, + targetChain, + }; +} diff --git a/apps/connect/src/theme/connect.ts b/apps/connect/src/theme/connect.ts index 0b512cf56..bbf24b0f0 100644 --- a/apps/connect/src/theme/connect.ts +++ b/apps/connect/src/theme/connect.ts @@ -1,139 +1,139 @@ import type { Theme } from "@wormhole-foundation/wormhole-connect"; const customized: Theme = { - primary: { - 50: "#fafafa", - 100: "#f5f5f5", - 200: "#eeeeee", - 300: "#e0e0e0", - 400: "#bdbdbd", - 500: "#9e9e9e", - 600: "#757575", - 700: "#616161", - 800: "#424242", - 900: "#212121", - A100: "#f5f5f5", - A200: "#eeeeee", - A400: "#bdbdbd", - A700: "#616161" - }, - secondary: { - 50: "#fafafa", - 100: "#f5f5f5", - 200: "#eeeeee", - 300: "#e0e0e0", - 400: "#bdbdbd", - 500: "#9e9e9e", - 600: "#757575", - 700: "#616161", - 800: "#424242", - 900: "#212121", - A100: "#f5f5f5", - A200: "#eeeeee", - A400: "#bdbdbd", - A700: "#616161" - }, - divider: "#ffffff33", - background: { - default: "rgba(12, 9, 60, 0)" - }, - text: { - primary: "rgba(255, 255, 255, 0.9)", - secondary: "rgba(156, 157, 191, 1)" - }, - error: { - 50: "#ffebee", - 100: "#ffcdd2", - 200: "#ef9a9a", - 300: "#e57373", - 400: "#ef5350", - 500: "#f44336", - 600: "#e53935", - 700: "#d32f2f", - 800: "#c62828", - 900: "#b71c1c", - A100: "#ff8a80", - A200: "#ff5252", - A400: "#ff1744", - A700: "#d50000" - }, - info: { - 50: "#97a5b7", - 100: "#8293a9", - 200: "#6e819a", - 300: "#596f8c", - 400: "#445d7e", - 500: "#304C70", - 600: "#2b4464", - 700: "#263c59", - 800: "#21354e", - 900: "#1c2d43", - A100: "#304C70", - A200: "#304C70", - A400: "#304C70", - A700: "#304C70" - }, - success: { - 50: "#66d6cd", - 100: "#4dcfc4", - 200: "#33c8bc", - 300: "#1ac1b4", - 400: "#01BBAC", - 500: "#00a89a", - 600: "#009589", - 700: "#008278", - 800: "#007067", - 900: "#005d56", - A100: "#00a89a", - A200: "#00a89a", - A400: "#00a89a", - A700: "#00a89a" - }, - warning: { - 50: "#ffe3a4", - 100: "#ffdd91", - 200: "#ffd77f", - 300: "#ffd26d", - 400: "#ffcc5b", - 500: "#FFC749", - 600: "#e5b341", - 700: "#cc9f3a", - 800: "#b28b33", - 900: "#99772b", - A100: "#FFC749", - A200: "#FFC749", - A400: "#FFC749", - A700: "#FFC749" - }, - button: { - primary: "rgba(49, 50, 102, 1)", - primaryText: "#ffffff", - disabled: "#ffffff0F", - disabledText: "#ffffff66", - action: "#e47829", - actionText: "#ffffff", - hover: "#ffffff0F" - }, - options: { - hover: "#ffffff0F", - select: "#ffffff19" - }, - card: { - background: "rgba(31, 32, 69, 1)", - secondary: "#ffffff0C", - elevation: "none" - }, - popover: { - background: "#1b2033", - secondary: "#ffffff0C", - elevation: "none" - }, - modal: { - background: "rgba(15, 9, 44, 1)" - }, - font: { - primary: "\"Poppins\", regular", - header: "\"Poppins\", bold", - } + primary: { + 50: "#fafafa", + 100: "#f5f5f5", + 200: "#eeeeee", + 300: "#e0e0e0", + 400: "#bdbdbd", + 500: "#9e9e9e", + 600: "#757575", + 700: "#616161", + 800: "#424242", + 900: "#212121", + A100: "#f5f5f5", + A200: "#eeeeee", + A400: "#bdbdbd", + A700: "#616161", + }, + secondary: { + 50: "#fafafa", + 100: "#f5f5f5", + 200: "#eeeeee", + 300: "#e0e0e0", + 400: "#bdbdbd", + 500: "#9e9e9e", + 600: "#757575", + 700: "#616161", + 800: "#424242", + 900: "#212121", + A100: "#f5f5f5", + A200: "#eeeeee", + A400: "#bdbdbd", + A700: "#616161", + }, + divider: "#ffffff33", + background: { + default: "rgba(12, 9, 60, 0)", + }, + text: { + primary: "rgba(255, 255, 255, 0.9)", + secondary: "rgba(156, 157, 191, 1)", + }, + error: { + 50: "#ffebee", + 100: "#ffcdd2", + 200: "#ef9a9a", + 300: "#e57373", + 400: "#ef5350", + 500: "#f44336", + 600: "#e53935", + 700: "#d32f2f", + 800: "#c62828", + 900: "#b71c1c", + A100: "#ff8a80", + A200: "#ff5252", + A400: "#ff1744", + A700: "#d50000", + }, + info: { + 50: "#97a5b7", + 100: "#8293a9", + 200: "#6e819a", + 300: "#596f8c", + 400: "#445d7e", + 500: "#304C70", + 600: "#2b4464", + 700: "#263c59", + 800: "#21354e", + 900: "#1c2d43", + A100: "#304C70", + A200: "#304C70", + A400: "#304C70", + A700: "#304C70", + }, + success: { + 50: "#66d6cd", + 100: "#4dcfc4", + 200: "#33c8bc", + 300: "#1ac1b4", + 400: "#01BBAC", + 500: "#00a89a", + 600: "#009589", + 700: "#008278", + 800: "#007067", + 900: "#005d56", + A100: "#00a89a", + A200: "#00a89a", + A400: "#00a89a", + A700: "#00a89a", + }, + warning: { + 50: "#ffe3a4", + 100: "#ffdd91", + 200: "#ffd77f", + 300: "#ffd26d", + 400: "#ffcc5b", + 500: "#FFC749", + 600: "#e5b341", + 700: "#cc9f3a", + 800: "#b28b33", + 900: "#99772b", + A100: "#FFC749", + A200: "#FFC749", + A400: "#FFC749", + A700: "#FFC749", + }, + button: { + primary: "rgba(49, 50, 102, 1)", + primaryText: "#ffffff", + disabled: "#ffffff0F", + disabledText: "#ffffff66", + action: "#e47829", + actionText: "#ffffff", + hover: "#ffffff0F", + }, + options: { + hover: "#ffffff0F", + select: "#ffffff19", + }, + card: { + background: "rgba(31, 32, 69, 1)", + secondary: "#ffffff0C", + elevation: "none", + }, + popover: { + background: "#1b2033", + secondary: "#ffffff0C", + elevation: "none", + }, + modal: { + background: "rgba(15, 9, 44, 1)", + }, + font: { + primary: '"Poppins", regular', + header: '"Poppins", bold', + }, }; -export default customized; \ No newline at end of file +export default customized; diff --git a/apps/connect/src/theme/portal.ts b/apps/connect/src/theme/portal.ts index 06ff36170..b79706aa8 100644 --- a/apps/connect/src/theme/portal.ts +++ b/apps/connect/src/theme/portal.ts @@ -1,248 +1,250 @@ import createTheme from "@mui/material/styles/createTheme"; import responsiveFontSizes from "@mui/material/styles/responsiveFontSizes"; -import font from '../assets/fonts/SuisseBPIntlBold.woff2'; +import font from "../assets/fonts/SuisseBPIntlBold.woff2"; const suisse = { - fontFamily: "Suisse BP Intl", - fontStyle: "normal", - fontDisplay: "swap", - fontWeight: 400, - src: `url(${font}) format('woff2')`, + fontFamily: "Suisse BP Intl", + fontStyle: "normal", + fontDisplay: "swap", + fontWeight: 400, + src: `url(${font}) format('woff2')`, }; const COLORS = { - blue: "#1975e6", - blueWithTransparency: "rgba(25, 117, 230, 0.8)", - gray: "#4e4e54", - green: "#0ac2af", - greenWithTransparency: "rgba(10, 194, 175, 0.8)", - lightGreen: "rgba(51, 242, 223, 1)", - lightBlue: "#83b9fc", - nearBlack: "#070528", - nearBlackWithMinorTransparency: "rgba(0,0,0,.25)", - red: "#aa0818", - darkRed: "#810612", - white: "#FFFFFF", - whiteWithTransparency: "rgba(255,255,255,.07)", + blue: "#1975e6", + blueWithTransparency: "rgba(25, 117, 230, 0.8)", + gray: "#4e4e54", + green: "#0ac2af", + greenWithTransparency: "rgba(10, 194, 175, 0.8)", + lightGreen: "rgba(51, 242, 223, 1)", + lightBlue: "#83b9fc", + nearBlack: "#070528", + nearBlackWithMinorTransparency: "rgba(0,0,0,.25)", + red: "#aa0818", + darkRed: "#810612", + white: "#FFFFFF", + whiteWithTransparency: "rgba(255,255,255,.07)", }; -const theme = responsiveFontSizes(createTheme({ +const theme = responsiveFontSizes( + createTheme({ palette: { - mode: "dark", - background: { - default: COLORS.nearBlack, - paper: COLORS.nearBlack, - }, - divider: COLORS.white, - text: { - primary: COLORS.white, - }, - primary: { - main: COLORS.blueWithTransparency, // #0074FF - light: COLORS.lightBlue, - }, - secondary: { - main: COLORS.greenWithTransparency, // #00EFD8 - light: COLORS.lightGreen, - }, - error: { - main: COLORS.red, - }, + mode: "dark", + background: { + default: COLORS.nearBlack, + paper: COLORS.nearBlack, + }, + divider: COLORS.white, + text: { + primary: COLORS.white, + }, + primary: { + main: COLORS.blueWithTransparency, // #0074FF + light: COLORS.lightBlue, + }, + secondary: { + main: COLORS.greenWithTransparency, // #00EFD8 + light: COLORS.lightGreen, + }, + error: { + main: COLORS.red, + }, }, typography: { - fontFamily: "'Poppins', sans-serif", - fontSize: 13, - h1: { - fontFamily: "Suisse BP Intl, sans-serif", - lineHeight: 0.9, - letterSpacing: -2, - fontWeight: "bold", - }, - h2: { - fontWeight: "200", - }, - h4: { - fontWeight: "600", - fontFamily: "Suisse BP Intl, sans-serif", - letterSpacing: -1.02, - }, + fontFamily: "'Poppins', sans-serif", + fontSize: 13, + h1: { + fontFamily: "Suisse BP Intl, sans-serif", + lineHeight: 0.9, + letterSpacing: -2, + fontWeight: "bold", + }, + h2: { + fontWeight: "200", + }, + h4: { + fontWeight: "600", + fontFamily: "Suisse BP Intl, sans-serif", + letterSpacing: -1.02, + }, }, zIndex: { - modal: 50, + modal: 50, }, components: { - MuiCssBaseline: { - styleOverrides: { - "@font-face": [suisse], - body: { - overscrollBehaviorY: "none", - backgroundPosition: "top center", - backgroundRepeat: "repeat-y", - backgroundSize: "120%", - }, - "*": { - scrollbarWidth: "thin", - scrollbarColor: `${COLORS.gray} ${COLORS.nearBlackWithMinorTransparency}`, - }, - "*::-webkit-scrollbar": { - width: "8px", - height: "8px", - backgroundColor: COLORS.nearBlackWithMinorTransparency, - }, - "*::-webkit-scrollbar-thumb": { - backgroundColor: COLORS.gray, - borderRadius: "4px", - }, - "*::-webkit-scrollbar-corner": { - // this hides an annoying white box which appears when both scrollbars are present - backgroundColor: "transparent", - }, - } - }, - MuiAccordion: { - styleOverrides: { - root: { - backgroundColor: COLORS.whiteWithTransparency, - "&:before": { - display: "none", - }, - }, - rounded: { - "&:first-child": { - borderTopLeftRadius: "28px", - borderTopRightRadius: "28px", - }, - "&:last-child": { - borderBottomLeftRadius: "28px", - borderBottomRightRadius: "28px", - }, - }, - } - }, - MuiAlert: { - styleOverrides: { - root: { - borderRadius: "8px", - border: "1px solid", - }, - } - }, - MuiButton: { - styleOverrides: { - root: { - borderRadius: "22px", - letterSpacing: ".1em", - }, - outlinedSizeSmall: { - padding: "6px 9px", - fontSize: "0.70rem", - }, - } - }, - MuiLink: { - styleOverrides: { - root: { - textDecoration: "none", - color: COLORS.lightBlue, - }, - } - }, - MuiPaper: { - styleOverrides: { - rounded: { - borderRadius: "28px", - backdropFilter: "blur(4px)", - }, - } - }, - MuiStepper: { - styleOverrides: { - root: { - backgroundColor: "transparent", - padding: 0, - }, - } - }, - MuiStep: { - styleOverrides: { - root: { - backgroundColor: COLORS.whiteWithTransparency, - backdropFilter: "blur(4px)", - borderRadius: "28px", - padding: "32px 32px 16px", - }, - } - }, - MuiStepConnector: { - styleOverrides: { - lineVertical: { - borderLeftWidth: 0, - }, - } - }, - MuiStepContent: { - styleOverrides: { - root: { - borderLeftWidth: 0, - marginLeft: 0, - paddingLeft: 0, - }, - } - }, - MuiStepLabel: { - styleOverrides: { - label: { - color: COLORS.white, - textTransform: "uppercase", - "&.MuiStepLabel-active": {}, - "&.MuiStepLabel-completed": {}, - }, - } - }, - MuiTabs: { - styleOverrides: { - root: { - borderBottom: `1px solid ${COLORS.white}`, - }, - indicator: { - height: "100%", - background: "linear-gradient(20deg, #f44b1b 0%, #eeb430 100%);", - zIndex: -1, - }, - } - }, - MuiTab: { - styleOverrides: { - root: { - color: COLORS.white, - fontFamily: "Suisse BP Intl, sans-serif", - fontWeight: "bold", - fontSize: 18, - padding: 12, - letterSpacing: "-0.69px", - textTransform: "none", - }, - textColorInherit: { - opacity: 1, - }, - } - }, - MuiTableCell: { - styleOverrides: { - root: { - borderBottom: "none", - }, - } - }, - MuiCircularProgress: { - styleOverrides: { - root: { - color: COLORS.lightBlue, - }, - } - } + MuiCssBaseline: { + styleOverrides: { + "@font-face": [suisse], + body: { + overscrollBehaviorY: "none", + backgroundPosition: "top center", + backgroundRepeat: "repeat-y", + backgroundSize: "120%", + }, + "*": { + scrollbarWidth: "thin", + scrollbarColor: `${COLORS.gray} ${COLORS.nearBlackWithMinorTransparency}`, + }, + "*::-webkit-scrollbar": { + width: "8px", + height: "8px", + backgroundColor: COLORS.nearBlackWithMinorTransparency, + }, + "*::-webkit-scrollbar-thumb": { + backgroundColor: COLORS.gray, + borderRadius: "4px", + }, + "*::-webkit-scrollbar-corner": { + // this hides an annoying white box which appears when both scrollbars are present + backgroundColor: "transparent", + }, + }, + }, + MuiAccordion: { + styleOverrides: { + root: { + backgroundColor: COLORS.whiteWithTransparency, + "&:before": { + display: "none", + }, + }, + rounded: { + "&:first-child": { + borderTopLeftRadius: "28px", + borderTopRightRadius: "28px", + }, + "&:last-child": { + borderBottomLeftRadius: "28px", + borderBottomRightRadius: "28px", + }, + }, + }, + }, + MuiAlert: { + styleOverrides: { + root: { + borderRadius: "8px", + border: "1px solid", + }, + }, + }, + MuiButton: { + styleOverrides: { + root: { + borderRadius: "22px", + letterSpacing: ".1em", + }, + outlinedSizeSmall: { + padding: "6px 9px", + fontSize: "0.70rem", + }, + }, + }, + MuiLink: { + styleOverrides: { + root: { + textDecoration: "none", + color: COLORS.lightBlue, + }, + }, + }, + MuiPaper: { + styleOverrides: { + rounded: { + borderRadius: "28px", + backdropFilter: "blur(4px)", + }, + }, + }, + MuiStepper: { + styleOverrides: { + root: { + backgroundColor: "transparent", + padding: 0, + }, + }, + }, + MuiStep: { + styleOverrides: { + root: { + backgroundColor: COLORS.whiteWithTransparency, + backdropFilter: "blur(4px)", + borderRadius: "28px", + padding: "32px 32px 16px", + }, + }, + }, + MuiStepConnector: { + styleOverrides: { + lineVertical: { + borderLeftWidth: 0, + }, + }, + }, + MuiStepContent: { + styleOverrides: { + root: { + borderLeftWidth: 0, + marginLeft: 0, + paddingLeft: 0, + }, + }, + }, + MuiStepLabel: { + styleOverrides: { + label: { + color: COLORS.white, + textTransform: "uppercase", + "&.MuiStepLabel-active": {}, + "&.MuiStepLabel-completed": {}, + }, + }, + }, + MuiTabs: { + styleOverrides: { + root: { + borderBottom: `1px solid ${COLORS.white}`, + }, + indicator: { + height: "100%", + background: "linear-gradient(20deg, #f44b1b 0%, #eeb430 100%);", + zIndex: -1, + }, + }, + }, + MuiTab: { + styleOverrides: { + root: { + color: COLORS.white, + fontFamily: "Suisse BP Intl, sans-serif", + fontWeight: "bold", + fontSize: 18, + padding: 12, + letterSpacing: "-0.69px", + textTransform: "none", + }, + textColorInherit: { + opacity: 1, + }, + }, + }, + MuiTableCell: { + styleOverrides: { + root: { + borderBottom: "none", + }, + }, + }, + MuiCircularProgress: { + styleOverrides: { + root: { + color: COLORS.lightBlue, + }, + }, + }, }, -})); + }) +); -export default theme; \ No newline at end of file +export default theme; diff --git a/apps/connect/src/vite-env.d.ts b/apps/connect/src/vite-env.d.ts index 92997cf9b..255229949 100644 --- a/apps/connect/src/vite-env.d.ts +++ b/apps/connect/src/vite-env.d.ts @@ -3,12 +3,12 @@ import type { WormholeConnectConfig } from "@wormhole-foundation/wormhole-connect"; type NavLink = { - label: string; - active?: boolean; - href: string; -} + label: string; + active?: boolean; + href: string; +}; declare global { - declare const wormholeConnectConfig: WormholeConnectConfig; - declare const navBar: NavLink[]; + declare const wormholeConnectConfig: WormholeConnectConfig; + declare const navBar: NavLink[]; }