Merge pull request #186 from gnosis/development

Safe Apps Developer Tools Release 9

README.md

@@ -21,6 +21,16 @@ You can find more resources on Safe Apps in the [Gnosis Safe Developer Portal](h
 | [safe-apps-web3modal](https://github.com/gnosis/safe-apps-sdk/tree/master/packages/safe-apps-web3modal)     | A wrapper around Web3modal that would automatically connect to the Safe if the app is loaded as a Safe app             |
 | [safe-apps-web3-react](https://github.com/gnosis/safe-apps-sdk/tree/master/packages/safe-apps-web3-react)   | A web-react connector for Safe Apps                                                                                    |
 
+## Testing your Safe App
+
+You can use any of our production interfaces:
+
+- Mainnet: https://gnosis-safe.io
+- Rinkeby: https://rinkeby.gnosis-safe.io
+- xDai: https://xdai.gnosis-safe.io
+
+We also made a very simple interface for testing safe apps that can be used on any network: https://dev.gnosis-safe.io/
+
 ## Setting up development environment
 
 ### Installing dependencies

package.json

@@ -17,13 +17,14 @@
     "lerna": "^4.0.0"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^4.25.0",
-    "@typescript-eslint/parser": "^4.25.0",
-    "eslint": "7.27.0",
+    "@typescript-eslint/eslint-plugin": "^4.27.0",
+    "@typescript-eslint/parser": "^4.27.0",
+    "eslint": "7.29.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^3.4.0",
-    "jest": "26.6.0",
-    "ts-jest": "^26.5.3",
-    "typescript": "^4.3.2"
+    "jest": "27.0.4",
+    "prettier": "^2.3.1",
+    "ts-jest": "^27.0.3",
+    "typescript": "^4.3.4"
   }
 }

packages/cra-template-safe-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gnosis.pm/cra-template-safe-app",
-  "version": "3.5.0",
+  "version": "4.0.0",
   "description": "Gnosis Safe App Starter",
   "author": "Gnosis (https://gnosis.pm)",
   "license": "MIT",

packages/cra-template-safe-app/template.json

@@ -2,32 +2,41 @@
   "package": {
     "homepage": "./",
     "dependencies": {
-      "@gnosis.pm/safe-apps-react-sdk": "3.0.0",
-      "@gnosis.pm/safe-react-components": "^0.3.0",
+      "@gnosis.pm/safe-apps-react-sdk": "4.0.0",
+      "@gnosis.pm/safe-react-components": "^0.6.0",
       "@material-ui/core": "^4.11.0",
+      "react": "^17.0.1",
+      "react-dom": "^17.0.1",
+      "react-scripts": "4.0.3",
+      "styled-components": "^5.1.1"
+    },
+    "devDependencies": {
       "@testing-library/jest-dom": "^5.11.4",
       "@testing-library/react": "^11.2.2",
-      "@testing-library/user-event": "^12.1.3",
+      "@testing-library/user-event": "^13.1.9",
       "@types/jest": "^26.0.10",
-      "@types/node": "^14.6.2",
+      "@types/node": "^15.12.1",
       "@types/react": "^17.0.0",
       "@types/react-dom": "^17.0.0",
       "@types/styled-components": "^5.1.2",
-      "react": "^17.0.1",
-      "react-app-rewired": "^2.1.6",
-      "react-dom": "^17.0.1",
-      "react-scripts": "4.0.2",
-      "styled-components": "^5.1.1",
-      "typescript": "~4.1.3"
+      "@typescript-eslint/eslint-plugin": "^4.27.0",
+      "@typescript-eslint/parser": "^4.27.0",
+      "eslint-config-prettier": "^8.3.0",
+      "eslint-config-react-app": "^6.0.0",
+      "eslint-plugin-flowtype": "^5.7.2",
+      "eslint-plugin-import": "^2.22.0",
+      "eslint-plugin-jsx-a11y": "^6.3.1",
+      "eslint-plugin-prettier": "^3.4.0",
+      "eslint-plugin-react": "^7.23.2",
+      "eslint-plugin-react-hooks": "^4.2.0",
+      "prettier": "2.3.1",
+      "typescript": "~4.3.2"
     },
     "scripts": {
-      "start": "react-app-rewired start",
-      "build": "react-app-rewired build",
-      "test": "react-app-rewired test"
-    },
-    "eslintConfig": {
-      "extends": ["react-app", "plugin:jsx-a11y/recommended"],
-      "plugins": ["jsx-a11y"]
+      "start": "react-scripts start",
+      "build": "react-scripts build",
+      "test": "react-scripts test",
+      "eject": "react-scripts eject"
     },
     "browserslist": {
       "production": [">0.2%", "not dead", "not op_mini all"],

packages/cra-template-safe-app/template/.eslintignore

@@ -0,0 +1,2 @@
+dist
+build

packages/cra-template-safe-app/template/.eslintrc.js

@@ -0,0 +1,22 @@
+module.exports = {
+  parser: "@typescript-eslint/parser",
+  extends: [
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+    "react-app",
+    "plugin:jsx-a11y/recommended",
+  ],
+  plugins: ["jsx-a11y"],
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: "module",
+  },
+  rules: {
+    "@typescript-eslint/camelcase": "off",
+    "@typescript-eslint/no-var-requires": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      { ignoreRestSiblings: true },
+    ],
+  },
+}

packages/cra-template-safe-app/template/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "printWidth": 120,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "semi": false
+}

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

