etching example + cleanup

example/src/App.tsx

@@ -1,6 +1,13 @@
 import Wallet, { Address, BitcoinNetworkType, AddressPurpose } from 'sats-connect';
 import './App.css';
-import { AddressDisplay, NetworkSelector, SendBtc, SendStx, MintRunes } from './components';
+import {
+  AddressDisplay,
+  NetworkSelector,
+  SendBtc,
+  SendStx,
+  MintRunes,
+  EtchRunes,
+} from './components';
 import { useLocalStorage } from './hooks';
 
 function App() {
@@ -51,6 +58,7 @@ function App() {
         <SendStx network={network} />
         <SendBtc network={network} />
         <MintRunes network={network} addresses={addressInfo} />
+        <EtchRunes network={network} addresses={addressInfo} />
       </div>
     </div>
   );

example/src/components/EtchRunes/index.tsx

@@ -0,0 +1,147 @@
+import { useMemo, useState } from 'react';
+import Wallet, { Address, AddressPurpose, BitcoinNetworkType } from 'sats-connect';
+
+type Props = {
+  network: BitcoinNetworkType;
+  addresses: Address[];
+};
+
+const EtchRunes = ({ addresses, network }: Props) => {
+  const [totalCost, setTotalCost] = useState<number>();
+  const [totalSize, setTotalSize] = useState<number>();
+  const [fundTxId, setFundTxId] = useState<string>('');
+  const [runeName, setRuneName] = useState<string>('');
+  const [feeRate, setFeeRate] = useState<string>('');
+  const [symbol, setSymbol] = useState<string>('');
+  const [preMine, setPreMine] = useState<string>('');
+  const [divisibility, setDivisibility] = useState<string>('');
+
+  const ordinalsAddress = useMemo(
+    () => addresses.find((a) => a.purpose === AddressPurpose.Ordinals)?.address || '',
+    [addresses]
+  );
+
+  const paymentAddress = useMemo(
+    () => addresses.find((a) => a.purpose === AddressPurpose.Payment)?.address || '',
+    [addresses]
+  );
+
+  const onClickEstimate = async () => {
+    const response = await Wallet.request('runes_estimateEtch', {
+      destinationAddress: ordinalsAddress,
+      feeRate: +feeRate,
+      symbol: symbol || undefined,
+      premine: preMine || undefined,
+      divisibility: +divisibility || undefined,
+      isMintable: true,
+      runeName: runeName,
+      network: network,
+    });
+
+    if (response.status === 'success') {
+      setTotalCost(response.result.totalCost);
+      setTotalSize(response.result.totalSize);
+    } else {
+      console.error(response.error);
+      alert('Error Fetching Estimate. See console for details.');
+    }
+  };
+
+  const onClickExecute = async () => {
+    const response = await Wallet.request('runes_etch', {
+      destinationAddress: ordinalsAddress,
+      symbol: symbol || undefined,
+      premine: preMine || undefined,
+      feeRate: +feeRate,
+      isMintable: true,
+      runeName,
+      refundAddress: paymentAddress,
+      network,
+    });
+
+    if (response.status === 'success') {
+      setFundTxId(response.result.fundTransactionId);
+    } else {
+      console.error(response.error);
+      alert('Error sending BTC. See console for details.');
+    }
+  };
+
+  const fundTxLink =
+    network === BitcoinNetworkType.Mainnet
+      ? `https://mempool.space/tx/${fundTxId}`
+      : `https://mempool.space/testnet/tx/${fundTxId}`;
+
+  return (
+    <>
+      <div className="card">
+        <h3>Etch Runes</h3>
+        <div
+          style={{
+            display: 'flex',
+            flexWrap: 'wrap',
+            justifyContent: 'space-between',
+            paddingRight: 100,
+            marginBottom: 20,
+          }}
+        >
+          <div>
+            <h4>Rune Name</h4>
+            <input type="text" value={runeName} onChange={(e) => setRuneName(e.target.value)} />
+          </div>
+          <div>
+            <h4>Symbol</h4>
+            <input type="text" value={symbol} onChange={(e) => setSymbol(e.target.value)} />
+          </div>
+          <div>
+            <h4>Divisibility</h4>
+            <input
+              type="number"
+              value={divisibility}
+              onChange={(e) => setDivisibility(e.target.value)}
+            />
+          </div>
+          <div>
+            <h4>Premine</h4>
+            <input type="number" value={preMine} onChange={(e) => setPreMine(e.target.value)} />
+          </div>
+          <div>
+            <h4>feeRate (sats/vb)</h4>
+            <input type="number" value={feeRate} onChange={(e) => setFeeRate(e.target.value)} />
+          </div>
+        </div>
+
+        <button onClick={onClickEstimate} disabled={!runeName || !feeRate}>
+          Estimate Etch
+        </button>
+      </div>
+
+      {totalCost && (
+        <div className="card">
+          <div>
+            <h3>Rune Name</h3>
+            <p className="success">{runeName}</p>
+          </div>
+          <div>
+            <h3>Total Cost (sats) - Total Size</h3>
+            <p className="success">
+              {totalCost} - {totalSize}
+            </p>
+          </div>
+          <button onClick={onClickExecute}>Execute Etch</button>
+          {fundTxId && (
+            <div className="success">
+              Success! Click{' '}
+              <a href={fundTxLink} target="_blank" rel="noreferrer">
+                here
+              </a>{' '}
+              to see your transaction
+            </div>
+          )}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default EtchRunes;

example/src/components/index.ts

@@ -3,3 +3,4 @@ export { default as NetworkSelector } from './NetworkSelector';
 export { default as SendBtc } from './SendBtc';
 export { default as SendStx } from './SendStx';
 export { default as MintRunes } from './MintRunes';
+export { default as EtchRunes } from './EtchRunes';