-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge remote-tracking branch 'origin' into feature/wrap-unwrap
- Loading branch information
Showing
55 changed files
with
1,856 additions
and
768 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
111 changes: 111 additions & 0 deletions
111
apps/tangle-dapp/components/DelegatorTable/DelegatorTable.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,111 @@ | ||
'use client'; | ||
|
||
import { | ||
createColumnHelper, | ||
getCoreRowModel, | ||
getFilteredRowModel, | ||
getPaginationRowModel, | ||
getSortedRowModel, | ||
useReactTable, | ||
} from '@tanstack/react-table'; | ||
import { ExternalLinkLine } from '@webb-tools/icons'; | ||
import { | ||
Avatar, | ||
Chip, | ||
fuzzyFilter, | ||
shortenString, | ||
Table, | ||
Typography, | ||
} from '@webb-tools/webb-ui-components'; | ||
import { TANGLE_STAKING_URL } from '@webb-tools/webb-ui-components/constants'; | ||
import { type FC, useCallback } from 'react'; | ||
|
||
import { Delegator } from '../../types'; | ||
import { HeaderCell, StringCell } from '../tableCells'; | ||
import { DelegatorTableProps } from './types'; | ||
|
||
const columnHelper = createColumnHelper<Delegator>(); | ||
|
||
const columns = [ | ||
columnHelper.accessor('address', { | ||
header: () => <HeaderCell title="Validator" className="justify-start" />, | ||
cell: (props) => { | ||
const address = props.getValue(); | ||
const identity = props.row.original.identity; | ||
|
||
return ( | ||
<div className="flex space-x-1 items-center"> | ||
<Avatar sourceVariant="address" value={address}> | ||
{address} | ||
</Avatar> | ||
|
||
<Typography variant="body1" fw="normal" className="truncate"> | ||
{identity === address ? shortenString(address, 6) : identity} | ||
</Typography> | ||
|
||
<ExternalLinkLine /> | ||
</div> | ||
); | ||
}, | ||
}), | ||
columnHelper.accessor('isActive', { | ||
header: () => <HeaderCell title="Status" className="justify-start" />, | ||
cell: (props) => { | ||
const isActive = props.getValue(); | ||
return ( | ||
<Chip color={isActive ? 'green' : 'blue'}> | ||
{isActive ? 'Active' : 'Waiting'} | ||
</Chip> | ||
); | ||
}, | ||
}), | ||
columnHelper.accessor('totalStaked', { | ||
header: () => ( | ||
<HeaderCell title="Delegated/Staked" className="justify-center" /> | ||
), | ||
cell: (props) => ( | ||
<StringCell value={props.getValue()} className="text-center" /> | ||
), | ||
}), | ||
]; | ||
|
||
const DelegatorTable: FC<DelegatorTableProps> = ({ data = [], pageSize }) => { | ||
const table = useReactTable({ | ||
data, | ||
columns, | ||
initialState: { | ||
pagination: { | ||
pageSize, | ||
}, | ||
}, | ||
filterFns: { | ||
fuzzy: fuzzyFilter, | ||
}, | ||
globalFilterFn: fuzzyFilter, | ||
getCoreRowModel: getCoreRowModel(), | ||
getFilteredRowModel: getFilteredRowModel(), | ||
getSortedRowModel: getSortedRowModel(), | ||
getPaginationRowModel: getPaginationRowModel(), | ||
}); | ||
|
||
const onRowClick = useCallback(() => { | ||
window.open(TANGLE_STAKING_URL, '_blank'); | ||
}, []); | ||
|
||
return ( | ||
<div className="overflow-hidden border rounded-lg bg-mono-0 dark:bg-mono-180 border-mono-40 dark:border-mono-160"> | ||
<Table | ||
tableClassName="block overflow-x-auto max-w-[-moz-fit-content] max-w-fit md:table md:max-w-none" | ||
thClassName="border-t-0 bg-mono-0" | ||
trClassName="cursor-pointer" | ||
paginationClassName="bg-mono-0 dark:bg-mono-180 pl-6" | ||
tableProps={table} | ||
isPaginated | ||
totalRecords={data.length} | ||
onRowClick={onRowClick} | ||
/> | ||
</div> | ||
); | ||
}; | ||
|
||
export default DelegatorTable; |
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 @@ | ||
export { default as DelegatorTable } from './DelegatorTable'; |
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,6 @@ | ||
import { Delegator } from '../../types'; | ||
|
||
export interface DelegatorTableProps { | ||
data?: Delegator[]; | ||
pageSize: number; | ||
} |
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,46 @@ | ||
import { Button, Typography } from '@webb-tools/webb-ui-components'; | ||
import { twMerge } from 'tailwind-merge'; | ||
|
||
import { TableStatusProps } from './types'; | ||
|
||
const TableStatus = ({ | ||
title, | ||
description, | ||
icon, | ||
buttonText, | ||
buttonProps, | ||
className, | ||
}: TableStatusProps) => { | ||
return ( | ||
<div | ||
className={twMerge( | ||
'rounded-lg border border-mono-40 dark:border-mono-160', | ||
'bg-mono-0 dark:bg-mono-180 h-[228px]', | ||
'flex flex-col items-center justify-center gap-6 p-8', | ||
className | ||
)} | ||
> | ||
<div className="flex flex-col items-center justify-center gap-2"> | ||
{icon} | ||
<Typography | ||
variant="h5" | ||
fw="bold" | ||
className="text-mono-200 dark:text-mono-0 text-center" | ||
> | ||
{title} | ||
</Typography> | ||
<Typography | ||
variant="body1" | ||
fw="semibold" | ||
className="text-mono-120 dark:text-mono-80 text-center" | ||
> | ||
{description} | ||
</Typography> | ||
</div> | ||
|
||
{buttonText && <Button {...buttonProps}>{buttonText}</Button>} | ||
</div> | ||
); | ||
}; | ||
|
||
export default TableStatus; |
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 @@ | ||
export { default as TableStatus } from './TableStatus'; |
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,10 @@ | ||
import { ButtonProps } from '@webb-tools/webb-ui-components'; | ||
|
||
export type TableStatusProps = { | ||
icon?: string; | ||
title: string; | ||
description: string; | ||
buttonText?: string; | ||
buttonProps?: ButtonProps; | ||
className?: string; | ||
}; |
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,10 +1,12 @@ | ||
export * from './Breadcrumbs'; | ||
export * from './ChainSelector'; | ||
export * from './DelegatorTable'; | ||
export * from './HeaderChip'; | ||
export * from './InfoIconWithTooltip'; | ||
export * from './KeyStatsItem'; | ||
export * from './NominatorStatsItem'; | ||
export * from './sideBar'; | ||
export * from './skeleton'; | ||
export * from './TableStatus'; | ||
export * from './ValidatorTable'; | ||
export * from './WalletDropdown'; |
120 changes: 120 additions & 0 deletions
120
apps/tangle-dapp/containers/DelegationsPayoutsContainer/DelegationsPayoutsContainer.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,120 @@ | ||
'use client'; | ||
|
||
import { | ||
useConnectWallet, | ||
useWebContext, | ||
} from '@webb-tools/api-provider-environment'; | ||
import { PresetTypedChainId } from '@webb-tools/dapp-types'; | ||
import { | ||
TabContent, | ||
TableAndChartTabs, | ||
useCheckMobile, | ||
} from '@webb-tools/webb-ui-components'; | ||
import { TANGLE_STAKING_URL } from '@webb-tools/webb-ui-components/constants'; | ||
import { useMemo } from 'react'; | ||
|
||
import { ContainerSkeleton, TableStatus } from '../../components'; | ||
import useDelegations from '../../data/DelegationsPayouts/useDelegations'; | ||
import { convertEthereumToSubstrateAddress } from '../../utils'; | ||
import DelegatorTableContainer from './DelegatorTableContainer'; | ||
|
||
const pageSize = 5; | ||
const delegationsTableTab = 'Delegations'; | ||
const payoutsTableTab = 'Payouts'; | ||
|
||
const DelegationsPayoutsContainer = () => { | ||
const { activeAccount, loading } = useWebContext(); | ||
|
||
const nominatorSubstrateAddress = useMemo(() => { | ||
if (!activeAccount?.address) return ''; | ||
|
||
return convertEthereumToSubstrateAddress(activeAccount.address); | ||
}, [activeAccount?.address]); | ||
|
||
const { data: delegatorsData, isLoading: delegatorsIsLoading } = | ||
useDelegations(nominatorSubstrateAddress); | ||
|
||
const { isMobile } = useCheckMobile(); | ||
|
||
const { toggleModal } = useConnectWallet(); | ||
|
||
return ( | ||
<TableAndChartTabs | ||
tabs={[delegationsTableTab, payoutsTableTab]} | ||
headerClassName="w-full overflow-x-auto" | ||
> | ||
{/* Delegations Table */} | ||
<TabContent value={delegationsTableTab}> | ||
{!activeAccount ? ( | ||
<TableStatus | ||
title="Wallet Not Connected" | ||
description="Connect your wallet to view and manage your staking details." | ||
buttonText="Connect" | ||
buttonProps={{ | ||
isLoading: loading, | ||
isDisabled: isMobile, | ||
loadingText: 'Connecting...', | ||
onClick: () => | ||
toggleModal( | ||
true, | ||
PresetTypedChainId.TangleTestnet ?? undefined | ||
), | ||
}} | ||
icon="🔗" | ||
/> | ||
) : delegatorsIsLoading ? ( | ||
<ContainerSkeleton /> | ||
) : delegatorsData && delegatorsData.delegators.length === 0 ? ( | ||
<TableStatus | ||
title="Ready to Explore Delegations?" | ||
description="It looks like you haven't delegated any tokens yet. Start by choosing a validator to support and earn rewards!" | ||
buttonText="Delegate" | ||
buttonProps={{ | ||
isDisabled: true, | ||
}} | ||
icon="🔍" | ||
/> | ||
) : delegatorsData ? ( | ||
<DelegatorTableContainer | ||
value={delegatorsData.delegators} | ||
pageSize={pageSize} | ||
/> | ||
) : null} | ||
</TabContent> | ||
|
||
{/* Payouts Table */} | ||
<TabContent value={payoutsTableTab} aria-disabled> | ||
{!activeAccount ? ( | ||
<TableStatus | ||
title="Wallet Not Connected" | ||
description="Connect your wallet to view and manage your staking details." | ||
buttonText="Connect" | ||
buttonProps={{ | ||
isLoading: loading, | ||
isDisabled: isMobile, | ||
loadingText: 'Connecting...', | ||
onClick: () => | ||
toggleModal( | ||
true, | ||
PresetTypedChainId.TangleTestnet ?? undefined | ||
), | ||
}} | ||
icon="🔗" | ||
/> | ||
) : ( | ||
<TableStatus | ||
title="Work In Progress" | ||
description="This feature is currently under development." | ||
buttonText="View Network" | ||
buttonProps={{ | ||
onClick: () => window.open(TANGLE_STAKING_URL, '_blank'), | ||
}} | ||
icon="🔧" | ||
/> | ||
)} | ||
</TabContent> | ||
</TableAndChartTabs> | ||
); | ||
}; | ||
|
||
export default DelegationsPayoutsContainer; |
12 changes: 12 additions & 0 deletions
12
apps/tangle-dapp/containers/DelegationsPayoutsContainer/DelegatorTableContainer.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,12 @@ | ||
import { DelegatorTable } from '../../components'; | ||
import { Delegator } from '../../types'; | ||
|
||
export default function DelegatorTableContainer({ | ||
pageSize, | ||
value, | ||
}: { | ||
pageSize: number; | ||
value: Delegator[]; | ||
}) { | ||
return <DelegatorTable data={value} pageSize={pageSize} />; | ||
} |
1 change: 1 addition & 0 deletions
1
apps/tangle-dapp/containers/DelegationsPayoutsContainer/index.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 |
---|---|---|
@@ -0,0 +1 @@ | ||
export { default as DelegationsPayoutsContainer } from './DelegationsPayoutsContainer'; |
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
Oops, something went wrong.