Fix console warnings from validateDOMNesting checks

CashScript · Apr 17, 2024 · caae3c5 · caae3c5
1 parent 29572dc
commit caae3c5
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 45 deletions.
diff --git a/src/components/ContractFunction.tsx b/src/components/ContractFunction.tsx
@@ -94,22 +94,22 @@ const ContractFunction: React.FC<Props> = ({ contract, abi, network, wallets, up
   )) || []
 
   const inputFields = [...Array(inputs.length)].map((element, i) => (
-    <>
-    {`Input #${i}`}
-    <InputGroup key={`${abi?.name}-input-${i}`}>
-      <Form.Control size="sm"
-        placeholder={i === 0 ? "contract UTXO" : "Add input"}
-        aria-label={i === 0 ? "contract UTXO" : "Add input"}
-        disabled
-      />
-      <Form.Control onChange={event => selectInput(i, event.target.value)} as="select" size="sm" >
-        <option className="text-center" key='Nan' value={`NaN`}>select UTXO</option>
-        {utxoList.map((utxo, inputIndex) => (
-          <option className="text-center" key={`${inputIndex + utxo.name}`} value={`${inputIndex}`}> {utxo.name} </option>
-        ))}
-      </Form.Control>
-    </InputGroup>
-    </>
+    <div key={`${abi?.name}-input-${i}`}>
+      {`Input #${i}`}
+      <InputGroup>
+        <Form.Control size="sm"
+          placeholder={i === 0 ? "contract UTXO" : "Add input"}
+          aria-label={i === 0 ? "contract UTXO" : "Add input"}
+          disabled
+        />
+        <Form.Control onChange={event => selectInput(i, event.target.value)} as="select" size="sm" >
+          <option className="text-center" key='Nan' value={`NaN`}>select UTXO</option>
+          {utxoList.map((utxo, inputIndex) => (
+            <option className="text-center" key={`${inputIndex + utxo.name}`} value={`${inputIndex}`}> {utxo.name} </option>
+          ))}
+        </Form.Control>
+      </InputGroup>
+    </div>
   ))
 
   const tokenFields = (index: number) => (
@@ -143,7 +143,7 @@ const ContractFunction: React.FC<Props> = ({ contract, abi, network, wallets, up
       />
     </InputGroup>
     {outputHasNFT[index] ? (
-        <Card.Text>
+        <div>
           <InputGroup key={`output-${index}-NFT`}>
             <Form.Control size="sm"
               placeholder="Token Commitment"
@@ -180,7 +180,7 @@ const ContractFunction: React.FC<Props> = ({ contract, abi, network, wallets, up
               <option value={"mutable"}>mutable</option>
             </Form.Control>
           </InputGroup>
-        </Card.Text>)
+        </div>)
         : null}
     </>
   )
@@ -199,7 +199,7 @@ const ContractFunction: React.FC<Props> = ({ contract, abi, network, wallets, up
   const outputFields = outputs.map((output, index) => (
     <div  key={`${abi?.name}-output-${index}`}>
       {`Output #${index}`}
-      <Card.Text>
+      <div>
         <InputGroup>
           <Form.Control size="sm"
             placeholder="Receiver address"
@@ -224,7 +224,7 @@ const ContractFunction: React.FC<Props> = ({ contract, abi, network, wallets, up
             }}
           />
         </InputGroup>
-      </Card.Text>
+      </div>
       <Form style={{ marginTop: '5px', marginBottom: '5px', display: "inline-block" }}>
         <Form.Check
           type="switch"
@@ -254,9 +254,9 @@ const ContractFunction: React.FC<Props> = ({ contract, abi, network, wallets, up
         </Form>)
         : null}
       {outputHasFT[index] ? (
-        <Card.Text style={{marginBottom:"10px"}}>
+        <div style={{marginBottom:"10px"}}>
           {tokenFields(index)}
-        </Card.Text>)
+        </div>)
         : null}
     </div>
   ))
@@ -324,9 +324,9 @@ const ContractFunction: React.FC<Props> = ({ contract, abi, network, wallets, up
           <Card.Header>{abi?.name}</Card.Header>
           <Card.Body>
             <Card.Subtitle style={{ marginBottom: '5px' }}>Arguments</Card.Subtitle>
-            <Card.Text>
+            <div>
               {argumentFields}
-            </Card.Text>
+            </div>
             <Form style={{ marginTop: '10px', marginBottom: '5px' }}>
               <Form.Check
                 type="switch"
@@ -342,9 +342,7 @@ const ContractFunction: React.FC<Props> = ({ contract, abi, network, wallets, up
                 {' ' + inputs.length + ' '}
                 <Button variant="outline-secondary" size="sm" onClick={addInput}>+</Button>
               </Card.Subtitle>
-                <Card.Text>
-                  {inputFields}
-                </Card.Text></>
+              {inputFields}</>
             ) : null}
             <Form style={{ marginTop: '10px', marginBottom: '5px' }}>
               <Form.Check

diff --git a/src/components/Wallets.tsx b/src/components/Wallets.tsx
@@ -139,23 +139,21 @@ const WalletInfo: React.FC<Props> = ({network, setShowWallets,  wallets, setWall
         </Button>
       </Card.Header>
       <Card.Body>
-        <Card.Text style={{overflowWrap:'anywhere'}}>
-          <strong>Pubkey hex: </strong>
-          <CopyText>{wallet.pubKeyHex}</CopyText>
-          <strong>Pubkeyhash hex: </strong>
-          <CopyText>{wallet.pubKeyHashHex}</CopyText>
-          <strong>{network==="mainnet"? "Address:" : "Testnet Address:"}</strong>
-          <CopyText>{network==="mainnet"? wallet.address : wallet.testnetAddress}</CopyText>
-          <strong>{network==="mainnet"? "Token address:" : "Testnet Token Address:"}</strong>
-          <CopyText>{network==="mainnet"? hash160ToCash(wallet.pubKeyHashHex, false, true) : hash160ToCash(wallet.pubKeyHashHex, true, true)}</CopyText>
-          <strong>Wallet utxos</strong>
-          <p>{wallet.utxos?.length} {wallet.utxos?.length == 1 ? "utxo" : "utxos"}</p>
-        </Card.Text>
+        <Card.Text><strong>Pubkey hex:</strong></Card.Text>
+        <CopyText>{wallet.pubKeyHex}</CopyText>
+        <Card.Text><strong>Pubkeyhash hex:</strong></Card.Text>
+        <CopyText>{wallet.pubKeyHashHex}</CopyText>
+        <Card.Text><strong>{network==="mainnet"? "Address:" : "Testnet Address:"}</strong></Card.Text>
+        <CopyText>{network==="mainnet"? wallet.address : wallet.testnetAddress}</CopyText>
+        <Card.Text><strong>{network==="mainnet"? "Token address:" : "Testnet Token Address:"}</strong></Card.Text>
+        <CopyText>{network==="mainnet"? hash160ToCash(wallet.pubKeyHashHex, false, true) : hash160ToCash(wallet.pubKeyHashHex, true, true)}</CopyText>
+        <Card.Text><strong>Wallet utxos</strong></Card.Text>
+        <Card.Text>{wallet.utxos?.length} {wallet.utxos?.length == 1 ? "utxo" : "utxos"}</Card.Text>
         <details>
           <summary>Show Private Key</summary>
-          <strong>WIF: </strong>
+          <Card.Text><strong>WIF:</strong></Card.Text>
           <CopyText>{encodePrivateKeyWif(wallet.privKey, network === "mainnet" ? "mainnet" : "testnet")}</CopyText>
-          <strong>Hex: </strong>
+          <Card.Text><strong>Hex:</strong></Card.Text>
           <CopyText>{wallet.privKeyHex}</CopyText>
         </details>
         <details onClick={() => updateUtxosWallet(wallet,index)}>

diff --git a/src/components/shared/CopyText.tsx b/src/components/shared/CopyText.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import { Card, Badge } from 'react-bootstrap'
 import useCopy from 'use-copy'
 
 interface Props {
@@ -16,10 +17,15 @@ const CopyText: React.FC<Props> = ({ children }) => {
   };
 
   return (
-    <div>
-      <p onClick={copyWithTimeout} style={{ cursor: 'pointer' }}>{children}</p>
-      { copied && <div className="alert alert-success" style={{ width: 'fit-content' }}>Copied!</div> }
-    </div>
+    <>
+      <Card.Text
+        onClick={copyWithTimeout}
+        style={{ cursor: 'pointer' }}
+      >
+        {children}
+        { copied && <Badge style={{ marginLeft: '0.5rem' }} pill variant="success">Copied!</Badge> }        
+      </Card.Text>
+    </>
   );
 }