Skip to content

Commit 8e5eed9

Browse files
jnsdlsjnsdls
committed
remove a bunch of <Flex>
1 parent e92d960 commit 8e5eed9

File tree

9 files changed

+85
-99
lines changed

9 files changed

+85
-99
lines changed

‎apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/explorer/ContractExplorerPage.tsx‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
2-
import { Flex } from "@chakra-ui/react";
32
import type { Abi } from "abitype";
43
import { getContractFunctionsFromAbi } from "components/contract-components/getContractFunctionsFromAbi";
54
import { ContractFunctionsOverview } from "components/contract-functions/contract-functions";
@@ -33,26 +32,24 @@ export const ContractExplorerPage: React.FC<ContractExplorePageProps> = ({
3332

3433
const functions = getContractFunctionsFromAbi(abi);
3534
return (
36-
<Flex direction="column" h="70vh">
35+
<div className="flex h-[70vh] flex-col">
3736
{functions && functions.length > 0 ? (
3837
<ContractFunctionsOverview
3938
onlyFunctions
4039
functions={functions}
4140
contract={contract}
4241
/>
4342
) : (
44-
<div className="flex items-center justify-center">
45-
<Flex direction="column" textAlign="center" gap={2}>
46-
<h2 className="font-semibold text-2xl tracking-tight">
47-
No callable functions discovered in ABI.
48-
</h2>
49-
<p className="text-muted-foreground text-sm">
50-
Please note that proxy contracts are not yet supported in the
51-
explorer, check back soon for full proxy support.
52-
</p>
53-
</Flex>
43+
<div className="flex flex-col items-center justify-center gap-2 text-center">
44+
<h2 className="font-semibold text-2xl tracking-tight">
45+
No callable functions discovered in ABI.
46+
</h2>
47+
<p className="text-muted-foreground text-sm">
48+
Please note that proxy contracts are not yet supported in the
49+
explorer, check back soon for full proxy support.
50+
</p>
5451
</div>
5552
)}
56-
</Flex>
53+
</div>
5754
);
5855
};

‎apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/components/airdrop-tab.tsx‎

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
SheetTitle,
99
SheetTrigger,
1010
} from "@/components/ui/sheet";
11-
import { Flex } from "@chakra-ui/react";
11+
import { cn } from "@/lib/utils";
1212
import { TransactionButton } from "components/buttons/TransactionButton";
1313
import { useTrack } from "hooks/analytics/useTrack";
1414
import { UploadIcon } from "lucide-react";
@@ -114,44 +114,44 @@ const AirdropTab: React.FC<AirdropTabProps> = ({ contract, tokenId }) => {
114114
})}
115115
>
116116
<div className="flex flex-col gap-2">
117-
<div className="mb-3 flex w-full flex-col gap-6 md:flex-row">
118-
<Flex direction={{ base: "column", md: "row" }} gap={4}>
119-
<Sheet open={open} onOpenChange={setOpen}>
120-
<SheetTrigger asChild>
121-
<Button variant="primary" className="gap-2">
122-
Upload addresses <UploadIcon className="size-4" />
123-
</Button>
124-
</SheetTrigger>
125-
<SheetContent className="w-full overflow-y-auto sm:min-w-[540px] lg:min-w-[700px]">
126-
<SheetHeader>
127-
<SheetTitle className="mb-5 text-left">
128-
Airdrop NFTs
129-
</SheetTitle>
130-
</SheetHeader>
131-
<AirdropUpload
132-
onClose={() => setOpen(false)}
133-
setAirdrop={(value) =>
134-
setValue("addresses", value, { shouldDirty: true })
135-
}
136-
/>
137-
</SheetContent>
138-
</Sheet>
117+
<div className="mb-3 flex w-full flex-col gap-4 md:flex-row">
118+
<Sheet open={open} onOpenChange={setOpen}>
119+
<SheetTrigger asChild>
120+
<Button variant="primary" className="gap-2">
121+
Upload addresses <UploadIcon className="size-4" />
122+
</Button>
123+
</SheetTrigger>
124+
<SheetContent className="w-full overflow-y-auto sm:min-w-[540px] lg:min-w-[700px]">
125+
<SheetHeader>
126+
<SheetTitle className="mb-5 text-left">
127+
Airdrop NFTs
128+
</SheetTitle>
129+
</SheetHeader>
130+
<AirdropUpload
131+
onClose={() => setOpen(false)}
132+
setAirdrop={(value) =>
133+
setValue("addresses", value, { shouldDirty: true })
134+
}
135+
/>
136+
</SheetContent>
137+
</Sheet>
139138

