ci: lint and build

.github/workflows/lint.yml

@@ -0,0 +1,34 @@
+name: Lint
+
+on:
+  pull_request:
+  push:
+    branches:
+      - development
+      - staging
+      - production
+      - mainnet
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: "npm"
+      - run: npm ci
+      - run: npm run lint:ci
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: "npm"
+      - run: npm ci
+      - run: npm run build

.prettierignore

@@ -1,5 +1,3 @@
 dist
 build
 *.md
-builder
-wormhole-connect-loader

builder/package.json

@@ -22,6 +22,7 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
+    "lint:ci": "prettier -c ./src && eslint --max-warnings=0 ./src",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",

builder/src/App.test.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import App from "./App";
 
-test('renders learn react link', () => {
+test("renders learn react link", () => {
   render(<App />);
   const linkElement = screen.getByText(/learn react/i);
   expect(linkElement).toBeInTheDocument();

builder/src/App.tsx

@@ -1,47 +1,50 @@
-import React from 'react';
-import { copyTextToClipboard } from './utils';
-import Background from './Background';
-import { makeStyles } from 'tss-react/mui';
-import WormholeBridge, { defaultTheme, WormholeConnectConfig } from '@wormhole-foundation/wormhole-connect';
+import React from "react";
+import { copyTextToClipboard } from "./utils";
+import Background from "./Background";
+import { makeStyles } from "tss-react/mui";
+import WormholeBridge, {
+  defaultTheme,
+  WormholeConnectConfig,
+} from "@wormhole-foundation/wormhole-connect";
 
 const useStyles = makeStyles()(() => ({
   appContent: {
-    paddingBottom: '60px',
+    paddingBottom: "60px",
   },
   title: {
-    marginTop: '60px',
-    textAlign: 'center',
-    marginBottom: '16px',
-    color: 'white',
+    marginTop: "60px",
+    textAlign: "center",
+    marginBottom: "16px",
+    color: "white",
   },
   copy: {
-    padding: '16px',
-    backgroundColor: 'rgba(255,255,255,0.05)',
-    border: '1px solid rgba(255,255,255,0.3)',
-    borderRadius: '8px',
-    maxWidth: '150px',
-    margin: 'auto',
-    cursor: 'pointer',
-    display: 'flex',
-    justifyContent: 'center',
-    color: 'white',
-  }
-}))
+    padding: "16px",
+    backgroundColor: "rgba(255,255,255,0.05)",
+    border: "1px solid rgba(255,255,255,0.3)",
+    borderRadius: "8px",
+    maxWidth: "150px",
+    margin: "auto",
+    cursor: "pointer",
+    display: "flex",
+    justifyContent: "center",
+    color: "white",
+  },
+}));
 
 function App() {
   const { classes } = useStyles();
   const script = `
     <div id="wormhole-connect"></div>
     <script src="https://www.unpkg.com/@wormhole-foundation/[email protected]/dist/main.js"></script>
     <link src="https://www.unpkg.com/@wormhole-foundation/[email protected]/dist/main.css"/>
-  `
+  `;
   const customized = defaultTheme;
-  customized.background.default = 'transparent';
+  customized.background.default = "transparent";
   const config: WormholeConnectConfig = {
-    mode: 'dark',
+    mode: "dark",
     customTheme: customized,
-    networks: ['goerli', 'alfajores', 'fuji']
-  }
+    networks: ["goerli", "alfajores", "fuji"],
+  };
   return (
     <div className="App">
       <Background>

builder/src/Background.tsx

@@ -1,31 +1,31 @@
-import React from 'react';
-import { makeStyles } from 'tss-react/mui';
+import React from "react";
+import { makeStyles } from "tss-react/mui";
 import bg from "./bg.svg";
-import { OPACITY } from './theme';
+import { OPACITY } from "./theme";
 
 const colors = {
-  bg: '#030712',
-  purple: '#3B234E',
-  blue: '#302A60',
-  pink: '#5A1E46',
-}
+  bg: "#030712",
+  purple: "#3B234E",
+  blue: "#302A60",
+  pink: "#5A1E46",
+};
 
 const useStyles = makeStyles()((theme) => ({
   container: {
     backgroundColor: `${colors.bg} !important`,
-    width: '100%',
+    width: "100%",
     minHeight: "100vh",
-    height: '100%',
-    zIndex: '-2',
+    height: "100%",
+    zIndex: "-2",
   },
   bg: {
     display: "flex",
     flexDirection: "column",
     position: "relative",
     overflow: "hidden",
-    width: '100%',
+    width: "100%",
     height: "100%",
-    minHeight: '100vh',
+    minHeight: "100vh",
     overscrollBehaviorY: "none",
     backgroundImage: `url(${bg})`,
     backgroundPosition: "top center",
@@ -34,8 +34,8 @@ const useStyles = makeStyles()((theme) => ({
   },
   background: {
     position: "absolute",
-    width: '100%',
-    height: '100%',
+    width: "100%",
+    height: "100%",
     top: 0,
     bottom: 0,
     left: 0,
@@ -50,8 +50,7 @@ const useStyles = makeStyles()((theme) => ({
     right: "-1000px",
     width: "1757px",
     height: "1506px",
-    background:
-      `radial-gradient(closest-side at 50% 50%, ${colors.blue} 0%, ${colors.blue}00 100%)`,
+    background: `radial-gradient(closest-side at 50% 50%, ${colors.blue} 0%, ${colors.blue}00 100%)`,
     opacity: "0.5",
     transform: "matrix(0.87, 0.48, -0.48, 0.87, 0, 0)",
     zIndex: "-1",
@@ -66,8 +65,7 @@ const useStyles = makeStyles()((theme) => ({
     width: "1379px",
     height: "1378px",
     position: "absolute",
-    background:
-      `radial-gradient(closest-side at 50% 50%, ${colors.pink}${OPACITY[60]} 0%, ${colors.pink}00 100%)`,
+    background: `radial-gradient(closest-side at 50% 50%, ${colors.pink}${OPACITY[60]} 0%, ${colors.pink}00 100%)`,
     opacity: "0.5",
     zIndex: "-1",
     pointerEvent: "none",
@@ -78,8 +76,7 @@ const useStyles = makeStyles()((theme) => ({
     width: "1379px",
     height: "1378px",
     position: "absolute",
-    background:
-      `radial-gradient(closest-side at 50% 50%, ${colors.purple} 0%, ${colors.purple}00 100%)`,
+    background: `radial-gradient(closest-side at 50% 50%, ${colors.purple} 0%, ${colors.purple}00 100%)`,
     opacity: "0.5",
     zIndex: "-1",
     pointerEvent: "none",
@@ -93,8 +90,7 @@ const useStyles = makeStyles()((theme) => ({
     right: "-1000px",
     width: "1757px",
     height: "1506px",
-    background:
-      `radial-gradient(closest-side at 50% 50%, ${colors.purple} 0%, ${colors.purple}00 100%)`,
+    background: `radial-gradient(closest-side at 50% 50%, ${colors.purple} 0%, ${colors.purple}00 100%)`,
     opacity: "0.5",
     transform: "matrix(0.87, 0.48, -0.48, 0.87, 0, 0);",
     zIndex: "-1",
@@ -103,11 +99,11 @@ const useStyles = makeStyles()((theme) => ({
       display: "none",
     },
   },
-}))
+}));
 
 type Props = {
-  children: React.ReactNode | React.ReactNode[]
-}
+  children: React.ReactNode | React.ReactNode[];
+};
 
 function Background({ children }: Props) {
   const { classes } = useStyles();

builder/src/index.css

@@ -1,13 +1,13 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }

builder/src/index.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
 
 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+  document.getElementById("root") as HTMLElement
 );
 root.render(
   <React.StrictMode>

builder/src/reportWebVitals.ts

@@ -1,8 +1,8 @@
-import { ReportHandler } from 'web-vitals';
+import { ReportHandler } from "web-vitals";
 
 const reportWebVitals = (onPerfEntry?: ReportHandler) => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+    import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
       getCLS(onPerfEntry);
       getFID(onPerfEntry);
       getFCP(onPerfEntry);