ghostchain/ghost-lite
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

simple mobile screen adaptiveness added

Browse Source 
Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>
This commit is contained in:
Uncle Fatso 2025-07-23 15:33:56 +03:00
parent c8c1ef2739
commit 1120b710a6
Signed by: f4ts0
GPG Key ID: 565F4F2860226EBB
7 changed files with 81 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "ghost-lite", "name": "ghost-lite",
"version": "0.0.18", "version": "0.0.19",
"description": "Web application for Ghost and Casper chain.", "description": "Web application for Ghost and Casper chain.",
"author": "Uncle f4ts0 <f4ts0@ghostchain.io>", "author": "Uncle f4ts0 <f4ts0@ghostchain.io>",
"maintainers": [ "maintainers": [

8
src/components/ChainSelect.tsx
View File

@ -69,7 +69,7 @@ export const ChainSelect = () => {
const api = select.connect(state, send, normalizeProps) const api = select.connect(state, send, normalizeProps)
return ( return (
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2 w-full items-end">
<Select <Select
value={state.context.value[0]} value={state.context.value[0]}
onValueChange={(chainId) => { onValueChange={(chainId) => {
@ -78,7 +78,7 @@ export const ChainSelect = () => {
}} }}
> >
<SelectTrigger <SelectTrigger
className={"text-muted-foreground w-[200px]"} className={"text-muted-foreground sm:w-[200px] w-full"}
data-testid="chain-select" data-testid="chain-select"
> >
<SelectValue placeholder="Select Chain" /> <SelectValue placeholder="Select Chain" />
@ -93,8 +93,8 @@ export const ChainSelect = () => {
</Select> </Select>
{state.context.value[0] && ( {state.context.value[0] && (
isConnected isConnected
? <div className="text-center text-sm text-secondary font-bold tracking-wide bg-accent rounded">Connected</div> ? <div className="text-center text-sm text-secondary font-bold tracking-wide bg-accent rounded sm:w-[200px] w-full">Connected</div>
: <div className="text-center text-sm text-secondary font-bold tracking-wide bg-destructive rounded">Connecting...</div> : <div className="text-center text-sm text-secondary font-bold tracking-wide bg-destructive rounded sm:w-[200px] w-full">Connecting...</div>
)} )}
</div> </div>
) )

4
src/components/Header.tsx
View File

@ -19,8 +19,8 @@ export const Header = () => {
return ( return (
<div className="flex flex-row w-full justify-between"> <div className="flex sm:flex-row flex-col gap-4 justify-between items-center pb-6 sm:w-full w-[85%] self-center">
<h2 className="text-3xl font-semibold"> <h2 className="sm:text-3xl text-2xl font-semibold w-full">
{currentPath} {currentPath}
</h2> </h2>
<ChainSelect /> <ChainSelect />

27
src/containers/AddressBook.tsx
View File

@ -28,7 +28,7 @@ const AddressRecord: React.FC<AddressRecordProps> = ({ name, address, removeReco
return ( return (
<AccordionItem className="bg-muted rounded px-4" value={name}> <AccordionItem className="bg-muted rounded px-4" value={name}>
<AccordionTrigger className="w-full hover:no-underline"> <AccordionTrigger className="w-full hover:no-underline">
<div className="flex flex-row items-center gap-2 w-[90%] justify-between"> <div className="w-[90%] sm:text-base text-xs overflow-hidden whitespace-nowrap overflow-ellipsis text-left">
{name} {name}
</div> </div>
</AccordionTrigger> </AccordionTrigger>
@ -36,22 +36,22 @@ const AddressRecord: React.FC<AddressRecordProps> = ({ name, address, removeReco
<Button <Button
variant="secondary" variant="secondary"
size="full" size="full"
className="flex-1 text-accent text-xs" className="flex-1 text-accent flex text-xs sm:flex hidden"
onClick={() => openTransfer({ address })} onClick={() => openTransfer({ address })}
> >
<Send className="w-4 h-4" /> <Send className="w-4 h-4 mr-1" />
</Button> </Button>
<Input <Input
readOnly readOnly
value={address} value={address}
aria-label={name} aria-label={name}
type="text" type="text"
className="w-[300px] flex-6" className="sm:w-[300px] flex-6"
/> />
<Button <Button
variant="destructive" variant="destructive"
size="full" size="full"
className="flex-2 text-accent text-xs" className="flex-2 text-accent text-xs sm:flex hidden"
onClick={() => removeRecord({ name })} onClick={() => removeRecord({ name })}
> >
<Trash className="w-4 h-4 mr-2" /> <Trash className="w-4 h-4 mr-2" />
@ -89,9 +89,12 @@ export const AddressBook = () => {
return return
} }
try { try {
ss58Decode(address) const [, prefix] = ss58Decode(address)
if (prefix !== 1995 && prefix !== 1996) {
throw ""
}
} catch (e) { } catch (e) {
setError("Incorrect Ghost address provided") setError("Incorrect Ghost or Casper address provided")
return return
} }
const newRecord = { name, address } const newRecord = { name, address }
@ -111,7 +114,7 @@ export const AddressBook = () => {
} }
return ( return (
<Accordion type="multiple" className="w-[500px] h-fit flex flex-col flex-1 gap-4 justify-center self-center py-8"> <Accordion type="multiple" className="sm:w-[500px] w-[85%] h-fit flex flex-col flex-1 gap-4 justify-center self-center py-2">
{addressBook.map(({ name, address }: AddressBookRecord, idx: number) => ( {addressBook.map(({ name, address }: AddressBookRecord, idx: number) => (
<AddressRecord <AddressRecord
key={idx} key={idx}
@ -121,14 +124,14 @@ export const AddressBook = () => {
openTransfer={openTransfer} openTransfer={openTransfer}
/> />
))} ))}
<div className="bg-muted flex flex-col gap-2 w-full rounded px-4 py-6"> <div className="bg-muted flex flex-col sm:gap-2 gap-4 w-full rounded px-4 py-6">
<div className="flex flex-row gap-4"> <div className="flex sm:flex-row flex-col gap-4">
<Input <Input
value={name} value={name}
onChange={e => setName(e.target.value)} onChange={e => setName(e.target.value)}
aria-label="New Name" aria-label="New Name"
type="text" type="text"
className="w-full" className="w-full sm:text-base text-xs sm:placeholder:text-base placeholder:text-xs"
placeholder="Record Name" placeholder="Record Name"
/> />
<Input <Input
@ -136,7 +139,7 @@ export const AddressBook = () => {
onChange={e => setAddress(e.target.value)} onChange={e => setAddress(e.target.value)}
aria-label="New Address" aria-label="New Address"
type="text" type="text"
className="w-full" className="w-full sm:text-base text-xs sm:placeholder:text-base placeholder:text-xs"
placeholder="Record Address" placeholder="Record Address"
/> />
</div> </div>

2
src/containers/App.tsx
View File

@ -17,7 +17,7 @@ export const App = () => {
<MetadataProviderProvider> <MetadataProviderProvider>
<Layout> <Layout>
<Sidebar /> <Sidebar />
<div className="w-full h-full flex flex-col px-6 py-8"> <div style={{ maxWidth: "calc(100% - 100px)"}} className="w-full h-full flex flex-col sm:px-6 px-2 sm:py-8 py-2">
<Header /> <Header />
<Routes> <Routes>
<Route path="/health" element={<HealthCheck />} /> <Route path="/health" element={<HealthCheck />} />

39
src/containers/HealthCheck.tsx
View File

@ -30,8 +30,9 @@ const Item: React.FC<ItemProps> = ({ value, elements, icon }) => {
return ( return (
<AccordionItem className="bg-muted rounded px-4" value={value}> <AccordionItem className="bg-muted rounded px-4" value={value}>
<AccordionTrigger> <AccordionTrigger>
<div className="flex items-center gap-2 space-x-2 cursor-pointer"> <div className="flex flex-row items-center gap-2 space-x-2 cursor-pointer">
{icon} {value} <div>{icon}</div>
<div className="sm:block hidden">{value}</div>
</div> </div>
</AccordionTrigger> </AccordionTrigger>
<AccordionContent className="flex flex-col gap-2"> <AccordionContent className="flex flex-col gap-2">
@ -50,8 +51,8 @@ interface RowProps {
const Row: React.FC<RowProps> = ({ title, element }) => { const Row: React.FC<RowProps> = ({ title, element }) => {
return ( return (
<div className="flex flex-row gap-2 justify-between items-center"> <div className="flex sm:flex-row flex-col gap-2 justify-between sm:items-center items-start">
<div className="text-sm">{title}</div> <div className="sm:text-sm text-xs">{title}</div>
{element} {element}
</div> </div>
) )
@ -62,6 +63,8 @@ export const HealthCheck = () => {
const blocks = useBlocks() const blocks = useBlocks()
const health = useSystemHealth() const health = useSystemHealth()
const widthClass = "sm:w-[300px] w-full"
const metadataElements = [ const metadataElements = [
{ {
title: "Chain Name", title: "Chain Name",
@ -69,7 +72,7 @@ export const HealthCheck = () => {
readOnly readOnly
aria-label="Chain Name" aria-label="Chain Name"
type="text" type="text"
className="w-[300px]" className={widthClass}
placeholder={chainSpec?.chainName} placeholder={chainSpec?.chainName}
/> />
}, },
@ -79,7 +82,7 @@ export const HealthCheck = () => {
readOnly readOnly
aria-label="Genesis Hash" aria-label="Genesis Hash"
type="text" type="text"
className="w-[300px]" className={widthClass}
placeholder={chainSpec?.genesisHash} placeholder={chainSpec?.genesisHash}
/> />
} }
@ -91,7 +94,7 @@ export const HealthCheck = () => {
readOnly readOnly
aria-label="Sync State" aria-label="Sync State"
type="text" type="text"
className="w-[300px]" className={widthClass}
placeholder={!health ? "" : health.isSyncing ? "Syncing..." : "Synced"} placeholder={!health ? "" : health.isSyncing ? "Syncing..." : "Synced"}
/> />
}, },
@ -101,7 +104,7 @@ export const HealthCheck = () => {
readOnly readOnly
aria-label="Peers Connected" aria-label="Peers Connected"
type="text" type="text"
className="w-[300px]" className={widthClass}
placeholder={health?.peers} placeholder={health?.peers}
/> />
} }
@ -113,7 +116,7 @@ export const HealthCheck = () => {
readOnly readOnly
aria-label="Block Number" aria-label="Block Number"
type="text" type="text"
className="w-[300px]" className={widthClass}
placeholder={blocks?.latest?.number} placeholder={blocks?.latest?.number}
/> />
}, },
@ -123,7 +126,7 @@ export const HealthCheck = () => {
readOnly readOnly
aria-label="Block Hash" aria-label="Block Hash"
type="text" type="text"
className="w-[300px]" className={widthClass}
placeholder={blocks?.latest?.hash} placeholder={blocks?.latest?.hash}
/> />
}, },
@ -133,7 +136,7 @@ export const HealthCheck = () => {
readOnly readOnly
aria-label="Parent Hash" aria-label="Parent Hash"
type="text" type="text"
className="w-[300px]" className={widthClass}
placeholder={blocks?.latest?.parent} placeholder={blocks?.latest?.parent}
/> />
} }
@ -145,7 +148,7 @@ export const HealthCheck = () => {
readOnly readOnly
aria-label="Block Number" aria-label="Block Number"
type="text" type="text"
className="w-[300px]" className={widthClass}
placeholder={blocks?.finalized?.number} placeholder={blocks?.finalized?.number}
/> />
}, },
@ -155,7 +158,7 @@ export const HealthCheck = () => {
readOnly readOnly
aria-label="BlockHash" aria-label="BlockHash"
type="text" type="text"
className="w-[300px]" className={widthClass}
placeholder={blocks?.finalized?.hash} placeholder={blocks?.finalized?.hash}
/> />
}, },
@ -165,7 +168,7 @@ export const HealthCheck = () => {
readOnly readOnly
aria-label="Parent Hash" aria-label="Parent Hash"
type="text" type="text"
className="w-[300px]" className={widthClass}
placeholder={blocks?.finalized?.parent} placeholder={blocks?.finalized?.parent}
/> />
} }
@ -177,7 +180,7 @@ export const HealthCheck = () => {
readOnly readOnly
aria-label="Coin Symbol" aria-label="Coin Symbol"
type="text" type="text"
className="w-[300px]" className={widthClass}
placeholder={chainSpec?.properties?.tokenSymbol} placeholder={chainSpec?.properties?.tokenSymbol}
/> />
}, },
@ -187,7 +190,7 @@ export const HealthCheck = () => {
readOnly readOnly
aria-label="Block Hash" aria-label="Block Hash"
type="text" type="text"
className="w-[300px]" className={widthClass}
placeholder={chainSpec?.properties?.tokenDecimals?.toString() ?? ""} placeholder={chainSpec?.properties?.tokenDecimals?.toString() ?? ""}
/> />
}, },
@ -197,14 +200,14 @@ export const HealthCheck = () => {
readOnly readOnly
aria-label="Base58 Prefix" aria-label="Base58 Prefix"
type="text" type="text"
className="w-[300px]" className={widthClass}
placeholder={chainSpec?.properties?.ss58Format?.toString() ?? ""} placeholder={chainSpec?.properties?.ss58Format?.toString() ?? ""}
/> />
} }
] ]
return ( return (
<Accordion type="single" defaultValue="Chain metadata" className="w-[500px] h-fit flex flex-col flex-1 gap-4 justify-center self-center"> <Accordion type="single" defaultValue="Chain metadata" className="sm:w-[500px] w-[85%] h-fit flex flex-col flex-1 gap-4 justify-center self-center sm:text-base text-xs">
<Item value="Chain metadata" elements={metadataElements} icon={<Info className="w-4 h-4" />} /> <Item value="Chain metadata" elements={metadataElements} icon={<Info className="w-4 h-4" />} />
<Item value="Peers information" elements={peersElements} icon={<Binary className="w-4 h-4" />} /> <Item value="Peers information" elements={peersElements} icon={<Binary className="w-4 h-4" />} />
<Item value="Latest block" elements={bestBlockElements} icon={<Cuboid className="w-4 h-4" />} /> <Item value="Latest block" elements={bestBlockElements} icon={<Cuboid className="w-4 h-4" />} />

71
src/containers/Transactions.tsx
View File

@ -3,7 +3,8 @@ import {
Send, Send,
Trash, Trash,
Settings2, Settings2,
ArrowBigRightDash ArrowBigRightDash,
ArrowBigDownDash
} from "lucide-react" } from "lucide-react"
import React, { useState, useEffect, useCallback, useMemo, ReactNode } from "react" import React, { useState, useEffect, useCallback, useMemo, ReactNode } from "react"
import { useLocation } from "react-router-dom" import { useLocation } from "react-router-dom"
@ -73,7 +74,7 @@ interface RowProps {
const Row: React.FC<RowProps> = ({ title, element }) => { const Row: React.FC<RowProps> = ({ title, element }) => {
return ( return (
<div className="flex flex-row gap-2 justify-between items-center"> <div className="flex sm:flex-row flex-col gap-2 justify-between sm:items-center items-left">
<div className="text-sm">{title}</div> <div className="text-sm">{title}</div>
{element} {element}
</div> </div>
@ -116,7 +117,7 @@ const Sender: React.FC<SenderProps> = ({
}} }}
> >
<SelectTrigger <SelectTrigger
className={"text-muted-foreground w-[300px]"} className={"text-muted-foreground sm:w-[300px] w-full"}
data-testid="chain-select" data-testid="chain-select"
> >
<SelectValue placeholder="Select Account" /> <SelectValue placeholder="Select Account" />
@ -137,7 +138,7 @@ const Sender: React.FC<SenderProps> = ({
readOnly readOnly
aria-label="Account Balance" aria-label="Account Balance"
type="text" type="text"
className="w-[300px]" className="sm:w-[300px] w-full"
placeholder={senderBalance} placeholder={senderBalance}
/>} /> />} />
{senderAccount && (<Accordion type="multiple" className="w-full flex flex-col gap-4 mb-4"> {senderAccount && (<Accordion type="multiple" className="w-full flex flex-col gap-4 mb-4">
@ -152,28 +153,28 @@ const Sender: React.FC<SenderProps> = ({
readOnly readOnly
aria-label="Fee" aria-label="Fee"
type="text" type="text"
className="w-[300px]" className="sm:w-[300px] w-full"
placeholder={applyDecimals(senderAccount?.data?.free, tokenDecimals, tokenSymbol)} placeholder={applyDecimals(senderAccount?.data?.free, tokenDecimals, tokenSymbol)}
/>} /> />} />
<Row title={"Frozen"} element={<Input <Row title={"Frozen"} element={<Input
readOnly readOnly
aria-label="Frozen" aria-label="Frozen"
type="text" type="text"
className="w-[300px]" className="sm:w-[300px] w-full"
placeholder={applyDecimals(senderAccount?.data?.frozen, tokenDecimals, tokenSymbol)} placeholder={applyDecimals(senderAccount?.data?.frozen, tokenDecimals, tokenSymbol)}
/>} /> />} />
<Row title={"Reserved"} element={<Input <Row title={"Reserved"} element={<Input
readOnly readOnly
aria-label="Reserved" aria-label="Reserved"
type="text" type="text"
className="w-[300px]" className="sm:w-[300px] w-full"
placeholder={applyDecimals(senderAccount?.data?.reserved, tokenDecimals, tokenSymbol)} placeholder={applyDecimals(senderAccount?.data?.reserved, tokenDecimals, tokenSymbol)}
/>} /> />} />
<Row title={"Nonce"} element={<Input <Row title={"Nonce"} element={<Input
readOnly readOnly
aria-label="Nonce" aria-label="Nonce"
type="text" type="text"
className="w-[300px]" className="sm:w-[300px] w-full"
placeholder={senderAccount?.nonce ? senderAccount.nonce.toString() : ""} placeholder={senderAccount?.nonce ? senderAccount.nonce.toString() : ""}
/>} /> />} />
</AccordionContent> </AccordionContent>
@ -214,7 +215,7 @@ const Receiver: React.FC<ReceiverProps> = ({
disabled={isSubmittingTransaction} disabled={isSubmittingTransaction}
aria-label="Transfer Receiver" aria-label="Transfer Receiver"
type="text" type="text"
className="w-[300px]" className="sm:w-[300px] w-full"
placeholder="Input receiver address" placeholder="Input receiver address"
/>} /> />} />
<Row title="Amount" element={<Input <Row title="Amount" element={<Input
@ -223,7 +224,7 @@ const Receiver: React.FC<ReceiverProps> = ({
disabled={isSubmittingTransaction} disabled={isSubmittingTransaction}
aria-label="Transfer Amount" aria-label="Transfer Amount"
type="text" type="text"
className="w-[300px]" className="sm:w-[300px] w-full"
placeholder="Input amount to send" placeholder="Input amount to send"
/>} /> />} />
{receiverAccount && (<Accordion type="multiple" className="w-full flex flex-col gap-4"> {receiverAccount && (<Accordion type="multiple" className="w-full flex flex-col gap-4">
@ -238,28 +239,28 @@ const Receiver: React.FC<ReceiverProps> = ({
readOnly readOnly
aria-label="Fee" aria-label="Fee"
type="text" type="text"
className="w-[300px]" className="sm:w-[300px] w-full"
placeholder={applyDecimals(receiverAccount?.data?.free, tokenDecimals, tokenSymbol)} placeholder={applyDecimals(receiverAccount?.data?.free, tokenDecimals, tokenSymbol)}
/>} /> />} />
<Row title={"Frozen"} element={<Input <Row title={"Frozen"} element={<Input
readOnly readOnly
aria-label="Frozen" aria-label="Frozen"
type="text" type="text"
className="w-[300px]" className="sm:w-[300px] w-full"
placeholder={applyDecimals(receiverAccount?.data?.frozen, tokenDecimals, tokenSymbol)} placeholder={applyDecimals(receiverAccount?.data?.frozen, tokenDecimals, tokenSymbol)}
/>} /> />} />
<Row title={"Reserved"} element={<Input <Row title={"Reserved"} element={<Input
readOnly readOnly
aria-label="Reserved" aria-label="Reserved"
type="text" type="text"
className="w-[300px]" className="sm:w-[300px] w-full"
placeholder={applyDecimals(receiverAccount?.data?.reserved, tokenDecimals, tokenSymbol)} placeholder={applyDecimals(receiverAccount?.data?.reserved, tokenDecimals, tokenSymbol)}
/>} /> />} />
<Row title={"Nonce"} element={<Input <Row title={"Nonce"} element={<Input
readOnly readOnly
aria-label="Nonce" aria-label="Nonce"
type="text" type="text"
className="w-[300px]" className="sm:w-[300px] w-full"
placeholder={receiverAccount?.nonce ? receiverAccount.nonce.toString() : ""} placeholder={receiverAccount?.nonce ? receiverAccount.nonce.toString() : ""}
/>} /> />} />
</AccordionContent> </AccordionContent>
@ -472,10 +473,10 @@ export const Transactions = () => {
]) ])
return ( return (
<div className="w-[500px] h-fit flex flex-col flex-1 gap-2 justify-center self-center rounded py-8"> <div className="sm:w-[500px] w-[85%] h-fit flex flex-col flex-1 gap-2 justify-center self-center rounded py-2">
<div className="bg-muted p-4 rounded flex flex-col gap-2"> <div className="bg-muted p-4 rounded flex flex-col gap-2">
<div className="w-full flex flex-row justify-between"> <div className="w-full flex flex-row justify-between">
<div className="flex flex-row gap-2"> <div className="flex sm:flex-row flex-col gap-2">
<Button <Button
type="button" type="button"
variant="ghost" variant="ghost"
@ -502,6 +503,7 @@ export const Transactions = () => {
variant="ghost" variant="ghost"
disabled={isSubmittingTransaction} disabled={isSubmittingTransaction}
onClick={() => onActiveTabChanged("settings")} onClick={() => onActiveTabChanged("settings")}
className="sm:block hidden"
> >
<Settings2 className="w-4 h-4 inline-block" /> <Settings2 className="w-4 h-4 inline-block" />
</Button> </Button>
@ -581,17 +583,18 @@ export const Transactions = () => {
{transactionHistory.map((props: TransactionHistory) => ( {transactionHistory.map((props: TransactionHistory) => (
<AccordionItem key={props.txHash} className="bg-muted rounded px-4" value={props.txHash ?? ""}> <AccordionItem key={props.txHash} className="bg-muted rounded px-4" value={props.txHash ?? ""}>
<AccordionTrigger className="w-full hover:no-underline"> <AccordionTrigger className="w-full hover:no-underline">
<div className="flex flex-row gap-2 items-center w-[90%] justify-between cursor-pointer"> <div className="flex sm:flex-row flex-col gap-2 items-center w-[90%] justify-between cursor-pointer">
<Input <Input
readOnly readOnly
className="overflow-hidden whitespace-nowrap text-ellipsis w-[45%]" className="overflow-hidden whitespace-nowrap text-ellipsis sm:w-[45%] w-full"
value={props.sender} value={props.sender}
placeholder="Sender not found" placeholder="Sender not found"
/> />
<ArrowBigRightDash className="w-6 h-6" /> <ArrowBigRightDash className="w-6 h-6 sm:block hidden" />
<ArrowBigDownDash className="w-6 h-6 sm:hidden block" />
<Input <Input
readOnly readOnly
className="overflow-hidden whitespace-nowrap text-ellipsis w-[45%]" className="overflow-hidden whitespace-nowrap text-ellipsis sm:w-[45%] w-full"
value={props.receiver} value={props.receiver}
placeholder="Receiver not found" placeholder="Receiver not found"
/> />
@ -613,28 +616,28 @@ export const Transactions = () => {
</span> </span>
<hr className="my-4" /> <hr className="my-4" />
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<div className="flex flex-row justify-between items-center gap-2"> <div className="flex sm:flex-row flex-col justify-between sm:items-center items-left gap-2">
Tx hash: Tx hash:
<Input <Input
readOnly readOnly
value={props.txHash} value={props.txHash}
className="text-accent w-[350px] h-[30px]" className="text-accent sm:w-[350px] w-full h-[30px]"
/> />
</div> </div>
<div className="flex flex-row justify-between items-center gap-2"> <div className="flex sm:flex-row flex-col justify-between sm:items-center items-left gap-2">
Block hash: Block hash:
<Input <Input
readOnly readOnly
value={props.blockHash} value={props.blockHash}
className="text-accent w-[350px] h-[30px]" className="text-accent sm:w-[350px] w-full h-[30px]"
/> />
</div> </div>
<div className="flex flex-row justify-between items-center gap-2"> <div className="flex sm:flex-row flex-col justify-between sm:items-center items-left gap-2">
Calldata: Calldata:
<Input <Input
readOnly readOnly
value={props.calldata} value={props.calldata}
className="text-accent w-[350px] h-[30px]" className="text-accent sm:w-[350px] w-full h-[30px]"
/> />
</div> </div>
</div> </div>
@ -662,23 +665,23 @@ export const Transactions = () => {
)} )}
{activeTab === "settings" && ( {activeTab === "settings" && (
<div className="min-h-[248px] text-sm flex flex-col gap-2"> <div className="min-h-[248px] text-sm flex flex-col gap-2">
<div className="flex flex-row gap-2 justify-between items-center"> <div className="flex sm:flex-row flex-col gap-2 justify-between sm:items-center items-left">
<span className="pb-4">Max lifetime:</span> <span className="sm:pb-4 pb-0">Max lifetime:</span>
<div className="w-[350px] flex flex-col"> <div className="sm:w-[350px] w-full flex flex-col">
<Input <Input
value={historyLifetimeDuration} value={historyLifetimeDuration}
onChange={(e) => { onChange={(e) => {
const newValue = +e.target.value const newValue = +e.target.value
if (newValue) setHistoryLifetimeDuration(newValue) if (newValue) setHistoryLifetimeDuration(newValue)
}} }}
className="w-[350px]" className="sm:w-[350px] w-full"
/> />
<span className="text-xs text-accent my-2"> <span className="text-xs text-accent my-2">
{convertedTimestamp({ timestamp: historyLifetimeDuration})} {convertedTimestamp({ timestamp: historyLifetimeDuration})}
</span> </span>
</div> </div>
</div> </div>
<div className="flex flex-row gap-2 justify-between items-center"> <div className="flex sm:flex-row flex-col gap-2 justify-between sm:items-center items-left">
<span>Max records:</span> <span>Max records:</span>
<Input <Input
value={historyMaxRecords} value={historyMaxRecords}
@ -686,10 +689,10 @@ export const Transactions = () => {
const newValue = +e.target.value const newValue = +e.target.value
if (newValue) setHistoryMaxRecords(newValue) if (newValue) setHistoryMaxRecords(newValue)
}} }}
className="w-[350px]" className="sm:w-[350px] w-full"
/> />
</div> </div>
<div className="flex flex-row gap-2 justify-between items-center"> <div className="flex sm:flex-row flex-col gap-2 justify-between sm:items-center items-left">
<span>Default amount:</span> <span>Default amount:</span>
<Input <Input
value={defaultTransactAmount} value={defaultTransactAmount}
@ -697,7 +700,7 @@ export const Transactions = () => {
setDefaultTransactAmount(e.target.value) setDefaultTransactAmount(e.target.value)
setAmount(e.target.value) setAmount(e.target.value)
}} }}
className="w-[350px]" className="sm:w-[350px] w-full"
placeholder="Amount will be empty" placeholder="Amount will be empty"
/> />
</div> </div>