Add Wallet compatibiity button link

frontend/src/components/Dialogs/CommunityDialog.tsx

@@ -77,7 +77,7 @@ const CommunityDialog = ({
 
           <ListItem>
             <ListItemIcon>
-              <SendIcon/>
+              <SendIcon color="primary"/>
             </ListItemIcon>
 
             <ListItemText secondary={t("RoboSats Telegram Communities")}>
@@ -136,7 +136,7 @@ const CommunityDialog = ({
             rel="noreferrer"
           >
             <ListItemIcon>
-              <GitHubIcon/>
+              <GitHubIcon color="primary"/>
             </ListItemIcon>
 
             <ListItemText

frontend/src/components/TradeBox.js

@@ -18,10 +18,11 @@ import BalanceIcon from '@mui/icons-material/Balance';
 import ContentCopy from "@mui/icons-material/ContentCopy";
 import PauseCircleIcon from '@mui/icons-material/PauseCircle';
 import PlayCircleIcon from '@mui/icons-material/PlayCircle';
+import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet';
+import NewTabIcon from "./icons/NewTabIcon";
 
 import { getCookie } from "../utils/cookies";
 import { pn } from "../utils/prettyNumbers";
-import { t } from "i18next";
 
 class TradeBox extends Component {
   invoice_escrow_duration = 3;
@@ -181,11 +182,11 @@ class TradeBox extends Component {
     const { t } = this.props;
     return (
       <Grid container spacing={1}>
-        <Grid item xs={12} align="center">
+        {/* <Grid item xs={12} align="center">
           <Typography  variant="body2">
             {t("Robots show commitment to their peers")}
           </Typography>
-        </Grid>
+        </Grid> */}
         <Grid item xs={12} align="center">
           {this.props.data.is_maker ?
           <Typography color="primary" variant="subtitle1">
@@ -201,6 +202,11 @@ class TradeBox extends Component {
           </Typography>
           }
         </Grid>
+
+        <Grid item xs={12} align="center">
+          {this.compatibleWalletsButton()}
+        </Grid>
+
         <Grid item xs={12} align="center">
           <Box sx={{bgcolor:'#ffffff', width:'315px', position:'relative', left:'-5px'}} >
             <QRCode value={this.props.data.bond_invoice} size={305} style={{position:'relative', top:'3px'}}/>
@@ -568,6 +574,17 @@ class TradeBox extends Component {
   handleQRbutton = () => {
     this.setState({qrscanner: !this.state.qrscanner});
   }
+  compatibleWalletsButton = () =>{
+    const { t } = this.props;
+
+    return(
+      <Button color="primary" component={Link} href={"https://learn.robosats.com/docs/wallets/"} target="_blank" align="center"> 
+        <AccountBalanceWalletIcon/>
+          {t("See Compatible Wallets")}
+        <NewTabIcon sx={{width:16,height:16}}/>
+      </Button>
+    )
+  }
 
   showInputInvoice(){
     const { t } = this.props;
@@ -582,6 +599,7 @@ class TradeBox extends Component {
             </b> {" " + this.stepXofY()}
           </Typography>
         </Grid> 
+        
         <Grid item xs={12} align="left">
           <Typography variant="body2">
             {t("The taker is committed! Before letting you send {{amountFiat}} {{currencyCode}}, we want to make sure you are able to receive the BTC. Please provide a valid invoice for {{amountSats}} Satoshis.",
@@ -593,6 +611,10 @@ class TradeBox extends Component {
           </Typography>
         </Grid>
 
+        <Grid item xs={12} align="center">
+          {this.compatibleWalletsButton()}
+        </Grid>
+
         <Grid item xs={12} align="center">
           <TextField
               error={this.state.badInvoice}

frontend/src/components/icons/NewTabIcon.js

@@ -0,0 +1,10 @@
+import React, { Component } from "react";
+import { SvgIcon } from "@mui/material"
+
+export default function NewTabIcon(props) {
+  return (
+    <SvgIcon sx={props.sx} color={props.color} viewBox="0 0 448 512">
+      <path d="M256 64C256 46.33 270.3 32 288 32H415.1C415.1 32 415.1 32 415.1 32C420.3 32 424.5 32.86 428.2 34.43C431.1 35.98 435.5 38.27 438.6 41.3C438.6 41.35 438.6 41.4 438.7 41.44C444.9 47.66 447.1 55.78 448 63.9C448 63.94 448 63.97 448 64V192C448 209.7 433.7 224 416 224C398.3 224 384 209.7 384 192V141.3L214.6 310.6C202.1 323.1 181.9 323.1 169.4 310.6C156.9 298.1 156.9 277.9 169.4 265.4L338.7 96H288C270.3 96 256 81.67 256 64V64zM0 128C0 92.65 28.65 64 64 64H160C177.7 64 192 78.33 192 96C192 113.7 177.7 128 160 128H64V416H352V320C352 302.3 366.3 288 384 288C401.7 288 416 302.3 416 320V416C416 451.3 387.3 480 352 480H64C28.65 480 0 451.3 0 416V128z"/>
+    </SvgIcon>
+  );
+}

frontend/src/locales/en.json

@@ -352,7 +352,7 @@
     "Your public order has been paused. At the moment it cannot be seen or taken by other robots. You can choose to unpause it at any time.":"Your public order has been paused. At the moment it cannot be seen or taken by other robots. You can choose to unpause it at any time.",
     "Unpause Order":"Unpause Order",
     "You risk losing your bond if you do not lock the collateral. Total time to available is {{deposit_timer_hours}}h {{deposit_timer_minutes}}m.":"You risk losing your bond if you do not lock the collateral. Total time to available is {{deposit_timer_hours}}h {{deposit_timer_minutes}}m.",
-
+    "See Compatible Wallets":"See Compatible Wallets",
 
     "INFO DIALOG - InfoDiagog.js":"App information and clarifications and terms of use",
     "Close":"Close",

frontend/src/locales/es.json

@@ -351,8 +351,8 @@
     "Your order is paused":"Tu orden está en pausa",
     "Your public order has been paused. At the moment it cannot be seen or taken by other robots. You can choose to unpause it at any time.":"Tu orden pública fue pausada. Ahora mismo, la orden no puede ser vista ni tomada por otros robots. Puedes volver a activarla cuando desees.",
     "Unpause Order":"Activar Orden",
-    "You risk losing your bond if you do not lock the collateral. Total time to available is {{deposit_timer_hours}}h {{deposit_timer_minutes}}m.":"Si no bloqueas el deposito de confianza te arriesgas a perder tu fianza. Dispones en total de {{deposit_timer_hours}}h {{deposit_timer_minutes}}m.",
+    "You risk losing your bond if you do not lock the collateral. Total time to available is {{deposit_timer_hours}}h {{deposit_timer_minutes}}m.":"Si no bloqueas el colateral te arriesgas a perder tu fianza. Dispones en total de {{deposit_timer_hours}}h {{deposit_timer_minutes}}m.",
-
+    "See Compatible Wallets":"Ver billeteras compatibles",
 
     "INFO DIALOG - InfoDiagog.js": "App information and clarifications and terms of use",
     "Close": "Cerrar",