Add collapsible sections for different views

0xsequence · Nov 29, 2023 · 4cafc05 · 4cafc05
1 parent 4aa10dd
commit 4cafc05
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 37 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"