add changeset

.changeset/empty-rice-drum.md

@@ -0,0 +1,5 @@
+---
+'@gnosis.pm/cra-template-safe-app': patch
+---
+
+dep bump

guides/drain-safe-app/02-bootstrap-the-app.md → guides/drain-safe-app/01-bootstrap-the-app.md

@@ -1,6 +1,6 @@
 # Bootstrap the app
 
-We have a create-react-app template that allows you to get a basic skeleton for the app. It includes React, Typescript, ESLint, Prettier, Material UI, and styled-components. To use it, run this command in your terminal:
+We prepared a create-react-app template that allows you to get a basic skeleton for the app. It includes React, Typescript, ESLint, Prettier, Material UI, and styled-components. To use it, run this command in your terminal:
 
 ```
 npx create-react-app drain-safe --template @gnosis.pm/cra-template-safe-app
@@ -40,7 +40,7 @@ drain-safe
 └── yarn.lock
 ```
 
-Above is a typical React application structure, so everything should be familiar. However, there's one file that's not that common: `setupProxy.js`. When loading the app inside the Safe web interface, we get the app information (name, description, logo) from the `https://app-url.com/manifest.json` file. Because the app is hosted on a different domain, you need to enable [Cross-Origin Resource Sharing](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) for this file. This file does exactly that by setting the necessary headers for the development server. When you deploy an app, you will need to set up the same headers on the hosting platform.
+Above is a typical React application structure, so everything should be familiar. However, there's one file that's not that common: `setupProxy.js`. When loading the app inside the Safe web interface, it fetches the app information (name, description, logo) from the `https://app-url.com/manifest.json` file. Because the app is hosted on a different domain, you need to enable [Cross-Origin Resource Sharing](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) for this file. This file does exactly that by setting the necessary headers for the development server. When you deploy an app, you will need to set up the same headers on the hosting platform.
 
 # Load the app inside the Safe interface
 
@@ -114,3 +114,5 @@ const ERC_20_ABI: { [key: string]: AbiItem } = {
 
 export { ERC_20_ABI };
 ```
+
+In the next section you'll learn how to fetch and display assets owned by the Safe - [Display Safe Assets](/guides/drain-safe-app/02-display-safe-assets.md).

guides/drain-safe-app/03-display-safe-assets.md → guides/drain-safe-app/02-display-safe-assets.md

@@ -33,7 +33,7 @@ function useSafeBalances(sdk: SafeAppsSDK): [TokenBalance[], boolean] {
 export { useSafeBalances };
 ```
 
-Here we create a hook `useSafeBalance` that calls the SDK function `sdk.safe.experimental_getBalances` and filters out tokens with zero fiat balance.
+This is `useSafeBalance` hook that calls the SDK function `sdk.safe.experimental_getBalances` and filters out tokens with zero fiat balance.
 
 You should import this hook into `src/App.tsx` and use it to get the list of assets owned by the Safe. Then, remove the documentation link, `submitTx` function and comment out the button that used the submit function and add the hook:
 
@@ -74,7 +74,7 @@ const SafeApp = (): React.ReactElement => {
 export default SafeApp;
 ```
 
-If you load the App inside the Safe, you should see Safe's assets list in the console. Let's make a Table component that displays the assets.
+If you load the App inside the Safe, you should see Safe's assets list in the console. Create a Table component that displays the assets.
 
 `src/components/BalancesTable.tsx`:
 
@@ -135,7 +135,7 @@ function Balances({ balances }: { balances: TokenBalance[] }): JSX.Element {
 export default Balances;
 ```
 
-We iterate over the array of balances and create corresponding DOM elements. We also introduced two functions:
+It iterates over the array of balances and creates corresponding DOM elements. It also includes two functions:
 
 - `formatTokenValue` - converts the token amount to a human-readable value with decimals
 - `formatFiatValue` - converts the fiat value according to user's locale
@@ -157,4 +157,4 @@ Now you should be able to see the assets table when you load the App.
 
 ![Screenshot display the assets](/guides/drain-safe-app/images/assets-table.png)
 
-Congrats! You're halfway through - the only thing left is generating the transaction data for transfers, which we'll cover in the next section.
+Congrats! You're halfway through - the only thing left is generating the transaction data for transfers, which you'll learn in the next section - [Transfer assets](/guides/drain-safe-app/03-transfer-assets.md).

guides/drain-safe-app/04-transfer-assets.md → guides/drain-safe-app/03-transfer-assets.md

@@ -1,6 +1,6 @@
 # Transfer assets from the safe
 
-You have everything ready for the final step: transferring assets outside the Safe. To get pieces together, we'll need:
+You have everything ready for the final step: transferring assets outside the Safe. To get pieces together, you'll need:
 
 1. A button that will trigger the transfer
 2. An input for the recipient address
@@ -75,7 +75,7 @@ Now, the only thing missing is the function that creates transactions. You can p
 }
 ```
 
-One feature that differentiates smart wallets from EOA accounts is that you can batch multiple transactions into one; the function accepts an array of transactions. This is why we're able to transfer all the assets in a single transaction. First, let's work on a function that generates transactions.
+One feature that differentiates smart wallets from EOA accounts is that you can batch multiple transactions into one; the function accepts an array of transactions. This is why it's possible to transfer all the assets in a single transaction. To use it, you need to encode the transaction data for each transfer.
 
 Create a file `src/api/transfers.ts`:
 
@@ -123,8 +123,7 @@ const handleTransfer = async (): Promise<void> => {
 };
 ```
 
-We added a call to `sdk.txs.send`, which is async and returns an object with the `safeTxHash` property.
-It corresponds to the Safe Transaction hash, and it is different from the regular ethereum transaction hash. We'll cover it in the next section.
+The `sdk.txs.send` is async and returns an object with the `safeTxHash` property. It corresponds to the Safe Transaction hash, and it is different from the regular ethereum transaction hash. We'll cover it in the next section.
 
 Now, if you click on the button, you should see a modal in the Safe web app.
 

guides/drain-safe-app/01-introduction.md → guides/drain-safe-app/README.md

@@ -31,9 +31,9 @@ This tutorial will build a Safe App that enables us to migrate all the assets fr
 
 The tutorial contains several sections:
 
-- [Bootstrap the Safe App](/guides/drain-safe-app/02-bootstrap-the-app.md)
-- [Display Safe assets](/guides/drain-safe-app/03-display-safe-assets.md)
-- [Transfer Safe assets](/guides/drain-safe-app/04-transferring-assets.md)
+- [Bootstrap the Safe App](/guides/drain-safe-app/01-bootstrap-the-app.md)
+- [Display Safe assets](/guides/drain-safe-app/02-display-safe-assets.md)
+- [Transfer Safe assets](/guides/drain-safe-app/03-transferring-assets.md)
 
 # Prerequisites
 
@@ -43,4 +43,4 @@ We'll assume that you are familiar with TypeScript (JavaScript), React, and Ethe
 
 If you need help, you can reach Gnosis Safe developers in the #safe-developers channel in https://chat.gnosis.io/ or create a discussion in https://github.com/gnosis/safe-apps-sdk/discussions.
 
-Let's jump into the first section - [Bootstrap the Safe App](/guides/drain-safe-app/02-bootstrap-the-app.md)
+Let's jump into the first section - [Bootstrap the Safe App](/guides/drain-safe-app/01-bootstrap-the-app.md)