Skip to content

Commit 00e2d8c

Browse files
pyramationpyramation
authored
Merge pull request #67 from cosmology-tech/feat/stake-tokens
improve stake-tokens example
2 parents 9bf1c92 + fe0b8cb commit 00e2d8c

File tree

5 files changed

+216
-53
lines changed

5 files changed

+216
-53
lines changed

‎examples/stake-tokens/components/react/all-validators.tsx‎

Lines changed: 65 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import {
2424
Text,
2525
Image,
2626
useColorMode,
27+
Center,
2728
} from '@chakra-ui/react';
2829
import {
2930
DelegateWarning,
@@ -46,20 +47,52 @@ import type {
4647
import { TransactionResult } from '../types';
4748
import { ChainName } from '@cosmos-kit/core';
4849

50+
export const Thumbnail = ({
51+
identity,
52+
name,
53+
thumbnailUrl,
54+
}: {
55+
identity: string | undefined;
56+
name: string | undefined;
57+
thumbnailUrl: string;
58+
}) => {
59+
return (
60+
<>
61+
{identity && thumbnailUrl ? (
62+
<Image
63+
borderRadius="full"
64+
boxSize="30px"
65+
src={thumbnailUrl}
66+
alt={name}
67+
mr={2}
68+
/>
69+
) : (
70+
<Center boxSize="30px" bgColor="gray.400" borderRadius="full" mr={2}>
71+
{name && name.slice(0, 1).toUpperCase()}
72+
</Center>
73+
)}
74+
</>
75+
);
76+
};
77+
4978
const AllValidators = ({
5079
validators,
5180
balance,
5281
delegations,
5382
updateData,
5483
unbondingDays,
5584
chainName,
85+
thumbnails,
5686
}: {
5787
validators: Validator[];
5888
balance: number;
5989
delegations: Delegation[];
6090
updateData: () => void;
6191
unbondingDays: number;
6292
chainName: ChainName;
93+
thumbnails: {
94+
[key: string]: string;
95+
};
6396
}) => {
6497
const { isOpen, onOpen, onClose } = useDisclosure();
6598
const { getSigningStargateClient, address } = useChain(chainName);
@@ -161,9 +194,20 @@ const AllValidators = ({
161194

162195
<ModalBody>
163196
<ValidatorInfo
164-
imgUrl="https://wallet.keplr.app/_next/image?url=https%3A%2F%2Fs3.amazonaws.com%2Fkeybase_processed_uploads%2F909034c1d36c1d1f3e9191f668007805_360_360.jpeg&w=64&q=75"
197+
imgUrl={
198+
currentValidator?.description?.identity
199+
? thumbnails[currentValidator.description.identity]
200+
: ''
201+
}
165202
name={currentValidator?.description?.moniker || ''}
166-
commission={5}
203+
commission={
204+
currentValidator?.commission?.commissionRates?.rate
205+
? exponentiate(
206+
currentValidator.commission.commissionRates.rate,
207+
-16
208+
).toFixed(0)
209+
: 0
210+
}
167211
apr={22.08}
168212
/>
169213
<ValidatorDesc
@@ -223,23 +267,31 @@ const AllValidators = ({
223267
overflowX="hidden"
224268
>
225269
<Text mr={4}>{index + 1}</Text>
226-
{/* <Image
227-
borderRadius="full"
228-
boxSize="30px"
229-
src={validator.imgUrl}
230-
alt={validator.description.moniker}
231-
mr={2}
232-
/> */}
270+
<Thumbnail
271+
identity={validator.description?.identity}
272+
name={validator.description?.moniker}
273+
thumbnailUrl={
274+
validator.description?.identity
275+
? thumbnails[validator.description.identity]
276+
: ''
277+
}
278+
/>
233279
<Text>{validator?.description?.moniker}</Text>
234280
</Box>
235281
</Td>
236282
<Td>
237-
{/* {validator.voting} <Token color="blackAlpha.800" /> */}
238-
10,000,000&nbsp;
283+
{Math.floor(exponentiate(validator.tokens, -exp))}
284+
&nbsp;
239285
<Token color="blackAlpha.800" token={coin.symbol} />
240286
</Td>
241-
{/* <Td>{validator.commission}</Td> */}
242-
<Td>5%</Td>
287+
<Td>
288+
{validator.commission?.commissionRates?.rate &&
289+
exponentiate(
290+
validator.commission.commissionRates.rate,
291+
-16
292+
).toFixed(0)}
293+
%
294+
</Td>
243295
<Td>
244296
<Box width="100%" display="flex" alignItems="center">
245297
{/* <Text>{validator.apr}</Text> */}

‎examples/stake-tokens/components/react/delegate-modal.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import {
2222
UnorderedList,
2323
useColorModeValue,
2424
useToast,
25+
Center,
2526
} from '@chakra-ui/react';
2627
import { TransactionResult } from '../types';
2728

@@ -33,11 +34,17 @@ export const ValidatorInfo = ({
3334
}: {
3435
imgUrl: string;
3536
name: string;
36-
commission: number;
37+
commission: number | string;
3738
apr: number;
3839
}) => (
3940
<Flex alignItems="center" gap={4} mb={4}>
40-
<Image borderRadius="full" boxSize="60px" src={imgUrl} alt={name} />
41+
{imgUrl ? (
42+
<Image borderRadius="full" boxSize="60px" src={imgUrl} alt={name} />
43+
) : (
44+
<Center boxSize="60px" borderRadius="full" bgColor="gray.400">
45+
{name.slice(0, 1).toUpperCase()}
46+
</Center>
47+
)}
4148
<Stack>
4249
<Heading as="h4" size="md">
4350
{name}

‎examples/stake-tokens/components/react/my-validators.tsx‎

Lines changed: 63 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ import type {
4747
} from 'interchain/types/codegen/cosmos/staking/v1beta1/staking';
4848
import type { DelegationDelegatorReward as Reward } from 'interchain/types/codegen/cosmos/distribution/v1beta1/distribution';
4949
import { ChainName } from '@cosmos-kit/core';
50+
import { Thumbnail } from './all-validators';
5051

5152
const MyValidators = ({
5253
validators,
@@ -57,6 +58,7 @@ const MyValidators = ({
5758
updateData,
5859
unbondingDays,
5960
chainName,
61+
thumbnails,
6062
}: {
6163
validators: Validator[];
6264
allValidator: Validator[];
@@ -66,6 +68,9 @@ const MyValidators = ({
6668
updateData: () => void;
6769
unbondingDays: number;
6870
chainName: ChainName;
71+
thumbnails: {
72+
[key: string]: string;
73+
};
6974
}) => {
7075
const { getSigningStargateClient, address } = useChain(chainName);
7176

@@ -152,9 +157,11 @@ const MyValidators = ({
152157
return {
153158
details: validator?.description?.details,
154159
name: validator?.description?.moniker,
160+
identity: validator?.description?.identity,
155161
address: validator.operatorAddress,
156162
staked: exponentiate(delegation.balance!.amount, -exp),
157163
reward: Number(exponentiate(rewardAmount, -exp).toFixed(6)),
164+
commission: validator?.commission?.commissionRates?.rate,
158165
};
159166
});
160167

@@ -379,9 +386,17 @@ const MyValidators = ({
379386

380387
<ModalBody>
381388
<ValidatorInfo
382-
imgUrl="https://wallet.keplr.app/_next/image?url=https%3A%2F%2Fs3.amazonaws.com%2Fkeybase_processed_uploads%2F909034c1d36c1d1f3e9191f668007805_360_360.jpeg&w=64&q=75"
389+
imgUrl={
390+
currentValidator?.identity
391+
? thumbnails[currentValidator.identity]
392+
: ''
393+
}
383394
name={currentValidator?.name || ''}
384-
commission={5}
395+
commission={
396+
currentValidator?.commission
397+
? exponentiate(currentValidator.commission, -16).toFixed(0)
398+
: 0
399+
}
385400
apr={22.08}
386401
/>
387402
<ValidatorDesc description={currentValidator?.details || ''} />
@@ -427,9 +442,17 @@ const MyValidators = ({
427442

428443
<ModalBody>
429444
<ValidatorInfo
430-
imgUrl="https://wallet.keplr.app/_next/image?url=https%3A%2F%2Fs3.amazonaws.com%2Fkeybase_processed_uploads%2F909034c1d36c1d1f3e9191f668007805_360_360.jpeg&w=64&q=75"
445+
imgUrl={
446+
currentValidator?.identity
447+
? thumbnails[currentValidator.identity]
448+
: ''
449+
}
431450
name={currentValidator?.name || ''}
432-
commission={5}
451+
commission={
452+
currentValidator?.commission
453+
? exponentiate(currentValidator.commission, -16).toFixed(0)
454+
: 0
455+
}
433456
apr={22.08}
434457
/>
435458
<DelegateWarning unbondingDays={unbondingDays} />
@@ -474,9 +497,17 @@ const MyValidators = ({
474497

475498
<ModalBody>
476499
<ValidatorInfo
477-
imgUrl="https://wallet.keplr.app/_next/image?url=https%3A%2F%2Fs3.amazonaws.com%2Fkeybase_processed_uploads%2F909034c1d36c1d1f3e9191f668007805_360_360.jpeg&w=64&q=75"
500+
imgUrl={
501+
currentValidator?.identity
502+
? thumbnails[currentValidator.identity]
503+
: ''
504+
}
478505
name={currentValidator?.name || ''}
479-
commission={5}
506+
commission={
507+
currentValidator?.commission
508+
? exponentiate(currentValidator.commission, -16).toFixed(0)
509+
: 0
510+
}
480511
apr={22.08}
481512
/>
482513
<Stack direction="column" spacing={4}>
@@ -548,23 +579,31 @@ const MyValidators = ({
548579
overflowX="hidden"
549580
>
550581
<Text mr={4}>{index + 1}</Text>
551-
{/* <Image
552-
borderRadius="full"
553-
boxSize="30px"
554-
src={validator.imgUrl}
555-
alt={validator.description.moniker}
556-
mr={2}
557-
/> */}
582+
<Thumbnail
583+
identity={validator.description?.identity}
584+
name={validator.description?.moniker}
585+
thumbnailUrl={
586+
validator.description?.identity
587+
? thumbnails[validator.description.identity]
588+
: ''
589+
}
590+
/>
558591
<Text>{validator?.description?.moniker}</Text>
559592
</Box>
560593
</Td>
561594
<Td>
562-
{/* {validator.voting} <Token color="blackAlpha.800" /> */}
563-
10,000,000&nbsp;
595+
{Math.floor(exponentiate(validator.tokens, -exp))}
596+
&nbsp;
564597
<Token color="blackAlpha.800" token={coin.symbol} />
565598
</Td>
566-
{/* <Td>{validator.commission}</Td> */}
567-
<Td>5%</Td>
599+
<Td>
600+
{validator.commission?.commissionRates?.rate &&
601+
exponentiate(
602+
validator.commission.commissionRates.rate,
603+
-16
604+
).toFixed(0)}
605+
%
606+
</Td>
568607
<Td>
569608
<Box width="100%" display="flex" alignItems="center">
570609
{/* <Text>{validator.apr}</Text> */}
@@ -645,13 +684,13 @@ const MyValidators = ({
645684
overflowX="hidden"
646685
>
647686
<Text mr={4}>{index + 1}</Text>
648-
{/* <Image
649-
borderRadius="full"
650-
boxSize="30px"
651-
src={validator.imgUrl}
652-
alt={validator.name}
653-
mr={2}
654-
/> */}
687+
<Thumbnail
688+
identity={validator.identity}
689+
name={validator.name}
690+
thumbnailUrl={
691+
validator.identity ? thumbnails[validator.identity] : ''
692+
}
693+
/>
655694
<Text>{validator.name}</Text>
656695
</Box>
657696
</Td>

0 commit comments

Comments
 (0)