fix: use xDAI and xBZZ on Gnosis chain (#454)

* fix: use xDAI on Gnosis chain

* fix: rename BZZ to xBZZ when on Gnosis chain

* fix: replace MINIMUM_xDAI with MINIMUM_XDAI

* fix: update xdai links to correct gnosis chain urls

src/pages/top-up/CryptoTopUpIndex.tsx

@@ -11,8 +11,8 @@ export function CryptoTopUpIndex(): ReactElement {
       p={
         <Typography>
           For security reasons it is recommended to send maximum 5 to 10 xDAI. To get xDAI from DAI you may use{' '}
-          <a href="https://bridge.xdaichain.com/" rel="noreferrer" target="_blank">
-            https://bridge.xdaichain.com/
+          <a href="https://bridge.gnosischain.com" rel="noreferrer" target="_blank">
+            https://bridge.gnosischain.com
           </a>
           .
         </Typography>

src/pages/top-up/GiftCardFund.tsx

@@ -83,10 +83,10 @@ export function GiftCardFund(): ReactElement {
         <ExpandableListItemKey label="Gift wallet address" value={wallet.address || 'N/A'} />
       </Box>
       <Box mb={0.25}>
-        <ExpandableListItem label="XDAI balance" value={`${wallet.dai.toSignificantDigits(4)} XDAI`} />
+        <ExpandableListItem label="xDAI balance" value={`${wallet.dai.toSignificantDigits(4)} xDAI`} />
       </Box>
       <Box mb={4}>
-        <ExpandableListItem label="BZZ balance" value={`${wallet.bzz.toSignificantDigits(4)} BZZ`} />
+        <ExpandableListItem label="xBZZ balance" value={`${wallet.bzz.toSignificantDigits(4)} xBZZ`} />
       </Box>
       <Box mb={4}>
         <ArrowDown size={24} color="#aaaaaa" />
@@ -95,10 +95,10 @@ export function GiftCardFund(): ReactElement {
         <ExpandableListItemKey label="Node wallet address" value={nodeAddresses?.ethereum || 'N/A'} expanded />
       </Box>
       <Box mb={0.25}>
-        <ExpandableListItem label="XDAI balance" value={`${balance.dai.toSignificantDigits(4)} XDAI`} />
+        <ExpandableListItem label="xDAI balance" value={`${balance.dai.toSignificantDigits(4)} xDAI`} />
       </Box>
       <Box mb={2}>
-        <ExpandableListItem label="BZZ balance" value={`${balance.bzz.toSignificantDigits(4)} BZZ`} />
+        <ExpandableListItem label="xBZZ balance" value={`${balance.bzz.toSignificantDigits(4)} xBZZ`} />
       </Box>
       <SwarmButton iconType={Check} onClick={onFund} disabled={loading} loading={loading}>
         Send all funds to your node

src/pages/top-up/Swap.tsx

@@ -95,26 +95,26 @@ export function Swap({ header }: Props): ReactElement {
         <TopUpProgressIndicator index={1} />
       </Box>
       <Box mb={2}>
-        <Typography style={{ fontWeight: 'bold' }}>Swap some xDAI to BZZ</Typography>
+        <Typography style={{ fontWeight: 'bold' }}>Swap some xDAI to xBZZ</Typography>
       </Box>
       <Box mb={4}>
         <Typography>
-          You need to swap xDAI to BZZ in order to use Swarm. Make sure to keep at least {MINIMUM_XDAI} xDAI in order to
-          pay for transaction costs on the network.
+          You need to swap xDAI to xBZZ in order to use Swarm. Make sure to keep at least {MINIMUM_XDAI} xDAI in order
+          to pay for transaction costs on the network.
         </Typography>
       </Box>
       <SwarmDivider mb={4} />
       <Box mb={4}>
         <Typography>
           Your current balance is {balance.dai.toSignificantDigits(4)} xDAI and {balance.bzz.toSignificantDigits(4)}{' '}
-          BZZ.
+          xBZZ.
         </Typography>
       </Box>
       <Box mb={4}>
         <SwarmTextInput
           label="Amount to swap"
-          defaultValue={`${daiToSwap.toSignificantDigits(4)} XDAI`}
-          placeholder={`${daiToSwap.toSignificantDigits(4)} XDAI`}
+          defaultValue={`${daiToSwap.toSignificantDigits(4)} xDAI`}
+          placeholder={`${daiToSwap.toSignificantDigits(4)} xDAI`}
           name="x"
           onChange={event => setUserInputSwap(event.target.value)}
         />
@@ -133,14 +133,14 @@ export function Swap({ header }: Props): ReactElement {
       </Box>
       <Box mb={0.25}>
         <ExpandableListItem
-          label="Resulting XDAI balance after swap"
-          value={`${daiAfterSwap.toSignificantDigits(4)} XDAI`}
+          label="Resulting xDAI balance after swap"
+          value={`${daiAfterSwap.toSignificantDigits(4)} xDAI`}
         />
       </Box>
       <Box mb={2}>
         <ExpandableListItem
-          label="Resulting BZZ balance after swap"
-          value={`${bzzAfterSwap.toSignificantDigits(4)} BZZ`}
+          label="Resulting xBZZ balance after swap"
+          value={`${bzzAfterSwap.toSignificantDigits(4)} xBZZ`}
         />
       </Box>
       <ExpandableListItemActions>

src/pages/top-up/TopUpProgressIndicator.tsx

@@ -6,5 +6,5 @@ interface Props {
 }
 
 export function TopUpProgressIndicator({ index }: Props): ReactElement {
-  return <ProgressIndicator index={index} steps={['Buy xDAI', 'Swap BZZ']} />
+  return <ProgressIndicator index={index} steps={['Buy xDAI', 'Swap xBZZ']} />
 }