Merge pull request #340 from forbole/dev

Dev
forbole · Sep 25, 2021 · c45384e · c45384e
2 parents 97051eb + 1c79c61
commit c45384e
Show file tree

Hide file tree

Showing 28 changed files with 310 additions and 396 deletions.
diff --git a/components/AccountDetailCard/index.tsx b/components/AccountDetailCard/index.tsx
@@ -247,7 +247,6 @@ const AccountDetailCard: React.FC<AccountDetailCardProps> = ({
         open={editAccountDialogOpen}
         onClose={() => setEditAccountDialogOpen(false)}
         account={account}
-        availableTokens={availableTokens}
       />
     </>
   )

diff --git a/components/AccountStatCard/index.tsx b/components/AccountStatCard/index.tsx
@@ -12,7 +12,6 @@ import { LineChart, Line, YAxis } from 'recharts'
 import UpIcon from '@material-ui/icons/ArrowDropUp'
 import DownIcon from '@material-ui/icons/ArrowDropDown'
 import useTranslation from 'next-translate/useTranslation'
-import last from 'lodash/last'
 import get from 'lodash/get'
 import { useRouter } from 'next/router'
 import { gql, useSubscription } from '@apollo/client'
@@ -26,6 +25,7 @@ import {
   formatPercentage,
   getTotalBalance,
   getTotalTokenAmount,
+  transformGqlAcountBalance,
   transformValidatorsWithTokenAmount,
 } from '../../misc/utils'
 import useAccountsBalancesWithinPeriod from '../../graphql/hooks/useAccountsBalancesWithinPeriod'
@@ -37,6 +37,7 @@ import { useWalletsContext } from '../../contexts/WalletsContext'
 import useIconProps from '../../misc/useIconProps'
 import DelegationDialog from '../DelegationDialog'
 import { getValidators } from '../../graphql/queries/validators'
+import { getLatestAccountBalance } from '../../graphql/queries/accountBalances'
 
 const dailyTimestamps = dateRanges
   .find((d) => d.title === 'day')
@@ -55,32 +56,42 @@ const AccountStatCard: React.FC<AccountStatCardProps> = ({ account }) => {
   const { currency } = useGeneralContext()
   const { updateAccount } = useWalletsContext()
   const router = useRouter()
+  // Historic data
   const {
     data: [accountWithBalance],
     loading,
   } = useAccountsBalancesWithinPeriod([account], dailyTimestamps)
   const [delegateDialogOpen, setDelegateDialogOpen] = React.useState(false)
+  const data = createEmptyChartData(
+    (get(accountWithBalance, 'balances', []) as AccountBalance[]).map((b) => getTotalBalance(b)),
+    0,
+    1
+  )
+  // Latest data
+  const { data: latestData } = useSubscription(
+    gql`
+      ${getLatestAccountBalance(account.crypto)}
+    `,
+    { variables: { address: account.address } }
+  )
   const { data: validatorsData } = useSubscription(
     gql`
       ${getValidators(crypto.name)}
     `
   )
 
-  const latestBalance = last(get(accountWithBalance, 'balances', []))
-  const tokenAmounts = getTotalTokenAmount(latestBalance).amount
-  const usdBalance = getTotalBalance(latestBalance).balance
-
-  const validators = transformValidatorsWithTokenAmount(validatorsData, latestBalance)
-  const availableTokens = get(latestBalance, 'availableTokens', {
-    coins: [],
-    tokens_prices: [],
-  })
-
-  const data = createEmptyChartData(
-    (get(accountWithBalance, 'balances', []) as AccountBalance[]).map((b) => getTotalBalance(b)),
-    0,
-    1
-  )
+  const { tokenAmounts, usdBalance, availableTokens, validators } = React.useMemo(() => {
+    const accountBalance = transformGqlAcountBalance(latestData, Date.now())
+    return {
+      tokenAmounts: getTotalTokenAmount(accountBalance).amount,
+      usdBalance: getTotalBalance(accountBalance).balance,
+      validators: transformValidatorsWithTokenAmount(validatorsData, accountBalance),
+      availableTokens: get(accountBalance, 'availableTokens', {
+        coins: [],
+        tokens_prices: [],
+      }),
+    }
+  }, [data])
 
   const firstBalance = get(data, '[0].balance', 0)
   const diff = Math.abs(usdBalance - firstBalance)

diff --git a/components/ActivitiesTable/Row.tsx b/components/ActivitiesTable/Row.tsx
@@ -35,7 +35,7 @@ const Row: React.FC<RowProps> = ({ activity, account, crypto, address }) => {
         <>
           <Box mr={1}>
             <Link
-              href={`${crypto.blockExplorerBaseUrl}/accounts/${account.address}`}
+              href={`${crypto.blockExplorerBaseUrl}/accounts/${accountDetail.address}`}
               target="_blank"
             >
               <AccountAvatar
@@ -65,7 +65,7 @@ const Row: React.FC<RowProps> = ({ activity, account, crypto, address }) => {
         <>
           <Box mr={1}>
             <Link
-              href={`${crypto.blockExplorerBaseUrl}/accounts/${account.address}`}
+              href={`${crypto.blockExplorerBaseUrl}/accounts/${accountDetail.address}`}
               target="_blank"
             >
               <AccountAvatar
@@ -107,7 +107,7 @@ const Row: React.FC<RowProps> = ({ activity, account, crypto, address }) => {
         <>
           <Box mr={1}>
             <Link
-              href={`${crypto.blockExplorerBaseUrl}/accounts/${account.address}`}
+              href={`${crypto.blockExplorerBaseUrl}/accounts/${accountDetail.address}`}
               target="_blank"
             >
               <AccountAvatar
@@ -137,7 +137,7 @@ const Row: React.FC<RowProps> = ({ activity, account, crypto, address }) => {
         <>
           <Box mr={1}>
             <Link
-              href={`${crypto.blockExplorerBaseUrl}/accounts/${account.address}`}
+              href={`${crypto.blockExplorerBaseUrl}/accounts/${accountDetail.address}`}
               target="_blank"
             >
               <AccountAvatar
@@ -172,7 +172,7 @@ const Row: React.FC<RowProps> = ({ activity, account, crypto, address }) => {
         <>
           <Box mr={1}>
             <Link
-              href={`${crypto.blockExplorerBaseUrl}/accounts/${account.address}`}
+              href={`${crypto.blockExplorerBaseUrl}/accounts/${accountDetail.address}`}
               target="_blank"
             >
               <AccountAvatar
@@ -242,7 +242,7 @@ const Row: React.FC<RowProps> = ({ activity, account, crypto, address }) => {
       return (
         <>
           <Avatar className={classes.accountAvatar} alt={accountDetail.name} src={crypto.image} />
-          <Typography className={classes.validatorTypography}>{account.name}</Typography>
+          <Typography className={classes.validatorTypography}>{accountDetail.name}</Typography>
           <Typography>
             {t(`${activity.tag}Activity`)}
             <span className={classes.amount}>
@@ -267,7 +267,7 @@ const Row: React.FC<RowProps> = ({ activity, account, crypto, address }) => {
         <>
           <Box mr={1}>
             <Link
-              href={`${crypto.blockExplorerBaseUrl}/accounts/${account.address}`}
+              href={`${crypto.blockExplorerBaseUrl}/accounts/${accountDetail.address}`}
               target="_blank"
             >
               <AccountAvatar
@@ -309,7 +309,7 @@ const Row: React.FC<RowProps> = ({ activity, account, crypto, address }) => {
         <>
           <Box mr={1}>
             <Link
-              href={`${crypto.blockExplorerBaseUrl}/accounts/${account.address}`}
+              href={`${crypto.blockExplorerBaseUrl}/accounts/${accountDetail.address}`}
               target="_blank"
             >
               <AccountAvatar
@@ -344,7 +344,7 @@ const Row: React.FC<RowProps> = ({ activity, account, crypto, address }) => {
           {activity.detail.fromAddress === accountDetail.address ? (
             <Box mr={1}>
               <Link
-                href={`${crypto.blockExplorerBaseUrl}/accounts/${account.address}`}
+                href={`${crypto.blockExplorerBaseUrl}/accounts/${accountDetail.address}`}
                 target="_blank"
               >
                 <AccountAvatar
@@ -376,7 +376,7 @@ const Row: React.FC<RowProps> = ({ activity, account, crypto, address }) => {
           {activity.detail.toAddress === accountDetail.address ? (
             <Box ml={1}>
               <Link
-                href={`${crypto.blockExplorerBaseUrl}/accounts/${account.address}`}
+                href={`${crypto.blockExplorerBaseUrl}/accounts/${accountDetail.address}`}
                 target="_blank"
               >
                 <AccountAvatar
@@ -404,13 +404,29 @@ const Row: React.FC<RowProps> = ({ activity, account, crypto, address }) => {
     if (activity.tag === 'setRewardAddress') {
       return (
         <>
-          <Typography className={classes.validatorTypography}>
-            {activity.detail.srcAddress}
-          </Typography>
+          <Box mr={1}>
+            <Link
+              href={`${crypto.blockExplorerBaseUrl}/accounts/${accountDetail.address}`}
+              target="_blank"
+            >
+              <AccountAvatar
+                ledgerIconDisabled
+                account={account}
+                address={address}
+                hideAddress
+                size="small"
+              />
+            </Link>
+          </Box>
           <Typography>{t(`${activity.tag}Activity`)}</Typography>
-          <Typography className={classes.proposalTypography}>
-            {activity.detail.dstAddress}
-          </Typography>
+          <Link
+            className={classes.proposalTypography}
+            variant="body1"
+            href={`${crypto.blockExplorerBaseUrl}/accounts/${activity.detail.withdrawAddress}`}
+            target="_blank"
+          >
+            {activity.detail.withdrawAddress}
+          </Link>
         </>
       )
     }

diff --git a/components/AddressSendDialog/index.tsx b/components/AddressSendDialog/index.tsx
@@ -71,7 +71,7 @@ const AddressSendDialog: React.FC<AddressSendDialogProps> = ({ open, onClose, ad
   const { availableAmount, availableTokens } = getAvailableAmount()
 
   const onConfirm = React.useCallback(
-    async (r: { amount: { amount: number; denom: string }; address: string }, m: string) => {
+    async (r: { amount: { amount: number; denom: string }; address: string }) => {
       try {
         setLoading(true)
         const coinsToSend = getEquivalentCoinToSend(
@@ -125,16 +125,13 @@ const AddressSendDialog: React.FC<AddressSendDialogProps> = ({ open, onClose, ad
         noValidate
         onSubmit={(e) => {
           e.preventDefault()
-          onConfirm(
-            {
-              address: sender.address,
-              amount: {
-                amount: Number(amount),
-                denom: crypto.name,
-              },
+          onConfirm({
+            address: sender.address,
+            amount: {
+              amount: Number(amount),
+              denom: crypto.name,
             },
-            memo
-          )
+          })
         }}
       >
         <DialogContent>

diff --git a/components/ConfirmTransactionDialog/ConfirmStageContent/SetWithdrawAddressContent.tsx b/components/ConfirmTransactionDialog/ConfirmStageContent/SetWithdrawAddressContent.tsx
@@ -0,0 +1,40 @@
+import React from 'react'
+import { Box, Divider, Typography, useTheme } from '@material-ui/core'
+import useTranslation from 'next-translate/useTranslation'
+import WithdrawIcon from '../../../assets/images/icons/icon_withdraw_tx.svg'
+import ValidatorAvatar from '../../ValidatorAvatar'
+import cryptocurrencies from '../../../misc/cryptocurrencies'
+
+interface SetWithdrawAddressContentProps {
+  msgs: TransactionMsgSetWithdrawAddress[]
+  account: Account
+}
+
+const SetWithdrawAddressContent: React.FC<SetWithdrawAddressContentProps> = ({ msgs, account }) => {
+  const { t } = useTranslation('common')
+
+  return (
+    <>
+      <Box display="flex" flexDirection="column" alignItems="center" my={4}>
+        <Typography variant="h4">{t('edit reward address')}</Typography>
+      </Box>
+      <Divider />
+      {msgs.map((msg, i) => (
+        <React.Fragment key={String(i)}>
+          <Box my={1}>
+            <Typography>{t('delegator address')}</Typography>
+            <Typography color="textSecondary">{msg.value.delegatorAddress}</Typography>
+          </Box>
+          <Divider />
+          <Box my={1}>
+            <Typography>{t('new reward address')}</Typography>
+            <Typography color="textSecondary">{msg.value.withdrawAddress}</Typography>
+          </Box>
+          <Divider />
+        </React.Fragment>
+      ))}
+    </>
+  )
+}
+
+export default SetWithdrawAddressContent
diff --git a/components/ConfirmTransactionDialog/ConfirmStageContent/index.tsx b/components/ConfirmTransactionDialog/ConfirmStageContent/index.tsx
@@ -24,6 +24,7 @@ import SubmitProposalContent from './SubmitProposalContent'
 import VoteContent from './VoteContent'
 import DepositContent from './DepositContent'
 import SaveProfileContent from './SaveProfileContent'
+import SetWithdrawAddressContent from './SetWithdrawAddressContent'
 
 const ReactJson = dynamic(() => import('react-json-view'), { ssr: false })
 
@@ -130,6 +131,13 @@ const ConfirmStageContent: React.FC<ConfirmStageContentProps> = ({
         )
       case '/desmos.profiles.v1beta1.MsgSaveProfile':
         return <SaveProfileContent msgs={transactionData.msgs as TransactionMsgSaveProfile[]} />
+      case '/cosmos.distribution.v1beta1.MsgSetWithdrawAddress':
+        return (
+          <SetWithdrawAddressContent
+            account={account}
+            msgs={transactionData.msgs as TransactionMsgSetWithdrawAddress[]}
+          />
+        )
       default:
         return null
     }

diff --git a/components/CreateWalletDialog/index.tsx b/components/CreateWalletDialog/index.tsx
@@ -188,7 +188,7 @@ const CreateWalletDialog: React.FC<CreateWalletDialogProps> = ({ open, onClose,
                   setStage(CommonStage.ImportLedgerWalletStage, undefined, true)
                   // select next crypto
                 } else if (ledgerCryptos.length > ledgerAddresses.length) {
-                  const address = await getWalletAddress('', ledgerCryptos[0], 0, signer)
+                  const address = await getWalletAddress('', ledgerCryptos[0], 0, signer, true)
                   setLedgerCryptosIndex((i) => i + 1)
                   setLedgerAddresses((addresses) => [...addresses, address])
                   // save wallet on last crypto

diff --git a/components/EditAccountDialog/AccountInfo.tsx b/components/EditAccountDialog/AccountInfo.tsx
@@ -15,10 +15,11 @@ import useStyles from './styles'
 interface AccountInfoProps {
   onEdit(): void
   onRemove(): void
-  onSave(moniker): void
-  onShare(): void
+  onSave(moniker: string): void
+  onShare(address: string): void
   onDetail(): void
   account: Account
+  withdrawAddress: string
 }
 
 const AccountInfo: React.FC<AccountInfoProps> = ({
@@ -28,6 +29,7 @@ const AccountInfo: React.FC<AccountInfoProps> = ({
   onSave,
   onShare,
   onDetail,
+  withdrawAddress,
 }) => {
   const { t } = useTranslation('common')
   const classes = useStyles()
@@ -61,7 +63,11 @@ const AccountInfo: React.FC<AccountInfoProps> = ({
               <Typography color="textSecondary">{account.address}</Typography>
             </Box>
             <Box justifyContent="flex-end" display="flex" flex={1} alignItems="center">
-              <Button variant="outlined" className={classes.iconButton} onClick={onShare}>
+              <Button
+                variant="outlined"
+                className={classes.iconButton}
+                onClick={() => onShare(account.address)}
+              >
                 {t('share')}
               </Button>
             </Box>
@@ -73,10 +79,14 @@ const AccountInfo: React.FC<AccountInfoProps> = ({
                 {t('reward address')}
                 <HelpOutline fontSize="small" className={classes.helpOutLine} onClick={onDetail} />
               </Typography>
-              <Typography color="textSecondary">{account.address}</Typography>
+              <Typography color="textSecondary">{withdrawAddress}</Typography>
             </Box>
             <Box justifyContent="flex-end" display="flex" flex={1} alignItems="center">
-              <Button variant="outlined" className={classes.iconButton} onClick={onShare}>
+              <Button
+                variant="outlined"
+                className={classes.iconButton}
+                onClick={() => onShare(withdrawAddress)}
+              >
                 {t('share')}
               </Button>
             </Box>