140-
<Flex
141-
gap={2}
142-
direction="row"
143-
align="center"
144-
justify="center"
145-
color={addresses.length === 0 ? "orange.500" : "green.500"}
146-
>
147-
{addresses.length > 0 && (
148-
<p>
149-
● <strong>{addresses.length} addresses</strong> ready to be
150-
airdropped
151-
</p>
152-
)}
153-
</Flex>
154-
</Flex>
139+
<div
140+
className={cn(
141+
"flesx-row flex items-center justify-center gap-2",
142+
{
143+
"text-orange-500": addresses.length === 0,
144+
"text-green-500": addresses.length > 0,
145+
},
146+
)}
147+
>
148+
{addresses.length > 0 && (
149+
<p>
150+
● <strong>{addresses.length} addresses</strong> ready to be
151+
airdropped
152+
</p>
153+
)}
154+
</div>
155155
</div>
156156
<p>
157157
You can airdrop to a maximum of 250 addresses at a time. If you have

‎apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/nft-property.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { Flex } from "@chakra-ui/react";
21
import { Card, Text } from "tw-components";
32

43
interface NftPropertyProps {
@@ -8,7 +7,7 @@ interface NftPropertyProps {
87

98
export const NftProperty: React.FC<NftPropertyProps> = ({ property }) => {
109
return (
11-
<Card as={Flex} flexDir="column" gap={2}>
10+
<Card className="flex flex-col gap-2">
1211
{property?.trait_type && (
1312
<Text
1413
size="label.sm"

‎apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/proposals/components/proposal.tsx‎

Lines changed: 13 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import {
44
tokensDelegated,
55
votingTokenDecimals,
66
} from "@3rdweb-sdk/react/hooks/useVote";
7-
import { Flex } from "@chakra-ui/react";
87
import { TransactionButton } from "components/buttons/TransactionButton";
98
import { CheckIcon, MinusIcon, XIcon } from "lucide-react";
109
import { useState } from "react";
@@ -81,22 +80,19 @@ export const Proposal: React.FC<IProposal> = ({ proposal, contract }) => {
8180

8281
return (
8382
<Card key={proposal.proposalId.toString()}>
84-
<Flex mb="8px">
85-
<Flex
86-
paddingY="0px"
87-
paddingX="16px"
88-
borderRadius="25px"
89-
bg={
83+
<div
84+
className="mb-2 rounded-md bg-gray-500 px-4 py-0"
85+
style={{
86+
background:
9087
ProposalStateToMetadataMap[
9188
proposal.stateLabel as keyof typeof VoteExt.ProposalState
92-
] || "gray.500"
93-
}
94-
>
95-
<Text color="white">
96-
{`${proposal.stateLabel?.charAt(0).toUpperCase()}${proposal.stateLabel?.slice(1)}`}
97-
</Text>
98-
</Flex>
99-
</Flex>
89+
] || undefined,
90+
}}
91+
>
92+
<Text color="white">
93+
{`${proposal.stateLabel?.charAt(0).toUpperCase()}${proposal.stateLabel?.slice(1)}`}
94+
</Text>
95+
</div>
10096
<Text>
10197
<strong>Proposal:</strong> {proposal.description}
10298
</Text>
@@ -134,7 +130,7 @@ export const Proposal: React.FC<IProposal> = ({ proposal, contract }) => {
134130
!hasVotedQuery.data &&
135131
!hasVotedQuery.isPending &&
136132
tokensDelegatedQuery.data ? (
137-
<Flex mt="24px" gap={2}>
133+
<div className="mt-6 flex gap-2">
138134
<TransactionButton
139135
txChainID={contract.chain.id}
140136
size="sm"
@@ -175,7 +171,7 @@ export const Proposal: React.FC<IProposal> = ({ proposal, contract }) => {
175171
Abstain
176172
</div>
177173
</TransactionButton>
178-
</Flex>
174+
</div>
179175
) : (
180176
canExecuteQuery.data && (
181177
<Button

‎apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/tokens/ContractTokensPage.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
"use client";
2-
3-
import { Flex } from "@chakra-ui/react";
42
import type { ThirdwebContract } from "thirdweb";
53
import { Card, Heading, LinkButton, Text } from "tw-components";
64
import { TokenAirdropButton } from "./components/airdrop-button";
@@ -25,7 +23,7 @@ export const ContractTokensPage: React.FC<ContractTokenPageProps> = ({
2523
}) => {
2624
if (!isERC20) {
2725
return (
28-
<Card as={Flex} flexDir="column" gap={3}>
26+
<Card className="flex flex-col gap-3">
2927
{/* TODO extract this out into it's own component and make it better */}
3028
<Heading size="subtitle.md">No Token extension enabled</Heading>
3129
<Text>
@@ -46,7 +44,7 @@ export const ContractTokensPage: React.FC<ContractTokenPageProps> = ({
4644
}
4745

4846
return (
49-
<Flex direction="column" gap={6}>
47+
<div className="flex flex-col gap-6">
5048
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
5149
<Heading size="title.sm">Contract Tokens</Heading>
5250
<div className="flex flex-col gap-3 md:flex-row">
@@ -59,6 +57,6 @@ export const ContractTokensPage: React.FC<ContractTokenPageProps> = ({
5957
</div>
6058

6159
<TokenSupply contract={contract} />
62-
</Flex>
60+
</div>
6361
);
6462
};

‎apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/configuration/components/engine-wallet-config.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import {
55
type EngineInstance,
66
useEngineWalletConfig,
77
} from "@3rdweb-sdk/react/hooks/useEngine";
8-
import { Flex } from "@chakra-ui/react";
98
import {
109
EngineBackendWalletOptions,
1110
type EngineBackendWalletType,
@@ -42,8 +41,8 @@ export const EngineWalletConfig: React.FC<EngineWalletConfigProps> = ({
4241
const isGcpKmsConfigured = !!walletConfig?.gcpKmsKeyRingId;
4342

4443
return (
45-
<Flex flexDir="column" gap={4}>
46-
<Flex flexDir="column" gap={2}>
44+
<div className="flex flex-col gap-4">
45+
<div className="flex flex-col gap-2">
4746
<Heading size="title.md">Backend Wallets</Heading>
4847
<p className="text-muted-foreground">
4948
Create backend wallets on the{" "}
@@ -55,7 +54,7 @@ export const EngineWalletConfig: React.FC<EngineWalletConfigProps> = ({
5554
</Link>{" "}
5655
tab. To use other wallet types, configure them below.
5756
</p>
58-
</Flex>
57+
</div>
5958

6059
<TabButtons
6160
tabs={EngineBackendWalletOptions.map(({ key, name }) => ({
@@ -78,6 +77,6 @@ export const EngineWalletConfig: React.FC<EngineWalletConfigProps> = ({
7877
/>
7978

8079
{tabContent[activeTab]}
81-
</Flex>
80+
</div>
8281
);
8382
};

‎apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/metrics/components/EngineSystemMetrics.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import {
66
useEngineQueueMetrics,
77
useEngineSystemMetrics,
88
} from "@3rdweb-sdk/react/hooks/useEngine";
9-
import { Flex } from "@chakra-ui/react";
109
import { ChartAreaIcon, InfoIcon } from "lucide-react";
1110
import { Card, Heading, Text, TrackedLink } from "tw-components";
1211
import { ErrorRate } from "./ErrorRate";
@@ -30,12 +29,12 @@ export const EngineSystemMetrics: React.FC<EngineStatusProps> = ({
3029
systemMetricsPanel = (
3130
<Card p={8}>
3231
<div className="flex flex-col gap-4">
33-
<Flex gap={2} align="center">
32+
<div className="flex flex-row items-center gap-2">
3433
<InfoIcon className="size-4" />
3534
<Heading size="title.xs">
3635
System metrics are unavailable for self-hosted Engine.
3736
</Heading>
38-
</Flex>
37+
</div>
3938
<Text>
4039
Upgrade to a{" "}
4140
<TrackedLink
@@ -56,10 +55,10 @@ export const EngineSystemMetrics: React.FC<EngineStatusProps> = ({
5655
systemMetricsPanel = (
5756
<Card p={16}>
5857
<div className="flex flex-col gap-4">
59-
<Flex gap={2} align="center" pb={-2}>
58+
<div className="flex flex-row items-center gap-2 pb-[-8px]">
6059
<ChartAreaIcon className="size-4" />
6160
<Heading size="title.md">System Metrics</Heading>
62-
</Flex>
61+
</div>
6362

6463
<div className="mt-10 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
6564
<Healthcheck instance={instance} />
@@ -95,9 +94,9 @@ export const EngineSystemMetrics: React.FC<EngineStatusProps> = ({
9594
queueMetricsPanel = (
9695
<Card p={8}>
9796
<div className="flex flex-col gap-6">
98-
<Flex gap={2} align="center">
97+
<div className="flex flex-row items-center gap-2">
9998
<Heading size="title.md">Queue Metrics</Heading>
100-
</Flex>
99+
</div>
101100

102101
<div className="flex flex-col gap-6 lg:flex-row lg:gap-12">
103102
<div className="flex-col gap-y-4">

‎apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/relayers/components/engine-relayer.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
"use client";
22

33
import { useEngineRelayer } from "@3rdweb-sdk/react/hooks/useEngine";
4-
import { Flex } from "@chakra-ui/react";
54
import { Heading, Link, Text } from "tw-components";
65
import { AddRelayerButton } from "./add-relayer-button";
76
import { RelayersTable } from "./relayers-table";
@@ -16,8 +15,8 @@ export const EngineRelayer: React.FC<EngineRelayerProps> = ({
1615
const relayers = useEngineRelayer(instanceUrl);
1716

1817
return (
19-
<Flex flexDir="column" gap={4}>
20-
<Flex flexDir="column" gap={2}>
18+
<div className="flex flex-col gap-4">
19+
<div className="flex flex-col gap-2">
2120
<Heading size="title.md">Relayers</Heading>
2221
<Text>
2322
Use relayers to submit transactions from your backend wallets on
@@ -31,7 +30,7 @@ export const EngineRelayer: React.FC<EngineRelayerProps> = ({
3130
</Link>
3231
.
3332
</Text>
34-
</Flex>
33+
</div>
3534

3635
<RelayersTable
3736
instanceUrl={instanceUrl}
@@ -40,6 +39,6 @@ export const EngineRelayer: React.FC<EngineRelayerProps> = ({
4039
isFetched={relayers.isFetched}
4140
/>
4241
<AddRelayerButton instanceUrl={instanceUrl} />
43-
</Flex>
42+
</div>
4443
);
4544
};

‎apps/dashboard/src/components/contract-components/contract-publish-form/external-links-fieldset.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { Flex } from "@chakra-ui/react";
21
import { PlusIcon } from "lucide-react";
32
import { useEffect } from "react";
43
import { useFieldArray, useFormContext } from "react-hook-form";
@@ -28,12 +27,12 @@ export const ExternalLinksFieldset = () => {
2827
}, [fields, append]);
2928

3029
return (
31-
<Flex gap={8} direction="column" as="fieldset">
32-
<Flex gap={2} direction="column">
30+
<fieldset className="flex flex-col gap-8">
31+
<div className="flex flex-col gap-2">
3332
<Heading size="title.md">Resources</Heading>
3433
<Text>Provide links to docs, usage guides etc. for the contract.</Text>
35-
</Flex>
36-
<Flex flexDir="column" gap={4}>
34+
</div>
35+
<div className="flex flex-col gap-4">
3736
{fields.map((item, index) => (
3837
<ExternalLinksInput key={item.id} remove={remove} index={index} />
3938
))}
@@ -54,7 +53,7 @@ export const ExternalLinksFieldset = () => {
5453
Add Resource
5554
</Button>
5655
</div>
57-
</Flex>
58-
</Flex>
56+
</div>
57+
</fieldset>
5958
);
6059
};

0 commit comments

Comments
 (0)