Skip to content

Commit 2d6607a

Browse files
onnovisseronnovisser
authored
Open Fix Migrate pages breaking when no wallet connected #2757 
1 parent 9b2d4a2 commit 2d6607a

File tree

4 files changed

+290
-301
lines changed

4 files changed

+290
-301
lines changed

‎centrifuge-app/src/pages/Portfolio/CFGTokenMigration.tsx‎

Lines changed: 104 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { useTheme } from 'styled-components'
88
import { LayoutSection } from '../../../src/components/LayoutBase/LayoutSection'
99
import { useEvmTransaction } from '../../../src/utils/tinlake/useEvmTransaction'
1010
import { Tooltips } from '../../components/Tooltips'
11+
import { isTestEnv } from '../../config'
1112
import { Dec, Decimal } from '../../utils/Decimal'
1213
import { formatBalance } from '../../utils/formatting'
1314
import { useCFGTokenPrice } from '../../utils/useCFGTokenPrice'
@@ -112,109 +113,101 @@ export default function CFGTokenMigration() {
112113
}
113114

114115
return (
115-
// @ts-expect-error
116-
<ConnectionGuard networks={[1, 11155111]} paddingX={12}>
117-
<Box mb={2}>
118-
<LayoutSection alignItems="flex-start">
119-
<Text variant="heading1">Portfolio</Text>
120-
</LayoutSection>
116+
<Box mb={2}>
117+
<LayoutSection alignItems="flex-start">
118+
<Text variant="heading1">Portfolio</Text>
119+
</LayoutSection>
120+
<Box
121+
backgroundColor="backgroundSecondary"
122+
border={`1px solid ${theme.colors.borderSecondary}`}
123+
borderRadius={8}
124+
height="80vh"
125+
m={2}
126+
display="flex"
127+
justifyContent="center"
128+
alignItems="center"
129+
>
121130
<Box
122-
backgroundColor="backgroundSecondary"
123-
border={`1px solid ${theme.colors.borderSecondary}`}
131+
backgroundColor="white"
124132
borderRadius={8}
125-
height="80vh"
126133
m={2}
127-
display="flex"
128-
justifyContent="center"
129-
alignItems="center"
134+
p={2}
135+
width={500}
136+
style={{
137+
boxShadow: '4px 8px 24px 0px #0000000D',
138+
}}
130139
>
131-
<Box
132-
backgroundColor="white"
133-
borderRadius={8}
134-
m={2}
135-
p={2}
136-
width={500}
137-
style={{
138-
boxShadow: '4px 8px 24px 0px #0000000D',
139-
}}
140-
>
141-
{isMigrated ? (
142-
<MigrationSuccessPage
143-
title="WCFG"
144-
balance={balance?.toNumber() || 0}
145-
currencyName="WCFG"
146-
address={address ?? ''}
147-
/>
148-
) : (
149-
<>
150-
<Grid gridTemplateColumns="1fr 24px" alignItems="center" mb={2}>
151-
<Text variant="heading2">{`WCFG -> CFG Migration`}</Text>
152-
<Tooltips
153-
type="nav"
154-
placement="bottom"
155-
label={<IconInfo size="iconSmall" />}
156-
body={<TooltipText />}
157-
/>
158-
</Grid>
159-
<Divider color="borderSecondary" />
160-
<Grid gridTemplateColumns="1fr 1fr 1fr" alignItems="center" mb={2} mt={2}>
161-
<Box>
162-
<Text variant="body3" color="textSecondary">
163-
Position
164-
</Text>
165-
<Text variant="heading3">{formatBalance(balance?.toNumber() || 0, '', 2)} WCFG</Text>
166-
</Box>
167-
<Box>
168-
<Text variant="body3" color="textSecondary">
169-
Value
170-
</Text>
171-
<Text variant="heading3">{formatBalance(wcfgValue, '', 2)} USD</Text>
172-
</Box>
173-
<Box>
174-
<Text variant="body3" color="textSecondary">
175-
CFG price
176-
</Text>
177-
<Text variant="heading3">{formatBalance(CFGPrice || 0, '', 2)} USD</Text>
178-
</Box>
179-
</Grid>
180-
<Box border={`1px solid ${theme.colors.borderSecondary}`} borderRadius={8} p={2} mb={3}>
181-
<Box display="flex" flexDirection="column">
182-
<CurrencyInput
183-
value={balance?.toNumber() || 0}
184-
currency="WCFG"
185-
label="Amount of WCFG to migrate"
186-
disabled
187-
secondaryValue="Max"
188-
/>
189-
<Text style={{ marginTop: 8, alignSelf: 'flex-end' }} variant="body2">
190-
Wallet balance: {formatBalance(balance?.toNumber() || 0)} WCFG
191-
</Text>
192-
</Box>
140+
{isMigrated ? (
141+
<MigrationSuccessPage
142+
title="WCFG"
143+
balance={balance?.toNumber() || 0}
144+
currencyName="WCFG"
145+
address={address ?? ''}
146+
/>
147+
) : (
148+
<>
149+
<Grid gridTemplateColumns="1fr 24px" alignItems="center" mb={2}>
150+
<Text variant="heading2">{`WCFG -> CFG Migration`}</Text>
151+
<Tooltips type="nav" placement="bottom" label={<IconInfo size="iconSmall" />} body={<TooltipText />} />
152+
</Grid>
153+
<Divider color="borderSecondary" />
154+
<Grid gridTemplateColumns="1fr 1fr 1fr" alignItems="center" mb={2} mt={2}>
155+
<Box>
156+
<Text variant="body3" color="textSecondary">
157+
Position
158+
</Text>
159+
<Text variant="heading3">{formatBalance(balance?.toNumber() || 0, '', 2)} WCFG</Text>
160+
</Box>
161+
<Box>
162+
<Text variant="body3" color="textSecondary">
163+
Value
164+
</Text>
165+
<Text variant="heading3">{formatBalance(wcfgValue, '', 2)} USD</Text>
166+
</Box>
167+
<Box>
168+
<Text variant="body3" color="textSecondary">
169+
CFG price
170+
</Text>
171+
<Text variant="heading3">{formatBalance(CFGPrice || 0, '', 2)} USD</Text>
172+
</Box>
173+
</Grid>
174+
<Box border={`1px solid ${theme.colors.borderSecondary}`} borderRadius={8} p={2} mb={3}>
175+
<Box display="flex" flexDirection="column">
193176
<CurrencyInput
194177
value={balance?.toNumber() || 0}
195-
currency="CFG"
196-
label="Amount of CFG tokens"
178+
currency="WCFG"
179+
label="Amount of WCFG to migrate"
197180
disabled
181+
secondaryValue="Max"
198182
/>
199-
<Grid display="flex" justifyContent="space-between" mt={2} mb={2}>
200-
<Text variant="heading4">Amount of CFG tokens</Text>
201-
<Text variant="body2" color="textSecondary">
202-
{formatBalance(balance?.toNumber() || 0)} WCFG
203-
</Text>
204-
</Grid>
205-
<Grid display="flex" justifyContent="space-between" mt={2} mb={2}>
206-
<Text variant="heading4">Network cost</Text>
207-
<Text variant="body2" color="textSecondary">
208-
- {formatBalance(new Decimal(gasPrice || 0), '', 2)} Gwei
209-
</Text>
210-
</Grid>
211-
<Divider color="borderSecondary" />
212-
<Grid display="flex" justifyContent="space-between" mt={2}>
213-
<Text variant="heading3">Total amount of CFG tokens</Text>
214-
<Text variant="heading3">{formatBalance(balance?.toNumber() || 0)} CFG</Text>
215-
</Grid>
183+
<Text style={{ marginTop: 8, alignSelf: 'flex-end' }} variant="body2">
184+
Wallet balance: {formatBalance(balance?.toNumber() || 0)} WCFG
185+
</Text>
216186
</Box>
217-
187+
<CurrencyInput value={balance?.toNumber() || 0} currency="CFG" label="Amount of CFG tokens" disabled />
188+
<Grid display="flex" justifyContent="space-between" mt={2} mb={2}>
189+
<Text variant="heading4">Amount of CFG tokens</Text>
190+
<Text variant="body2" color="textSecondary">
191+
{formatBalance(balance?.toNumber() || 0)} WCFG
192+
</Text>
193+
</Grid>
194+
<Grid display="flex" justifyContent="space-between" mt={2} mb={2}>
195+
<Text variant="heading4">Network cost</Text>
196+
<Text variant="body2" color="textSecondary">
197+
- {formatBalance(new Decimal(gasPrice || 0), '', 2)} Gwei
198+
</Text>
199+
</Grid>
200+
<Divider color="borderSecondary" />
201+
<Grid display="flex" justifyContent="space-between" mt={2}>
202+
<Text variant="heading3">Total amount of CFG tokens</Text>
203+
<Text variant="heading3">{formatBalance(balance?.toNumber() || 0)} CFG</Text>
204+
</Grid>
205+
</Box>
206+
<ConnectionGuard
207+
networks={isTestEnv ? [11155111] : [1]}
208+
body="Please connect to the Ethereum to continue."
209+
showConnect
210+
>
218211
<Button
219212
small
220213
style={{ width: '100%' }}
@@ -224,30 +217,24 @@ export default function CFGTokenMigration() {
224217
>
225218
{isAllowanceSameAsBalance ? 'Migrate WCFG' : 'Approve WCFG and migrate'}
226219
</Button>
227-
<MigrationSupportLink />
228-
<Box mt={2} justifyContent="center" display="flex">
229-
<Stepper activeStep={step} setActiveStep={setStep} direction="row">
230-
<Step
231-
label="Approve"
232-
isActive={step === 1}
233-
isStepCompleted={step === 2}
234-
empty
235-
variant="secondary"
236-
/>
237-
<Step
238-
label="Confirm migration"
239-
isActive={step === 2}
240-
isStepCompleted={isMigrated}
241-
empty
242-
variant="secondary"
243-
/>
244-
</Stepper>
245-
</Box>
246-
</>
247-
)}
248-
</Box>
220+
</ConnectionGuard>
221+
<MigrationSupportLink />
222+
<Box mt={2} justifyContent="center" display="flex">
223+
<Stepper activeStep={step} setActiveStep={setStep} direction="row">
224+
<Step label="Approve" isActive={step === 1} isStepCompleted={step === 2} empty variant="secondary" />
225+
<Step
226+
label="Confirm migration"
227+
isActive={step === 2}
228+
isStepCompleted={isMigrated}
229+
empty
230+
variant="secondary"
231+
/>
232+
</Stepper>
233+
</Box>
234+
</>
235+
)}
249236
</Box>
250237
</Box>
251-
</ConnectionGuard>
238+
</Box>
252239
)
253240
}

0 commit comments

Comments
 (0)