chore: update ui

argentlabs · Jul 10, 2024 · c885d2d · c885d2d
1 parent dc9459a
commit c885d2d
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 21 deletions.
diff --git a/src/app/starknetkitLatest/page.tsx b/src/app/starknetkitLatest/page.tsx
@@ -91,7 +91,12 @@ export default function StarknetkitLatest() {
               </Section>
             )}
           <Section>
-            <Flex>
+            <Flex
+              flexDirection={{
+                base: "column",
+                md: "row",
+              }}
+            >
               <AddTokenLatest />
               <AddNetworkLatest />
               <SwitchNetworkLatest />

diff --git a/src/app/starknetkitNext/page.tsx b/src/app/starknetkitNext/page.tsx
@@ -119,7 +119,14 @@ export default function StarknetkitLatest() {
           <Section>
             <SessionKeysSign />
             <SessionKeysExecute />
-            <Flex alignItems="center" gap="100">
+            <Flex
+              alignItems={{
+                base: "flex-start",
+                md: "center",
+              }}
+              gap={{ base: "5", md: "100" }}
+              flexDirection={{ base: "column", md: "row" }}
+            >
               <SessionKeysExecuteOutside />
               <SessionKeysTypedDataOutside />
             </Flex>
@@ -135,7 +142,12 @@ export default function StarknetkitLatest() {
               </Section>
             )}
           <Section>
-            <Flex>
+            <Flex
+              flexDirection={{
+                base: "column",
+                md: "row",
+              }}
+            >
               <AddTokenNext />
               <AddNetworkNext />
               <SwitchNetworkNext />

diff --git a/src/components/Actions/SessionKeysExecute.tsx b/src/components/Actions/SessionKeysExecute.tsx
@@ -136,7 +136,10 @@ const SessionKeysExecute = () => {
       p="4"
       gap="3"
       onSubmit={submitSessionTransaction}
-      w="fit-content"
+      w={{
+        base: "full",
+        md: "fit-content",
+      }}
     >
       {CHAIN_ID === constants.NetworkName.SN_MAIN ? (
         <Heading as="h2">Invoke dummy function with session keys</Heading>

diff --git a/src/components/Actions/SessionKeysExecuteOutside.tsx b/src/components/Actions/SessionKeysExecuteOutside.tsx
@@ -126,7 +126,10 @@ const SessionKeysExecuteOutside = ({}) => {
       p="4"
       gap="3"
       onSubmit={handleSubmitEFO}
-      w="fit-content"
+      w={{
+        base: "full",
+        md: "fit-content",
+      }}
     >
       <Heading as="h4">Get outside execution call</Heading>
       <Input
@@ -150,7 +153,7 @@ const SessionKeysExecuteOutside = ({}) => {
           type="submit"
           isDisabled={buttonsDisabled}
         >
-          Get execution data
+          Get data
         </Button>
 
         <Button

diff --git a/src/components/Actions/SessionKeysTypedDataOutside.tsx b/src/components/Actions/SessionKeysTypedDataOutside.tsx
@@ -4,26 +4,24 @@ import {
   provider,
 } from "@/constants"
 import { dappKey } from "@/helpers/openSessionHelper"
-import { Status } from "@/types/status"
 import { parseInputAmountToUint256 } from "@/helpers/token"
-import {
-  ArgentSessionService,
-  OffChainSession,
-  OutsideExecutionTypedDataResponse,
-  SessionDappService,
-  buildSessionAccount,
-} from "@argent/x-sessions"
-import { FC, useState } from "react"
-import { Abi, Contract, Signature, stark } from "starknet"
-import Erc20Abi from "../../abi/ERC20.json"
-import { useAtomValue } from "jotai"
 import {
   accountSessionSignatureAtom,
   sessionRequestAtom,
 } from "@/state/argentSessionState"
 import { connectorDataAtom } from "@/state/connectedWalletStarknetkitNext"
 import { lastTxStatusAtom } from "@/state/transactionState"
+import {
+  ArgentSessionService,
+  OutsideExecutionTypedDataResponse,
+  SessionDappService,
+  buildSessionAccount,
+} from "@argent/x-sessions"
 import { Button, Flex, Heading, Input } from "@chakra-ui/react"
+import { useAtomValue } from "jotai"
+import { useState } from "react"
+import { Abi, Contract, stark } from "starknet"
+import Erc20Abi from "../../abi/ERC20.json"
 
 const SessionKeysTypedDataOutside = () => {
   const accountSessionSignature = useAtomValue(accountSessionSignatureAtom)
@@ -121,7 +119,10 @@ const SessionKeysTypedDataOutside = () => {
       p="4"
       gap="3"
       onSubmit={handleSubmitEFOTypedData}
-      w="fit-content"
+      w={{
+        base: "full",
+        md: "fit-content",
+      }}
     >
       <Heading as="h2">Get outside typed data</Heading>
       <Input
@@ -145,7 +146,7 @@ const SessionKeysTypedDataOutside = () => {
           type="submit"
           isDisabled={buttonsDisabled}
         >
-          Get typed data
+          Get data
         </Button>
         <Button
           colorScheme="secondary"

diff --git a/src/components/Actions/WalletRpcMsgContainer.tsx b/src/components/Actions/WalletRpcMsgContainer.tsx
@@ -12,7 +12,14 @@ export function WalletRpcMsgContainer({
   return (
     <>
       <Heading as="h2">Wallet RPC</Heading>
-      <SimpleGrid columns={3} spacing="20px" paddingBottom="20px">
+      <SimpleGrid
+        columns={{
+          base: 1,
+          md: 3,
+        }}
+        spacing="20px"
+        paddingBottom="20px"
+      >
         <WalletRpcMessage
           message={RpcMessage.wallet_requestAccounts}
           param=""