Merge pull request #362 from forbole/dev

Dev

components/ActivitiesTable/index.tsx

@@ -75,7 +75,6 @@ const ActivitiesTable: React.FC<ActivitiesTableProps> = ({
               >
                 <Link
                   href={`${crypto.blockExplorerBaseUrl}/transactions/${a.ref.replace('#', '')}`}
-                  color="textSecondary"
                   variant="body2"
                   className={classes.wrapText}
                   target="_blank"

components/AddressSendDialog/index.tsx

@@ -15,7 +15,6 @@ import {
 } from '@material-ui/core'
 import useTranslation from 'next-translate/useTranslation'
 import React from 'react'
-import invoke from 'lodash/invoke'
 import keyBy from 'lodash/keyBy'
 import { Autocomplete } from '@material-ui/lab'
 import CloseIcon from '../../assets/images/icons/icon_cross.svg'
@@ -34,6 +33,7 @@ import { useAddressSendDialogHook } from './hooks'
 import TokenAmountInput from '../TokenAmountInput'
 import DropDownIcon from '../../assets/images/icons/icon_arrow_down_input_box.svg'
 import { useGeneralContext } from '../../contexts/GeneralContext'
+import useSendTransaction from '../../misc/useSendTransaction'
 
 export type FavAddress = {
   address: string
@@ -57,6 +57,7 @@ const AddressSendDialog: React.FC<AddressSendDialogProps> = ({ open, onClose, ad
 
   const { accounts, password } = useWalletsContext()
   const isMobile = useIsMobile()
+  const sendTransaction = useSendTransaction()
   const [loading, setLoading] = React.useState(false)
   const [memo, setMemo] = React.useState('')
   const [amount, setAmount] = React.useState('')
@@ -79,15 +80,16 @@ const AddressSendDialog: React.FC<AddressSendDialogProps> = ({ open, onClose, ad
           availableTokens.coins,
           availableTokens.tokens_prices
         )
-        const msg = {
+        const msg: TransactionMsgSend = {
           typeUrl: '/cosmos.bank.v1beta1.MsgSend',
           value: {
             fromAddress: sender.address,
             toAddress: address.address,
             amount: [{ amount: coinsToSend.amount.toString(), denom: coinsToSend.denom }],
           },
         }
-        await invoke(window, 'forboleX.sendTransaction', password, sender.address, {
+
+        await sendTransaction(password, sender.address, {
           msgs: [msg],
           memo,
         })
@@ -97,7 +99,7 @@ const AddressSendDialog: React.FC<AddressSendDialogProps> = ({ open, onClose, ad
         setLoading(false)
       }
     },
-    [availableTokens]
+    [availableTokens, sendTransaction]
   )
 
   const insufficientTokens = React.useMemo(() => {

components/ConfirmTransactionDialog/index.tsx

@@ -11,7 +11,7 @@ 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 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'
@@ -24,6 +24,7 @@ import sendMsgToChromeExt from '../../misc/sendMsgToChromeExt'
 import cryptocurrencies from '../../misc/cryptocurrencies'
 import useSignerInfo from '../../misc/useSignerInfo'
 import signAndBroadcastTransaction from '../../misc/signAndBroadcastTransaction'
+import useIsChromeExt from '../../misc/useIsChromeExt'
 
 enum ConfirmTransactionStage {
   ConfirmStage = 'confirm',
@@ -56,6 +57,7 @@ const ConfirmTransactionDialog: React.FC<ConfirmTransactionDialogProps> = ({
   const classes = useStyles()
   const isMobile = useIsMobile()
   const iconProps = useIconProps()
+  const { isSentFromWeb } = useIsChromeExt()
 
   const { accounts, password, wallets } = useWalletsContext()
   const account = accounts.find((a) => a.address === address)
@@ -184,6 +186,14 @@ const ConfirmTransactionDialog: React.FC<ConfirmTransactionDialogProps> = ({
 
   const [loading, setLoading] = React.useState(false)
 
+  const closeDialog = React.useCallback(() => {
+    if (isSentFromWeb) {
+      sendMsgToChromeExt({ event: 'closeChromeExtension' })
+    } else {
+      onClose()
+    }
+  }, [isSentFromWeb])
+
   const confirm = React.useCallback(
     async (securityPassword?: string, ledgerSigner?: any) => {
       try {
@@ -255,24 +265,14 @@ const ConfirmTransactionDialog: React.FC<ConfirmTransactionDialogProps> = ({
         return {
           title: '',
           dialogWidth: 'sm',
-          content: (
-            <SuccessContent
-              message={successMessage}
-              onClose={() => sendMsgToChromeExt({ event: 'closeChromeExtension' })}
-            />
-          ),
+          content: <SuccessContent message={successMessage} onClose={closeDialog} />,
         }
       case ConfirmTransactionStage.FailStage:
       default:
         return {
           title: '',
           dialogWidth: 'sm',
-          content: (
-            <FailContent
-              message={errMsg}
-              onClose={() => sendMsgToChromeExt({ event: 'closeChromeExtension' })}
-            />
-          ),
+          content: <FailContent message={errMsg} onClose={closeDialog} />,
         }
     }
   }, [stage, t, transactionData, account, validators, wallet, confirm, successMessage, totalAmount])
@@ -284,9 +284,11 @@ const ConfirmTransactionDialog: React.FC<ConfirmTransactionDialogProps> = ({
           <BackIcon {...iconProps} />
         </IconButton>
       ) : null}
-      {/* <IconButton className={classes.closeButton} onClick={onClose}>
-        <CloseIcon {...iconProps} />
-      </IconButton> */}
+      {isSentFromWeb ? (
+        <IconButton className={classes.closeButton} onClick={onClose}>
+          <CloseIcon {...iconProps} />
+        </IconButton>
+      ) : null}
       {content.title ? <DialogTitle>{content.title}</DialogTitle> : null}
       {account && wallet && denoms ? content.content : null}
     </Dialog>

components/CreateProposalForm/index.tsx

@@ -13,7 +13,6 @@ import {
 import { Autocomplete } from '@material-ui/lab'
 import useTranslation from 'next-translate/useTranslation'
 import keyBy from 'lodash/keyBy'
-import invoke from 'lodash/invoke'
 import last from 'lodash/last'
 import useIconProps from '../../misc/useIconProps'
 import { useGetStyles } from './styles'
@@ -22,6 +21,7 @@ import { useWalletsContext } from '../../contexts/WalletsContext'
 import cryptocurrencies from '../../misc/cryptocurrencies'
 import RemoveIcon from '../../assets/images/icons/icon_clear.svg'
 import TokenAmountInput from '../TokenAmountInput'
+import useSendTransaction from '../../misc/useSendTransaction'
 
 interface CreateProposalFormProps {
   account: Account
@@ -34,6 +34,7 @@ const CreateProposalForm: React.FC<CreateProposalFormProps> = ({ account }) => {
   const { accounts, password } = useWalletsContext()
 
   const iconProps = useIconProps()
+  const sendTransaction = useSendTransaction()
 
   const types = [
     '/cosmos.gov.v1beta1.TextProposal',
@@ -82,7 +83,7 @@ const CreateProposalForm: React.FC<CreateProposalFormProps> = ({ account }) => {
                 title,
                 description,
                 changes: [
-                  changes.map((x, y) => ({
+                  changes.map((x) => ({
                     subspace: x.subspace,
                     key: x.key,
                     value: x.value,
@@ -110,7 +111,7 @@ const CreateProposalForm: React.FC<CreateProposalFormProps> = ({ account }) => {
                 recipient,
                 amount: [
                   {
-                    amount: String(Number(amount) * 10 ** 6), // TODO: handle by token_units
+                    amount: String(Number(amount) * 10 ** 6),
                     denom: network.defaultGasFee.amount.denom,
                   },
                 ],
@@ -120,8 +121,9 @@ const CreateProposalForm: React.FC<CreateProposalFormProps> = ({ account }) => {
           initialDeposit: [],
           proposer: proposalAccount.address,
         },
-      }
-      await invoke(window, 'forboleX.sendTransaction', password, proposalAccount.address, {
+      } as unknown as TransactionMsgSubmitProposal
+
+      await sendTransaction(password, proposalAccount.address, {
         msgs: [msg],
         memo,
       })

components/DelegationDialog/index.tsx

@@ -2,7 +2,6 @@
 import { Typography, Box, Dialog, DialogTitle, IconButton, DialogContent } from '@material-ui/core'
 import useTranslation from 'next-translate/useTranslation'
 import React from 'react'
-import invoke from 'lodash/invoke'
 import CloseIcon from '../../assets/images/icons/icon_cross.svg'
 import BackIcon from '../../assets/images/icons/icon_back.svg'
 import useStyles from './styles'
@@ -17,6 +16,7 @@ import cryptocurrencies from '../../misc/cryptocurrencies'
 import ImageDefaultDark from '../../assets/images/image_default_dark.svg'
 import ImageDefaultLight from '../../assets/images/image_default_light.svg'
 import { useGeneralContext } from '../../contexts/GeneralContext'
+import useSendTransaction from '../../misc/useSendTransaction'
 
 enum DelegationStage {
   SelectAmountStage = 'select amount',
@@ -52,6 +52,7 @@ const DelegationDialog: React.FC<DelegationDialogProps> = ({
   const { password } = useWalletsContext()
   const { theme } = useGeneralContext()
   const isMobile = useIsMobile()
+  const sendTransaction = useSendTransaction()
   const [amount, setAmount] = React.useState(0)
   const [denom, setDenom] = React.useState('')
   const [delegations, setDelegations] = React.useState<
@@ -83,27 +84,25 @@ const DelegationDialog: React.FC<DelegationDialogProps> = ({
     async (d: Array<{ amount: number; validator: Validator }>, memo: string) => {
       try {
         setLoading(true)
-        const msgs = d
-          .map((r) => {
-            const coinsToSend = getEquivalentCoinToSend(
-              { amount: r.amount, denom },
-              availableTokens.coins,
-              availableTokens.tokens_prices
-            )
-            return {
-              typeUrl: '/cosmos.staking.v1beta1.MsgDelegate',
-              value: {
-                delegatorAddress: account.address,
-                validatorAddress: r.validator.address,
-                amount: {
-                  amount: Math.round(coinsToSend.amount).toString(),
-                  denom: coinsToSend.denom,
-                },
+        const msgs: TransactionMsgDelegate[] = d.map((r) => {
+          const coinsToSend = getEquivalentCoinToSend(
+            { amount: r.amount, denom },
+            availableTokens.coins,
+            availableTokens.tokens_prices
+          )
+          return {
+            typeUrl: '/cosmos.staking.v1beta1.MsgDelegate',
+            value: {
+              delegatorAddress: account.address,
+              validatorAddress: r.validator.address,
+              amount: {
+                amount: Math.round(coinsToSend.amount).toString(),
+                denom: coinsToSend.denom,
               },
-            }
-          })
-          .filter((a) => a)
-        await invoke(window, 'forboleX.sendTransaction', password, account.address, {
+            },
+          }
+        })
+        await sendTransaction(password, account.address, {
           msgs,
           memo,
         })
@@ -113,7 +112,7 @@ const DelegationDialog: React.FC<DelegationDialogProps> = ({
         setLoading(false)
       }
     },
-    [setStage, password, availableTokens, account, denom]
+    [setStage, password, availableTokens, account, denom, sendTransaction]
   )
 
   const content: Content = React.useMemo(() => {

components/DepositDialog/index.tsx

@@ -3,14 +3,14 @@ import useTranslation from 'next-translate/useTranslation'
 import React from 'react'
 import { gql, useSubscription } from '@apollo/client'
 import get from 'lodash/get'
-import invoke from 'lodash/invoke'
 import CloseIcon from '../../assets/images/icons/icon_cross.svg'
 import useStyles from './styles'
 import useIconProps from '../../misc/useIconProps'
 import InputAmount from './InputAmount'
 import { getEquivalentCoinToSend } from '../../misc/utils'
 import { getLatestAccountBalance } from '../../graphql/queries/accountBalances'
 import { useWalletsContext } from '../../contexts/WalletsContext'
+import useSendTransaction from '../../misc/useSendTransaction'
 
 interface DepositDialogProps {
   crypto: Cryptocurrency
@@ -25,6 +25,7 @@ const DepositDialog: React.FC<DepositDialogProps> = ({ crypto, open, onClose, pr
   const iconProps = useIconProps()
   const { password, accounts: allAccounts } = useWalletsContext()
   const accounts = allAccounts.filter((a) => a.crypto === crypto.name)
+  const sendTransaction = useSendTransaction()
 
   const [loading, setLoading] = React.useState(false)
   const [address, setAddress] = React.useState('')
@@ -58,7 +59,7 @@ const DepositDialog: React.FC<DepositDialogProps> = ({ crypto, open, onClose, pr
             amount: [{ amount: coinsToSend.amount.toString(), denom: coinsToSend.denom }],
           },
         }
-        await invoke(window, 'forboleX.sendTransaction', password, depositor, {
+        await sendTransaction(password, depositor, {
           msgs: [msg],
           memo,
         })
@@ -69,7 +70,7 @@ const DepositDialog: React.FC<DepositDialogProps> = ({ crypto, open, onClose, pr
         console.log(err)
       }
     },
-    [availableTokens]
+    [availableTokens, sendTransaction]
   )
 
   return (

components/EditAccountDialog/index.tsx

@@ -2,7 +2,6 @@
 import { Dialog, DialogTitle, IconButton, DialogContent, Box, Typography } from '@material-ui/core'
 import useTranslation from 'next-translate/useTranslation'
 import React from 'react'
-import invoke from 'lodash/invoke'
 import get from 'lodash/get'
 import { useSubscription, gql } from '@apollo/client'
 import CloseIcon from '../../assets/images/icons/icon_cross.svg'
@@ -17,6 +16,7 @@ import useIsMobile from '../../misc/useIsMobile'
 import EditRewardAddress from './EditRewardAddress'
 import RemoveAccount from './RemoveAccount'
 import { getWithdrawAddress } from '../../graphql/queries/withdrawAddress'
+import useSendTransaction from '../../misc/useSendTransaction'
 
 enum EditAccountStage {
   AccountInfoStage = 'account info',
@@ -44,6 +44,7 @@ const EditAccountDialog: React.FC<EditAccountDialogProps> = ({ account, open, on
   const iconProps = useIconProps()
   const { updateAccount, password } = useWalletsContext()
   const isMobile = useIsMobile()
+  const sendTransaction = useSendTransaction()
 
   const { data } = useSubscription(
     gql`
@@ -76,14 +77,14 @@ const EditAccountDialog: React.FC<EditAccountDialogProps> = ({ account, open, on
     async (newWithdrawAddress: string, memo: string) => {
       try {
         setLoading(true)
-        const msg = {
+        const msg: TransactionMsgSetWithdrawAddress = {
           typeUrl: '/cosmos.distribution.v1beta1.MsgSetWithdrawAddress',
           value: {
             delegatorAddress: account.address,
             withdrawAddress: newWithdrawAddress,
           },
         }
-        await invoke(window, 'forboleX.sendTransaction', password, account.address, {
+        await sendTransaction(password, account.address, {
           msgs: [msg],
           memo,
         })
@@ -93,7 +94,7 @@ const EditAccountDialog: React.FC<EditAccountDialogProps> = ({ account, open, on
         setLoading(false)
       }
     },
-    [setStage, account]
+    [setStage, account, sendTransaction]
   )
 
   const content: Content = React.useMemo(() => {