Skip to content

Commit dfb5133

Browse files
ivopaunovivopaunov
authored
Merge pull request #303 from AmbireTech/development
v0.69.65
2 parents 5eb462d + 05fe517 commit dfb5133

21 files changed

+520
-200
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "adex-interface",
3-
"version": "0.69.62",
3+
"version": "0.69.65",
44
"private": true,
55
"dependencies": {
66
"@ambire/login-sdk-core": "^0.0.21",

‎src/App.tsx

+18
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ import { Global, MantineEmotionProvider, emotionTransform } from '@mantine/emoti
2323
import { emotionCache } from './emotion'
2424

2525
const ENV = process.env.REACT_APP_ENV
26+
const maintenanceStart = Date.UTC(2024, 9, 4, 7, 45)
27+
const maintenanceEnd = Date.UTC(2024, 9, 4, 8, 45)
2628

2729
function GlobalStyles() {
2830
return (
@@ -50,6 +52,21 @@ const EnvBanner = () => (
5052
</Progress.Root>
5153
)
5254

55+
const MaintenanceBanner = () => (
56+
<Progress.Root
57+
radius="xs"
58+
size={30}
59+
style={{ zIndex: 42069, opacity: 0.5, position: 'fixed', top: 0, left: 0, right: 0 }}
60+
>
61+
<Progress.Section value={100} color="warning">
62+
<Progress.Label>
63+
Planned maintenance in progress {new Date(maintenanceStart).toLocaleString()} -{' '}
64+
{new Date(maintenanceEnd).toLocaleTimeString()} (Errors may occur)
65+
</Progress.Label>
66+
</Progress.Section>
67+
</Progress.Root>
68+
)
69+
5370
const resolver: CSSVariablesResolver = (theme) => ({
5471
variables: {
5572
'--mantine-color-error': theme.colors.error[3]
@@ -80,6 +97,7 @@ function App() {
8097
<GlobalStyles />
8198
<Notifications />
8299
{ENV && <EnvBanner />}
100+
<MaintenanceBanner />
83101
<RouterProvider router={router} />
84102
</ModalsProvider>
85103
</MantineProvider>

‎src/components/AdminPanel/AccountDetails.tsx

+25-7
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,30 @@
11
import { useEffect, useMemo } from 'react'
2-
import { SimpleGrid, Box, Loader, Center, Fieldset } from '@mantine/core'
2+
import { SimpleGrid, Stack, Loader, Center, Fieldset, NumberFormatter } from '@mantine/core'
33
import useAdmin from 'hooks/useAdmin'
44
import { useParams } from 'react-router-dom'
55
import Dashboard from 'components/Dashboard'
6+
import { parseBigNumTokenAmountToDecimal } from 'helpers/balances'
67
import { FundsActivity } from './AccountDetailsElements'
78
import { AccountInfo } from './AccoutInfo'
89
import { AdminDeposit } from './AdminDeposit'
910

1011
function AccountDetails() {
1112
const { accountId = '' } = useParams()
1213
const { accounts, initialDataLoading, getAllAccounts } = useAdmin()
13-
console.log({ accounts })
14+
1415
const accountData = useMemo(() => accounts.get(accountId), [accounts, accountId])
1516

17+
const balance = useMemo(
18+
() =>
19+
accountData
20+
? parseBigNumTokenAmountToDecimal(
21+
accountData?.availableBalance,
22+
accountData?.balanceToken.decimals
23+
)
24+
: 0,
25+
[accountData]
26+
)
27+
1628
useEffect(() => {
1729
initialDataLoading && getAllAccounts()
1830
}, [getAllAccounts, initialDataLoading])
@@ -30,7 +42,13 @@ function AccountDetails() {
3042
}
3143

3244
return (
33-
<Box>
45+
<Stack>
46+
<SimpleGrid cols={{ md: 1, xl: 2 }} spacing="xl">
47+
<Fieldset legend="Account address">{accountData.id}</Fieldset>
48+
<Fieldset legend="Account balance">
49+
<NumberFormatter suffix=" USDC" value={balance} thousandSeparator decimalScale={2} />
50+
</Fieldset>
51+
</SimpleGrid>
3452
<SimpleGrid
3553
cols={{ md: 1, xl: 2 }}
3654
spacing="xl"
@@ -42,21 +60,21 @@ function AccountDetails() {
4260
<Fieldset legend="Account info form">
4361
<AccountInfo accountData={accountData} />
4462
</Fieldset>
45-
<Fieldset legend="Deposit form">
63+
<Fieldset legend="Transfers form">
4664
<AdminDeposit accountData={accountData} />
4765
</Fieldset>
4866
</SimpleGrid>
49-
<SimpleGrid spacing="xl" mt="xl">
67+
<SimpleGrid spacing="xl">
5068
<Fieldset legend="Activity">
5169
<FundsActivity accountData={accountData} />
5270
</Fieldset>
5371
</SimpleGrid>
54-
<SimpleGrid spacing="xl" mt="xl">
72+
<SimpleGrid spacing="xl">
5573
<Fieldset legend="Campaigns">
5674
<Dashboard isAdminPanel accountId={accountId} />
5775
</Fieldset>
5876
</SimpleGrid>
59-
</Box>
77+
</Stack>
6078
)
6179
}
6280

‎src/components/AdminPanel/AccountDetailsElements.tsx

+26-13
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,21 @@
11
import { useMemo } from 'react'
22
import { Account } from 'types'
3-
import { Box, Text, MantineColor } from '@mantine/core'
3+
import { Text, MantineColor } from '@mantine/core'
44

55
import CustomTable, { DataElement } from 'components/common/CustomTable'
66
import { parseBigNumTokenAmountToDecimal, toOperationEntry } from 'helpers'
77

8-
export const FundsActivity = ({ accountData }: { accountData: Account }) => {
8+
export const FundsActivity = ({
9+
accountData,
10+
withShadow
11+
}: {
12+
accountData: Account
13+
withShadow?: boolean
14+
}) => {
915
const elements = useMemo(() => {
1016
const data: DataElement[] = [
1117
...accountData.fundsDeposited.deposits.map((x) => toOperationEntry('deposit', x)),
18+
...accountData.fundsWithdrawn.withdrawals.map((x) => toOperationEntry('withdraw', x)),
1219
...accountData.fundsOnCampaigns.perCampaign.map((x) => toOperationEntry('campaignOpen', x)),
1320
...accountData.refundsFromCampaigns.perCampaign.map((x) =>
1421
toOperationEntry('campaignRefund', x)
@@ -17,14 +24,21 @@ export const FundsActivity = ({ accountData }: { accountData: Account }) => {
1724
.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
1825

1926
.map((x, i) => {
20-
const sign = x.type === 'campaignOpen' ? '-' : '+'
27+
const sign = x.type === 'campaignOpen' || x.type === 'withdraw' ? '-' : '+'
2128
const color: MantineColor = sign === '-' ? 'darkred' : 'darkgreen'
2229
return {
2330
id: x.id + i,
2431
columns: [
2532
{
2633
value: x.type,
27-
element: <Text c={color} tt="capitalize" fw="bold">{`${sign} ${x.name}`}</Text>
34+
element: (
35+
<Text
36+
c={color}
37+
tt="capitalize"
38+
fw="bold"
39+
style={{ whiteSpace: 'nowrap' }}
40+
>{`${sign} ${x.name}`}</Text>
41+
)
2842
},
2943
{ value: x.date.getTime(), element: x.date?.toLocaleDateString() || '' },
3044
{
@@ -45,19 +59,18 @@ export const FundsActivity = ({ accountData }: { accountData: Account }) => {
4559
}
4660
})
4761

48-
console.log({ data })
62+
// console.log({ data })
4963

5064
return data
5165
}, [accountData])
5266

5367
return (
54-
<Box>
55-
<CustomTable
56-
headings={['Type', 'Date', 'Amount', 'Token', 'Tx/Campaign id']}
57-
data={elements}
58-
defaultSortIndex={1}
59-
pageSize={10}
60-
/>
61-
</Box>
68+
<CustomTable
69+
headings={['Type', 'Date', 'Amount', 'Token', 'Tx/Campaign id']}
70+
data={elements}
71+
defaultSortIndex={1}
72+
pageSize={10}
73+
shadow={withShadow ? 'xs' : undefined}
74+
/>
6275
)
6376
}

‎src/components/AdminPanel/AdminDeposit.tsx

+78-21
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,47 @@
11
import { isInRange, hasLength, matches, useForm } from '@mantine/form'
22
import { useCallback, useMemo, useState, FormEvent } from 'react'
3-
import { Button, Group, TextInput, Box, NumberInput, Stack } from '@mantine/core'
3+
import {
4+
Button,
5+
Group,
6+
TextInput,
7+
Box,
8+
NumberInput,
9+
Stack,
10+
SegmentedControl,
11+
Center,
12+
ThemeIcon,
13+
MantineColor
14+
} from '@mantine/core'
415
import { defaultConfirmModalProps } from 'components/common/Modals/CustomConfirmModal'
516
import { modals } from '@mantine/modals'
617
import useAdmin from 'hooks/useAdmin'
718
import throttle from 'lodash.throttle'
8-
import { Account } from 'types'
19+
import { Account, AdminTransfer, AdminTransferType } from 'types'
920
import useCustomNotifications from 'hooks/useCustomNotifications'
21+
import DepositIcon from 'resources/icons/Deposit'
22+
import WithdrawIcon from 'resources/icons/Withdraw'
23+
import { parseBigNumTokenAmountToDecimal } from 'helpers/balances'
1024

11-
type Deposit = {
12-
accountId: string
13-
amount: number
14-
token: {
15-
name: string
16-
chainId: number
17-
address: string
18-
decimals: number
19-
}
20-
txHash: string
25+
const transferTypeLabels: { [key in AdminTransferType]: { label: string; color: MantineColor } } = {
26+
deposit: { label: 'deposit', color: 'success' },
27+
withdraw: { label: 'refund', color: 'warning' }
2128
}
2229

2330
function AdminDeposit({ accountData }: { accountData: Account }) {
2431
const { showNotification } = useCustomNotifications()
25-
const { makeDeposit, getAllAccounts } = useAdmin()
32+
const { makeTransfer, getAllAccounts } = useAdmin()
2633
const [loading, setLoading] = useState(false)
34+
const [transferType, setTransferType] = useState<AdminTransferType>('deposit')
35+
const balance = useMemo(
36+
() =>
37+
parseBigNumTokenAmountToDecimal(
38+
accountData.availableBalance,
39+
accountData.balanceToken.decimals
40+
),
41+
[accountData.availableBalance, accountData.balanceToken.decimals]
42+
)
2743

28-
const form = useForm<Deposit>({
44+
const form = useForm<AdminTransfer>({
2945
initialValues: {
3046
accountId: accountData.id,
3147
amount: 0,
@@ -40,7 +56,16 @@ function AdminDeposit({ accountData }: { accountData: Account }) {
4056

4157
validate: {
4258
accountId: matches(/^(0x)?[0-9a-fA-F]{40}$/, 'invalid account address'),
43-
amount: isInRange({ min: 10, max: 1000000000000 }, 'min 10'),
59+
amount:
60+
transferType === 'deposit'
61+
? isInRange({ min: 10, max: 100_000_000 }, 'min: 10, max: 100k')
62+
: isInRange(
63+
{
64+
min: 1,
65+
max: balance
66+
},
67+
`min: 1, max: balance ${balance}`
68+
),
4469
token: {
4570
name: hasLength({ min: 1 }),
4671
chainId: isInRange({ min: 0, max: 999999 }),
@@ -52,10 +77,11 @@ function AdminDeposit({ accountData }: { accountData: Account }) {
5277
})
5378

5479
const handleSubmit = useCallback(
55-
async (values: Deposit) => {
80+
async (values: AdminTransfer) => {
5681
setLoading(true)
57-
await makeDeposit(
82+
await makeTransfer(
5883
values,
84+
transferType,
5985
() => {
6086
getAllAccounts()
6187
form.reset()
@@ -68,7 +94,7 @@ function AdminDeposit({ accountData }: { accountData: Account }) {
6894

6995
setLoading(false)
7096
},
71-
[form, makeDeposit, showNotification, getAllAccounts]
97+
[makeTransfer, transferType, getAllAccounts, form, showNotification]
7298
)
7399

74100
const throttledSbm = useMemo(
@@ -82,19 +108,48 @@ function AdminDeposit({ accountData }: { accountData: Account }) {
82108
!form.validate().hasErrors &&
83109
modals.openConfirmModal(
84110
defaultConfirmModalProps({
85-
text: `Are you sure you want to deposit ${form.values.amount} ${form.values.token.name} to ${form.values.accountId}?`,
111+
text: `Are you sure you want to ${transferTypeLabels[transferType].label} ${form.values.amount} ${form.values.token.name} to ${form.values.accountId}?`,
86112
color: 'attention',
87113
labels: { confirm: 'Yes Sir', cancel: 'No' },
88114
onConfirm: () => form.onSubmit(throttledSbm)()
89115
})
90116
)
91117
},
92-
[form, throttledSbm]
118+
[form, throttledSbm, transferType]
93119
)
94120

95121
return (
96122
<Box component="form">
97123
<Stack gap="xs">
124+
<SegmentedControl
125+
color={transferTypeLabels[transferType].color}
126+
value={transferType}
127+
onChange={(val) => setTransferType(val as AdminTransferType)}
128+
data={[
129+
{
130+
label: (
131+
<Center style={{ gap: 10 }}>
132+
<ThemeIcon size="sm" variant="transparent" color="mainText">
133+
<DepositIcon />
134+
</ThemeIcon>
135+
<span>Deposit</span>
136+
</Center>
137+
),
138+
value: 'deposit'
139+
},
140+
{
141+
label: (
142+
<Center style={{ gap: 10 }}>
143+
<ThemeIcon size="sm" variant="transparent" color="mainText">
144+
<WithdrawIcon />
145+
</ThemeIcon>
146+
<span>Refund</span>
147+
</Center>
148+
),
149+
value: 'withdraw'
150+
}
151+
]}
152+
/>
98153
<TextInput
99154
label="Account address"
100155
placeholder="0x000"
@@ -105,6 +160,7 @@ function AdminDeposit({ accountData }: { accountData: Account }) {
105160
<Group grow align="baseline">
106161
<NumberInput
107162
label="Amount"
163+
description={transferType === 'withdraw' ? `available balance: ${balance}` : undefined}
108164
// type="number"
109165
placeholder="Amount"
110166
hideControls
@@ -153,12 +209,13 @@ function AdminDeposit({ accountData }: { accountData: Account }) {
153209

154210
<Group justify="left" mt="md">
155211
<Button
212+
color={transferTypeLabels[transferType].color}
156213
type="submit"
157214
loading={loading}
158215
disabled={loading || !form.isDirty()}
159216
onClick={onSubmit}
160217
>
161-
Make deposit
218+
Make {transferTypeLabels[transferType].label}
162219
</Button>
163220
</Group>
164221
</Stack>

0 commit comments

Comments
 (0)