Skip to content

Commit 931569b

Browse files
kien-ngokien-ngo
committed
[Dashboard] Remove <Box/> easy mode (#4786)
## Problem solved Short description of the bug fixed or feature added <!-- start pr-codex --> --- ## PR-Codex overview This PR focuses on replacing all instances of the `Box` component with the `div` element across various files in the codebase, likely for consistency or to simplify the component structure. ### Detailed summary - Replaced `Box` with `div` in `PermissionsTable.tsx` - Replaced `Box` with `div` in `LatestEvents.tsx` - Replaced `Box` with `div` in `templates.tsx` - Replaced `Box` with `div` in `detail-page.tsx` - Replaced `Box` with `div` in `contract-publish-form/index.tsx` - Replaced `Box` with `div` in `custom-factory.tsx` - Replaced `Box` with `div` in `metadata.tsx` - Replaced `Box` with `div` in `Solutions.tsx` - Replaced `Box` with `div` in `MiniPlayground.tsx` - Replaced `Box` with `div` in `FormItem.tsx` - Replaced `Box` with `div` in `DevRelEvent.tsx` - Replaced `Box` with `div` in `shared-metadata-form.tsx` - Replaced `Box` with `div` in `update-metadata-form.tsx` - Replaced `Box` with `div` in `external-links-fieldset.tsx` - Replaced `Box` with `div` in `events-feed.tsx` - Replaced `Box` with `div` in `lazy-mint-form.tsx` - Replaced `Box` with `div` in `mint-form.tsx` - Replaced `Box` with `div` in `page.tsx` - Replaced `Box` with `div` in `landing-fieldset.tsx` - Replaced `Box` with `div` in `PlanCard.tsx` - Replaced `Box` with `div` in `index.tsx` of `CodeBlock` - Replaced `Box` with `div` in `SponsorshipPolicies/index.tsx` - Replaced `Box` with `div` in `AccountAbstractionSettingsPage` across multiple instances. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex -->
1 parent d76618f commit 931569b

File tree

22 files changed

+81
-89
lines changed

22 files changed

+81
-89
lines changed

‎apps/dashboard/src/components/contract-components/contract-publish-form/custom-factory.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ export const CustomFactory: React.FC<CustomFactoryProps> = ({
106106
</FormControl>
107107
</div>
108108
))}
109-
<Box>
109+
<div>
110110
<Button
111111
type="button"
112112
size="sm"
@@ -117,7 +117,7 @@ export const CustomFactory: React.FC<CustomFactoryProps> = ({
117117
>
118118
Add Network
119119
</Button>
120-
</Box>
120+
</div>
121121
</Flex>
122122
<Flex flexDir="column" gap={4}>
123123
<Flex flexDir="column" gap={2}>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Box, Flex, Icon } from "@chakra-ui/react";
1+
import { Flex, Icon } from "@chakra-ui/react";
22
import { useEffect } from "react";
33
import { useFieldArray, useFormContext } from "react-hook-form";
44
import { FiPlus } from "react-icons/fi";
@@ -37,7 +37,7 @@ export const ExternalLinksFieldset = () => {
3737
{fields.map((item, index) => (
3838
<ExternalLinksInput key={item.id} remove={remove} index={index} />
3939
))}
40-
<Box>
40+
<div>
4141
<Button
4242
type="button"
4343
size="sm"
@@ -53,7 +53,7 @@ export const ExternalLinksFieldset = () => {
5353
>
5454
Add Resource
5555
</Button>
56-
</Box>
56+
</div>
5757
</Flex>
5858
</Flex>
5959
);

‎apps/dashboard/src/components/contract-components/contract-publish-form/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -295,7 +295,7 @@ export function ContractPublishForm(props: {
295295
gap={6}
296296
>
297297
{fieldsetToShow !== "landing" && (
298-
<Box>
298+
<div>
299299
<IconButton
300300
w="inherit"
301301
variant="ghost"
@@ -314,7 +314,7 @@ export function ContractPublishForm(props: {
314314
>
315315
Back
316316
</IconButton>
317-
</Box>
317+
</div>
318318
)}
319319
{fieldsetToShow === "landing" && (
320320
<LandingFieldset

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,7 @@ export const LandingFieldset: React.FC<LandingFieldsetProps> = ({
145145
</Flex>
146146
</Flex>
147147

148-
<Box>
148+
<div>
149149
<Heading size="title.md" mb={2}>
150150
README
151151
</Heading>
@@ -186,9 +186,9 @@ export const LandingFieldset: React.FC<LandingFieldsetProps> = ({
186186
</TabPanels>
187187
</Tabs>
188188
</FormControl>
189-
</Box>
189+
</div>
190190
<ExternalLinksFieldset />
191-
<Box>
191+
<div>
192192
<Heading size="title.md" mb={2}>
193193
Version information
194194
</Heading>
@@ -267,8 +267,8 @@ export const LandingFieldset: React.FC<LandingFieldsetProps> = ({
267267
</FormHelperText>
268268
</FormControl>
269269
</Flex>
270-
</Box>
271-
<Box>
270+
</div>
271+
<div>
272272
<Heading size="title.md" mb={2}>
273273
Deployment options
274274
</Heading>
@@ -294,7 +294,7 @@ export const LandingFieldset: React.FC<LandingFieldsetProps> = ({
294294
width="full"
295295
/>
296296
</Flex>
297-
</Box>
297+
</div>
298298
</Flex>
299299
);
300300
};

‎apps/dashboard/src/components/devRelEvents/DevRelEvent.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Box, Flex, Icon, Image } from "@chakra-ui/react";
1+
import { Flex, Icon, Image } from "@chakra-ui/react";
22
import { useTrack } from "hooks/analytics/useTrack";
33
import { FiCalendar, FiClock } from "react-icons/fi";
44
import { Card, Heading, LinkButton, Text } from "tw-components";
@@ -75,7 +75,7 @@ export const DevRelEvent: React.FC<EventProps> = ({
7575
</Flex>
7676
</Flex>
7777
</Flex>
78-
<Box>
78+
<div>
7979
<LinkButton
8080
href={link}
8181
onClick={() =>
@@ -92,7 +92,7 @@ export const DevRelEvent: React.FC<EventProps> = ({
9292
>
9393
Register
9494
</LinkButton>
95-
</Box>
95+
</div>
9696
</Flex>
9797
</Card>
9898
);

‎apps/dashboard/src/components/homepage/CodeBlock/index.tsx

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -209,26 +209,24 @@ export const HomePageCodeBlock: React.FC<CodeBlockProps> = ({
209209
as={Code}
210210
h="full"
211211
>
212-
<Box>
213-
<Box>
214-
<Box as="span" display="block" my={1} color="heading">
215-
{tokens.map((line, i) => (
216-
// biome-ignore lint/suspicious/noArrayIndexKey: FIXME
217-
<Box key={i} {...getLineProps({ line })}>
218-
<LineNumbers
219-
lineNumber={i + 1}
220-
lineHeight={chakraTheme.sizes["5"]}
221-
totalLines={tokens.length}
222-
/>
223-
{line.map((token, key) => (
224-
// biome-ignore lint/suspicious/noArrayIndexKey: FIXME
225-
<span key={key} {...getTokenProps({ token })} />
226-
))}
227-
</Box>
228-
))}
229-
</Box>
212+
<div>
213+
<Box as="span" display="block" my={1} color="heading">
214+
{tokens.map((line, i) => (
215+
// biome-ignore lint/suspicious/noArrayIndexKey: FIXME
216+
<Box key={i} {...getLineProps({ line })}>
217+
<LineNumbers
218+
lineNumber={i + 1}
219+
lineHeight={chakraTheme.sizes["5"]}
220+
totalLines={tokens.length}
221+
/>
222+
{line.map((token, key) => (
223+
// biome-ignore lint/suspicious/noArrayIndexKey: FIXME
224+
<span key={key} {...getTokenProps({ token })} />
225+
))}
226+
</Box>
227+
))}
230228
</Box>
231-
</Box>
229+
</div>
232230
</Box>
233231
)}
234232
</Highlight>

‎apps/dashboard/src/components/homepage/sections/Solutions.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import {
2-
Box,
32
Flex,
43
Image,
54
LinkBox,
@@ -85,7 +84,7 @@ const SolutionCard: React.FC<SolutionCardProps> = ({
8584
py={{ base: 10 }}
8685
flexGrow={1}
8786
>
88-
<Box>
87+
<div>
8988
<Heading
9089
as="h3"
9190
fontSize="24px"
@@ -106,7 +105,7 @@ const SolutionCard: React.FC<SolutionCardProps> = ({
106105
<Text size="body.lg" lineHeight={1.7} color="whiteAlpha.700">
107106
{description}
108107
</Text>
109-
</Box>
108+
</div>
110109
</Flex>
111110
</Flex>
112111
);

‎apps/dashboard/src/components/onboarding/PlanCard.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Box, Flex, ListItem, UnorderedList } from "@chakra-ui/react";
1+
import { Flex, ListItem, UnorderedList } from "@chakra-ui/react";
22
import { Badge, Card, Heading, LinkButton, Text } from "tw-components";
33
import type { CreditsRecord } from "./ApplyForOpCreditsModal";
44

@@ -10,7 +10,7 @@ export const PlanCard: React.FC<PlanCardProps> = ({ creditsRecord }) => {
1010
return (
1111
<Card as={Flex} justifyContent="space-between" flexDir="column" gap={2}>
1212
<Flex flexDir="column" gap={2}>
13-
<Box>
13+
<div>
1414
<Badge
1515
borderRadius="full"
1616
size="label.sm"
@@ -22,7 +22,7 @@ export const PlanCard: React.FC<PlanCardProps> = ({ creditsRecord }) => {
2222
>
2323
{creditsRecord.title}
2424
</Badge>
25-
</Box>
25+
</div>
2626
<Flex flexDir="column" gap={1}>
2727
<Text color="faded">{creditsRecord.upTo ? "Up to" : "\u00A0"}</Text>
2828
<Heading color="bgBlack" size="title.md" fontWeight="extrabold">

‎apps/dashboard/src/components/smart-wallets/SponsorshipPolicies/index.tsx

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -274,15 +274,15 @@ export function AccountAbstractionSettingsPage(
274274
<FormControl>
275275
<Flex flexDir="column" gap={4}>
276276
<div className="flex flex-row items-center justify-between">
277-
<Box>
277+
<div>
278278
<FormLabel pointerEvents="none">Global spend limits</FormLabel>
279279
<Text>
280280
Maximum gas cost (in USD) that you want to sponsor. This
281281
applies for the duration of the billing period (monthly). Once
282282
this limit is reached, your users will have to fund their own
283283
gas costs.
284284
</Text>
285-
</Box>
285+
</div>
286286

287287
<Switch
288288
colorScheme="primary"
@@ -345,7 +345,7 @@ export function AccountAbstractionSettingsPage(
345345
>
346346
<Flex flexDir="column" gap={4}>
347347
<div className="flex flex-row items-center justify-between">
348-
<Box>
348+
<div>
349349
<FormLabel pointerEvents="none">
350350
Restrict to specific chains
351351
</FormLabel>
@@ -361,7 +361,7 @@ export function AccountAbstractionSettingsPage(
361361
supported chains.
362362
</TrackedLink>
363363
</Text>
364-
</Box>
364+
</div>
365365

366366
<Switch
367367
colorScheme="primary"
@@ -401,14 +401,14 @@ export function AccountAbstractionSettingsPage(
401401
>
402402
<Flex flexDir="column" gap={4}>
403403
<div className="flex flex-row items-center justify-between">
404-
<Box>
404+
<div>
405405
<FormLabel pointerEvents="none">
406406
Restrict to specific contract addresses
407407
</FormLabel>
408408
<Text>
409409
Only sponsor transactions for the specified contracts.
410410
</Text>
411-
</Box>
411+
</div>
412412

413413
<Switch
414414
colorScheme="primary"
@@ -444,15 +444,15 @@ export function AccountAbstractionSettingsPage(
444444
<FormControl>
445445
<Flex flexDir="column" gap={4}>
446446
<div className="flex flex-row items-center justify-between">
447-
<Box>
447+
<div>
448448
<FormLabel pointerEvents="none">
449449
Allowlisted/Blocklisted accounts
450450
</FormLabel>
451451
<Text>
452452
Select either allowlisted or blockedlisted accounts. Disabling
453453
this option will allow all accounts.
454454
</Text>
455-
</Box>
455+
</div>
456456

457457
<Switch
458458
colorScheme="primary"
@@ -521,7 +521,7 @@ export function AccountAbstractionSettingsPage(
521521
<FormControl>
522522
<Flex flexDir="column" gap={4}>
523523
<div className="flex flex-row items-center justify-between">
524-
<Box>
524+
<div>
525525
<FormLabel pointerEvents="none">Server verifier</FormLabel>
526526
<Text>
527527
Specify your own endpoint that will verify each transaction
@@ -536,7 +536,7 @@ export function AccountAbstractionSettingsPage(
536536
</TrackedLink>
537537
.
538538
</Text>
539-
</Box>
539+
</div>
540540

541541
<GatedSwitch
542542
upgradeRequired={!dashboardAccountQuery.data.advancedEnabled}
@@ -636,13 +636,13 @@ export function AccountAbstractionSettingsPage(
636636
>
637637
<Flex flexDir="column" gap={4}>
638638
<div className="flex flex-row items-center justify-between">
639-
<Box>
639+
<div>
640640
<FormLabel pointerEvents="none">Admin accounts</FormLabel>
641641
<Text>
642642
These accounts won&apos;t be subject to any sponsorship rules.
643643
All transactions will be sponsored.
644644
</Text>
645-
</Box>
645+
</div>
646646

647647
<Switch
648648
colorScheme="primary"

‎apps/dashboard/src/components/wallets/ConnectWalletMiniPlayground/MiniPlayground.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -257,7 +257,7 @@ export const MiniPlayground: React.FC<{
257257
)}
258258

259259
{/* Web3 Wallets */}
260-
<Box>
260+
<div>
261261
<FormItem label="Web3 Wallets">
262262
<Flex flexWrap="wrap" gap={3}>
263263
{(Object.keys(enabledWallets) as WalletIdSubset[]).map(
@@ -293,7 +293,7 @@ export const MiniPlayground: React.FC<{
293293
</TrackedLink>
294294
<Icon as={FiChevronRight} w={4} h={4} color="blue.500" />
295295
</Flex>
296-
</Box>
296+
</div>
297297

298298
{/* Social Logins */}
299299
<FormItem label="Email & Social Logins">

0 commit comments

Comments
 (0)