fix wrapping issues

src/components/CreateAddress/index.jsx

@@ -9,6 +9,7 @@ import QuorumPicker from '../QuorumPicker';
 import AddressTypePicker from '../AddressTypePicker';
 import AddressGenerator from './AddressGenerator';
 import PublicKeyImporter from './PublicKeyImporter';
+import '../styles.css';
 
 class CreateAddress extends React.Component {
 

src/components/MultisigDetails.jsx

@@ -13,7 +13,6 @@ import {
   blockExplorerAddressURL,
 } from 'unchained-bitcoin';
 import {
-  wrapText,
   externalLink,
 } from "../utils";
 
@@ -87,12 +86,12 @@ class MultisigDetails extends React.Component {
     return (
       <Box mt={2}>
         <Typography variant="h6">{name}</Typography>
-        <Grid container>
+        <Grid container spacing={2}>
           <Grid item sm={6}>
-            <Copyable text={hex}><code>{wrapText(hex, 48)}</code></Copyable>
+            <Copyable text={hex}><code>{hex}</code></Copyable>
           </Grid>
           <Grid item sm={6}>
-            <Copyable text={ops}><code>{wrapText(ops, 48)}</code></Copyable>
+            <Copyable text={ops}><code>{ops}</code></Copyable>
           </Grid>
         </Grid>
       </Box>

src/components/Spend/SignatureImporter.jsx

@@ -12,20 +12,18 @@ import {
   LEDGER,
   HERMIT,
 } from "unchained-wallets";
-import {wrapText,} from "../../utils";
 
 // Components
-import { 
+import {
   Card,
   CardHeader,
   CardContent,
   Select,
   MenuItem,
   InputLabel,
   Button,
-  Grid,
   Box,
-  FormControl, 
+  FormControl,
 } from '@material-ui/core';
 import Copyable from "../Copyable";
 import TextSignatureImporter from "./TextSignatureImporter";
@@ -133,7 +131,7 @@ class SignatureImporter extends React.Component {
         </p>
       );
     }
-    
+
     return (
       <form>
 
@@ -169,7 +167,7 @@ class SignatureImporter extends React.Component {
                                validateAndSetSignature={this.validateAndSetSignature} />;
     }
     if (signatureImporter.method === HERMIT) {
-      return <HermitSignatureImporter 
+      return <HermitSignatureImporter
                network={network}
                signatureImporter={signatureImporter}
                inputs={inputs}
@@ -182,7 +180,7 @@ class SignatureImporter extends React.Component {
                disableChangeMethod={this.disableChangeMethod} />;
     }
     if (signatureImporter.method === TREZOR || signatureImporter.method === LEDGER) {
-      return <HardwareWalletSignatureImporter 
+      return <HardwareWalletSignatureImporter
                network={network}
                signatureImporter={signatureImporter}
                signatureImporters={signatureImporters}
@@ -220,7 +218,7 @@ class SignatureImporter extends React.Component {
 
   //
   // Unsigned Transaction
-  // 
+  //
 
   renderUnsignedTransaction = () => {
     const {showUnsignedTransaction} = this.state;
@@ -229,14 +227,14 @@ class SignatureImporter extends React.Component {
       const hex = unsignedTransaction.toHex();
       return (
         <div>
-          <p><Copyable text={hex}><code>{wrapText(hex)}</code></Copyable></p>
+          <p><Copyable text={hex}><code>{hex}</code></Copyable></p>
           <small>
             <Button size="small" onClick={this.handleHideUnsignedTransaction}>
               Hide Unsigned Transaction
             </Button>
-          </small>  
+          </small>
         </div>
-        
+
       );
     } else {
       return (
@@ -260,7 +258,7 @@ class SignatureImporter extends React.Component {
 
   //
   // State
-  // 
+  //
 
   reset = () => {
     const { number, setSignature, setPublicKeys, setFinalized } = this.props;
@@ -271,7 +269,7 @@ class SignatureImporter extends React.Component {
 
   //
   // BIP32 Path
-  // 
+  //
 
   defaultBIP32Path = () => {
     const {addressType, network} = this.props;
@@ -306,11 +304,11 @@ class SignatureImporter extends React.Component {
     return (
       <div>
         <p>The following signature was imported:</p>
-        <Grid container justify="center">
+        <Box>
           <Copyable text={signatureJSON}>
-            <small><code>{wrapText(signatureJSON, 128)}</code></small>
+            <small><code>{signatureJSON}</code></small>
           </Copyable>
-        </Grid>
+        </Box>
         <Box mt={2}>
           <Button
             variant="contained"
@@ -321,7 +319,7 @@ class SignatureImporter extends React.Component {
             Remove Signature
           </Button>
         </Box>
-        
+
       </div>
     );
   }

src/components/Spend/Transaction.jsx

@@ -6,7 +6,6 @@ import {
   blockExplorerTransactionURL,
 } from "unchained-bitcoin";
 import { broadcastTransaction } from '../../blockchain';
-import { wrapText } from "../../utils";
 
 import {
   Typography,
@@ -50,7 +49,7 @@ class Transaction extends React.Component {
              <Box mt={4}>
                <Typography variant="h6">Signed Transaction</Typography>
                <Copyable text={signedTransactionHex}>
-                 <small><code>{wrapText(signedTransactionHex, 128)}</code></small>
+                 <small><code>{signedTransactionHex}</code></small>
                </Copyable>
              </Box>}
 

src/components/Spend/index.jsx

@@ -13,6 +13,7 @@ import SignatureImporter from './SignatureImporter';
 import Transaction from './Transaction';
 import {Grid, Box} from "@material-ui/core";
 import ConfirmOwnership from './ConfirmOwnership';
+import '../styles.css';
 
 class Spend extends React.Component {
 
@@ -55,13 +56,13 @@ class Spend extends React.Component {
       }
 
       {
-        transaction.finalizedOutputs && 
+        transaction.finalizedOutputs &&
         <Box>
           {this.renderSignatureImporters()}
         </Box>
 
       }
-      
+
       {
         this.signaturesFinalized() &&
         <Box mt={2}>

src/components/styles.css

@@ -1,3 +1,7 @@
 .no-events {
     pointer-events: none;
-}
+}
+
+.copyable code {
+    overflow-wrap: break-word;
+}