Merge remote-tracking branch 'origin' into feature/wrap-unwrap

apps/tangle-dapp/app/page.tsx

@@ -1,6 +1,7 @@
 import { Typography } from '@webb-tools/webb-ui-components';
 
 import {
+  DelegationsPayoutsContainer,
   HeaderChipsContainer,
   KeyStatsContainer,
   NominatorStatsContainer,
@@ -26,6 +27,10 @@ export default async function Index() {
         <NominatorStatsContainer />
       </div>
 
+      <div className="mt-12">
+        <DelegationsPayoutsContainer />
+      </div>
+
       <div className="mt-12">
         <ValidatorTablesContainer />
       </div>

apps/tangle-dapp/components/DelegatorTable/DelegatorTable.tsx

@@ -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;

apps/tangle-dapp/components/DelegatorTable/index.ts

@@ -0,0 +1 @@
+export { default as DelegatorTable } from './DelegatorTable';

apps/tangle-dapp/components/DelegatorTable/types.ts

@@ -0,0 +1,6 @@
+import { Delegator } from '../../types';
+
+export interface DelegatorTableProps {
+  data?: Delegator[];
+  pageSize: number;
+}

apps/tangle-dapp/components/TableStatus/TableStatus.tsx

@@ -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;

apps/tangle-dapp/components/TableStatus/index.ts

@@ -0,0 +1 @@
+export { default as TableStatus } from './TableStatus';

apps/tangle-dapp/components/TableStatus/types.ts

@@ -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;
+};

apps/tangle-dapp/components/index.ts

@@ -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';

apps/tangle-dapp/containers/DelegationsPayoutsContainer/DelegationsPayoutsContainer.tsx

@@ -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;

apps/tangle-dapp/containers/DelegationsPayoutsContainer/DelegatorTableContainer.tsx

@@ -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} />;
+}

apps/tangle-dapp/containers/DelegationsPayoutsContainer/index.ts

@@ -0,0 +1 @@
+export { default as DelegationsPayoutsContainer } from './DelegationsPayoutsContainer';

apps/tangle-dapp/containers/Layout/Layout.tsx

@@ -3,7 +3,7 @@ import { getSideBarStateFromCookie } from '@webb-tools/webb-ui-components/next-u
 import React, { type FC, type PropsWithChildren } from 'react';
 
 import { Breadcrumbs, SideBar, SideBarMenu } from '../../components';
-import WalletAndChainCointainer from '../WalletAndChainContainer/WalletAndChainContainer';
+import WalletAndChainContainer from '../WalletAndChainContainer/WalletAndChainContainer';
 import { WalletModalContainer } from '../WalletModalContainer';
 
 const Layout: FC<PropsWithChildren> = ({ children }) => {
@@ -22,7 +22,7 @@ const Layout: FC<PropsWithChildren> = ({ children }) => {
               <Breadcrumbs />
             </div>
 
-            <WalletAndChainCointainer />
+            <WalletAndChainContainer />
           </div>
 
           {children}

apps/tangle-dapp/containers/ValidatorTablesContainer/ValidatorTablesContainer.tsx

@@ -14,7 +14,7 @@ const pageSize = 10;
 const activeValidatorsTableTab = 'Active Validators';
 const waitingValidatorsTableTab = 'Waiting';
 
-const ShieldedTablesContainer = () => {
+const ValidatorTablesContainer = () => {
   const { data: activeValidatorsData, isLoading: activeValidatorsDataLoading } =
     useSWR([getActiveValidators.name], ([, ...args]) =>
       getActiveValidators(...args)
@@ -59,4 +59,4 @@ const ShieldedTablesContainer = () => {
   );
 };
 
-export default ShieldedTablesContainer;
+export default ValidatorTablesContainer;

apps/tangle-dapp/containers/index.ts

@@ -1,3 +1,4 @@
+export * from './DelegationsPayoutsContainer';
 export * from './HeaderChipsContainer';
 export * from './KeyStatsContainer';
 export { Layout } from './Layout';