Merge pull request #587 from forbole/staging

v0.17.11

components/AccountCard/ChromeExtBottom.tsx

@@ -1,7 +1,6 @@
 import { Box, Typography, Divider, Button } from '@material-ui/core'
 import React from 'react'
 import useTranslation from 'next-translate/useTranslation'
-import { gql, useQuery } from '@apollo/client'
 import useStyles from './styles'
 import { useWalletsContext } from '../../contexts/WalletsContext'
 import {
@@ -12,7 +11,7 @@ import {
 import DelegationDialog from '../DelegationDialog'
 import WithdrawRewardsDialog from '../WithdrawRewardsDialog'
 import SendDialog from '../SendDialog'
-import { getValidators } from '../../graphql/queries/validators'
+import useValidators from '../../graphql/hooks/useValidators'
 
 interface ChromeExtBottomProps {
  availableTokens: AvailableTokens
@@ -40,11 +39,7 @@ const ChromeExtBottom: React.FC<ChromeExtBottomProps> = ({
  const [withdrawRewardsDialogOpen, setWithdrawRewardsDialogOpen] = React.useState(false)
  const [sendDialogOpen, setSendDialogOpen] = React.useState(false)
 
- const { data: validatorsData } = useQuery(
- gql`
- ${getValidators(account.crypto)}
- `
- )
+ const validatorsData = useValidators(account.crypto)
  const validators = React.useMemo(
  () => transformValidatorsWithTokenAmount(validatorsData, balanceData),
  [validatorsData, balanceData]

components/AccountDetailCard/index.tsx

@@ -70,14 +70,19 @@ const AccountDetailCard: React.FC<AccountDetailCardProps> = ({
  }, [accountBalance])
  // Chart Data
  const tabs = [t('overview'), ...Object.keys(totalTokenAmount)]
- const selectedTabToken = tabs[currentTab]
+ const selectedTabToken = currentTab === 0 ? undefined : tabs[currentTab]
  const selectedTabTokenAmount = totalTokenAmount[selectedTabToken]
  const { data: accountsWithBalance, loading } = useAccountsBalancesWithinPeriod(
  [account],
  timestamps
  )
  const chartData = accountsWithBalance.length
- ? accountsWithBalance[0].balances.map((b) => getTotalBalance(b, selectedTabToken))
+ ? accountsWithBalance[0].balances.map((b) => ({
+ ...getTotalBalance(b, selectedTabToken),
+ amount: selectedTabToken
+ ? getTotalTokenAmount(b).amount[selectedTabToken].amount
+ : undefined,
+ }))
  : []
 
  const toggleFav = React.useCallback(() => {
@@ -181,6 +186,7 @@ const AccountDetailCard: React.FC<AccountDetailCardProps> = ({
  </Box>
 
  <BalanceChart
+ crypto={account.crypto}
  data={chartData}
  onDateRangeChange={(dateRange) => {
  setTimestamps(dateRange.timestamps.map((ts) => new Date(ts)))

components/AccountStatCard/index.tsx

@@ -14,7 +14,6 @@ import DownIcon from '@material-ui/icons/ArrowDropDown'
 import useTranslation from 'next-translate/useTranslation'
 import get from 'lodash/get'
 import { useRouter } from 'next/router'
-import { gql, useQuery } from '@apollo/client'
 import useStyles from './styles'
 import { useGeneralContext } from '../../contexts/GeneralContext'
 import cryptocurrencies from '../../misc/cryptocurrencies'
@@ -36,8 +35,8 @@ import StarFilledIcon from '../../assets/images/icons/icon_star_marked.svg'
 import { useWalletsContext } from '../../contexts/WalletsContext'
 import useIconProps from '../../misc/useIconProps'
 import DelegationDialog from '../DelegationDialog'
-import { getValidators } from '../../graphql/queries/validators'
 import useLatestAccountBalance from '../../graphql/hooks/useLatestAccountBalance'
+import useValidators from '../../graphql/hooks/useValidators'
 
 const dailyTimestamps = dateRanges
  .find((d) => d.title === 'day')
@@ -69,11 +68,7 @@ const AccountStatCard: React.FC<AccountStatCardProps> = ({ account }) => {
  )
  // Latest data
  const { data: latestData } = useLatestAccountBalance(account.crypto, account.address)
- const { data: validatorsData } = useQuery(
- gql`
- ${getValidators(crypto.name)}
- `
- )
+ const validatorsData = useValidators(account.crypto)
 
  const { tokenAmounts, usdBalance, availableTokens, validators } = React.useMemo(() => {
  const accountBalance = transformGqlAcountBalance(latestData, Date.now())

components/BalanceChart/index.tsx

@@ -11,9 +11,10 @@ import {
  Tooltip,
  Line,
 } from 'recharts'
+import get from 'lodash/get'
 import { useGeneralContext } from '../../contexts/GeneralContext'
 import useStyles from './styles'
-import { formatCurrency } from '../../misc/utils'
+import { formatCrypto, formatCurrency } from '../../misc/utils'
 import { CustomTheme } from '../../misc/theme'
 
 const now = new Date()
@@ -53,6 +54,7 @@ interface BalanceChartProps {
  title: string
  subtitle: string
  data: any[]
+ crypto?: string
  onDateRangeChange?(dateRange: DateRange): void
  loading?: boolean
  hideChart?: boolean
@@ -62,6 +64,7 @@ const BalanceChart: React.FC<BalanceChartProps> = ({
  title,
  subtitle,
  data,
+ crypto,
  onDateRangeChange,
  loading,
  hideChart,
@@ -133,24 +136,53 @@ const BalanceChart: React.FC<BalanceChartProps> = ({
  tickLine={false}
  />
  <YAxis
+ yAxisId="balance"
+ dataKey="balance"
  axisLine={false}
  tickLine={false}
  tickFormatter={(v) => formatCurrency(v, currency, lang, true, true)}
  type="number"
  domain={['dataMin', 'dataMax']}
  />
  <Tooltip
- formatter={(v) => [formatCurrency(v, currency, lang, true)]}
+ formatter={(v, i) => [
+ i === 'balance'
+ ? formatCurrency(v, currency, lang, true)
+ : formatCrypto(v, crypto, lang),
+ ]}
  labelFormatter={(v) => format(v, 'd MMM h:ma')}
  contentStyle={{ backgroundColor: theme.palette.background.paper }}
  />
  <Line
  type="monotone"
+ yAxisId="balance"
  dataKey="balance"
  stroke={theme.palette.success.main}
  dot={false}
  strokeWidth={3}
  />
+ {get(data, '[0].amount') ? (
+ <>
+ <YAxis
+ yAxisId="amount"
+ dataKey="amount"
+ orientation="right"
+ axisLine={false}
+ tickLine={false}
+ tickFormatter={(v) => formatCrypto(v, crypto, lang, true, true)}
+ type="number"
+ domain={['dataMin', 'dataMax']}
+ />
+ <Line
+ yAxisId="amount"
+ type="monotone"
+ dataKey="amount"
+ stroke={theme.palette.primary.main}
+ dot={false}
+ strokeWidth={3}
+ />
+ </>
+ ) : null}
  </LineChart>
  </ResponsiveContainer>
  {loading ? (

components/ConfirmTransactionDialog/ConfirmStageContent/index.tsx

@@ -1,6 +1,7 @@
 import {
  Box,
  Button,
+ CircularProgress,
  DialogActions,
  DialogContent,
  Divider,
@@ -181,11 +182,13 @@ const ConfirmStageContent: React.FC<ConfirmStageContentProps> = ({
  <Box my={1}>
  <Typography gutterBottom>{t('fee')}</Typography>
  <Typography color="textSecondary">
- {formatTokenAmount(
- getTokenAmountFromDenoms(transactionData.fee.amount, denoms || []),
- account.crypto,
- lang
- )}
+ {!transactionData.fee.gas
+ ? t('estimating gas')
+ : formatTokenAmount(
+ getTokenAmountFromDenoms(transactionData.fee.amount, denoms || []),
+ account.crypto,
+ lang
+ )}
  </Typography>
  </Box>
  <Divider />
@@ -222,7 +225,11 @@ const ConfirmStageContent: React.FC<ConfirmStageContentProps> = ({
  disabled={!transactionData.fee.gas}
  onClick={onConfirm}
  >
- {t('confirm')}
+ {!transactionData.fee.gas ? (
+ <CircularProgress size={themeStyle.spacing(3.5)} />
+ ) : (
+ t('confirm')
+ )}
  </Button>
  </DialogActions>
  </>

components/ConfirmTransactionDialog/index.tsx

@@ -6,15 +6,14 @@ import keyBy from 'lodash/keyBy'
 import get from 'lodash/get'
 import { gql, useQuery } from '@apollo/client'
 import useStateHistory from '../../misc/useStateHistory'
-import { formatTokenAmount, getTokenAmountFromDenoms, transformValidators } from '../../misc/utils'
+import { formatTokenAmount, getTokenAmountFromDenoms } from '../../misc/utils'
 import useStyles from './styles'
 import useIsMobile from '../../misc/useIsMobile'
 import { useWalletsContext } from '../../contexts/WalletsContext'
 import { getTokensPrices } from '../../graphql/queries/tokensPrices'
 import CloseIcon from '../../assets/images/icons/icon_cross.svg'
 import BackIcon from '../../assets/images/icons/icon_back.svg'
 import useIconProps from '../../misc/useIconProps'
-import { getValidatorsByAddresses } from '../../graphql/queries/validators'
 import ConfirmStageContent from './ConfirmStageContent'
 import ConnectLedgerDialogContent from '../ConnectLedgerDialogContent'
 import SuccessContent from './SuccessContent'
@@ -26,6 +25,7 @@ import useSignerInfo from '../../misc/tx/useSignerInfo'
 import signAndBroadcastTransaction from '../../misc/tx/signAndBroadcastTransaction'
 import useIsChromeExt from '../../misc/useIsChromeExt'
 import estimateGasFee from '../../misc/tx/estimateGasFee'
+import useValidators from '../../graphql/hooks/useValidators'
 
 enum ConfirmTransactionStage {
  ConfirmStage = 'confirm',
@@ -163,18 +163,9 @@ const ConfirmTransactionDialog: React.FC<ConfirmTransactionDialogProps> = ({
  }
  }, [transactionData, t, totalAmount, crypto, lang])
 
- const { data: validatorsData } = useQuery(
- gql`
- ${getValidatorsByAddresses(crypto)}
- `,
- {
- variables: {
- addresses: validatorsAddresses,
- },
- }
- )
+ const validatorsData = useValidators(crypto, validatorsAddresses)
 
- const validators = keyBy(transformValidators(validatorsData), 'address')
+ const validators = keyBy(validatorsData, 'address')
 
  const [stage, setStage, toPrevStage, isPrevStageAvailable] =
  useStateHistory<ConfirmTransactionStage>(ConfirmTransactionStage.ConfirmStage)

components/Layout/LeftMenu.tsx

@@ -56,9 +56,9 @@ const LeftMenu: React.FC<LeftMenuProps> = ({ activeItem, isMenuExpanded, setIsMe
  href: '/wallets',
  },
  {
- title: t('delegate'),
+ title: t('staking'),
  icon: <DelegateIcon {...iconProps} />,
- href: '/delegate',
+ href: '/staking',
  },
  // {
  // title: t('market'),

graphql/hooks/useValidators.ts

@@ -0,0 +1,37 @@
+import { gql, useQuery, useLazyQuery } from '@apollo/client'
+import get from 'lodash/get'
+import React from 'react'
+import { getValidators, getValidatorsByAddresses } from '../queries/validators'
+import { getProfiles } from '../queries/profile'
+import { transformValidators } from '../../misc/utils'
+
+const useValidators = (crypto: string, addresses?: string[]) => {
+ const { data: validatorsResult } = useQuery(
+ gql`
+ ${addresses ? getValidatorsByAddresses(crypto) : getValidators(crypto)}
+ `,
+ addresses ? { variables: { addresses } } : undefined
+ )
+ const [fetchProfiles, { data: profilesData }] = useLazyQuery(
+ gql`
+ ${getProfiles(crypto)}
+ `
+ )
+ React.useEffect(() => {
+ if (validatorsResult) {
+ fetchProfiles({
+ variables: {
+ addresses: validatorsResult.validator.map((v) =>
+ get(v, 'info.self_delegate_address', '')
+ ),
+ },
+ })
+ }
+ }, [validatorsResult])
+
+ const result = transformValidators(validatorsResult, profilesData)
+
+ return result
+}
+
+export default useValidators

graphql/queries/profile.ts

@@ -9,3 +9,14 @@ export const getProfile = (crypto: string): string => `
  }
  }
 `
+
+export const getProfiles = (crypto: string): string => `
+ query Profiles($addresses: [String!]) {
+ profile(where: {address: {_in: $addresses}}) {
+ dtag
+ nickname
+ profile_pic
+ address
+ }
+ }
+`

graphql/queries/validators.ts

@@ -6,6 +6,7 @@ query Validators {
  }
  info: validator_info {
  operator_address
+ self_delegate_address
  }
  description: validator_descriptions(limit: 1, order_by: { height: desc }) {
  moniker
@@ -37,6 +38,7 @@ query Validators($addresses: [String!]) {
  validator(where: {validator_info: {operator_address: { _in: $addresses }}}) {
  info: validator_info {
  operator_address
+ self_delegate_address
  }
  description: validator_descriptions(limit: 1, order_by: { height: desc }) {
  moniker

locales/en/common.json

@@ -501,5 +501,6 @@
  "proof": "Proof",
  "proof description": "The proof generated by other app",
  "verify your address": "Verify Your Address",
- "verify your address description": "Verify if the address matches the one on your device"
+ "verify your address description": "Verify if the address matches the one on your device",
+ "estimating gas": "Estimating gas fee"
 }

misc/utils.ts

@@ -205,15 +205,21 @@ export const getValidatorStatus = (status: number, jailed: boolean): string => {
  return statuses[status]
 }
 
-export const transformValidators = (data: any): Validator[] => {
+export const transformValidators = (data: any, profilesData?: any): Validator[] => {
  if (!data) {
  return []
  }
+ const profiles = profilesData ? keyBy(profilesData.profile, 'address') : {}
  const validators = data.validator
  .map((validator) => ({
  address: get(validator, 'info.operator_address', ''),
- image: get(validator, 'description[0].avatar_url', ''),
- name: get(validator, 'description[0].moniker', get(validator, 'address', '')),
+ image:
+ get(profiles, `${get(validator, 'info.self_delegate_address', '')}.profile_pic`) ||
+ get(validator, 'description[0].avatar_url', ''),
+ name:
+ get(profiles, `${get(validator, 'info.self_delegate_address', '')}.nickname`) ||
+ get(profiles, `${get(validator, 'info.self_delegate_address', '')}.dtag`) ||
+ get(validator, 'description[0].moniker', ''),
  commission: get(validator, 'commission[0].commission', 0),
  votingPower: get(validator, 'voting_power[0].voting_power', 0),
  selfRatio:
@@ -239,8 +245,7 @@ export const transformValidators = (data: any): Validator[] => {
  return validators
 }
 
-export const transformValidatorsWithTokenAmount = (data: any, balanceData: any) => {
- const validators = transformValidators(data)
+export const transformValidatorsWithTokenAmount = (validators: Validator[], balanceData: any) => {
  const tokensPrices = get(balanceData, 'account[0].available[0].tokens_prices', [])
  const delegatedByValidator = {}
  get(balanceData, 'account[0].delegated', []).forEach((d) => {
@@ -272,8 +277,8 @@ export const transformValidatorsWithTokenAmount = (data: any, balanceData: any)
  }))
 }
 
-export const transformUnbonding = (data: any, balanceData: any): Unbonding[] => {
- const validators = keyBy(transformValidators(data), 'address')
+export const transformUnbonding = (validatorsData: Validator[], balanceData: any): Unbonding[] => {
+ const validators = keyBy(validatorsData, 'address')
  const tokensPrices = get(balanceData, 'account[0].available[0].tokens_prices', [])
  return get(balanceData, 'account[0].unbonding', [])
  .map((u) => ({