Merge pull request #614 from forbole/staging

Staging
forbole · Feb 13, 2022 · e2854d1 · e2854d1
2 parents e75c947 + 3260e95
commit e2854d1
Show file tree

Hide file tree

Showing 50 changed files with 775 additions and 127 deletions.
diff --git a/.env b/.env
@@ -3,6 +3,8 @@ NEXT_PUBLIC_COINGECKO_API_URL=https://api.coingecko.com/api/v3
 NEXT_PUBLIC_CHROME_EXT_INSTALL_URL=https://chrome.google.com/webstore/detail/forbole-x/fmblappgoiilbgafhjklehhfifbdocee
 NEXT_PUBLIC_IPFS_URL=https://ipfs.desmos.network
 NEXT_PUBLIC_DSM_AIRDROP_API_URL=https://api.airdrop.desmos.network
+NEXT_PUBLIC_ALPHAVANTAGE_API_URL=https://www.alphavantage.co
+NEXT_PUBLIC_ALPHAVANTAGE_API_KEY=0
 MAILGUN_HOST=smtp.mailgun.org
 MAILGUN_PORT=2525
 MAILGUN_USER=secret

diff --git a/.env.staging b/.env.staging
@@ -3,6 +3,8 @@ NEXT_PUBLIC_COINGECKO_API_URL=https://api.coingecko.com/api/v3
 NEXT_PUBLIC_CHROME_EXT_INSTALL_URL=https://chrome.google.com/webstore/detail/forbole-x/fmblappgoiilbgafhjklehhfifbdocee
 NEXT_PUBLIC_IPFS_URL=https://ipfs.desmos.network
 NEXT_PUBLIC_DSM_AIRDROP_API_URL=https://api.airdrop.desmos.network
+NEXT_PUBLIC_ALPHAVANTAGE_API_URL=https://www.alphavantage.co
+NEXT_PUBLIC_ALPHAVANTAGE_API_KEY=0
 MAILGUN_HOST=smtp.mailgun.org
 MAILGUN_PORT=2525
 MAILGUN_USER=secret

