safe-global · tanay1337 · Oct 27, 2023 · Oct 27, 2023 · Oct 27, 2023 · Oct 27, 2023
diff --git a/.gitbook.yaml b/.gitbook.yaml
@@ -12,3 +12,6 @@ redirects:
   safe-smart-account/security/security-audits: safe-smart-account/security-audits.md
   safe-smart-account/security/bug-bounty-program: miscellaneous/bug-bounty-program.md
   safe-smart-account/security/past-paid-bounties: miscellaneous/past-paid-bounties.md
+  safe-apps-sdk/safe-apps: safe-apps/README.md
+  safe-apps-sdk/overview: safe-apps/README.md
+  safe-apps-sdk/example-safe-app: safe-apps/get-started.md
diff --git a/.github/styles/Vocab/default/accept.txt b/.github/styles/Vocab/default/accept.txt
@@ -5,18 +5,25 @@ Safe Module
 Safe Modules
 Safe Guards
 Safe Transaction Service
+Safe Apps SDK
+Safe App
+Safe Apps
 Blockchain
 blockchain
 blockchains
 onchain
 offchain
 Offchain
 multisig
+dapp
+dapps
 Auth Kit
 Protocol Kit
 Relay Kit
 Onramp Kit
 API Kit
+UI Kit
+IPFS
 Onramp
 Safe Transaction Service
 Transaction Service
@@ -33,6 +40,13 @@ API
 ABI
 ABIs
 SDK
+sdk
+npm
+CORS
+CRA
+HTTP
+HTTPS
+Blocknative
 ETH
 EIP
 ERC
@@ -41,6 +55,8 @@ WSGI
 Sourcify
 Etherscan
 Blockscout
+delist
+wagmi
 crypto
 cryptocurrencies
 Ethereum

diff --git a/SUMMARY.md b/SUMMARY.md
@@ -47,15 +47,11 @@
 
 ## Safe Apps SDK
 
-* [Safe Apps SDK](safe-core-sdk/safe-apps/README.md)
+* [Overview](safe-apps/README.md)
 
-* [Overview](safe-core-sdk/safe-apps/overview.md)
+* [Getting started](safe-apps/get-started.md)
 
-* [Get started](safe-core-sdk/safe-apps/get-started.md)
-
-* [Release](safe-core-sdk/safe-apps/release.md)
-* 
-* [Safe App example](safe-core-sdk/safe-apps/example-safe-app.md)
+* [Release](safe-apps/release.md)
 
 ## Reference
 

diff --git a/safe-core-sdk/safe-apps/overview.md → safe-apps/README.md b/safe-core-sdk/safe-apps/overview.md → safe-apps/README.md
@@ -1,18 +1,23 @@
-# Safe Apps SDK Packages
+# Safe Apps SDK
 
