feat: adds not enough funds atom component

rsksmart · Feb 1, 2021 · 2f9f01d · 2f9f01d
1 parent 565dfc3
commit 2f9f01d
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git a/src/components/atoms/NotEnoughFunds.tsx b/src/components/atoms/NotEnoughFunds.tsx
@@ -0,0 +1,14 @@
+import Typography from '@material-ui/core/Typography'
+import React, { FC } from 'react'
+
+export type NotEnoughFundsProps = {
+  currencyDisplayName: string
+}
+
+const NotEnoughFunds: FC<NotEnoughFundsProps> = ({ currencyDisplayName }) => (
+  <Typography color="error" align="center">
+    {`You do not have enough ${currencyDisplayName}`}
+  </Typography>
+)
+
+export default NotEnoughFunds
diff --git a/src/components/organisms/storage/staking/DepositModal.tsx b/src/components/organisms/storage/staking/DepositModal.tsx
@@ -12,7 +12,8 @@ import React, {
 import Big from 'big.js'
 import { getBalance } from 'contracts/utils/accountBalance'
 import { convertToWeiString } from 'utils/parsers'
-import { SupportedTokenSymbol, SYSTEM_SUPPORTED_SYMBOL } from 'models/Token'
+import { SupportedTokenSymbol, SYSTEM_SUPPORTED_SYMBOL, SYSTEM_TOKENS } from 'models/Token'
+import NotEnoughFunds from 'components/atoms/NotEnoughFunds'
 import StakedBalances from './StakedBalances'
 
 export interface DepositModalProps {
@@ -142,9 +143,9 @@ const DepositModal: FC<DepositModalProps> = ({
         {
           isPositiveAmount && !enoughFunds
           && (
-            <Typography color="error" align="center">
-              {`You do not have enough ${selectedToken.toUpperCase()}`}
-            </Typography>
+            <NotEnoughFunds
+              currencyDisplayName={SYSTEM_TOKENS[selectedToken].displayName}
+            />
           )
         }
       </CenteredContent>