From 4cafc05a85f2f659358865b60207ae74cbc30754 Mon Sep 17 00:00:00 2001
From: Agusx1211 <agusgit@pm.me>
Date: Wed, 29 Nov 2023 20:35:08 +0000
Subject: [PATCH] Add collapsible sections for different views

---
 src/App.tsx                                   | 32 ++++++++++++-------
 src/components/views/CallContractsView.tsx    |  5 ---
 src/components/views/SendERC1155View.tsx      |  5 ---
 src/components/views/SendERC20View.tsx        |  6 ----
 src/components/views/SendTransactionsView.tsx |  5 ---
 src/components/views/SignMessageView.tsx      |  5 ---
 6 files changed, 21 insertions(+), 37 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index c965436..c0c743d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { Box, Text, Divider, Button, Spinner, Modal } from '@0xsequence/design-system'
+import { Box, Text, Divider, Button, Spinner, Modal, Collapsible } from '@0xsequence/design-system'
 
 import { router, sequence } from './main'
 
@@ -146,16 +146,26 @@ function App() {
         <Box>{fetchWalletAddressError && <Text>Error fetching wallet address: {fetchWalletAddressError}</Text>}</Box>
         <Divider background="buttonGlass" />
         <ListSessionsView />
-        <Divider background="buttonGlass" />
-        <SendTransactionsView />
-        <Divider background="buttonGlass" />
-        <SendERC20View />
-        <Divider background="buttonGlass" />
-        <SendERC1155View />
-        <Divider background="buttonGlass" />
-        <SignMessageView />
-        <Divider background="buttonGlass" />
-        <CallContractsView />
+        <Collapsible marginY={"3"} label="Send native token transaction">
+          <Divider background="buttonGlass" />
+          <SendTransactionsView />
+        </Collapsible>
+        <Collapsible marginY={"3"} label="Send ERC20 transaction">
+          <Divider background="buttonGlass" />
+          <SendERC20View />
+        </Collapsible>
+        <Collapsible marginY={"3"} label="Send ERC1155 transaction">
+          <Divider background="buttonGlass" />
+          <SendERC1155View />
+        </Collapsible>
+        <Collapsible marginY={"3"} label="Sign a message">
+          <Divider background="buttonGlass" />
+          <SignMessageView />
+        </Collapsible>
+        <Collapsible marginY={"3"} label="Call contracts">
+          <Divider background="buttonGlass" />
+          <CallContractsView />
+        </Collapsible>
       </Box>
     </>
   )
diff --git a/src/components/views/CallContractsView.tsx b/src/components/views/CallContractsView.tsx
index abfa620..1d96c3e 100644
--- a/src/components/views/CallContractsView.tsx
+++ b/src/components/views/CallContractsView.tsx
@@ -41,11 +41,6 @@ export function CallContractsView() {
   
   return (
     <Box>
-      <Box marginBottom="5">
-        <Text variant="normal" color="text100" fontWeight="bold">
-          Call any contract
-        </Text>
-      </Box>
       <Box marginTop="5">
         <TextInput
           name="callContractAddress"
diff --git a/src/components/views/SendERC1155View.tsx b/src/components/views/SendERC1155View.tsx
index 2a7aebb..beddf54 100644
--- a/src/components/views/SendERC1155View.tsx
+++ b/src/components/views/SendERC1155View.tsx
@@ -151,11 +151,6 @@ export function SendERC1155View() {
 
   return (
     <Box>
-      <Box marginBottom="5">
-        <Text variant="normal" color="text100" fontWeight="bold">
-          Send ERC1155 Tokens
-        </Text>
-      </Box>
       <Box marginBottom="5">
         <TextInput
           type="text"
diff --git a/src/components/views/SendERC20View.tsx b/src/components/views/SendERC20View.tsx
index 809eb69..c735332 100644
--- a/src/components/views/SendERC20View.tsx
+++ b/src/components/views/SendERC20View.tsx
@@ -92,12 +92,6 @@ export function SendERC20View() {
 
   return (
     <Box>
-      <Box marginBottom="5">
-        <Text variant="normal" color="text100" fontWeight="bold">
-          Send ERC20 Token
-        </Text>
-      </Box>
-
       <Box marginTop="5">
         <Select
           name="token"
diff --git a/src/components/views/SendTransactionsView.tsx b/src/components/views/SendTransactionsView.tsx
index e8a3b75..7a031a7 100644
--- a/src/components/views/SendTransactionsView.tsx
+++ b/src/components/views/SendTransactionsView.tsx
@@ -45,11 +45,6 @@ export function SendTransactionsView() {
   
   return (
     <Box>
-      <Box marginBottom="5">
-        <Text variant="normal" color="text100" fontWeight="bold">
-          Send native token transaction
-        </Text>
-      </Box>
       <Text variant="normal" fontWeight="bold">
         Native token balance: {ethers.utils.formatEther(nativeTokenBalance || 0)} MATIC
       </Text>
diff --git a/src/components/views/SignMessageView.tsx b/src/components/views/SignMessageView.tsx
index fba07a7..c202b27 100644
--- a/src/components/views/SignMessageView.tsx
+++ b/src/components/views/SignMessageView.tsx
@@ -16,11 +16,6 @@ export function SignMessageView() {
 
   return (
     <Box>
-      <Box marginBottom="5">
-        <Text variant="normal" color="text100" fontWeight="bold">
-          Sign message
-        </Text>
-      </Box>
       <TextInput
         name="signMessageText"
         type="text"