Skip to content

Commit

Permalink
feat(phase-2): delegation tabs
Browse files Browse the repository at this point in the history
  • Loading branch information
totraev committed Oct 23, 2024
1 parent aeb90ce commit b1fe7d1
Show file tree
Hide file tree
Showing 32 changed files with 989 additions and 29 deletions.
14 changes: 14 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@
"react-infinite-scroll-component": "^6.1.0",
"react-number-format": "^5.4.2",
"react-responsive-modal": "^6.4.2",
"react-tabs": "^6.0.2",
"react-tooltip": "^5.26.4",
"sharp": "^0.33.4",
"tailwind-merge": "^2.5.2",
Expand Down
41 changes: 41 additions & 0 deletions src/app/components/Delegations/DelegationTabs.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import { Tab, TabList, TabPanel, Tabs } from "react-tabs";

import { Delegations } from "@/app/components/Delegations/Delegations";
import { AuthGuard } from "@/components/common/AuthGuard";
import { DelegationList } from "@/components/delegations/DelegationList";

export function DelegationTabs() {
return (
<AuthGuard>
<Tabs>
<div className="card flex flex-col gap-2 bg-base-300 p-4 shadow-sm lg:flex-1">
<div className="flex gap-2 mb-4">
<h3 className="font-bold">Staking history</h3>

<TabList className="flex gap-2">
<Tab
className="text-primary cursor-pointer"
selectedClassName="border-b border-dashed border-primary"
>
Phase 1
</Tab>
<Tab
className="text-primary cursor-pointer"
selectedClassName="border-b border-dashed border-primary"
>
Phase 2
</Tab>
</TabList>
</div>

<TabPanel>
<Delegations />
</TabPanel>
<TabPanel>
<DelegationList />
</TabPanel>
</div>
</Tabs>
</AuthGuard>
);
}
33 changes: 15 additions & 18 deletions src/app/components/Delegations/Delegations.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,23 +42,21 @@ export const Delegations = () => {
}

return (
network && (
<DelegationsPointsProvider
publicKeyNoCoord={publicKeyNoCoord}
<DelegationsPointsProvider
publicKeyNoCoord={publicKeyNoCoord}
delegationsAPI={delegationsAPI.delegations}
isWalletConnected={connected}
address={address}
>
<DelegationsContent
delegationsAPI={delegationsAPI.delegations}
isWalletConnected={connected}
globalParamsVersion={currentVersion}
address={address}
>
<DelegationsContent
delegationsAPI={delegationsAPI.delegations}
globalParamsVersion={currentVersion}
address={address}
btcWalletNetwork={network}
publicKeyNoCoord={publicKeyNoCoord}
isWalletConnected={connected}
/>
</DelegationsPointsProvider>
)
btcWalletNetwork={network}
publicKeyNoCoord={publicKeyNoCoord}
isWalletConnected={connected}
/>
</DelegationsPointsProvider>
);
};

