Safe Apps Dev Tools Release 5

.github/workflows/cla.yml

@@ -0,0 +1,26 @@
+name: 'CLA Assistant'
+on:
+  issue_comment:
+    types: [created]
+  pull_request_target:
+    types: [opened, closed, synchronize]
+
+jobs:
+  CLAssistant:
+    runs-on: ubuntu-latest
+    steps:
+      - name: 'CLA Assistant'
+        if: (github.event.comment.body == 'recheckcla' || github.event.comment.body == 'I have read the CLA Document and I hereby sign the CLA') || github.event_name == 'pull_request_target'
+        # Alpha Release
+        uses: gnosis/cla-github-action@master
+        # GitHub token, automatically provided to the action
+        # (No need to define this secret in the repo settings)
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          path-to-signatures: 'signatures/version1/cla.json'
+          path-to-cla-document: 'https://gnosis-safe.io/cla/'
+          branch: 'cla-signatures'
+          allowlist: germartinez,mikheevm,rmeissner,Uxio0,dasanra,davidalbela,luarx,giacomolicari,lukasschor,tschubotz,gnosis-info,bot*
+          empty-commit-flag: false
+          blockchain-storage-flag: false

README.md

@@ -9,12 +9,12 @@ You can find more resources on Safe Apps in the [Gnosis Safe Developer Portal](h
 
 ## Packages
 
-| Package                                                                                                                                                                                                                        | Description                                                        |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :----------------------------------------------------------------- |
-| [cra-template-safe-app](https://github.com/gnosis/safe-apps-sdk/tree/master/packages/cra-template-safe-app)                                                                                                                    | CRA template to quickly bootstrap a Safe app                       |
-| [safe-apps-react-sdk](https://github.com/gnosis/safe-apps-sdk/tree/master/packages/safe-apps-react-sdk)                                                                                                                        | A wrapper of safe-apps-sdk with helpful hooks                      |
-| [safe-apps-sdk](https://github.com/gnosis/safe-apps-sdk/tree/master/packages/safe-apps-sdk) [![npm version](https://badge.fury.io/js/%40gnosis.pm%2Fsafe-apps-sdk.svg)](https://badge.fury.io/js/%40gnosis.pm%2Fsafe-apps-sdk) | JavaScript SDK                                                     |
-| [safe-apps-ethers-provider](https://github.com/gnosis/safe-apps-sdk/tree/master/packages/safe-apps-ethers-provider)                                                                                                            | An ethers.js provider to be used with ethers.js contract instances |
+| Package                                                                                                                                                                                                                        | Description                                                                   |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :---------------------------------------------------------------------------- |
+| [cra-template-safe-app](https://github.com/gnosis/safe-apps-sdk/tree/master/packages/cra-template-safe-app)                                                                                                                    | CRA template to quickly bootstrap a Safe app                                  |
+| [safe-apps-react-sdk](https://github.com/gnosis/safe-apps-sdk/tree/master/packages/safe-apps-react-sdk)                                                                                                                        | A wrapper of safe-apps-sdk with helpful hooks                                 |
+| [safe-apps-sdk](https://github.com/gnosis/safe-apps-sdk/tree/master/packages/safe-apps-sdk) [![npm version](https://badge.fury.io/js/%40gnosis.pm%2Fsafe-apps-sdk.svg)](https://badge.fury.io/js/%40gnosis.pm%2Fsafe-apps-sdk) | JavaScript SDK                                                                |
+| [safe-apps-ethers-provider](https://github.com/gnosis/safe-apps-sdk/tree/master/packages/safe-apps-ethers-provider)                                                                                                            | An ethers.js provider and signer to be used with ethers.js contract instances |
 
 ## Setting up development environment
 

package.json

@@ -17,17 +17,17 @@
     "lerna": "^3.22.1"
   },
   "devDependencies": {
-    "@types/react": "^17.0.0",
+    "@types/react": "^17.0.1",
     "@types/react-dom": "^17.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.14.1",
-    "@typescript-eslint/parser": "^4.14.1",
-    "eslint": "7.18.0",
+    "@typescript-eslint/eslint-plugin": "^4.15.0",
+    "@typescript-eslint/parser": "^4.15.0",
+    "eslint": "7.19.0",
     "eslint-config-prettier": "^7.2.0",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "jest": "^26.6.3",
-    "ts-jest": "^26.4.4",
-    "typescript": "^4.1.3"
+    "ts-jest": "^26.5.1",
+    "typescript": "^4.1.5"
   }
 }

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

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

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

@@ -2,7 +2,7 @@
   "package": {
     "homepage": "./",
     "dependencies": {
-      "@gnosis.pm/safe-apps-react-sdk": "1.1.1",
+      "@gnosis.pm/safe-apps-react-sdk": "2.0.0",
       "@gnosis.pm/safe-react-components": "^0.3.0",
       "@material-ui/core": "^4.11.0",
       "@testing-library/jest-dom": "^5.11.4",
@@ -16,7 +16,7 @@
       "react": "^17.0.1",
       "react-app-rewired": "^2.1.6",
       "react-dom": "^17.0.1",
-      "react-scripts": "4.0.1",
+      "react-scripts": "4.0.2",
       "styled-components": "^5.1.1",
       "typescript": "~4.1.3"
     },

packages/safe-apps-ethers-provider/README.md

@@ -2,7 +2,7 @@
 
 [![npm](https://img.shields.io/npm/v/@gnosis.pm/safe-apps-ethers-provider)](https://www.npmjs.com/package/@gnosis.pm/safe-apps-ethers-provider)
 
-This is an `ethers.js` provider to use with `ethers.js` contract instances.
+This is an `ethers.js` provider and signer to use with `ethers.js` contract instances.
 
 ### How to use
 
@@ -14,6 +14,12 @@ yarn add @gnosis.pm/safe-apps-ethers-provider
 npm i @gnosis.pm/safe-apps-ethers-provider
 ```
 
+### SafeAppsSdkProvider (Read-only access)
+
+From [ethers.js documentation](https://docs.ethers.io/v5/api/providers/):
+
+> A **Provider** is an abstraction of a connection to the Ethereum network, providing a concise, consistent interface to standard Ethereum node functionality.
+
 - Usage example with [safe-apps-react-sdk](https://github.com/gnosis/safe-apps-sdk/tree/master/packages/safe-apps-react-sdk)
 
 ```js
@@ -30,6 +36,11 @@ const App = () => {
     safe,
   ]);
 
+  // calling read methods
+  const getSomething = async () => {
+    const balance = await contract.getBalance('0x000');
+  };
+
   // calling write methods
   const doSomething = async () => {
     const { safeTxHash } = await sdk.txs.send({
@@ -49,6 +60,44 @@ const App = () => {
 export default App;
 ```
 
+### SafeAppsSdkSigner (Read/Write access)
+
+From [ethers.js documentation](https://docs.ethers.io/v5/api/signer/):
+
+> A **Signer** in ethers is an abstraction of an Ethereum Account, which can be used to sign messages and transactions and send signed transactions to the Ethereum Network to execute state changing operations.
+
+- Usage example with [safe-apps-react-sdk](https://github.com/gnosis/safe-apps-sdk/tree/master/packages/safe-apps-react-sdk)
+
+```js
+import React, { useMemo, useState } from 'react';
+import { useSafeAppsSDK } from '@gnosis.pm/safe-apps-react-sdk';
+import { ethers } from 'ethers';
+import { SafeAppsSdkSigner } from '@gnosis.pm/safe-apps-ethers-provider';
+import Contract from './contracts/DelayedTxModule.json';
+
+const App = () => {
+  const { sdk, safe } = useSafeAppsSDK();
+  const contract = useMemo(() => ethers.Contract(Contract.address, Contract.abi, new SafeAppsSdkSigner(safe, sdk)), [
+    sdk,
+    safe,
+  ]);
+
+  // calling read methods
+  const getSomething = async () => {
+    const balance = await contract.getBalance('0x000');
+  };
+
+  // calling write methods
+  const doSomething = async () => {
+    const { hash } = await contract.someFunc('someArg');
+  };
+
+  return;
+};
+
+export default App;
+```
+
 #### More scenarios
 
 For the SDK overview documentation, please refer to the [safe-apps-sdk](https://github.com/gnosis/safe-apps-sdk/) documentation

packages/safe-apps-ethers-provider/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gnosis.pm/safe-apps-ethers-provider",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "An ethers.js provider wrapper of Safe Apps SDK",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -20,10 +20,13 @@
   },
   "homepage": "https://github.com/gnosis/safe-apps-sdk#readme",
   "dependencies": {
-    "@ethersproject/bytes": "^5.0.9",
-    "@ethersproject/logger": "^5.0.8",
-    "@ethersproject/properties": "^5.0.7",
-    "@ethersproject/providers": "^5.0.19",
-    "@gnosis.pm/safe-apps-sdk": "1.1.1"
+    "@ethersproject/abstract-provider": "^5.0.9",
+    "@ethersproject/abstract-signer": "^5.0.12",
+    "@ethersproject/bignumber": "^5.0.14",
+    "@ethersproject/bytes": "^5.0.10",
+    "@ethersproject/logger": "^5.0.9",
+    "@ethersproject/properties": "^5.0.8",
+    "@ethersproject/providers": "^5.0.22",
+    "@gnosis.pm/safe-apps-sdk": "2.0.0"
   }
 }

packages/safe-apps-ethers-provider/src/index.ts

@@ -1 +1 @@
-export { SafeAppsSdkProvider } from './provider';
+export { SafeAppsSdkProvider, SafeAppsSdkSigner } from './provider';