Skip to content

Commit e5c6043

Browse files
TylerAPfleddererTylerAPfledderer
committed
refactor(stablecoin-accordion): use panel components through direct import
1 parent 6fea37f commit e5c6043

File tree

2 files changed

+149
-167
lines changed

2 files changed

+149
-167
lines changed

‎src/components/StablecoinAccordion/AccordionCustomItem.tsx

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,11 @@ import Translation from "../Translation"
1515
import { ChildOnlyType } from "."
1616
import { accordionButtonContent, CategoryNameType } from "./utils"
1717

18-
const LeftColumnPanel = (props: ChildOnlyType & Partial<BoxProps>) => (
18+
export const LeftColumnPanel = (props: ChildOnlyType & Partial<BoxProps>) => (
1919
<Box flex="0 0 50%" maxW={{ lg: "75%" }} mr={{ lg: 16 }} {...props} />
2020
)
2121

22-
const RightColumnPanel = (props: ChildOnlyType) => (
22+
export const RightColumnPanel = (props: ChildOnlyType) => (
2323
<LeftColumnPanel mr={0} flex="0 1 50%" mt={{ base: 12, lg: 0 }} {...props} />
2424
)
2525

@@ -43,10 +43,7 @@ interface AccordionCustomItemProps {
4343
/**
4444
* The wrapper components surrounding each column of panel content
4545
*/
46-
children: (props: {
47-
LeftColumnPanel: typeof LeftColumnPanel
48-
RightColumnPanel: typeof RightColumnPanel
49-
}) => ReactNode
46+
children: ReactNode
5047
}
5148

5249
export const AccordionCustomItem = (props: AccordionCustomItemProps) => {
@@ -113,10 +110,7 @@ export const AccordionCustomItem = (props: AccordionCustomItemProps) => {
113110
justifyContent="space-between"
114111
flexDirection={{ base: "column", lg: "row" }}
115112
>
116-
{children({
117-
LeftColumnPanel,
118-
RightColumnPanel,
119-
})}
113+
{children}
120114
</Flex>
121115
</AccordionPanel>
122116
</>

‎src/components/StablecoinAccordion/index.tsx

Lines changed: 145 additions & 157 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,11 @@ import CardList from "../CardList"
1515
import InfoBanner from "../InfoBanner"
1616
import Link from "../Link"
1717
import Translation from "../Translation"
18-
import { AccordionCustomItem } from "./AccordionCustomItem"
18+
import {
19+
AccordionCustomItem,
20+
LeftColumnPanel,
21+
RightColumnPanel,
22+
} from "./AccordionCustomItem"
1923
import { useStablecoinAccordion } from "./use-stablecoin-accordion"
2024
import { TranslationKey } from "../../utils/translations"
2125

@@ -104,168 +108,152 @@ const StablecoinAccordion: React.FC<IProps> = () => {
104108
reduceMotion
105109
>
106110
<AccordionCustomItem category="dapps">
107-
{({ LeftColumnPanel, RightColumnPanel }) => (
108-
<>
109-
<LeftColumnPanel>
110-
<SectionTitle>
111-
<Translation id="page-stablecoins-accordion-requirements" />
112-
</SectionTitle>
113-
<StepBoxContainer>
114-
<StepBox
115-
to="/wallets/"
116-
titleId="page-stablecoins-accordion-swap-requirement-1"
117-
descId="page-stablecoins-accordion-swap-requirement-1-description"
118-
/>
119-
<StepBox
120-
to="/get-eth/"
121-
titleId="page-stablecoins-accordion-swap-requirement-2"
122-
descId="page-stablecoins-accordion-swap-requirement-2-description"
123-
/>
124-
</StepBoxContainer>
125-
<InfoBanner emoji=":light_bulb:">
126-
<H4>
127-
<Translation id="page-stablecoins-accordion-swap-editors-tip" />
128-
</H4>
129-
<Text>
130-
<Translation id="page-stablecoins-accordion-swap-editors-tip-copy" />
131-
</Text>
132-
<ButtonLink to="/wallets/find-wallet/?filters=has_card_deposits,has_dex_integrations">
133-
<Translation id="page-stablecoins-accordion-swap-editors-tip-button" />
134-
</ButtonLink>
135-
</InfoBanner>
136-
</LeftColumnPanel>
137-
<RightColumnPanel>
138-
<SectionTitle>
139-
<Translation id="page-stablecoins-accordion-swap-dapp-title" />
140-
</SectionTitle>
141-
<p>
142-
<Translation id="page-stablecoins-accordion-swap-dapp-intro" />{" "}
143-
<Link to="/get-eth/#dex">
144-
<Translation id="page-stablecoins-accordion-swap-dapp-link" />
145-
</Link>
146-
</p>
147-
<CardList content={cardListGroups.dapps} />
148-
</RightColumnPanel>
149-
</>
150-
)}
111+
<LeftColumnPanel>
112+
<SectionTitle>
113+
<Translation id="page-stablecoins-accordion-requirements" />
114+
</SectionTitle>
115+
<StepBoxContainer>
116+
<StepBox
117+
to="/wallets/"
118+
titleId="page-stablecoins-accordion-swap-requirement-1"
119+
descId="page-stablecoins-accordion-swap-requirement-1-description"
120+
/>
121+
<StepBox
122+
to="/get-eth/"
123+
titleId="page-stablecoins-accordion-swap-requirement-2"
124+
descId="page-stablecoins-accordion-swap-requirement-2-description"
125+
/>
126+
</StepBoxContainer>
127+
<InfoBanner emoji=":light_bulb:">
128+
<H4>
129+
<Translation id="page-stablecoins-accordion-swap-editors-tip" />
130+
</H4>
131+
<Text>
132+
<Translation id="page-stablecoins-accordion-swap-editors-tip-copy" />
133+
</Text>
134+
<ButtonLink to="/wallets/find-wallet/?filters=has_card_deposits,has_dex_integrations">
135+
<Translation id="page-stablecoins-accordion-swap-editors-tip-button" />
136+
</ButtonLink>
137+
</InfoBanner>
138+
</LeftColumnPanel>
139+
<RightColumnPanel>
140+
<SectionTitle>
141+
<Translation id="page-stablecoins-accordion-swap-dapp-title" />
142+
</SectionTitle>
143+
<p>
144+
<Translation id="page-stablecoins-accordion-swap-dapp-intro" />{" "}
145+
<Link to="/get-eth/#dex">
146+
<Translation id="page-stablecoins-accordion-swap-dapp-link" />
147+
</Link>
148+
</p>
149+
<CardList content={cardListGroups.dapps} />
150+
</RightColumnPanel>
151151
</AccordionCustomItem>
152152
<AccordionCustomItem category="buy">
153-
{({ LeftColumnPanel, RightColumnPanel }) => (
154-
<>
155-
<LeftColumnPanel>
156-
<SectionTitle>
157-
<Translation id="page-stablecoins-accordion-requirements" />
158-
</SectionTitle>
159-
<Text>
160-
<Translation id="page-stablecoins-accordion-buy-requirements-description" />
161-
</Text>
162-
<StepBoxContainer>
163-
<StepBox
164-
to="/get-eth/"
165-
titleId="page-stablecoins-accordion-buy-requirement-1"
166-
descId="page-stablecoins-accordion-buy-requirement-1-description"
167-
/>
168-
</StepBoxContainer>
169-
<InfoBanner isWarning={true}>
170-
<Translation id="page-stablecoins-accordion-buy-warning" />
171-
</InfoBanner>
172-
</LeftColumnPanel>
173-
<RightColumnPanel>
174-
<SectionTitle>
175-
<Translation id="page-stablecoins-accordion-buy-exchanges-title" />
176-
</SectionTitle>
177-
<CardList content={cardListGroups.exchanges} />
178-
</RightColumnPanel>
179-
</>
180-
)}
153+
<LeftColumnPanel>
154+
<SectionTitle>
155+
<Translation id="page-stablecoins-accordion-requirements" />
156+
</SectionTitle>
157+
<Text>
158+
<Translation id="page-stablecoins-accordion-buy-requirements-description" />
159+
</Text>
160+
<StepBoxContainer>
161+
<StepBox
162+
to="/get-eth/"
163+
titleId="page-stablecoins-accordion-buy-requirement-1"
164+
descId="page-stablecoins-accordion-buy-requirement-1-description"
165+
/>
166+
</StepBoxContainer>
167+
<InfoBanner isWarning={true}>
168+
<Translation id="page-stablecoins-accordion-buy-warning" />
169+
</InfoBanner>
170+
</LeftColumnPanel>
171+
<RightColumnPanel>
172+
<SectionTitle>
173+
<Translation id="page-stablecoins-accordion-buy-exchanges-title" />
174+
</SectionTitle>
175+
<CardList content={cardListGroups.exchanges} />
176+
</RightColumnPanel>
181177
</AccordionCustomItem>
182178
<AccordionCustomItem category="earn">
183-
{({ LeftColumnPanel, RightColumnPanel }) => (
184-
<>
185-
<LeftColumnPanel>
186-
<SectionTitle>
187-
<Translation id="page-stablecoins-accordion-requirements" />
188-
</SectionTitle>
189-
<p>
190-
<Translation id="page-stablecoins-accordion-earn-requirements-description" />
191-
</p>
192-
<StepBoxContainer>
193-
<StepBox
194-
to="/wallets/"
195-
titleId="page-stablecoins-accordion-earn-requirement-1"
196-
descId="page-stablecoins-accordion-earn-requirement-1-description"
197-
/>
198-
</StepBoxContainer>
199-
</LeftColumnPanel>
200-
<RightColumnPanel>
201-
<SectionTitle>
202-
<Translation id="page-stablecoins-accordion-earn-projects-title" />
203-
</SectionTitle>
204-
<p>
205-
<Translation id="page-stablecoins-accordion-earn-projects-copy" />
206-
</p>
207-
<CardList content={cardListGroups.earn} />
208-
</RightColumnPanel>
209-
</>
210-
)}
179+
<LeftColumnPanel>
180+
<SectionTitle>
181+
<Translation id="page-stablecoins-accordion-requirements" />
182+
</SectionTitle>
183+
<p>
184+
<Translation id="page-stablecoins-accordion-earn-requirements-description" />
185+
</p>
186+
<StepBoxContainer>
187+
<StepBox
188+
to="/wallets/"
189+
titleId="page-stablecoins-accordion-earn-requirement-1"
190+
descId="page-stablecoins-accordion-earn-requirement-1-description"
191+
/>
192+
</StepBoxContainer>
193+
</LeftColumnPanel>
194+
<RightColumnPanel>
195+
<SectionTitle>
196+
<Translation id="page-stablecoins-accordion-earn-projects-title" />
197+
</SectionTitle>
198+
<p>
199+
<Translation id="page-stablecoins-accordion-earn-projects-copy" />
200+
</p>
201+
<CardList content={cardListGroups.earn} />
202+
</RightColumnPanel>
211203
</AccordionCustomItem>
212204
<AccordionCustomItem category="generate">
213-
{({ LeftColumnPanel, RightColumnPanel }) => (
214-
<>
215-
<LeftColumnPanel>
216-
<SectionTitle>
217-
<Translation id="page-stablecoins-accordion-requirements" />
218-
</SectionTitle>
219-
<p>
220-
<Translation id="page-stablecoins-accordion-borrow-requirements-description" />
221-
</p>
222-
<StepBoxContainer>
223-
<StepBox
224-
to="/wallets/"
225-
titleId="page-stablecoins-accordion-borrow-requirement-1"
226-
descId="page-stablecoins-accordion-borrow-requirement-1-description"
227-
/>
228-
<StepBox
229-
to="/get-eth/"
230-
titleId="page-stablecoins-accordion-borrow-requirement-2"
231-
descId="page-stablecoins-accordion-borrow-requirement-2-description"
232-
/>
233-
</StepBoxContainer>
234-
<SectionTitle>
235-
<Translation id="page-stablecoins-accordion-borrow-crypto-collateral" />
236-
</SectionTitle>
237-
<p>
238-
<Translation id="page-stablecoins-accordion-borrow-crypto-collateral-copy" />{" "}
239-
<Link to="#how">
240-
<Translation id="page-stablecoins-accordion-borrow-crypto-collateral-link" />
241-
</Link>
242-
</p>
243-
<p>
244-
<Translation id="page-stablecoins-accordion-borrow-crypto-collateral-copy-p2" />
245-
</p>
246-
</LeftColumnPanel>
247-
<RightColumnPanel>
248-
<SectionTitle>
249-
<Translation id="page-stablecoins-accordion-borrow-places-title" />
250-
</SectionTitle>
251-
<p>
252-
<Translation id="page-stablecoins-accordion-borrow-places-intro" />
253-
</p>
254-
<Box mb={8}>
255-
<CardList content={cardListGroups.borrow} />
256-
</Box>
257-
<SectionTitle>
258-
<Translation id="page-stablecoins-accordion-borrow-risks-title" />
259-
</SectionTitle>
260-
<p>
261-
<Translation id="page-stablecoins-accordion-borrow-risks-copy" />{" "}
262-
<Link to="/eth/">
263-
<Translation id="page-stablecoins-accordion-borrow-risks-link" />
264-
</Link>
265-
</p>
266-
</RightColumnPanel>
267-
</>
268-
)}
205+
<LeftColumnPanel>
206+
<SectionTitle>
207+
<Translation id="page-stablecoins-accordion-requirements" />
208+
</SectionTitle>
209+
<p>
210+
<Translation id="page-stablecoins-accordion-borrow-requirements-description" />
211+
</p>
212+
<StepBoxContainer>
213+
<StepBox
214+
to="/wallets/"
215+
titleId="page-stablecoins-accordion-borrow-requirement-1"
216+
descId="page-stablecoins-accordion-borrow-requirement-1-description"
217+
/>
218+
<StepBox
219+
to="/get-eth/"
220+
titleId="page-stablecoins-accordion-borrow-requirement-2"
221+
descId="page-stablecoins-accordion-borrow-requirement-2-description"
222+
/>
223+
</StepBoxContainer>
224+
<SectionTitle>
225+
<Translation id="page-stablecoins-accordion-borrow-crypto-collateral" />
226+
</SectionTitle>
227+
<p>
228+
<Translation id="page-stablecoins-accordion-borrow-crypto-collateral-copy" />{" "}
229+
<Link to="#how">
230+
<Translation id="page-stablecoins-accordion-borrow-crypto-collateral-link" />
231+
</Link>
232+
</p>
233+
<p>
234+
<Translation id="page-stablecoins-accordion-borrow-crypto-collateral-copy-p2" />
235+
</p>
236+
</LeftColumnPanel>
237+
<RightColumnPanel>
238+
<SectionTitle>
239+
<Translation id="page-stablecoins-accordion-borrow-places-title" />
240+
</SectionTitle>
241+
<p>
242+
<Translation id="page-stablecoins-accordion-borrow-places-intro" />
243+
</p>
244+
<Box mb={8}>
245+
<CardList content={cardListGroups.borrow} />
246+
</Box>
247+
<SectionTitle>
248+
<Translation id="page-stablecoins-accordion-borrow-risks-title" />
249+
</SectionTitle>
250+
<p>
251+
<Translation id="page-stablecoins-accordion-borrow-risks-copy" />{" "}
252+
<Link to="/eth/">
253+
<Translation id="page-stablecoins-accordion-borrow-risks-link" />
254+
</Link>
255+
</p>
256+
</RightColumnPanel>
269257
</AccordionCustomItem>
270258
</Accordion>
271259
)

0 commit comments

Comments
 (0)