fix: show BGL deposit submit errors

app/src/components/BglToWbgl.js

@@ -1,63 +1,73 @@
-import {useMetaMask} from 'metamask-react'
-import {useState, Fragment} from 'react'
-import {useForm} from 'react-hook-form'
-import {
-  Box,
-  Button,
-  List, ListItemText,
-  Typography,
-} from '@material-ui/core'
-import {post, url, chainLabel, isChainBsc} from '../utils'
-import CheckWalletConnection from './CheckWalletConnection'
-
-function BglToWbgl() {
-  const {handleSubmit} = useForm()
-  const [submitting, setSubmitting] = useState(false)
+import {useMetaMask} from 'metamask-react'
+import {useState, Fragment} from 'react'
+import {useForm} from 'react-hook-form'
+import {
+  Box,
+  Button,
+  List, ListItemText,
+  Typography,
+} from '@material-ui/core'
+import {post, url, chainLabel, isChainBsc} from '../utils'
+import CheckWalletConnection from './CheckWalletConnection'
+
+function BglToWbgl() {
+  const {handleSubmit} = useForm()
+  const [submitting, setSubmitting] = useState(false)
   const [sendAddress, setSendAddress] = useState(false)
   const [balance, setBalance] = useState(0)
   const [feePercentage, setFeePercentage] = useState(0)
+  const [error, setError] = useState(null)
   const {chainId, account} = useMetaMask()
-
-  const onSubmit = () => {
-    const data = {
-      chain: isChainBsc(chainId) ? 'bsc' : 'eth',
-      address: account,
-    }
+
+  const onSubmit = () => {
+    const data = {
+      chain: isChainBsc(chainId) ? 'bsc' : 'eth',
+      address: account,
+    }
 
     setSubmitting(true)
+    setError(null)
 
     post(url('/submit/bgl'), data).then(response => {
+      if (response.status !== 'ok' || !response.bglAddress) {
+        setError(response.message || 'Unable to create a BGL deposit address.')
+        return
+      }
       setSendAddress(response.bglAddress)
       setBalance(Math.floor(response.balance))
       setFeePercentage(response.feePercentage)
     }).catch(result => {
       console.error('Error submitting form:', result)
+      setError('Unable to create a BGL deposit address.')
     }).finally(() => setSubmitting(false))
   }
-
-  return !sendAddress ? (
-    <CheckWalletConnection>
-      <form onSubmit={handleSubmit(onSubmit)} noValidate autoComplete="off">
-        <List>
-          <ListItemText primary="Chain:" secondary={chainLabel(chainId)}/>
-          <ListItemText primary={`Receiving Address:`} secondary={account}/>
-        </List>
+
+  return !sendAddress ? (
+    <CheckWalletConnection>
+      <form onSubmit={handleSubmit(onSubmit)} noValidate autoComplete="off">
+        <List>
+          <ListItemText primary="Chain:" secondary={chainLabel(chainId)}/>
+          <ListItemText primary={`Receiving Address:`} secondary={account}/>
+        </List>
         <Box display="flex" justifyContent="center" m={1}>
           <Button type="submit" variant="contained" color="primary" size="large" disabled={submitting}>Continue</Button>
         </Box>
+        {error && (
+          <Typography color="error" align="center" role="alert">{error}</Typography>
+        )}
       </form>
     </CheckWalletConnection>
   ) : (
-    <Fragment>
-      <Typography variant="body1" gutterBottom>Send BGL to: <code>{sendAddress}</code></Typography>
-      <Typography variant="body2" gutterBottom>
-        The currently available WBGL balance is <b>{balance}</b>. If you send more BGL than is available to complete the exchange, your BGL will be returned to your address.
-      </Typography>
-      <Typography variant="body2" gutterBottom>
-        Please note, that a fee of <b>{feePercentage}%</b> will be automatically deducted from the transfer amount. This exchange pair is active for <b>7 days</b>.
-      </Typography>
-    </Fragment>
-  )
-}
-
-export default BglToWbgl
+    <Fragment>
+      <Typography variant="body1" gutterBottom>Send BGL to: <code>{sendAddress}</code></Typography>
+      <Typography variant="body2" gutterBottom>
+        The currently available WBGL balance is <b>{balance}</b>. If you send more BGL than is available to complete the exchange, your BGL will be returned to your address.
+      </Typography>
+      <Typography variant="body2" gutterBottom>
+        Please note, that a fee of <b>{feePercentage}%</b> will be automatically deducted from the transfer amount. This exchange pair is active for <b>7 days</b>.
+      </Typography>
+    </Fragment>
+  )
+}
+
+export default BglToWbgl

app/src/components/BglToWbgl.test.js

@@ -0,0 +1,37 @@
+import {fireEvent, render, screen, waitFor} from '@testing-library/react'
+import '@testing-library/jest-dom'
+import BglToWbgl from './BglToWbgl'
+
+jest.mock('metamask-react', () => ({
+  useMetaMask: () => ({
+    status: 'connected',
+    chainId: 3,
+    account: '0x0000000000000000000000000000000000000001',
+  }),
+}))
+
+beforeEach(() => {
+  global.fetch = jest.fn(() => Promise.resolve({
+    json: () => Promise.resolve({
+      status: 'error',
+      message: 'Network is likely to be down.',
+    }),
+  }))
+})
+
+afterEach(() => {
+  jest.restoreAllMocks()
+})
+
+test('shows submit errors when the bridge service rejects BGL deposit creation', async () => {
+  render(<BglToWbgl/>)
+
+  fireEvent.click(screen.getByRole('button', {name: /Continue/i}))
+
+  await waitFor(() => {
+    expect(screen.getByRole('alert')).toHaveTextContent('Network is likely to be down.')
+  })
+  expect(global.fetch).toHaveBeenCalledWith(expect.stringContaining('/submit/bgl'), expect.objectContaining({
+    method: 'POST',
+  }))
+})