Skip to content

Commit 796f926

Browse files
EjembiEmmanuelEjembiEmmanuel
committed
feat: show transaction history when wallet is connected
1 parent bde48ca commit 796f926

File tree

1 file changed

+168
-148
lines changed

1 file changed

+168
-148
lines changed

‎src/app/strategy/[strategyId]/_components/TransactionsTab.tsx‎

Lines changed: 168 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
Text,
1313
} from '@chakra-ui/react';
1414
import { ArrowDownIcon, ArrowUpIcon, ExternalLinkIcon } from '@chakra-ui/icons';
15+
import { useAccount } from '@starknet-react/core';
1516

1617
import {
1718
capitalize,
@@ -38,6 +39,7 @@ interface TransactionsTabProps {
3839
}
3940

4041
export function TransactionsTab(props: TransactionsTabProps) {
42+
const { address } = useAccount();
4143
const { strategy, txHistory } = props;
4244

4345
return (
@@ -56,164 +58,182 @@ export function TransactionsTab(props: TransactionsTabProps) {
5658
</Flex>
5759

5860
<Flex gap={'16px'}>
59-
<TableContainer width={'100%'}>
60-
<Table
61-
variant="unstyled"
62-
borderWidth={'1px'}
63-
borderColor={'#2D2D3D'}
64-
sx={{
65-
borderRadius: '12px',
66-
overflow: 'hidden',
67-
'border-collapse': 'separate',
68-
'border-spacing': '0px',
69-
}}
70-
>
71-
<Thead
72-
display={{ base: 'none', md: 'table-header-group' }}
73-
bg={'color_3'}
74-
>
75-
<Tr>
76-
<Th
77-
width={'50px'}
78-
color={'white'}
79-
borderColor={'slate_blue'}
80-
fontSize={'14px'}
81-
fontWeight={'600'}
82-
textTransform={'capitalize'}
83-
>
84-
#
85-
</Th>
86-
<Th
87-
color={'white'}
88-
borderRightWidth={'1px'}
89-
borderColor={'slate_blue'}
90-
fontSize={'14px'}
91-
fontWeight={'600'}
92-
textTransform={'capitalize'}
93-
>
94-
Amount
95-
</Th>
96-
<Th
97-
color={'white'}
98-
borderRightWidth={'1px'}
99-
borderColor={'slate_blue'}
100-
fontSize={'14px'}
101-
fontWeight={'600'}
102-
textTransform={'capitalize'}
103-
>
104-
Transaction type
105-
</Th>
106-
<Th
107-
color={'white'}
108-
borderRightWidth={'1px'}
109-
borderColor={'slate_blue'}
110-
fontSize={'14px'}
111-
fontWeight={'600'}
112-
textTransform={'capitalize'}
113-
>
114-
Wallet address
115-
</Th>
116-
<Th
117-
color={'white'}
118-
borderRightWidth={'1px'}
119-
borderColor={'slate_blue'}
120-
fontSize={'14px'}
121-
fontWeight={'600'}
122-
textTransform={'capitalize'}
123-
>
124-
Time
125-
</Th>
126-
</Tr>
127-
</Thead>
128-
<Tbody>
129-
{txHistory.findManyInvestment_flows.map((tx, index) => {
130-
const token = getTokenInfoFromAddr(tx.asset);
131-
const decimals = token?.decimals;
132-
133-
return (
134-
<Tr
135-
key={index}
136-
border={'none'}
137-
borderBottom={'1px solid #000000'}
138-
>
139-
<Td color={'text'} fontSize={'14px'}>
140-
{index + 1}.
141-
</Td>
142-
<Td color={'text'} fontSize={'14px'}>
143-
{Number(
144-
new MyNumber(
145-
tx.amount,
146-
decimals!,
147-
).toEtherToFixedDecimals(token.displayDecimals),
148-
).toLocaleString()}{' '}
149-
{token?.name}
150-
</Td>
151-
<Td color={'text'} fontSize={'14px'}>
152-
<Flex alignItems={'center'} gap={'8px'}>
153-
{tx.type === 'deposit' ? (
154-
<Box
155-
bg={'light_green'}
156-
padding={'4px'}
157-
borderRadius={'50%'}
158-
width={'24px'}
159-
height={'24px'}
160-
display={'flex'}
161-
alignItems={'center'}
162-
justifyContent={'center'}
61+
{address ? (
62+
<>
63+
{!strategy.settings.isTransactionHistDisabled &&
64+
txHistory.findManyInvestment_flows.length !== 0 && (
65+
<>
66+
<TableContainer width={'100%'}>
67+
<Table
68+
variant="unstyled"
69+
borderWidth={'1px'}
70+
borderColor={'#2D2D3D'}
71+
sx={{
72+
borderRadius: '12px',
73+
overflow: 'hidden',
74+
'border-collapse': 'separate',
75+
'border-spacing': '0px',
76+
}}
77+
>
78+
<Thead
79+
display={{ base: 'none', md: 'table-header-group' }}
80+
bg={'color_3'}
81+
>
82+
<Tr>
83+
<Th
84+
width={'50px'}
85+
color={'white'}
86+
borderColor={'slate_blue'}
87+
fontSize={'14px'}
88+
fontWeight={'600'}
89+
textTransform={'capitalize'}
90+
>
91+
#
92+
</Th>
93+
<Th
94+
color={'white'}
95+
borderRightWidth={'1px'}
96+
borderColor={'slate_blue'}
97+
fontSize={'14px'}
98+
fontWeight={'600'}
99+
textTransform={'capitalize'}
100+
>
101+
Amount
102+
</Th>
103+
<Th
104+
color={'white'}
105+
borderRightWidth={'1px'}
106+
borderColor={'slate_blue'}
107+
fontSize={'14px'}
108+
fontWeight={'600'}
109+
textTransform={'capitalize'}
110+
>
111+
Transaction type
112+
</Th>
113+
<Th
114+
color={'white'}
115+
borderRightWidth={'1px'}
116+
borderColor={'slate_blue'}
117+
fontSize={'14px'}
118+
fontWeight={'600'}
119+
textTransform={'capitalize'}
163120
>
164-
<ArrowDownIcon color={'black'} />
165-
</Box>
166-
) : (
167-
<Box
168-
bg={'red_2'}
169-
padding={'4px'}
170-
borderRadius={'50%'}
171-
width={'24px'}
172-
height={'24px'}
173-
display={'flex'}
174-
alignItems={'center'}
175-
justifyContent={'center'}
121+
Wallet address
122+
</Th>
123+
<Th
124+
color={'white'}
125+
borderRightWidth={'1px'}
126+
borderColor={'slate_blue'}
127+
fontSize={'14px'}
128+
fontWeight={'600'}
129+
textTransform={'capitalize'}
176130
>
177-
<ArrowUpIcon color={'black'} />
178-
</Box>
179-
)}
131+
Time
132+
</Th>
133+
</Tr>
134+
</Thead>
135+
<Tbody>
136+
{txHistory.findManyInvestment_flows.map((tx, index) => {
137+
const token = getTokenInfoFromAddr(tx.asset);
138+
const decimals = token?.decimals;
180139

181-
{capitalize(tx.type)}
182-
</Flex>
183-
</Td>
184-
<Td color={'text'} fontSize={'14px'}>
185-
<Text
186-
width={'100%'}
187-
fontWeight={'600'}
188-
color={'border_light'}
189-
>
190-
<Link
191-
href={`https://starkscan.co/tx/${tx.txHash}`}
192-
target="_blank"
193-
>
194-
{shortAddress(tx.txHash)} <ExternalLinkIcon />
195-
</Link>
196-
</Text>
197-
</Td>
198-
<Td color={'silver_gray'} fontSize={'14px'}>
199-
<Text width={'100%'}>
200-
{timeAgo(new Date(tx.timestamp * 1000))}
201-
</Text>
202-
</Td>
203-
</Tr>
204-
);
205-
})}
206-
</Tbody>
207-
</Table>
208-
</TableContainer>
140+
return (
141+
<Tr
142+
key={index}
143+
border={'none'}
144+
borderBottom={'1px solid #000000'}
145+
>
146+
<Td color={'text'} fontSize={'14px'}>
147+
{index + 1}.
148+
</Td>
149+
<Td color={'text'} fontSize={'14px'}>
150+
{Number(
151+
new MyNumber(
152+
tx.amount,
153+
decimals!,
154+
).toEtherToFixedDecimals(
155+
token.displayDecimals,
156+
),
157+
).toLocaleString()}{' '}
158+
{token?.name}
159+
</Td>
160+
<Td color={'text'} fontSize={'14px'}>
161+
<Flex alignItems={'center'} gap={'8px'}>
162+
{tx.type === 'deposit' ? (
163+
<Box
164+
bg={'light_green'}
165+
padding={'4px'}
166+
borderRadius={'50%'}
167+
width={'24px'}
168+
height={'24px'}
169+
display={'flex'}
170+
alignItems={'center'}
171+
justifyContent={'center'}
172+
>
173+
<ArrowDownIcon color={'black'} />
174+
</Box>
175+
) : (
176+
<Box
177+
bg={'red_2'}
178+
padding={'4px'}
179+
borderRadius={'50%'}
180+
width={'24px'}
181+
height={'24px'}
182+
display={'flex'}
183+
alignItems={'center'}
184+
justifyContent={'center'}
185+
>
186+
<ArrowUpIcon color={'black'} />
187+
</Box>
188+
)}
189+
190+
{capitalize(tx.type)}
191+
</Flex>
192+
</Td>
193+
<Td color={'text'} fontSize={'14px'}>
194+
<Text
195+
width={'100%'}
196+
fontWeight={'600'}
197+
color={'border_light'}
198+
>
199+
<Link
200+
href={`https://starkscan.co/tx/${tx.txHash}`}
201+
target="_blank"
202+
>
203+
{shortAddress(tx.txHash)}{' '}
204+
<ExternalLinkIcon />
205+
</Link>
206+
</Text>
207+
</Td>
208+
<Td color={'silver_gray'} fontSize={'14px'}>
209+
<Text width={'100%'}>
210+
{timeAgo(new Date(tx.timestamp * 1000))}
211+
</Text>
212+
</Td>
213+
</Tr>
214+
);
215+
})}
216+
</Tbody>
217+
</Table>
218+
</TableContainer>
219+
</>
220+
)}
221+
</>
222+
) : (
223+
<Text fontSize={'14px'} textAlign={'center'} color="light_grey">
224+
Connect your wallet to view transaction history
225+
</Text>
226+
)}
209227

210228
{/* If no filtered tx */}
211-
{!strategy.settings.isTransactionHistDisabled &&
229+
{address &&
230+
!strategy.settings.isTransactionHistDisabled &&
212231
txHistory.findManyInvestment_flows.length === 0 && (
213232
<Text fontSize={'14px'} textAlign={'center'} color="light_grey">
214233
No transactions found
215234
</Text>
216235
)}
236+
217237
{strategy.settings.isTransactionHistDisabled && (
218238
<Text
219239
fontSize={'14px'}

0 commit comments

Comments
 (0)