Expand Down Expand Up @@ -287,8 +285,7 @@ const DelegationsContent: React.FC<DelegationsContentProps> = ({
delegations;

return (
<div className="card flex flex-col gap-2 bg-base-300 p-4 shadow-sm lg:flex-1">
<h3 className="mb-4 font-bold">Staking history</h3>
<>
{combinedDelegationsData.length === 0 ? (
<div className="rounded-2xl border border-neutral-content p-4 text-center dark:border-neutral-content/20">
<p>No history found</p>
Expand Down Expand Up @@ -366,6 +363,6 @@ const DelegationsContent: React.FC<DelegationsContentProps> = ({
delegation={delegation}
/>
)}
</div>
</>
);
};
4 changes: 2 additions & 2 deletions src/app/components/Modals/UnbondWithdrawModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ interface PreviewModalProps {
delegation: DelegationInterface;
}

const { coinName, networkName } = getNetworkConfig();

export const UnbondWithdrawModal: React.FC<PreviewModalProps> = ({
open,
onClose,
Expand All @@ -32,8 +34,6 @@ export const UnbondWithdrawModal: React.FC<PreviewModalProps> = ({
awaitingWalletResponse,
delegation,
}) => {
const { coinName, networkName } = getNetworkConfig();

const { currentVersion: delegationGlobalParams } = useVersionByHeight(
delegation.stakingTx.startHeight ?? 0,
);
Expand Down
16 changes: 10 additions & 6 deletions src/app/components/Staking/FinalityProviders/FinalityProvider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import Image from "next/image";
import { AiOutlineInfoCircle } from "react-icons/ai";
import { FiExternalLink } from "react-icons/fi";
import { Tooltip } from "react-tooltip";
import { twJoin } from "tailwind-merge";

import blue from "@/app/assets/blue-check.svg";
import { Hash } from "@/app/components/Hash/Hash";
Expand Down Expand Up @@ -43,11 +44,11 @@ export const FinalityProvider: React.FC<FinalityProviderProps> = ({

return (
<div
className={`
${generalStyles}
${selected ? "fp-selected" : ""}
${finalityProviderHasData ? "" : "opacity-50 pointer-events-none"}
`}
className={twJoin(
generalStyles,
selected ? "fp-selected" : "",
finalityProviderHasData ? "" : "opacity-50 pointer-events-none",
)}
onClick={handleClick}
>
<div className="grid grid-cols-stakingFinalityProvidersMobile grid-rows-2 items-center gap-2 lg:grid-cols-stakingFinalityProvidersDesktop lg:grid-rows-1">
Expand All @@ -72,7 +73,7 @@ export const FinalityProvider: React.FC<FinalityProviderProps> = ({
) : (
<div className="flex items-center gap-1 justify-start">
<span
className="cursor-pointer text-xs text-error"
className="cursor-pointer text-xs text-error pointer-events-auto"
data-tooltip-id="tooltip-missing-fp"
data-tooltip-content="This finality provider did not provide any information."
data-tooltip-place="top"
Expand All @@ -84,9 +85,11 @@ export const FinalityProvider: React.FC<FinalityProviderProps> = ({
</div>
)}
</div>

<div className="flex justify-end lg:justify-start">
<Hash value={pkHex} address small noFade />
</div>

<div className="flex items-center gap-1">
<p className="hidden sm:flex lg:hidden">Delegation:</p>
<p>
Expand All @@ -105,6 +108,7 @@ export const FinalityProvider: React.FC<FinalityProviderProps> = ({
className="tooltip-wrap"
/>
</div>

<div className="flex items-center justify-end gap-1 lg:justify-start">
<p className="hidden sm:flex lg:hidden">Commission:</p>
{finalityProviderHasData
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export const FinalityProviders: React.FC<FinalityProvidersProps> = ({
);
return flattenedData;
},
retry: (failureCount, error) => {
retry: (failureCount) => {
return !isErrorOpen && failureCount <= 3;
},
});
Expand Down
17 changes: 17 additions & 0 deletions src/app/hooks/services/useDelegationService.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { useDelegationState } from "@/app/state/DelegationState";

export function useDelegationService() {
const {
delegations = [],
fetchMoreDelegations,
hasMoreDelegations,
isLoading,
} = useDelegationState();

return {
delegations,
fetchMoreDelegations,
hasMoreDelegations,
isLoading,
};
}
7 changes: 5 additions & 2 deletions src/app/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@
import { initBTCCurve } from "@babylonlabs-io/btc-staking-ts";
import { useEffect } from "react";

import { Delegations } from "./components/Delegations/Delegations";
import { FinalityProviders } from "@/components/staking/FinalityProviders";

import { DelegationTabs } from "./components/Delegations/DelegationTabs";
import { FAQ } from "./components/FAQ/FAQ";
import { Footer } from "./components/Footer/Footer";
import { Header } from "./components/Header/Header";
Expand All @@ -26,7 +28,8 @@ const Home = () => {
<Stats />
<PersonalBalance />
<Staking />
<Delegations />
<DelegationTabs />
<FinalityProviders />
</div>
</div>
<FAQ />
Expand Down
16 changes: 16 additions & 0 deletions src/components/common/AuthGuard/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import type { PropsWithChildren, ReactNode } from "react";

import { useWalletConnection } from "@/app/context/wallet/WalletConnectionProvider";

interface AuthGuardProps {
fallback?: ReactNode;
}

export function AuthGuard({
children,
fallback,
}: PropsWithChildren<AuthGuardProps>) {
const { isConnected } = useWalletConnection();

return isConnected ? children : fallback;
}
26 changes: 26 additions & 0 deletions src/components/common/GridTable/components/TCell.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { MouseEventHandler, type ReactNode } from "react";
import { twMerge } from "tailwind-merge";

interface TCellProps {
className?: string;
align?: "left" | "right" | "center";
children?: ReactNode;
onClick?: MouseEventHandler<HTMLTableCellElement>;
}

const ALIGN = {
left: "justify-start",
right: "justify-end",
center: "justify-center",
} as const;

export function GridCell({ className, align, children, onClick }: TCellProps) {
return (
<div
className={twMerge("text-left", className, align && ALIGN[align])}
onClick={onClick}
>
{children}
</div>
);
}
48 changes: 48 additions & 0 deletions src/components/common/GridTable/components/THead.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import { useCallback, type ReactNode } from "react";
import { twMerge } from "tailwind-merge";

import type { SortColumn } from "../types";

interface THeadProps {
field: string;
title: ReactNode;
className?: string;
sortable?: boolean;
align?: "left" | "right" | "center";
sortColumn?: SortColumn;
onSortChange: (sortColumn: SortColumn) => void;
}

const SORT_DIRECTIONS = {
"": "ASC",
ASC: "DESC",
DESC: "",
} as const;

export function GridHead({
field,
title,
className,
align,
sortable = false,
sortColumn,
onSortChange,
}: THeadProps) {
const direction = SORT_DIRECTIONS[sortColumn?.direction || ""];

const handleColumnClick = useCallback(() => {
if (sortable) {
onSortChange({ field, direction });
}
}, [field, direction, sortable, onSortChange]);

return (
<p
className={twMerge(className, sortable ? "cursor-pointer" : "")}
style={{ textAlign: align }}
onClick={handleColumnClick}
>
{title}
</p>
);
}
Loading

0 comments on commit b1fe7d1

Please sign in to comment.