Add GitHub actions

.github/workflows/javascript.yml

@@ -0,0 +1,45 @@
+name: JavaScript
+
+on:
+  push:
+
+jobs:
+  lint:
+    name: "Lint codebase"
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out repo
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: "16"
+          cache: "yarn"
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Lint codebase
+        run: yarn run lint
+
+  test:
+    name: "Test codebase"
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out repo
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: "16"
+          cache: "yarn"
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Test codebase
+        run: yarn run test

.prettierrc.json

@@ -0,0 +1 @@
+{}

README.md

@@ -29,6 +29,15 @@ Your app is ready to be deployed!
 
 See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
 
+### `yarn lint`
+
+Lints the codebase using [`ESlint`](https://eslint.org). Errors and warnings are shown in your terminal, and can be shown in your text editor with the appropriate plugin.
+
+### `yarn lint:fix`
+
+Runs `yarn lint` with the `--fix` flag allowing [`ESlint`](https://eslint.org) to fix the issue automatically where possible.
+###
+
 ### `yarn eject`
 
 **Note: this is a one-way operation. Once you `eject`, you can’t go back!**

package.json

@@ -11,6 +11,7 @@
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "eslint-plugin-prettier": "^3.4.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
@@ -21,13 +22,22 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
     "extends": [
       "react-app",
-      "react-app/jest"
-    ]
+      "react-app/jest",
+      "prettier"
+    ],
+    "plugins": [
+      "prettier"
+    ],
+    "rules": {
+      "prettier/prettier": "error"
+    }
   },
   "browserslist": {
     "production": [
@@ -40,5 +50,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@peculiar/webcrypto": "^1.1.7",
+    "eslint-config-prettier": "^8.3.0",
+    "prettier": "^2.3.2"
   }
 }

src/App.test.tsx

@@ -1,9 +1,14 @@
-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";
+import TestWalletProvider from "./test/helpers/TestWalletProvider";
 
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
+test("renders learn react link", () => {
+  render(
+    <TestWalletProvider>
+      <App />
+    </TestWalletProvider>
+  );
+  const linkElement = screen.getByText(/post tx/i);
   expect(linkElement).toBeInTheDocument();
 });

src/App.tsx