diff --git a/components/AccountBalanceCard/index.tsx b/components/AccountBalanceCard/index.tsx
@@ -41,7 +41,7 @@ const AccountBalanceCard: React.FC<AccountBalanceCardProps> = ({
   const classes = useStyles()
   const { t, lang } = useTranslation('common')
   const theme: CustomTheme = useTheme()
-  const { currency } = useGeneralContext()
+  const { currency, currencyRate } = useGeneralContext()
   const isMobile = useIsMobile()
   const data = Object.keys(accountBalance.balance)
     .filter(
@@ -149,14 +149,16 @@ const AccountBalanceCard: React.FC<AccountBalanceCardProps> = ({
           <Box>
             <Typography variant="h4">{t('total balance')}</Typography>
             <Typography>
-              {formatCurrency(usdPrice, currency, lang, true)} / {account.crypto}
+              {formatCurrency(usdPrice * currencyRate, currency, lang, true)} / {account.crypto}
             </Typography>
           </Box>
           <Box display="flex" flexDirection="column" alignItems="flex-end">
             <Typography variant={isMobile ? 'h4' : 'h1'}>
               {formatCrypto(totalBalance, account.crypto, lang)}
             </Typography>
-            <Typography>{formatCurrency(usdPrice * totalBalance, currency, lang)}</Typography>
+            <Typography>
+              {formatCurrency(usdPrice * totalBalance * currencyRate, currency, lang)}
+            </Typography>
           </Box>
         </Box>
       </Card>

diff --git a/components/AccountCard/ChromeExtBottom.tsx b/components/AccountCard/ChromeExtBottom.tsx
@@ -17,6 +17,7 @@ interface ChromeExtBottomProps {
   availableTokens: AvailableTokens
   delegated: TokenAmount
   rewards: TokenAmount
+  commissions: TokenAmount
   account: Account
   inflation: number
   balanceData: any
@@ -26,6 +27,7 @@ const ChromeExtBottom: React.FC<ChromeExtBottomProps> = ({
   availableTokens,
   delegated,
   rewards,
+  commissions,
   account,
   inflation,
   balanceData,
@@ -102,7 +104,8 @@ const ChromeExtBottom: React.FC<ChromeExtBottomProps> = ({
         onClose={() => setWithdrawRewardsDialogOpen(false)}
         account={account}
         tokensPrices={availableTokens.tokens_prices}
-        validators={validators.filter((v) => !!v.rewards)}
+        validators={validators}
+        commissions={commissions}
         openDelegationDialog={() => setDelegateDialogOpen(true)}
       />
       <SendDialog

diff --git a/components/AccountCard/index.tsx b/components/AccountCard/index.tsx
@@ -27,14 +27,20 @@ interface AccountCardProps {
   account: Account
   ledgerIconDisabled?: boolean
   isChromeExt?: boolean
+  altBackground?: boolean
 }
 
-const AccountCard: React.FC<AccountCardProps> = ({ account, ledgerIconDisabled, isChromeExt }) => {
+const AccountCard: React.FC<AccountCardProps> = ({
+  account,
+  ledgerIconDisabled,
+  isChromeExt,
+  altBackground,
+}) => {
   const classes = useStyles()
   const theme = useTheme()
   const iconProps = useIconProps()
   const { lang } = useTranslation('common')
-  const { currency } = useGeneralContext()
+  const { currency, currencyRate } = useGeneralContext()
   const { updateAccount } = useWalletsContext()
   const router = useRouter()
 
@@ -51,7 +57,7 @@ const AccountCard: React.FC<AccountCardProps> = ({ account, ledgerIconDisabled,
     tokenAmounts,
     usdBalance,
     availableTokens,
-    balance: { delegated, rewards },
+    balance: { delegated, rewards, commissions },
   } = React.useMemo(() => {
     const accountBalance = transformGqlAcountBalance(data, Date.now())
     return {
@@ -67,7 +73,7 @@ const AccountCard: React.FC<AccountCardProps> = ({ account, ledgerIconDisabled,
 
   return (
     <Card
-      className={classes.container}
+      className={`${classes.container} ${altBackground ? classes.altBackground : ''}`}
       onClick={(e) => {
         const targetClassName = String((e.target as any).className)
         if (
@@ -100,7 +106,9 @@ const AccountCard: React.FC<AccountCardProps> = ({ account, ledgerIconDisabled,
             <Typography variant="h4">
               {formatTokenAmount(tokenAmounts, account.crypto, lang)}
             </Typography>
-            <Typography variant="h6">{formatCurrency(usdBalance, currency, lang)}</Typography>
+            <Typography variant="h6">
+              {formatCurrency(usdBalance * currencyRate, currency, lang)}
+            </Typography>
           </Box>
         )}
         {isChromeExt ? null : (
@@ -119,6 +127,7 @@ const AccountCard: React.FC<AccountCardProps> = ({ account, ledgerIconDisabled,
           availableTokens={availableTokens}
           delegated={delegated}
           rewards={rewards}
+          commissions={commissions}
           balanceData={data}
           inflation={inflation}
         />

diff --git a/components/AccountCard/styles.ts b/components/AccountCard/styles.ts
@@ -10,6 +10,16 @@ const useStyles = makeStyles(
         backgroundColor: theme.palette.menuBackground,
       },
     },
+    altBackground: {
+      backgroundColor:
+        theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.menuBackground,
+      '&:hover': {
+        backgroundColor:
+          theme.palette.type === 'light'
+            ? theme.palette.background.default
+            : theme.palette.grey[100],
+      },
+    },
     sendButton: {
       color: 'white',
       width: theme.spacing(18),

diff --git a/components/AccountDetailCard/index.tsx b/components/AccountDetailCard/index.tsx
@@ -47,7 +47,7 @@ const AccountDetailCard: React.FC<AccountDetailCardProps> = ({
   validators,
 }) => {
   const { lang, t } = useTranslation('common')
-  const { currency } = useGeneralContext()
+  const { currency, currencyRate } = useGeneralContext()
   const classes = useStyles()
   const iconProps = useIconProps()
   const theme = useTheme()
@@ -193,7 +193,7 @@ const AccountDetailCard: React.FC<AccountDetailCardProps> = ({
               }}
               title={
                 currentTab === 0
-                  ? formatCurrency(usdBalance, currency, lang)
+                  ? formatCurrency(usdBalance * currencyRate, currency, lang)
                   : formatTokenAmount(
                       { [selectedTabToken]: selectedTabTokenAmount },
                       account.crypto,
@@ -204,7 +204,7 @@ const AccountDetailCard: React.FC<AccountDetailCardProps> = ({
                 currentTab === 0
                   ? ''
                   : formatCurrency(
-                      selectedTabTokenAmount.amount * selectedTabTokenAmount.price,
+                      selectedTabTokenAmount.amount * selectedTabTokenAmount.price * currencyRate,
                       currency,
                       lang
                     )
@@ -225,7 +225,8 @@ const AccountDetailCard: React.FC<AccountDetailCardProps> = ({
                         lang
                       )}
                       subtitle={formatCurrency(
-                        getTokenAmountBalance(get(accountBalance, `balance.${key}`, {})),
+                        getTokenAmountBalance(get(accountBalance, `balance.${key}`, {})) *
+                          currencyRate,
                         currency,
                         lang
                       )}
@@ -250,7 +251,8 @@ const AccountDetailCard: React.FC<AccountDetailCardProps> = ({
         onClose={() => setWithdrawRewardsDialogOpen(false)}
         account={account}
         tokensPrices={availableTokens.tokens_prices}
-        validators={validators.filter((v) => !!v.rewards)}
+        validators={validators}
+        commissions={get(accountBalance, 'balance.commissions', {})}
         openDelegationDialog={() => setDelegateDialogOpen(true)}
       />
       <SendDialog

diff --git a/components/AccountStatCard/index.tsx b/components/AccountStatCard/index.tsx
@@ -52,7 +52,7 @@ const AccountStatCard: React.FC<AccountStatCardProps> = ({ account }) => {
   const classes = useStyles()
   const theme = useTheme()
   const { t, lang } = useTranslation('common')
-  const { currency } = useGeneralContext()
+  const { currency, currencyRate } = useGeneralContext()
   const { updateAccount } = useWalletsContext()
   const router = useRouter()
   // Historic data
@@ -133,7 +133,9 @@ const AccountStatCard: React.FC<AccountStatCardProps> = ({ account }) => {
           ) : (
             <Typography variant="h4">{formatCrypto(0, crypto.name, lang)}</Typography>
           )}
-          <Typography variant="h6">{formatCurrency(usdBalance, currency, lang)}</Typography>
+          <Typography variant="h6">
+            {formatCurrency(usdBalance * currencyRate, currency, lang)}
+          </Typography>
           <Box>
             <Box>
               {loading ? (
@@ -171,7 +173,9 @@ const AccountStatCard: React.FC<AccountStatCardProps> = ({ account }) => {
                       {formatPercentage(percentageChange, lang)} {t('24h')}
                     </Typography>
                   </Box>
-                  <Typography variant="caption">{formatCurrency(diff, currency, lang)}</Typography>
+                  <Typography variant="caption">
+                    {formatCurrency(diff * currencyRate, currency, lang)}
+                  </Typography>
                 </Box>
                 <Box display="flex" flex={1} flexDirection="column" alignItems="flex-end">
                   <IconButton onClick={toggleFav} id="button">

diff --git a/components/AddressDetailCard/index.tsx b/components/AddressDetailCard/index.tsx
@@ -35,7 +35,7 @@ interface AddressDetailCardProps {
 
 const AddressDetailCard: React.FC<AddressDetailCardProps> = ({ address, accountBalance }) => {
   const { lang, t } = useTranslation('common')
-  const { currency } = useGeneralContext()
+  const { currency, currencyRate } = useGeneralContext()
   const classes = useStyles()
   const isMobile = useIsMobile()
 
@@ -96,7 +96,7 @@ const AddressDetailCard: React.FC<AddressDetailCardProps> = ({ address, accountB
               setTimestamps(dateRange.timestamps.map((ts) => new Date(ts)))
             }}
             title={formatTokenAmount(totalTokenAmount, address.crypto, lang)}
-            subtitle={formatCurrency(usdBalance, currency, lang)}
+            subtitle={formatCurrency(usdBalance * currencyRate, currency, lang)}
             loading={loading}
           />
           <Box mt={isMobile ? 6 : 10}>
@@ -111,7 +111,7 @@ const AddressDetailCard: React.FC<AddressDetailCardProps> = ({ address, accountB
                     lang
                   )}
                   subtitle={formatCurrency(
-                    getTokenAmountBalance(get(accountBalance, `balance.${key}`, {})),
+                    getTokenAmountBalance(get(accountBalance, `balance.${key}`, {})) * currencyRate,
                     currency,
                     lang
                   )}

diff --git a/components/AddressSendDialog/index.tsx b/components/AddressSendDialog/index.tsx
@@ -53,7 +53,7 @@ const AddressSendDialog: React.FC<AddressSendDialogProps> = ({ open, onClose, ad
   const { t, lang } = useTranslation('common')
   const classes = useStyles()
   const iconProps = useIconProps()
-  const { currency } = useGeneralContext()
+  const { currency, currencyRate } = useGeneralContext()
 
   const { accounts, password } = useWalletsContext()
   const isMobile = useIsMobile()
@@ -231,7 +231,11 @@ const AddressSendDialog: React.FC<AddressSendDialogProps> = ({ open, onClose, ad
                 {formatTokenAmount(availableAmount, address.crypto, lang, ', ')}
               </Typography>
               <Typography>
-                {formatCurrency(getTokenAmountBalance(availableAmount), currency, lang)}
+                {formatCurrency(
+                  getTokenAmountBalance(availableAmount) * currencyRate,
+                  currency,
+                  lang
+                )}
               </Typography>
             </Box>
             <Button

diff --git a/components/AssetDistributionChart/AssetPopover.tsx b/components/AssetDistributionChart/AssetPopover.tsx
@@ -30,7 +30,7 @@ const AssetPopover: React.FC<AssetPopoverProps> = ({
 }) => {
   const classes = useStyles()
   const { t, lang } = useTranslation('common')
-  const { currency } = useGeneralContext()
+  const { currency, currencyRate } = useGeneralContext()
   const theme = useTheme()
 
   return (
@@ -71,7 +71,8 @@ const AssetPopover: React.FC<AssetPopoverProps> = ({
               <Typography variant="body2" color="textSecondary">
                 {formatCurrency(
                   get(accountBalance, `${key}.${cryptocurrency.name.toLowerCase()}.amount`, 0) *
-                    get(accountBalance, `${key}.${cryptocurrency.name.toLowerCase()}.price`, 0),
+                    get(accountBalance, `${key}.${cryptocurrency.name.toLowerCase()}.price`, 0) *
+                    currencyRate,
                   currency,
                   lang
                 )}

diff --git a/components/AssetDistributionChart/ValidatorPopover.tsx b/components/AssetDistributionChart/ValidatorPopover.tsx
@@ -32,7 +32,7 @@ const ValidatorPopover: React.FC<ValidatorPopoverProps> = ({
 }) => {
   const classes = useStyles()
   const { t, lang } = useTranslation('common')
-  const { currency } = useGeneralContext()
+  const { currency, currencyRate } = useGeneralContext()
   const theme = useTheme()
 
   return (
@@ -63,7 +63,9 @@ const ValidatorPopover: React.FC<ValidatorPopoverProps> = ({
         <Typography variant="body2" color="textSecondary">
           {t('total delegation amount')}
         </Typography>
-        <Typography>{formatCurrency(getTokenAmountBalance(balance), currency, lang)}</Typography>
+        <Typography>
+          {formatCurrency(getTokenAmountBalance(balance) * currencyRate, currency, lang)}
+        </Typography>
       </Box>
       {Object.keys(balance).map((key) => (
         <React.Fragment key={key}>
@@ -78,7 +80,9 @@ const ValidatorPopover: React.FC<ValidatorPopoverProps> = ({
               </Typography>
               <Typography variant="body2" color="textSecondary">
                 {formatCurrency(
-                  get(balance as any, `${key}.amount`, 0) * get(balance as any, `${key}.price`, 0),
+                  get(balance as any, `${key}.amount`, 0) *
+                    get(balance as any, `${key}.price`, 0) *
+                    currencyRate,
                   currency,
                   lang
                 )}

diff --git a/components/BalanceChart/index.tsx b/components/BalanceChart/index.tsx
@@ -70,7 +70,7 @@ const BalanceChart: React.FC<BalanceChartProps> = ({
   hideChart,
 }) => {
   const { t, lang } = useTranslation('common')
-  const { currency } = useGeneralContext()
+  const { currency, currencyRate } = useGeneralContext()
   const theme: CustomTheme = useTheme()
   const [currentDateRange, setCurrentDateRange] = React.useState(
     dateRanges.find((d) => d.isDefault)
@@ -140,14 +140,14 @@ const BalanceChart: React.FC<BalanceChartProps> = ({
                 dataKey="balance"
                 axisLine={false}
                 tickLine={false}
-                tickFormatter={(v) => formatCurrency(v, currency, lang, true, true)}
+                tickFormatter={(v) => formatCurrency(v * currencyRate, currency, lang, true, true)}
                 type="number"
                 domain={['dataMin', 'dataMax']}
               />
               <Tooltip
                 formatter={(v, i) => [
                   i === 'balance'
-                    ? formatCurrency(v, currency, lang, true)
+                    ? formatCurrency(v * currencyRate, currency, lang, true)
                     : formatCrypto(v, crypto, lang),
                 ]}
                 labelFormatter={(v) => format(v, 'd MMM h:ma')}

diff --git a/components/ConfirmTransactionDialog/ConfirmStageContent/ClaimRewardsContent.tsx b/components/ConfirmTransactionDialog/ConfirmStageContent/ClaimRewardsContent.tsx
@@ -6,7 +6,7 @@ import ValidatorAvatar from '../../ValidatorAvatar'
 import cryptocurrencies from '../../../misc/cryptocurrencies'
 
 interface ClaimRewardsContentProps {
-  msgs: TransactionMsgWithdrawReward[]
+  msgs: (TransactionMsgWithdrawReward | TransactionMsgWithdrawCommission)[]
   account: Account
   validators: { [address: string]: Validator }
 }

diff --git a/components/ConfirmTransactionDialog/ConfirmStageContent/index.tsx b/components/ConfirmTransactionDialog/ConfirmStageContent/index.tsx
@@ -109,10 +109,16 @@ const ConfirmStageContent: React.FC<ConfirmStageContentProps> = ({
           />
         )
       case '/cosmos.distribution.v1beta1.MsgWithdrawDelegatorReward':
+      case '/cosmos.distribution.v1beta1.MsgWithdrawValidatorCommission':
         return (
           <ClaimRewardsContent
             account={account}
-            msgs={transactionData.msgs as TransactionMsgWithdrawReward[]}
+            msgs={
+              transactionData.msgs as (
+                | TransactionMsgWithdrawReward
+                | TransactionMsgWithdrawCommission
+              )[]
+            }
             validators={validators}
           />
         )

diff --git a/components/ConfirmTransactionDialog/index.tsx b/components/ConfirmTransactionDialog/index.tsx
@@ -109,6 +109,7 @@ const ConfirmTransactionDialog: React.FC<ConfirmTransactionDialogProps> = ({
         case '/cosmos.staking.v1beta1.MsgUndelegate':
           return [m.value.validatorAddress]
         case '/cosmos.distribution.v1beta1.MsgWithdrawDelegatorReward':
+        case '/cosmos.distribution.v1beta1.MsgWithdrawValidatorCommission':
           return [m.value.validatorAddress]
         default:
           return []
@@ -151,6 +152,7 @@ const ConfirmTransactionDialog: React.FC<ConfirmTransactionDialogProps> = ({
           title: formatTokenAmount(totalAmount, crypto, lang),
         })
       case '/cosmos.distribution.v1beta1.MsgWithdrawDelegatorReward':
+      case '/cosmos.distribution.v1beta1.MsgWithdrawValidatorCommission':
         return t('rewards was successfully withdrew')
       case '/cosmos.gov.v1beta1.MsgDeposit':
         return t('successfully deposited', {