-You can find several packages on [our developer tools](https://github.com/safe-global/safe-apps-sdk) to make it easier to integrate third-party applications (Safe Apps) with [Safe](https://app.safe.global). Check the following diagram to see which package is more convenient for you:
-
-<figure><img src="../../.gitbook/assets/diagram-safe-apps.png" width="100%" alt="" /></figure>
+The Safe Apps SDK helps developers to build their dapps into the Safe{Wallet}. It turns a dapp into an HTML iframe component that can be accessed through Safe. This SDK provides extensive developer tooling to make it easy to create, test, and integrate Safe Apps into Safe. This includes a design system, reusable components, and a Safe App SDK that facilitates communication between the Safe App and Safe.
 
 ## Packages
 
+Here are several packages to make it easier to integrate third-party applications (Safe Apps) with [Safe](https://app.safe.global). Check the following diagram to see which package is suitable for you:
+
+<figure><img src="../../.gitbook/assets/diagram-safe-apps.png" width="100%" alt="" /></figure>
+
 | Package                                                                                                          | Version                                                                                                                                  | Description                                                                                                                                                                                                                                                                                        |
 | ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [cra-template-safe-app](https://github.com/safe-global/safe-apps-sdk/tree/main/packages/cra-template-safe-app)   |                                                                                                                                          | CRA template to quickly bootstrap a Safe App. Use this package to start a new Safe App from scratch using React.                                                                                                                                                                                   |
+| [cra-template-safe-app](https://github.com/safe-global/safe-apps-sdk/tree/main/packages/cra-template-safe-app)   |                                                                                                                                          | CRA (Create React App) template to bootstrap a Safe App. Use this package to start a new Safe App from scratch using React.                                                                                                                                                                                   |
 | [safe-apps-react-sdk](https://github.com/safe-global/safe-apps-sdk/tree/main/packages/safe-apps-react-sdk)       | [![npm](https://img.shields.io/npm/v/@safe-global/safe-apps-react-sdk)](https://www.npmjs.com/package/@safe-global/safe-apps-react-sdk)  | A wrapper of [safe-apps-sdk](https://github.com/safe-global/safe-apps-sdk/tree/main/packages/safe-apps-sdk) with helpful React Hooks.                                                                                                                                                              |
 | [safe-apps-sdk](https://github.com/safe-global/safe-apps-sdk/tree/main/packages/safe-apps-sdk)                   | [![npm](https://img.shields.io/npm/v/@safe-global/safe-apps-sdk)](https://www.npmjs.com/package/@safe-global/safe-apps-sdk)              | JavaScript SDK. This is the base package for all integrations.                                                                                                                                                                                                                                     |
-| [safe-apps-provider](https://github.com/safe-global/safe-apps-sdk/tree/main/packages/safe-apps-provider)         |  [![npm](https://img.shields.io/npm/v/@safe-global/safe-apps-provider)](https://www.npmjs.com/package/@safe-global/safe-apps-provider)   | A generic provider that can be used with common web3 libraries. (e.g. web3.js or Ethers)                                                                                                                                                                                                           |
+| [safe-apps-provider](https://github.com/safe-global/safe-apps-sdk/tree/main/packages/safe-apps-provider)         |  [![npm](https://img.shields.io/npm/v/@safe-global/safe-apps-provider)](https://www.npmjs.com/package/@safe-global/safe-apps-provider)   | A generic provider that can be used with common web3 libraries. For example, web3.js or Ethers.                                                                                                                                                                                                           |
 | [safe-apps-web3modal](https://github.com/safe-global/safe-apps-sdk/tree/main/packages/safe-apps-web3modal)       |  [![npm](https://img.shields.io/npm/v/@safe-global/safe-apps-web3modal)](https://www.npmjs.com/package/@safe-global/safe-apps-web3modal) | A wrapper around [Web3Modal](https://github.com/Web3Modal/web3modal) that would automatically connect to the Safe when the app is loaded in the Safe Apps section.                                                                                                                                 |
-| [safe-apps-wagmi](https://github.com/safe-global/safe-apps-sdk/tree/main/packages/safe-apps-wagmi)               |                                                                                                                                          | A [wagmi](https://github.com/wagmi-dev/wagmi) connector for Safe Apps                                                                                                                                                                                                                              |
-| [@web3-onboard/gnosis](https://github.com/blocknative/web3-onboard/tree/v2-web3-onboard-develop/packages/gnosis) |                                                                                                                                          | Blocknative included Safe App support in [@web3-onboard](https://github.com/blocknative/web3-onboard) v1.26.0. If you are already using this package you can [check here](https://github.com/blocknative/web3-onboard/blob/v2-web3-onboard-develop/packages/gnosis/README.md) how to configure it. |
-| [@web3-react/gnosis-safe](https://github.com/Uniswap/web3-react/tree/main/packages/gnosis-safe)                  |                                                                                                                                          | [web3-react](https://github.com/Uniswap/web3-react) already includes a connector for Safe Apps by default. You can check at their docs how to use it.                                                                                                                                              |
+| [safe-apps-wagmi](https://github.com/safe-global/safe-apps-sdk/tree/main/packages/safe-apps-wagmi)               |                                                                                                                                          | A [wagmi](https://github.com/wagmi-dev/wagmi) connector for Safe Apps.                                                                                                                                                                                                                              |
+| [@web3-onboard/gnosis](https://github.com/blocknative/web3-onboard/tree/v2-web3-onboard-develop/packages/gnosis) |                                                                                                                                          | Blocknative included Safe App support in [@web3-onboard](https://github.com/blocknative/web3-onboard) v1.26.0. If you are already using this package, you can [check here](https://github.com/blocknative/web3-onboard/blob/v2-web3-onboard-develop/packages/gnosis/README.md) how to configure it. |
+| [@web3-react/gnosis-safe](https://github.com/Uniswap/web3-react/tree/main/packages/gnosis-safe)                  |                                                                                                                                          | [web3-react](https://github.com/Uniswap/web3-react) already includes a connector for Safe Apps by default. You can check their docs on how to use it.                                                                                                                                              |
+
+
+{% hint style="warning" %} Safe Apps are not owned, controlled, maintained, or audited by Safe. Safe can list or delist apps from Safe{Wallet} at its sole discretion. {% endhint %}
diff --git a/safe-apps/get-started.md b/safe-apps/get-started.md
@@ -0,0 +1,120 @@
+---
+description: Basic resources to start creating Safe Apps
+---
+
+# Getting started
+
+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
+
+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}. You will find integrations with common packages like `Web3Modal`, Blocknative onboard.js, and `web3-react` in these packages.
+
+For those creating a new dapp, using the [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.
+
+## Basic requirements
+
+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 satisfied.
+
+### Manifest
+
+It is mandatory that your app exposes a `manifest.json` file in the root directory with this structure:
+
+```json
+{
+  "name": "YourAppName",
+  "description": "A description of what your app does",
+  "iconPath": "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
+
+Safe needs to reach the `manifest.json` from the app. To allow this, it is required to enable *Cross Site Requests* by setting the *CORS* headers to the `manifest.json`.
+
+The required headers are:
+
+```
+"Access-Control-Allow-Origin": "\*",
+"Access-Control-Allow-Methods": "GET",
+"Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
+```
+
+### React development
+
+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.
+
+
+**CORS for development**
+
+For this, 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": {
+  "start": "react-app-rewired start",
+  "build": "react-app-rewired build",
+  "test": "react-app-rewired test"
+},
+```
+
+Also, 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 */
+
+module.exports = {
+  // The function to use to create a webpack dev server configuration when running the development
+  // server with 'npm run start' or 'yarn start'.
+  // Example: set the dev server to use a specific certificate in https.
+  devServer: function (configFunction) {
+    // 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 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);
+
+      config.headers = {
+        'Access-Control-Allow-Origin': '*',
+        'Access-Control-Allow-Methods': 'GET',
+        'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
+      };
+
+      // Return your customized Webpack Development Server config.
+      return config
+    }
+  },
+}
+```
+
+**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:
+
+```json
+"scripts": {
+  "start": "HTTPS=true react-app-rewired start",
+},
+```
+
+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.
+
+## UI Kit
+
+Safe offers a react components package if you are creating your Safe App from scratch. This helps 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](https://github.com/gnosis/safe-apps-sdk/tree/master/guides/drain-safe-app) will build a Safe App that enables migrating 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.