docs: Add Tx Service data decoder guide (#489)

* Add data decoder guide * Update prerequisite * Add safe-eth-py guide * Apply PR suggestion Co-authored-by: Tanay Pant <[email protected]> * Apply PR suggestion Co-authored-by: Tanay Pant <[email protected]> * Apply PR suggestion Co-authored-by: Tanay Pant <[email protected]> * Apply PR suggestion * Apply PR suggestion --------- Co-authored-by: Tanay Pant <[email protected]>
safe-global · Jun 5, 2024 · 147742c · 147742c
1 parent a44f4e8
commit 147742c
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 40 deletions.
diff --git a/pages/core-api/api-safe-transaction-service.mdx b/pages/core-api/api-safe-transaction-service.mdx
@@ -123,7 +123,7 @@ sequenceDiagram
 `keccak256(0x19 || 0x1 || domainSeparator || safeTxHashStruct)`  
 where `safeTxHashStruct` is the `hashStruct` of a Safe transaction.
 
-The following [Guides](../core-api/transaction-service-guides/transactions.mdx) show how to create and execute Safe transactions from the Safe Transaction Service.
+Follow our [guides](../core-api/transaction-service-guides/transactions.mdx) to learn how to create and execute Safe transactions using the Safe Transaction Service.
 
 ## Off-chain messages 
 
@@ -151,7 +151,7 @@ sequenceDiagram
     SafeTransactionService-->>-B: Http(200) 
 ```
 
-The following [Guides](../core-api/transaction-service-guides/messages.mdx) show how to create and sign messages from the Safe Transaction Service.
+Follow our [guides](../core-api/transaction-service-guides/messages.mdx) to learn how to create and sign messages using the Safe Transaction Service.
 
 ## Transaction decoder
 
@@ -166,45 +166,8 @@ Supported and configured networks on `safe-eth-py`:
 - [**Etherscan** configured networks](https://github.com/safe-global/safe-eth-py/blob/master/gnosis/eth/clients/etherscan_client.py#L24)
 - [**Blockscout** configured networks](https://github.com/safe-global/safe-eth-py/blob/master/gnosis/eth/clients/blockscout_client.py#L21)
 
-### Endpoints
-
-- `POST /v1/data-decoder/` decodes a transaction `data` passed on the body for a `to` contract address.
-
-**Example transaction decoder**
-
-```bash
-curl -X 'POST' \
-  'https://safe-transaction-sepolia.safe.global/api/v1/data-decoder/' \
-  -H 'accept: application/json' \
-  -H 'Content-Type: application/json' \
-  -H 'X-CSRFToken: Gx1aRa8kIJGIAfReLAWwr9Q6dHv22dFt7VprdipLryHcxpfhk9aV0UDAhNz8gGYz' \
-  -d '{
-  "data": "0x095ea7b3000000000000000000000000e6fc577e87f7c977c4393300417dcc592d90acf8ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff",
-  "to": "0x4127839cdf4F73d9fC9a2C2861d8d1799e9DF40C"
-}'
-```
-
-Output:
-
-```
-{
-  "method": "approve",
-  "parameters": [
-    {
-      "name": "spender",
-      "type": "address",
-      "value": "0xe6fC577E87F7c977c4393300417dCC592D90acF8"
-    },
-    {
-      "name": "value",
-      "type": "uint256",
-      "value": "115792089237316195423570985008687907853269984665640564039457584007913129639935"
-    }
-  ]
-}
-```
 
-This decoded data is also included as `dataDecoded` in the `GET /multisig-transactions`, `GET /module-transactions` and `GET /all-transactions` endpoints. 
+Follow our [guides](../core-api/transaction-service-guides/data-decoder.mdx) to learn how to decode contract interaction data using the Safe Transaction Service for a transaction.
 
 ## Running and Maintenance
 

diff --git a/pages/core-api/transaction-service-guides/_meta.json b/pages/core-api/transaction-service-guides/_meta.json
@@ -1,5 +1,6 @@
 {
   "transactions": "Transactions",
+  "data-decoder": "Data decoder",
   "messages": "Messages",
   "delegates": "Delegates"
 }
diff --git a/pages/core-api/transaction-service-guides/data-decoder.mdx b/pages/core-api/transaction-service-guides/data-decoder.mdx
@@ -0,0 +1,109 @@
+import { Tabs, Steps } from 'nextra/components'
+
+# Transaction data decoder
+
+This guide shows how to use the Safe Transaction Service API to decode transaction data for contract interactions.
+
+The different steps are implemented using [Curl](https://github.com/curl/curl) requests and the [Safe\{Core\} SDK](https://github.com/safe-global/safe-core-sdk) TypeScript library.
+
+## Prerequisites
+
+1. [Node.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm#using-a-node-version-manager-to-install-nodejs-and-npm) when using the Safe\{Core\} SDK.
+2. Have a Safe account.
+
+## Steps
+
+<Steps>
+  ### Install dependencies
+
+  {/* <!-- vale off --> */}
+
+  <Tabs items={['TypeScript', 'Python']}>
+    <Tabs.Tab>
+      ```bash
+      yarn add @safe-global/api-kit
+      ```
+    </Tabs.Tab>
+    <Tabs.Tab>
+      ```bash
+      pip install safe-eth-py web3
+      ```
+    </Tabs.Tab>
+  </Tabs>
+
+  {/* <!-- vale on --> */}
+
+  ### Imports
+
+  {/* <!-- vale off --> */}
+
+  <Tabs items={['TypeScript', 'Python']}>
+    <Tabs.Tab>
+      ```typescript
+      import SafeApiKit from '@safe-global/api-kit'
+      ```
+    </Tabs.Tab>
+    <Tabs.Tab>
+      ```python
+      from eth_typing import HexStr
+      from gnosis.eth import EthereumClient, EthereumNetwork
+      from gnosis.safe.api.transaction_service_api import TransactionServiceApi
+      ```
+    </Tabs.Tab>
+  </Tabs>
+
+  {/* <!-- vale on --> */}
+
+  ### Decode transaction data
+
+  {/* <!-- vale off --> */}
+
+  <Tabs items={['TypeScript', 'Python', 'Curl']}>
+    <Tabs.Tab>
+      ```typescript
+      // Initialize the API Kit
+      const apiKit = new SafeApiKit({
+        chainId: 11155111n
+      })
+
+      const data = "0x095ea7b3000000000000000000000000e6fc577e87f7c977c4393300417dcc592d90acf8ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff"
+      const dataDecoded = await apiKit.decodeData(data);
+
+      // This decoded data is also included as dataDecoded in the response of the apiKit's getMultisigTransactions, getModuleTransactions, and getAllTransactions methods.
+      ```
+    </Tabs.Tab>
+    <Tabs.Tab>
+      ```python
+      # Instantiate the Transaction Service API
+      ethereum_client = EthereumClient(config.get("RPC_URL"))
+      transaction_service_api = TransactionServiceApi(
+            EthereumNetwork.SEPOLIA,
+            ethereum_client=ethereum_client
+        )
+
+      # Get decoded data
+      data = HexStr("0x095ea7b3000000000000000000000000e6fc577e87f7c977c4393300417dcc592d90acf8ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff")
+      to = "0x4127839cdf4F73d9fC9a2C2861d8d1799e9DF40C" # Optional
+      data_decoded = transaction_service_api.decode_data(data, to)
+
+      # This decoded data is also included as dataDecoded in the response of the get_safe_transaction and get_transactions methods of the TransactionServiceApi.
+      ```
+    </Tabs.Tab>
+    <Tabs.Tab>
+      ```bash
+      curl -X 'POST' \
+        'https://safe-transaction-sepolia.safe.global/api/v1/data-decoder/' \
+        -H 'accept: application/json' \
+        -H 'Content-Type: application/json' \
+        -H 'X-CSRFToken: Gx1aRa8kIJGIAfReLAWwr9Q6dHv22dFt7VprdipLryHcxpfhk9aV0UDAhNz8gGYz' \
+        -d '{
+            "data": "0x095ea7b3000000000000000000000000e6fc577e87f7c977c4393300417dcc592d90acf8ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff"
+        }'
+
+      # This decoded data is also included as dataDecoded in the GET /multisig-transactions, GET /module-transactions, and GET /all-transactions endpoints.
+      ```
+    </Tabs.Tab>
+  </Tabs>
+
+   {/* <!-- vale on --> */}
+ </Steps>