-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(evm): improve stake page (#335)
- Loading branch information
1 parent
676e335
commit 197f08a
Showing
70 changed files
with
2,842 additions
and
1,599 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
apps/evm/src/abis/seToken.abi.ts → apps/evm/src/abis/erc20WithUnderlying.abi.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| export const seTokenAbi = [ | ||
| export const erc20WithUnderlying = [ | ||
| { | ||
| inputs: [], | ||
| stateMutability: 'nonpayable', | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
104 changes: 104 additions & 0 deletions
104
apps/evm/src/app/[lang]/(bridge)/stake/[slug]/Strategy.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,104 @@ | ||
| 'use client'; | ||
|
|
||
| import { Alert, ArrowLeft, Avatar, Button, Card, Flex, H1, H2, Link, P, Skeleton, Tabs, TabsItem } from '@gobob/ui'; | ||
| import { Trans } from '@lingui/macro'; | ||
| import { useState } from 'react'; | ||
|
|
||
| import { useGetGatewayTransactions } from '../../hooks'; | ||
| import { StrategyDetails, StrategyForm } from '../components'; | ||
| import { useGetStrategies } from '../hooks'; | ||
|
|
||
| import { Layout, Main } from '@/components'; | ||
| import { RoutesPath } from '@/constants'; | ||
| import { PageLangParam } from '@/i18n/withLigui'; | ||
|
|
||
| type Props = PageLangParam & { | ||
| params: { slug: string }; | ||
| }; | ||
|
|
||
| enum Tab { | ||
| Deposit = 'deposit', | ||
| Withdraw = 'withdraw' | ||
| } | ||
|
|
||
| function Strategy({ params }: Props) { | ||
| const { refetch: refetchTransactions } = useGetGatewayTransactions({}); | ||
| const [tab, setTab] = useState<Tab>(Tab.Deposit); | ||
|
|
||
| const { data: strategies = [] } = useGetStrategies(); | ||
|
|
||
| const strategy = strategies.find((strategy) => strategy.meta.slug === params.slug); | ||
|
|
||
| const isLending = strategy?.meta.type === 'lending'; | ||
|
|
||
| const action = isLending ? <Trans>withdraw</Trans> : <Trans>unstake</Trans>; | ||
| const depositTitle = isLending ? <Trans>Supply</Trans> : <Trans>Stake</Trans>; | ||
| const withdrawTitle = isLending ? <Trans>Withdraw</Trans> : <Trans>Unstake</Trans>; | ||
|
|
||
| return ( | ||
| <Layout> | ||
| <Main maxWidth='5xl' padding='lg'> | ||
| <Link href={RoutesPath.STRATEGIES}> | ||
| <Flex alignItems='center' gap='s'> | ||
| <ArrowLeft size='xs' /> | ||
| <Trans>Back</Trans> | ||
| </Flex> | ||
| </Link> | ||
| <Flex alignItems='center' gap='lg' marginTop='4xl'> | ||
| {strategy ? ( | ||
| <Avatar size='4xl' src={strategy.info.logoUrl || strategy.meta.logo} /> | ||
| ) : ( | ||
| <Skeleton height='4xl' rounded='full' width='4xl' /> | ||
| )} | ||
|
|
||
| <Flex alignItems='flex-start' direction='column'> | ||
| <H1 size='lg'>{strategy ? strategy.info.name : <Skeleton height='xl' width='12rem' />}</H1> | ||
| <H2 color='grey-50' size='md' weight='medium'> | ||
| {strategy ? strategy.info.protocol : <Skeleton height='xl' width='8rem' />} | ||
| </H2> | ||
| </Flex> | ||
| </Flex> | ||
| {strategy?.info?.warningMessage && ( | ||
| <Alert status='warning' style={{ marginTop: '1rem' }} variant='outlined'> | ||
| {strategy?.info.warningMessage} | ||
| </Alert> | ||
| )} | ||
| <Flex direction={{ base: 'column', md: 'row' }} gap='xl' marginTop='3xl' style={{ width: '100%' }}> | ||
| <Card flex='1 0 0%' style={{ height: 'max-content' }}> | ||
| <Tabs fullWidth selectedKey={tab} size='lg' onSelectionChange={(key) => setTab(key as Tab)}> | ||
| <TabsItem key={Tab.Deposit} title={strategy ? depositTitle : <Skeleton height='xl' width='6rem' />}> | ||
| <StrategyForm isLending={isLending} strategy={strategy} onSuccess={refetchTransactions} /> | ||
| </TabsItem> | ||
| <TabsItem key={Tab.Withdraw} title={strategy ? withdrawTitle : <Skeleton height='xl' width='6rem' />}> | ||
| <Flex | ||
| alignItems='center' | ||
| direction='column' | ||
| flex={1} | ||
| gap='xl' | ||
| justifyContent='center' | ||
| marginTop='md' | ||
| paddingX='md' | ||
| style={{ height: '100%', minHeight: '25rem' }} | ||
| > | ||
| <P align='center' color='grey-50' size='s'> | ||
| <Trans> | ||
| Complete your {action} by accessing {strategy?.info.protocol} Dapp using the button bellow | ||
| </Trans> | ||
| </P> | ||
| <Button asChild color='primary'> | ||
| <Link external href={strategy?.info.links.manage}> | ||
| Go to {strategy?.info.protocol} Dapp | ||
| </Link> | ||
| </Button> | ||
| </Flex> | ||
| </TabsItem> | ||
| </Tabs> | ||
| </Card> | ||
| <StrategyDetails isLending={isLending} strategy={strategy} /> | ||
| </Flex> | ||
| </Main> | ||
| </Layout> | ||
| ); | ||
| } | ||
|
|
||
| export { Strategy }; |
Oops, something went wrong.