GRIN/nym
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add delegate button to each mixnode raw

Browse Source
This commit is contained in:
Yana
2023-11-22 19:52:23 +01:00
parent 1f249a3386
commit 496b284bcd
5 changed files with 157 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
explorer/src/components/Delegations/components/DelegateIconButton.tsx
+24
View File
@@ -0,0 +1,24 @@
import * as React from 'react';
import { useClipboard } from 'use-clipboard-copy';
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
import DoneIcon from '@mui/icons-material/Done';
import { Box, Tooltip } from '@mui/material';
import { SxProps } from '@mui/system';
import { DelegateSVG } from '../../../icons/DelevateSVG';
export const DelegateIconButton: FCWithChildren<{
tooltip?: React.ReactNode;
onDelegate: () => void;
sx?: SxProps;
}> = ({ tooltip, onDelegate, sx }) => {
const handleDelegateClick = () => {
onDelegate();
};
return (
<Tooltip title={tooltip || undefined}>
<Box sx={sx} onClick={handleDelegateClick}>
<DelegateSVG />
</Box>
</Tooltip>
);
};
explorer/src/components/Delegations/components/DelegateModal.tsx
+8 -15
View File
@@ -20,7 +20,8 @@ export const DelegateModal: FCWithChildren<{
open: boolean;
onClose: () => void;
onOk?: (delegationModalProps: DelegationModalProps) => void;
identityKey?: string;
initialIdentityKey?: string;
initialMixId?: number;
onIdentityKeyChanged?: (identityKey: string) => void;
onAmountChanged?: (amount: string) => void;
header?: string;
@@ -43,13 +44,14 @@ export const DelegateModal: FCWithChildren<{
onOk,
header,
buttonText,
identityKey: initialIdentityKey,
initialIdentityKey,
initialMixId,
// accountBalance,
denom,
sx,
backdropProps,
}) => {
const [mixId, setMixId] = useState<number | undefined>();
const [mixId, setMixId] = useState<number | undefined>(initialMixId);
const [identityKey, setIdentityKey] = useState<string | undefined>(initialIdentityKey);
const [amount, setAmount] = useState<DecCoin | undefined>();
const [isValidated, setValidated] = useState<boolean>(false);
@@ -62,18 +64,7 @@ export const DelegateModal: FCWithChildren<{
data?: string;
}>({ status: 'loading', data: undefined });
const {
username,
connect,
disconnect,
wallet,
openView,
address,
getCosmWasmClient,
isWalletConnected,
getSigningCosmWasmClient,
estimateFee,
} = useChain('nyx');
const { address, getCosmWasmClient, isWalletConnected, getSigningCosmWasmClient } = useChain('nyx');
useEffect(() => {
const getClient = async () => {
@@ -154,6 +145,7 @@ export const DelegateModal: FCWithChildren<{
): Promise<ExecuteResult> => {
const amount = (Number(funds![0].amount) * 1000000).toString();
const uNymFunds = [{ amount: amount, denom: 'unym' }];
console.log('cosmWasmSignerClient :>> ', cosmWasmSignerClient);
return await cosmWasmSignerClient.execute(
address,
MIXNET_CONTRACT_ADDRESS,
@@ -271,6 +263,7 @@ export const DelegateModal: FCWithChildren<{
helperText={mixIdError}
onChange={handleMixIDChanged}
InputLabelProps={{ shrink: true }}
value={mixId?.toString() || ''}
/>
</Box>
<Box display="flex" gap={2} alignItems="center" sx={{ mt: 3 }}>
explorer/src/components/MixNodes/DetailSection.tsx
+1
View File
@@ -16,6 +16,7 @@ export const MixNodeDetailSection: FCWithChildren<MixNodeDetailProps> = ({ mixNo
const palette = [theme.palette.text.primary];
const isMobile = useIsMobile();
const statusText = React.useMemo(() => getMixNodeStatusText(mixNodeRow.status), [mixNodeRow.status]);
console.log('mixNodeRow :>> ', mixNodeRow);
return (
<Grid container>
<Grid item xs={12} md={6}>
explorer/src/icons/DelevateSVG.tsx
+23
View File
@@ -0,0 +1,23 @@
import * as React from 'react';
import { useTheme } from '@mui/material/styles';
export const DelegateSVG: FCWithChildren = () => {
const theme = useTheme();
const color = theme.palette.text.primary;
return (
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path
d="M2.6665 7.99967V9.99967H3.99984V7.99967H2.6665ZM10.6665 4.66634L9.7265 3.72634L8.6665 4.77967V1.33301H7.33317V4.79301L6.25984 3.73967L5.33317 4.66634L7.99984 7.33301L10.6665 4.66634ZM2.6665 11.333H13.3332V9.99967H2.6665V11.333Z"
fill="white"
/>
<path
d="M13.3332 13.6663C13.3332 14.2186 12.8855 14.6663 12.3332 14.6663H3.6665C3.11422 14.6663 2.6665 14.2186 2.6665 13.6663V13.333H13.3332V13.6663Z"
fill="white"
/>
<rect x="12" y="8" width="1.33333" height="2" fill="white" />
<rect x="12" y="11.333" width="1.33333" height="2" fill="white" />
<rect x="2.6665" y="11.333" width="1.33333" height="2" fill="white" />
</svg>
);
};
explorer/src/pages/Mixnodes/index.tsx
+101 -2
View File
@@ -19,6 +19,13 @@ import { splice } from '../../utils';
import { getMixNodeStatusColor } from '../../components/MixNodes/Status';
import { MixNodeStatusDropdown } from '../../components/MixNodes/StatusDropdown';
import { Tooltip } from '../../components/Tooltip';
import { DelegateIconButton } from '../../components/Delegations/components/DelegateIconButton';
import { ChainProvider } from '@cosmos-kit/react';
import { assets, chains } from 'chain-registry';
import { wallets as keplr } from '@cosmos-kit/keplr';
import { DelegationModal, DelegationModalProps } from '../../components/Delegations/components/DelegationModal';
import { useMemo, useState } from 'react';
import { DelegateModal } from '../../components/Delegations/components/DelegateModal';
const getCellFontStyle = (theme: Theme, row: MixnodeRowType, textColor?: string) => {
const color = textColor || getMixNodeStatusColor(theme, row.status);
@@ -40,10 +47,59 @@ export const PageMixnodes: FCWithChildren = () => {
const [filteredMixnodes, setFilteredMixnodes] = React.useState<MixNodeResponse>([]);
const [pageSize, setPageSize] = React.useState<string>('10');
const [searchTerm, setSearchTerm] = React.useState<string>('');
const [mixId, setMixId] = useState<number | undefined>();
const [identityKey, setIdentityKey] = useState<string | undefined>();
const [showNewDelegationModal, setShowNewDelegationModal] = useState<boolean>(false);
const [confirmationModalProps, setConfirmationModalProps] = useState<DelegationModalProps | undefined>();
const theme = useTheme();
const { status } = useParams<{ status: MixnodeStatusWithAll | undefined }>();
const navigate = useNavigate();
const assetsFixedUp = useMemo(() => {
const nyx = assets.find((a) => a.chain_name === 'nyx');
if (nyx) {
const nyxCoin = nyx.assets.find((a) => a.name === 'nyx');
if (nyxCoin) {
nyxCoin.coingecko_id = 'nyx';
}
nyx.assets = nyx.assets.reverse();
}
return assets;
}, [assets]);
const chainsFixedUp = useMemo(() => {
const nyx = chains.find((c) => c.chain_id === 'nyx');
if (nyx) {
if (!nyx.staking) {
nyx.staking = {
staking_tokens: [{ denom: 'unyx' }],
lock_duration: {
blocks: 10000,
},
};
if (nyx.apis) nyx.apis.rpc = [{ address: 'https://rpc.nymtech.net', provider: 'nym' }];
}
}
return chains;
}, [chains]);
3;
const openDelegationModal = (identityKey: string, mixId: number) => {
setMixId(mixId);
setIdentityKey(identityKey);
};
React.useEffect(() => {
if (identityKey && mixId) {
setShowNewDelegationModal(true);
}
}, [identityKey, mixId]);
const handleNewDelegation = (delegationModalProps: DelegationModalProps) => {
setShowNewDelegationModal(false);
setConfirmationModalProps(delegationModalProps);
};
const handleSearch = (str: string) => {
setSearchTerm(str.toLowerCase());
};
@@ -88,7 +144,7 @@ export const PageMixnodes: FCWithChildren = () => {
disableColumnMenu: true,
renderHeader: () => <CustomColumnHeading headingTitle="Mix ID" />,
headerClassName: 'MuiDataGrid-header-override',
width: 100,
width: 70,
headerAlign: 'left',
renderCell: (params: GridRenderCellParams) => (
<MuiLink
@@ -107,10 +163,19 @@ export const PageMixnodes: FCWithChildren = () => {
disableColumnMenu: true,
renderHeader: () => <CustomColumnHeading headingTitle="Identity Key" />,
headerClassName: 'MuiDataGrid-header-override',
width: 170,
width: 190,
headerAlign: 'left',
renderCell: (params: GridRenderCellParams) => (
<>
<DelegateIconButton
sx={{ ...getCellFontStyle(theme, params.row), marginRight: 1 }}
// tooltip={`Copy identity key ${params.value} to clipboard`}
// onDelegate={() => onDelegate(params.value.identityKey, params.value.mixId)}
onDelegate={() => {
openDelegationModal(params.value, params.row.mix_id);
console.log('object :>> ', params.value, params.row.mix_id);
}}
/>
<CopyToClipboard
sx={{ ...getCellFontStyle(theme, params.row), mr: 1 }}
value={params.value}
@@ -363,6 +428,40 @@ export const PageMixnodes: FCWithChildren = () => {
</Card>
</Grid>
</Grid>
{showNewDelegationModal && (
<ChainProvider
chains={chainsFixedUp}
assetLists={assetsFixedUp}
wallets={[...keplr]}
signerOptions={{
preferredSignType: () => 'amino',
}}
>
<DelegateModal
open={showNewDelegationModal}
onClose={() => setShowNewDelegationModal(false)}
header="Delegate"
buttonText="Delegate stake"
denom={'nym'} // clientDetails?.display_mix_denom || 'nym'}
onOk={(delegationModalProps: DelegationModalProps) => handleNewDelegation(delegationModalProps)}
// accountBalance={balance?.printable_balance}
initialIdentityKey={identityKey}
initialMixId={mixId}
/>
</ChainProvider>
)}
{confirmationModalProps && (
<DelegationModal
{...confirmationModalProps}
open={Boolean(confirmationModalProps)}
onClose={async () => {
setConfirmationModalProps(undefined);
// await fetchBalance();
}}
/>
)}
</>
);
};