Feature: cra template overhaul

packages/cra-template-safe-app/template/src/App.test.tsx

@@ -1,8 +1,8 @@
-import { render, screen } from "@testing-library/react"
-import App from "./App"
+import { render, screen } from './tests/utils';
+import App from './App';
 
-test("renders learn loading screen", () => {
-  render(<App />)
-  const waitingHeading = screen.getByText(/Waiting for Safe/i)
-  expect(waitingHeading).toBeInTheDocument()
-})
+test('renders learn loading screen', () => {
+  render(<App />);
+  const waitingHeading = screen.getByText(/Waiting for Safe/i);
+  expect(waitingHeading).toBeInTheDocument();
+});

packages/cra-template-safe-app/template/src/App.tsx

@@ -1,33 +1,33 @@
-import React, { useCallback } from "react"
-import styled from "styled-components"
-import { Button, Title } from "@gnosis.pm/safe-react-components"
-import { useSafeAppsSDK } from "@gnosis.pm/safe-apps-react-sdk"
+import React, { useCallback } from 'react';
+import styled from 'styled-components';
+import { Button, Title } from '@gnosis.pm/safe-react-components';
+import { useSafeAppsSDK } from '@gnosis.pm/safe-apps-react-sdk';
 
 const Container = styled.div`
   padding: 1rem;
-`
+`;
 
 const SafeApp = (): React.ReactElement => {
-  const { sdk, safe } = useSafeAppsSDK()
+  const { sdk, safe } = useSafeAppsSDK();
 
   const submitTx = useCallback(async () => {
     try {
       const { safeTxHash } = await sdk.txs.send({
         txs: [
           {
             to: safe.safeAddress,
-            value: "0",
-            data: "0x",
+            value: '0',
+            data: '0x',
           },
         ],
-      })
-      console.log({ safeTxHash })
-      const safeTx = await sdk.txs.getBySafeTxHash(safeTxHash)
-      console.log({ safeTx })
+      });
+      console.log({ safeTxHash });
+      const safeTx = await sdk.txs.getBySafeTxHash(safeTxHash);
+      console.log({ safeTx });
     } catch (e) {
-      console.error(e)
+      console.error(e);
     }
-  }, [safe, sdk])
+  }, [safe, sdk]);
 
   return (
     <Container>
@@ -37,7 +37,7 @@ const SafeApp = (): React.ReactElement => {
         Click to send a test transaction
       </Button>
     </Container>
-  )
-}
+  );
+};
 
-export default SafeApp
+export default SafeApp;

packages/cra-template-safe-app/template/src/setupProxy.js

@@ -2,14 +2,13 @@
 // https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually
 
 module.exports = function (app) {
-  app.use("/manifest.json", function (req, res, next) {
+  app.use('/manifest.json', function (req, res, next) {
     res.set({
-      "Access-Control-Allow-Origin": "*",
-      "Access-Control-Allow-Methods": "GET",
-      "Access-Control-Allow-Headers":
-        "X-Requested-With, content-type, Authorization",
-    })
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'GET',
+      'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
+    });
 
-    next()
-  })
-}
+    next();
+  });
+};

packages/cra-template-safe-app/template/src/setupTests.ts

@@ -3,3 +3,28 @@
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom/extend-expect';
+import crypto from 'crypto';
+
+// This is required by safe-apps-sdk and it's not present in jsdom by default
+function getRandomValues(buf: Uint8Array) {
+  if (!(buf instanceof Uint8Array)) {
+    throw new TypeError('expected Uint8Array');
+  }
+  if (buf.length > 65536) {
+    const e = new Error();
+    e.message =
+      "Failed to execute 'getRandomValues' on 'Crypto': The " +
+      "ArrayBufferView's byte length (" +
+      buf.length +
+      ') exceeds the ' +
+      'number of bytes of entropy available via this API (65536).';
+    e.name = 'QuotaExceededError';
+    throw e;
+  }
+  const bytes = crypto.randomBytes(buf.length);
+  buf.set(bytes);
+}
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+window.crypto = { getRandomValues };