Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update stake account overview and add validator logo + name #21

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update stake account overview and add validator logo + name #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 42 additions & 21 deletions src/components/StakeAccount.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,10 +83,11 @@ export function StakeAccountCard({stakeAccountMeta}: {stakeAccountMeta: StakeAcc

return (
<div className="bg-transparent w-full font-light pb-3">
<div className="solBoxGray dark:bg-solblue-dark rounded-b-none rounded-t-lg w-full bg-white uppercase flex flex-wrap md:justify-between items-center text-center md:text-left" style={{borderBottomLeftRadius: 0, borderBottomRightRadius: 0}}>
<div className="solBoxGray dark:bg-solblue-dark rounded-b-none rounded-t-lg w-full bg-white flex flex-wrap md:justify-between items-center text-center md:text-left" style={{borderBottomLeftRadius: 0, borderBottomRightRadius: 0}}>
{/* Seed account info */}
<div className="w-full pb-3 pt-3 md:pt-0 md:pb-0 md:w-3/12 md:pl-5 whitespace-nowrap">
<span className="text-sm leading-6">SEED {stakeAccountMeta.seed} </span>
<div className="w-full pb-3 pt-3 md:pt-0 md:pb-0 md:w-auto md:pl-5 whitespace-nowrap">
<p className="text-md leading-3 uppercase font-bold"> {stakeAccountMeta.seed} </p>
<span className="text-xs leading-6">Seed</span>

{/* <Tooltip title={'Split'}>
<button className="text-solblue-2" style={{direction: 'rtl'}}>
Expand All @@ -100,32 +101,52 @@ export function StakeAccountCard({stakeAccountMeta}: {stakeAccountMeta: StakeAcc
</Tooltip> */}
<br />

<span className="text-lg font-bold leading-3">{stakeAccountMeta.lamports / LAMPORTS_PER_SOL} SOL</span><br />
<span className="text-lg font-bold leading-6">{stakeAccountMeta.lamports / LAMPORTS_PER_SOL} SOL</span><br />
{/* <span className="text-xs leading-none">$X</span> */}
</div>
<div className="w-full pb-3 md:pb-0 md:w-2/12 md:pl-5 whitespace-nowrap leading-5">
<p>State: <span className="font-bold">{stakeActivationData?.state}</span></p>
<p>Type: <span className="font-bold">{stakeAccountMeta.stakeAccount.type}</span></p>
<div className="w-full pb-3 md:pb-0 md:w-auto md:pl-2 whitespace-nowrap leading-5">
<p className="text-md leading-3 uppercase font-bold pt-2"> {stakeActivationData?.state} </p>
<span className="text-xs leading-6">State</span>
<p className="text-md leading-3 uppercase font-bold pt-2"> {stakeAccountMeta.stakeAccount.type} </p>
<span className="text-xs leading-6">Type</span>
</div>
<div className="w-full m-2 pb-6 md:pb-0 md:w-3/12 md:pl-5 whitespace-nowrap leading-5">
<div className="w-full pb-3 md:pb-0 md:w-auto md:flex justify-center">
<div className="w-full pb-3 md:pb-0 md:pl-2 md:w-auto">
<p className="leading-3 pt-2 items-center text-center flex justify-center">
<img src="https://s3.amazonaws.com/keybase_processed_uploads/c0f254a3c6c17885a61cd7ef1f2d3205_360_360.jpg" alt="Validator Logo" width="72" height="72"></img>
</p>
</div>
<div className="w-full pb-3 md:pb-0 md:w-auto md:pl-3 whitespace-nowrap leading-5">
<p className="text-md leading-3 uppercase font-bold pt-2">Genisis Validator 0% Fee ...</p>
<span className="text-xs leading-6">Validator</span>
{stakeAccountMeta.stakeAccount.info.stake && (
<>
<p className="text-md leading-3 uppercase font-bold pt-2">
<a
href={`https://explorer.solana.com/address/${voteAccountAddress?.toBase58()}${urlSuffix}`}
rel="noopener noreferrer" target="_blank"
className="font-bold leading-3"
>
{shortenAddress(voteAccountAddress?.toBase58() ?? '')}
</a>
</p>
<span className="text-xs leading-6">Validator Address</span>
</>
)}
</div>
</div>
<div className="w-full m-2 pb-6 md:pb-0 md:w-auto md:pl-2 whitespace-nowrap leading-5">
{stakeAccountMeta.stakeAccount.info.stake && (
<>
<p>Validator:{' '}
<a
href={`https://explorer.solana.com/address/${voteAccountAddress?.toBase58()}${urlSuffix}`}
rel="noopener noreferrer" target="_blank"
className="font-bold"
>
{shortenAddress(voteAccountAddress?.toBase58() ?? '')}
</a>
</p>
<p>Activation Epoch: <span className="font-bold">{formatEpoch(stakeAccountMeta.stakeAccount.info.stake.delegation.activationEpoch)}</span></p>
<p>Deactivation Epoch: <span className="font-bold">{formatEpoch(stakeAccountMeta.stakeAccount.info.stake.delegation.deactivationEpoch)}</span></p>
<p className="text-md leading-3 uppercase font-bold pt-2"> {formatEpoch(stakeAccountMeta.stakeAccount.info.stake.delegation.activationEpoch)} </p>
<span className="text-xs leading-6">Activation Epoch</span>
<p className="text-md leading-3 uppercase font-bold pt-2"> {formatEpoch(stakeAccountMeta.stakeAccount.info.stake.delegation.deactivationEpoch)} </p>
<span className="text-xs leading-6">Deactivation Epoch</span>
</>
)}
</div>
{/* Stake accounts - always visible */}
<div className="w-full pb-5 md:pb-2 md:pt-2 md:w-3/12 md:pr-10 md:text-right">
<div className="w-full pb-5 md:pb-2 md:pt-2 md:w-1/4 md:pr-10 md:text-right">
{connected &&
<>
<button
Expand All @@ -136,7 +157,7 @@ export function StakeAccountCard({stakeAccountMeta}: {stakeAccountMeta: StakeAcc
>
{stakeActivationData?.state === "activating" && "Re-"}Delegate
</button>

{' '}
<button
className="solBtnGray whitespace-nowrap"
hidden={stakeActivationData?.state === "inactive" || stakeActivationData?.state === "deactivating"}
Expand Down
2 changes: 1 addition & 1 deletion src/components/WalletSummary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ export default function WalletSummary(props: WalletSummaryProps) {
}

<div className="w-full mt-3 flex flex-wrap md:justify-between items-center text-center">
<div className="w-full pb-3 lg:border-r-4 lg:border-transparent">
<div className="w-full pb-3 lg:border-transparent">
{/* pie chart */}
<div className="solBoxGray h-44 p-3.5 w-full font-light items-center text-center uppercase flex flex-wrap justify-center">
{/* pie chart - css from added.css */}
Expand Down