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 22, 2024
1 parent e4305d6 commit db20db2
Show file tree
Hide file tree
Showing 35 changed files with 1,341 additions and 33 deletions.
23 changes: 23 additions & 0 deletions package-lock.json

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

3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
"node": "22.3.0"
},
"dependencies": {
"@babylonlabs-io/btc-staking-ts": "0.3.0",
"@bitcoin-js/tiny-secp256k1-asmjs": "2.2.3",
"@bitcoinerlab/secp256k1": "^1.1.1",
"@keystonehq/animated-qr": "^0.8.6",
Expand All @@ -36,7 +37,6 @@
"@uidotdev/usehooks": "^2.4.1",
"axios": "^1.7.4",
"bitcoinjs-lib": "6.1.5",
"@babylonlabs-io/btc-staking-ts": "0.3.0",
"date-fns": "^3.6.0",
"decimal.js-light": "^2.5.1",
"framer-motion": "^11.1.9",
Expand All @@ -48,6 +48,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>
);
}
39 changes: 18 additions & 21 deletions src/app/components/Delegations/Delegations.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -53,26 +53,24 @@ 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}
signPsbtTx={signPsbtTransaction(btcWallet)}
pushTx={btcWallet.pushTx}
getNetworkFees={btcWallet.getNetworkFees}
address={address}
>
<DelegationsContent
delegationsAPI={delegationsAPI.delegations}
globalParamsVersion={currentVersion}
signPsbtTx={signPsbtTransaction(btcWallet)}
pushTx={btcWallet.pushTx}
getNetworkFees={btcWallet.getNetworkFees}
address={address}
btcWalletNetwork={network}
publicKeyNoCoord={publicKeyNoCoord}
isWalletConnected={connected}
/>
</DelegationsPointsProvider>
)
btcWalletNetwork={network}
publicKeyNoCoord={publicKeyNoCoord}
isWalletConnected={connected}
/>
</DelegationsPointsProvider>
);
};

Expand Down Expand Up @@ -305,8 +303,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 @@ -384,6 +381,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,
};
}
32 changes: 32 additions & 0 deletions src/app/hooks/useSigner.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { Psbt, Transaction } from "bitcoinjs-lib";

import { useWallet } from "@/app/context/wallet/WalletProvider";

const SIGN_PSBT_NOT_COMPATIBLE_WALLETS = ["OneKey"];

export function useSigner() {
const { walletProvider } = useWallet();

const signPsbtTx = async (psbtHex: string) => {
if (!walletProvider) {
throw Error("Wallet is not provided");
}

const signedHex = await walletProvider.signPsbt(psbtHex);
const providerName = await walletProvider.getWalletProviderName();
if (SIGN_PSBT_NOT_COMPATIBLE_WALLETS.includes(providerName)) {
try {
// Try to parse the signedHex as PSBT to see if it follows the new implementation
return Psbt.fromHex(signedHex).extractTransaction();
} catch {
// If parsing fails, it's the old version implementation
return Transaction.fromHex(signedHex);
}
}

// For compatible wallets, directly extract the transaction from the signed PSBT
return Psbt.fromHex(signedHex).extractTransaction();
};

return { signPsbtTx };
}
Loading

0 comments on commit db20db2

Please sign in to comment.