Skip to content

Commit

Permalink
Update get-started.md
Browse files Browse the repository at this point in the history
  • Loading branch information
@tanay1337
tanay1337 authored Oct 27, 2023
1 parent 6175242 commit 79ca055
Showing 1 changed file with 19 additions and 25 deletions.
44 changes: 19 additions & 25 deletions safe-apps/get-started.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,45 +4,41 @@ description: Basic resources to start creating Safe Apps

# Getting started

Welcome! We are glad on your interest about creating a Safe App. The team is working hard to provide the tools to make it easier for you to build apps that can interact with Safe.

Once you are here, the main resources include:
Here are some resources to help you get started with building Safe Apps:

* [Safe Apps SDK Packages](./get-started.md#safe-apps-sdk-packages)
* [Basic Requirements](./get-started.md#basic-requirements)
* [UI Kit](./get-started.md#ui-kit)

## Safe Apps SDK packages

This is one of our main resources for Safe Apps integrations. Whether you already have a dapp or are thinking about creating a new one, you will find it useful to rely on one of our integrations to easily communicate with Safe{Wallet}. In these packages, you will find integrations with very common packages like Web3Modal, Blocknative onboard.js or web3-react, that you may already be using on your project.
This is one of our main resources for Safe Apps integrations. Whether you already have a dapp or are considering creating a new one, you will find it useful to rely on one of our integrations to communicate with Safe{Wallet}. In these packages, you will find integrations with common packages like Web3Modal, Blocknative onboard.js, and web3-react.

For those creating a new dapp, using our [CRA template](https://github.com/safe-global/safe-apps-sdk/tree/main/packages/cra-template-safe-app) to kickstart the basic structure with all the necessary configuration will speed up the process.

[Check more about SDK Packages](./overview.md).

## Basic requirements

If you already have a dapp, there are some mandatory requirements to adapt your app to be used as a Safe App. Without this basic configuration, the dapp won't work with the Safe as expected.
If you already have a dapp, some mandatory requirements exist to adapt your app to be used as a Safe App. Without this basic configuration, the dapp won't work with the Safe as expected.

If you are using our [CRA template](https://github.com/safe-global/safe-apps-sdk/tree/main/packages/cra-template-safe-app) to start your Safe App, these basic requirements are already included.
If you are using our [CRA template](https://github.com/safe-global/safe-apps-sdk/tree/main/packages/cra-template-safe-app) to start your Safe App, these basic requirements are already satisfied.

#### Manifest
### Manifest

It is mandatory that your app exposes a `manifest.json` file in the root dir with this structure:

```json
{
"name": "YourAppName",
"description": "A description of what your app do",
"description": "A description of what your app does",
"iconPath": "myAppIcon.svg"
}
```

> Note: iconPath it's the public relative path where the Safe will try to load your app icon. For this example, it should be https://yourAppUrl/myAppIcon.svg.
**Note:** `iconPath` is the public relative path where Safe will try to load your app icon. For this example, it should be `https://yourAppUrl/myAppIcon.svg`.

#### CORS
### CORS

At some moments we need to be able to reach the `manifest.json` from our app. To allow this it is required to enable **Cross Site Requests** by setting the **CORS** headers to the `manifest.json`.
We need to reach the `manifest.json` from our app. To allow this, it is required to enable *Cross Site Requests* by setting the *CORS* headers to the `manifest.json`.

Check failure on line 41 in safe-apps/get-started.md

View workflow job for this annotation

GitHub Actions / vale

[vale] safe-apps/get-started.md#L41 

[Microsoft.Contractions] Use 'it's' instead of 'it is'.
Raw output 
{"message": "[Microsoft.Contractions] Use 'it's' instead of 'it is'.", "location": {"path": "safe-apps/get-started.md", "range": {"start": {"line": 41, "column": 67}}}, "severity": "ERROR"}

The required headers are:

Expand All @@ -52,14 +48,14 @@ The required headers are:
"Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
```

#### React development
### React development

It is possible to use the local React development server. For this you need to set the **CORS** headers and make sure to use the same protocol (http or https) as the Safe interface you are using for testing.\
It is possible to use the local React development server. For this, you need to set the *CORS* headers and use the same protocol (http or https) as the Safe interface you use for testing.

Check failure on line 53 in safe-apps/get-started.md

View workflow job for this annotation

GitHub Actions / vale

[vale] safe-apps/get-started.md#L53 

[Microsoft.Contractions] Use 'it's' instead of 'It is'.
Raw output 
{"message": "[Microsoft.Contractions] Use 'it's' instead of 'It is'.", "location": {"path": "safe-apps/get-started.md", "range": {"start": {"line": 53, "column": 1}}}, "severity": "ERROR"}

Check failure on line 53 in safe-apps/get-started.md

View workflow job for this annotation

GitHub Actions / vale

[vale] safe-apps/get-started.md#L53 

[Vale.Spelling] Did you really mean 'http'?
Raw output 
{"message": "[Vale.Spelling] Did you really mean 'http'?", "location": {"path": "safe-apps/get-started.md", "range": {"start": {"line": 53, "column": 131}}}, "severity": "ERROR"}

Check failure on line 53 in safe-apps/get-started.md

View workflow job for this annotation

GitHub Actions / vale

[vale] safe-apps/get-started.md#L53 

[Vale.Spelling] Did you really mean 'https'?
Raw output 
{"message": "[Vale.Spelling] Did you really mean 'https'?", "location": {"path": "safe-apps/get-started.md", "range": {"start": {"line": 53, "column": 139}}}, "severity": "ERROR"}


**CORS for development**

For this we recommend to use [react-app-rewired](https://www.npmjs.com/package/react-app-rewired). To enable the library update the `scripts` section in the `package.json`:
For this, we recommend to use [react-app-rewired](https://www.npmjs.com/package/react-app-rewired). To enable the library, update the `scripts` section in the `package.json`:

```json
"scripts": {
Expand All @@ -69,7 +65,7 @@ For this we recommend to use [react-app-rewired](https://www.npmjs.com/package/r
},
```

Additionally, you need to create the `config-overrides.js` file in the root of the project to confirgure the **CORS** headers. The content of the file should be:
Additionally, create the `config-overrides.js` file in the project's root to configure the *CORS* headers. The content of the file should be:

```js
/* config-overrides.js */
Expand All @@ -82,7 +78,7 @@ module.exports = {
// Return the replacement function for create-react-app to use to generate the Webpack
// Development Server config. "configFunction" is the function that would normally have
// been used to generate the Webpack Development server config - you can use it to create
// a starting configuration to then modify instead of having to create a config from scratch.
// a starting configuration to modify instead of creating a config from scratch.
return function (proxy, allowedHost) {
// Create the default config by calling configFunction with the proxy/allowedHost parameters
const config = configFunction(proxy, allowedHost);
Expand All @@ -93,7 +89,7 @@ module.exports = {
'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
};

// Return your customised Webpack Development Server config.
// Return your customized Webpack Development Server config.
return config
}
},
Expand All @@ -102,25 +98,23 @@ module.exports = {

**SSL**

To enable SSL with `react-scripts` it is necessary to set the `HTTPS` environment variable to `true`. This can be done in the `package.json` file by adjusting the `scripts` section to:
To enable SSL with `react-scripts`, it is necessary to set the `HTTPS` environment variable to `true`. This can be done in the `package.json` file by adjusting the `scripts` section to:

Check failure on line 101 in safe-apps/get-started.md

View workflow job for this annotation

GitHub Actions / vale

[vale] safe-apps/get-started.md#L101 

[Microsoft.Contractions] Use 'it's' instead of 'it is'.
Raw output 
{"message": "[Microsoft.Contractions] Use 'it's' instead of 'it is'.", "location": {"path": "safe-apps/get-started.md", "range": {"start": {"line": 101, "column": 37}}}, "severity": "ERROR"}

```json
"scripts": {
"start": "HTTPS=true react-app-rewired start",
},
```

In the case that the SSL certificate provided by `react-scripts` is not valid, it is required to mark it as trusted in your browser. To do this, open the Safe App in a separate tab (not in the Safe interface) and accept the certificate or ignore the warning.
If the SSL certificate provided by `react-scripts` is not valid, it is required to mark it as trusted in your browser. To do this, open the Safe App in a separate tab (not in the Safe interface) and accept the certificate or ignore the warning.

Check failure on line 109 in safe-apps/get-started.md

View workflow job for this annotation

GitHub Actions / vale

[vale] safe-apps/get-started.md#L109 

[Microsoft.Contractions] Use 'isn't' instead of 'is not'.
Raw output 
{"message": "[Microsoft.Contractions] Use 'isn't' instead of 'is not'.", "location": {"path": "safe-apps/get-started.md", "range": {"start": {"line": 109, "column": 52}}}, "severity": "ERROR"}

Check failure on line 109 in safe-apps/get-started.md

View workflow job for this annotation

GitHub Actions / vale

[vale] safe-apps/get-started.md#L109 

[Microsoft.Contractions] Use 'it's' instead of 'it is'.
Raw output 
{"message": "[Microsoft.Contractions] Use 'it's' instead of 'it is'.", "location": {"path": "safe-apps/get-started.md", "range": {"start": {"line": 109, "column": 66}}}, "severity": "ERROR"}

## UI Kit

If you are creating your Safe App from scratch, we provide a reusable react components package to make it easy to build Safe Apps with a near-native look and feel while still enabling developers to use their branding in the Safe Apps.
If you are creating your Safe App from scratch, we provide a reusable react components package to build Safe Apps with a near-native look while enabling developers to use their branding in the Safe Apps.

* [Check all available components in the storybook](https://components.safe.global)
* [Check UI Kit repository](https://github.com/safe-global/safe-react-components)

## Example app

This tutorial will build a Safe App that enables us to migrate all the assets from a Safe to any other wallet in a single transaction. It doesn't include NFTs, but this is a great thing to do on your own. In addition, you will learn about smart contract wallets, multi-signature transaction flow, and batched transactions.

Find the Github repo with the complete guide [here](https://github.com/gnosis/safe-apps-sdk/tree/master/guides/drain-safe-app).
This [tutorial](https://github.com/gnosis/safe-apps-sdk/tree/master/guides/drain-safe-app) will build a Safe App that enables us to migrate all the assets from Safe to any other wallet in a single transaction. You will also learn about smart contract wallets, multi-signature transaction flow, and batched transactions.

0 comments on commit 79ca055

Please sign in to comment.