Skip to content

Commit

Permalink
style: remove collapsable list
Browse files Browse the repository at this point in the history 
Removing collapsable list and validators text.  Adding reward value available on each validator to table.
  • Loading branch information
@terran6
terran6 committed May 24, 2023
1 parent cbc7d4e commit b2e2f5f
Showing 1 changed file with 45 additions and 91 deletions.
136 changes: 45 additions & 91 deletions src/txs/stake/WithdrawRewardsForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,13 @@ import { useCallback, useEffect, useMemo, useState } from "react"
import { useTranslation } from "react-i18next"
import { useForm } from "react-hook-form"
import BigNumber from "bignumber.js"
import ExpandMoreIcon from "@mui/icons-material/ExpandMore"
import ExpandLessIcon from "@mui/icons-material/ExpandLess"
import { Validator, ValAddress } from "@terra-money/feather.js"
import { Rewards } from "@terra-money/feather.js"
import { MsgWithdrawDelegatorReward } from "@terra-money/feather.js"
import { queryKey } from "data/query"
import { useCurrency } from "data/settings/Currency"
import { useNetwork } from "data/wallet"
import { useMemoizedCalcValue } from "data/queries/coingecko"
import { getFindMoniker } from "data/queries/staking"
import { calcRewardsValues } from "data/queries/distribution"
import { WithTokenItem } from "data/token"
import { ValidatorLink } from "components/general"
Expand All @@ -22,6 +19,7 @@ import { Empty } from "components/feedback"
import styles from "./WithdrawRewardsForm.module.scss"
import Tx from "txs/Tx"
import { useInterchainAddresses } from "auth/hooks/useAddress"
import { Read } from "components/token"

interface Props {
rewards: Rewards
Expand All @@ -35,7 +33,6 @@ const WithdrawRewardsForm = ({ rewards, validators, chain }: Props) => {
const addresses = useInterchainAddresses()
const address = addresses && addresses[chain]
const calcValue = useMemoizedCalcValue()
const findMoniker = getFindMoniker(validators)
const { byValidator } = useMemo(
() =>
calcRewardsValues(rewards, currency.id, (coin) => Number(coin.amount)),
Expand Down Expand Up @@ -68,9 +65,6 @@ const WithdrawRewardsForm = ({ rewards, validators, chain }: Props) => {
[state]
)

const [isOpen, setIsOpen] = useState(true)
const toggle = () => setIsOpen(!isOpen)

/* calc */
const selectedTotal = selected.reduce<Record<Denom, Amount>>(
(prev, address) => {
Expand All @@ -95,28 +89,6 @@ const WithdrawRewardsForm = ({ rewards, validators, chain }: Props) => {
{}
)

let selectedValidatorsText = ""
switch (selected.length) {
case 0:
selectedValidatorsText = t("None selected")
break
case 1:
selectedValidatorsText = findMoniker(selected[0])
break
case 2:
selectedValidatorsText = t("{{moniker}} and {{moniker2}}", {
moniker: findMoniker(selected[0]),
moniker2: findMoniker(selected[1]),
})
break
default:
selectedValidatorsText = t("{{moniker}} and {{length}} others", {
moniker: findMoniker(selected[0]),
length: selected.length - 1,
})
break
}

/* form */
const { handleSubmit, reset } = useForm({ mode: "onChange" })

Expand Down Expand Up @@ -154,70 +126,53 @@ const WithdrawRewardsForm = ({ rewards, validators, chain }: Props) => {
<Grid gap={12}>
<dl>
<dt>{t("Validators")}</dt>
<dd>
{selectable ? (
<button type="button" onClick={toggle}>
{selectedValidatorsText}
{isOpen ? (
<ExpandLessIcon style={{ fontSize: 16 }} />
) : (
<ExpandMoreIcon style={{ fontSize: 16 }} />
)}
</dl>
<Card size="small" className={styles.card}>
<Flex className={styles.actions} start>
{Object.values(state).some((state) => !state) ? (
<button
type="button"
className={styles.button}
onClick={() => setState(init(true))}
>
{t("Select all")}
</button>
) : (
selectedValidatorsText
<button
type="button"
className={styles.button}
onClick={() => setState(init(false))}
>
{t("Deselect all")}
</button>
)}
</dd>
</dl>

{selectable && isOpen && (
<>
<Card size="small" className={styles.card}>
<Flex className={styles.actions} start>
{Object.values(state).some((state) => !state) ? (
<button
type="button"
className={styles.button}
onClick={() => setState(init(true))}
>
{t("Select all")}
</button>
) : (
<button
type="button"
className={styles.button}
onClick={() => setState(init(false))}
>
{t("Deselect all")}
</button>
)}
</Flex>

<section className={styles.validators}>
{byValidator.map(({ address, sum }) => {
const checked = state[address]

return (
<Checkbox
className={styles.checkbox}
checked={checked}
onChange={() =>
setState({ ...state, [address]: !checked })
}
key={address}
>
<div className={styles.item}>
<ValidatorLink address={address} />
</div>
</Checkbox>
)
})}
</section>
</Card>
{selected.length ? <FormArrow /> : undefined}
</>
)}

</Flex>
<section className={styles.validators}>
{byValidator.map(({ address, list: [{ denom, amount }] }) => {
const checked = state[address]
return (
<Checkbox
className={styles.checkbox}
checked={checked}
onChange={() =>
setState({ ...state, [address]: !checked })
}
key={address}
>
<dl className={styles.item}>
<dt>
<ValidatorLink address={address} />
</dt>
<dd>
<Read amount={amount} denom={denom} />
</dd>
</dl>
</Checkbox>
)
})}
</section>
</Card>
{selected.length ? <FormArrow /> : undefined}
<FormItem>
<TokenCardGrid maxHeight>
{Object.entries(selectedTotal).map(([denom, amount]) => (
Expand All @@ -235,7 +190,6 @@ const WithdrawRewardsForm = ({ rewards, validators, chain }: Props) => {
</TokenCardGrid>
</FormItem>
</Grid>

{fee.render()}
{submit.button}
</Form>
Expand Down

0 comments on commit b2e2f5f

Please sign in to comment.