@@ -1,31 +1,36 @@
-import React from 'react';
-import logo from './tca-logo.png';
-import './App.css';
-import { ConnectTerraButton } from './components/ConnectTerraButton';
-import contracts from './contracts';
+import React from "react";
+import logo from "./tca-logo.png";
+import "./App.css";
+import { ConnectTerraButton } from "./components/ConnectTerraButton";
+import contracts from "./contracts";
 
 import {
   useConnectedWallet,
-	UserDenied,
-	CreateTxFailed,
-	TxFailed,
-	Timeout,
-	TxUnspecifiedError } from '@terra-money/wallet-provider';
-import { CreateTxOptions, MsgExecuteContract, StdFee } from '@terra-money/terra.js';
+  UserDenied,
+  CreateTxFailed,
+  TxFailed,
+  Timeout,
+  TxUnspecifiedError,
+} from "@terra-money/wallet-provider";
+import {
+  CreateTxOptions,
+  MsgExecuteContract,
+  StdFee,
+} from "@terra-money/terra.js";
 
 function App() {
   const connectedWallet = useConnectedWallet();
   console.log(JSON.stringify(connectedWallet));
 
   const postTx = async () => {
-		if (!connectedWallet) return
-    const currentNetwork = 'localterra' // TODO: should be:
+    if (!connectedWallet) return;
+    const currentNetwork = "localterra"; // TODO: should be:
     // const currentNetwork = connectedWallet.network.name
 
     const execute = new MsgExecuteContract(
       connectedWallet.terraAddress,
       contracts.AngelProtocolIndexFund.address[currentNetwork],
-      contracts.AngelProtocolIndexFund.handleMessages.depositDonor,
+      contracts.AngelProtocolIndexFund.handleMessages.depositDonor
     );
 
     const txOptions: CreateTxOptions = {
@@ -38,28 +43,28 @@ function App() {
       console.log(result);
     } catch (error) {
       if (error instanceof UserDenied) {
-        console.log('User Denied')
+        console.log("User Denied");
       } else if (error instanceof CreateTxFailed) {
-        console.log('Create Tx Failed')
-        console.log(error.message)
-        console.log(error.tx)
+        console.log("Create Tx Failed");
+        console.log(error.message);
+        console.log(error.tx);
       } else if (error instanceof TxFailed) {
-        console.log('Tx Failed')
-        console.log(error.txhash)
-        console.log(error.message)
-        console.log(error.raw_message)
-        console.log(error.tx)
+        console.log("Tx Failed");
+        console.log(error.txhash);
+        console.log(error.message);
+        console.log(error.raw_message);
+        console.log(error.tx);
       } else if (error instanceof Timeout) {
-        console.log('Timeout')
-        console.log(error.message)
+        console.log("Timeout");
+        console.log(error.message);
       } else if (error instanceof TxUnspecifiedError) {
-        console.log(error.message)
-        console.log(error.tx)
+        console.log(error.message);
+        console.log(error.tx);
       } else {
-        console.log(String(error))
+        console.log(String(error));
       }
     }
-	};
+  };
 
   return (
     <div className="App">
@@ -68,7 +73,10 @@ function App() {
         <ConnectTerraButton />
       </header>
       <div>
-        <button disabled={!connectedWallet || !connectedWallet.availablePost} onClick={postTx}> 
+        <button
+          disabled={!connectedWallet || !connectedWallet.availablePost}
+          onClick={postTx}
+        >
           Post Tx
         </button>
       </div>

src/components/ConnectTerraButton.tsx

@@ -1,6 +1,10 @@
-import React from 'react';
+import React from "react";
 
-import { useWallet, WalletStatus, ConnectType } from '@terra-money/wallet-provider';
+import {
+  useWallet,
+  WalletStatus,
+  ConnectType,
+} from "@terra-money/wallet-provider";
 
 export function ConnectTerraButton() {
   const {
@@ -10,48 +14,41 @@ export function ConnectTerraButton() {
     connect,
     disconnect,
     install,
-    wallets
-  } = useWallet()
+    wallets,
+  } = useWallet();
 
   switch (status) {
     case WalletStatus.INITIALIZING:
       return (
         <div>
-          <button disabled>
-            Initializing Wallet...
-          </button>
+          <button disabled>Initializing Wallet...</button>
         </div>
       );
     case WalletStatus.WALLET_NOT_CONNECTED:
       return (
         <div>
-          {
-            availableConnectTypes.includes(ConnectType.CHROME_EXTENSION) &&
+          {availableConnectTypes.includes(ConnectType.CHROME_EXTENSION) && (
             <button onClick={() => connect(ConnectType.CHROME_EXTENSION)}>
               Connect Chrome Extension
             </button>
-          }
-          {
-            availableInstallTypes.includes(ConnectType.CHROME_EXTENSION) &&
+          )}
+          {availableInstallTypes.includes(ConnectType.CHROME_EXTENSION) && (
             <button onClick={() => install(ConnectType.CHROME_EXTENSION)}>
               Install Chrome Extension
             </button>
-          }
+          )}
         </div>
-      )
+      );
     case WalletStatus.WALLET_CONNECTED:
       return (
         <div>
-          {
-            wallets.length > 0 &&
+          {wallets.length > 0 && (
             <div>
               <p>terraAddress: {wallets[0].terraAddress}</p>
             </div>
-          }
-          <button onClick={() => disconnect()}>
-            Disconnect
-          </button>
+          )}
+          <button onClick={() => disconnect()}>Disconnect</button>
         </div>
-      )
+      );
   }
-}
+}

src/contracts/index.ts

@@ -1,10 +1,10 @@
 export default {
   AngelProtocolIndexFund: {
     address: {
-      localterra: "terra18vd8fpwxzck93qlwghaj6arh4p7c5n896xzem5"
+      localterra: "terra18vd8fpwxzck93qlwghaj6arh4p7c5n896xzem5",
     },
     handleMessages: {
       depositDonor: { increment: {} },
-    }
+    },
   },
 };

src/index.tsx

@@ -1,30 +1,27 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
 
-import {
-  NetworkInfo,
-  WalletProvider,
-} from '@terra-money/wallet-provider';
+import { NetworkInfo, WalletProvider } from "@terra-money/wallet-provider";
 
 const localterra = {
-  name: 'localterra',
-  chainID: 'localterra',
-  lcd: 'http://localhost:1317',
+  name: "localterra",
+  chainID: "localterra",
+  lcd: "http://localhost:1317",
 };
 
 const testnet = {
-  name: 'testnet',
-  chainID: 'tequila-0004',
-  lcd: 'https://tequila-lcd.terra.dev',
+  name: "testnet",
+  chainID: "tequila-0004",
+  lcd: "https://tequila-lcd.terra.dev",
 };
 
 const mainnet = {
-  name: 'mainnet',
-  chainID: 'columbus-4',
-  lcd: 'https://lcd.terra.dev',
+  name: "mainnet",
+  chainID: "columbus-4",
+  lcd: "https://lcd.terra.dev",
 };
 
 const walletConnectChainIds: Record<number, NetworkInfo> = {
@@ -42,7 +39,7 @@ ReactDOM.render(
       <App />
     </WalletProvider>
   </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById("root")
 );
 
 // If you want to start measuring performance in your app, pass a function

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);