@@ -0,0 +1,8 @@
+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()
+})

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

@@ -1,25 +1,26 @@
-import React, { useCallback, useState } from 'react';
-import styled from 'styled-components';
-import { Button, Loader, 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.form`
-  margin-bottom: 2rem;
+const Container = styled.div`
+  padding: 1rem;
   width: 100%;
-  max-width: 480px;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+`
 
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-column-gap: 1rem;
-  grid-row-gap: 1rem;
-`;
+const Link = styled.a`
+  margin-top: 8px;
+`
 
-const App: React.FC = () => {
-  const { sdk, safe } = useSafeAppsSDK();
-  const [submitting, setSubmitting] = useState(false);
+const SafeApp = (): React.ReactElement => {
+  const { sdk, safe } = useSafeAppsSDK()
 
   const submitTx = useCallback(async () => {
-    setSubmitting(true);
     try {
       const { safeTxHash } = await sdk.txs.send({
         txs: [
@@ -29,40 +30,28 @@ const App: React.FC = () => {
             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)
     }
-    setSubmitting(false);
-  }, [safe, sdk]);
+  }, [safe, sdk])
 
   return (
     <Container>
-      <Title size="md">{safe.safeAddress}</Title>
-      {submitting ? (
-        <>
-          <Loader size="md" />
-          <br />
-          <Button
-            size="lg"
-            color="secondary"
-            onClick={() => {
-              setSubmitting(false);
-            }}
-          >
-            Cancel
-          </Button>
-        </>
-      ) : (
-        <Button size="lg" color="primary" onClick={submitTx}>
-          Submit
-        </Button>
-      )}
+      <Title size="md">Safe: {safe.safeAddress}</Title>
+
+      <Button size="lg" color="primary" onClick={submitTx}>
+        Click to send a test transaction
+      </Button>
+
+      <Link href="https://github.com/gnosis/safe-apps-sdk" target="_blank" rel="noreferrer">
+        Documentation
+      </Link>
     </Container>
-  );
-};
+  )
+}
 
-export default App;
+export default SafeApp

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

@@ -1,6 +1,6 @@
-import { createGlobalStyle } from 'styled-components';
-import avertaFont from '@gnosis.pm/safe-react-components/dist/fonts/averta-normal.woff2';
-import avertaBoldFont from '@gnosis.pm/safe-react-components/dist/fonts/averta-bold.woff2';
+import { createGlobalStyle } from 'styled-components'
+import avertaFont from '@gnosis.pm/safe-react-components/dist/fonts/averta-normal.woff2'
+import avertaBoldFont from '@gnosis.pm/safe-react-components/dist/fonts/averta-bold.woff2'
 
 const GlobalStyle = createGlobalStyle`
     html {
@@ -29,6 +29,6 @@ const GlobalStyle = createGlobalStyle`
         url(${avertaFont}) format('woff2'),
         url(${avertaBoldFont}) format('woff');
     }
-`;
+`
 
-export default GlobalStyle;
+export default GlobalStyle

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

@@ -1,11 +1,11 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { ThemeProvider } from 'styled-components';
-import { theme, Loader, Title } from '@gnosis.pm/safe-react-components';
-import SafeProvider from '@gnosis.pm/safe-apps-react-sdk';
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { ThemeProvider } from 'styled-components'
+import { theme, Loader, Title } from '@gnosis.pm/safe-react-components'
+import SafeProvider from '@gnosis.pm/safe-apps-react-sdk'
 
-import GlobalStyle from './GlobalStyle';
-import App from './App';
+import GlobalStyle from './GlobalStyle'
+import App from './App'
 
 ReactDOM.render(
   <React.StrictMode>
@@ -24,4 +24,4 @@ ReactDOM.render(
     </ThemeProvider>
   </React.StrictMode>,
   document.getElementById('root'),
-);
+)

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

@@ -0,0 +1,15 @@
+// App is an express application, we can add an express middleware that will set headers for manifest.json request
+// 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) {
+    res.set({
+      "Access-Control-Allow-Origin": "*",
+      "Access-Control-Allow-Methods": "GET",
+      "Access-Control-Allow-Headers":
+        "X-Requested-With, content-type, Authorization",
+    })
+
+    next()
+  })
+}

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

@@ -2,4 +2,29 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom/extend-expect';
+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 }

packages/cra-template-safe-app/template/src/tests/utils.tsx

@@ -0,0 +1,28 @@
+import { FC, ReactElement } from 'react'
+import { render, RenderOptions, RenderResult } from '@testing-library/react'
+import { ThemeProvider } from 'styled-components'
+import { theme, Title } from '@gnosis.pm/safe-react-components'
+import SafeProvider from '@gnosis.pm/safe-apps-react-sdk'
+
+const AllTheProviders: FC = ({ children }) => {
+  return (
+    <ThemeProvider theme={theme}>
+      <SafeProvider
+        loader={
+          <>
+            <Title size="md">Waiting for Safe...</Title>
+          </>
+        }
+      >
+        {children}
+      </SafeProvider>
+    </ThemeProvider>
+  )
+}
+
+const customRender = (ui: ReactElement, options?: Omit<RenderOptions, 'queries'>): RenderResult =>
+  render(ui, { wrapper: AllTheProviders, ...options })
+
+export * from '@testing-library/react'
+
+export { customRender as render }