Add create inscription sample & testnet4

example/src/App.tsx

@@ -28,6 +28,7 @@ import { SendInscription } from './components/sendInscriptions';
 import AddressDisplay from './components/AddressDisplay';
 import { GetAddresses } from './components/bitcoin/GetAddresses.tsx';
 import { SendBtc } from './components/bitcoin/SendBtc';
+import { CreateInscription } from './components/createInscription/index.tsx';
 import EtchRunes from './components/EtchRunes';
 import MintRunes from './components/MintRunes';
 import { MobileUniversalLink } from './components/mobile/universalLink.tsx';
@@ -303,6 +304,7 @@ const BitcoinMethods = () => {
       <SignMessage addresses={[...btcAddressInfo]} />
       <SendBtc network={network} />
       <SendInscription network={network} />
+      <CreateInscription network={network} />
       <TransferRunes network={network} />
       <GetBtcBalance />
       <GetRunesBalance />

example/src/components/NetworkSelector/index.tsx

@@ -10,9 +10,11 @@ export const NetworkSelector = ({ network, setNetwork }: Props) => {
   const onNetworkChange = () => {
     const newNetwork =
       network === BitcoinNetworkType.Mainnet
-        ? BitcoinNetworkType.Testnet
-        : network === BitcoinNetworkType.Testnet
+        ? BitcoinNetworkType.Testnet4
+        : network === BitcoinNetworkType.Testnet4
         ? BitcoinNetworkType.Signet
+        : network === BitcoinNetworkType.Signet
+        ? BitcoinNetworkType.Testnet
         : BitcoinNetworkType.Mainnet;
     setNetwork(newNetwork);
   };

example/src/components/bitcoin/SendBtc/index.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useState } from 'react';
 import Wallet, { BitcoinNetworkType } from 'sats-connect';
 import { Button, Card, Input, Success } from '../../../App.styles';
+import { getMempoolEndpoint } from '../../../util';
 
 interface Props {
   network: BitcoinNetworkType;
@@ -52,10 +53,7 @@ export const SendBtc = ({ network }: Props) => {
     })().catch(console.error);
   }, [recipients]);
 
-  const explorerUrl =
-    network === BitcoinNetworkType.Mainnet
-      ? `https://mempool.space/tx/${txnId}`
-      : `https://mempool.space/testnet/tx/${txnId}`;
+  const explorerUrl = `${getMempoolEndpoint(network)}tx/${txnId}`;
 
   return (
     <Card>

example/src/components/createInscription/index.tsx

@@ -0,0 +1,52 @@
+import { useCallback, useState } from 'react';
+import { BitcoinNetworkType, createInscription } from 'sats-connect';
+import { Button, Card, Input } from '../../App.styles';
+
+interface Props {
+  network: BitcoinNetworkType;
+}
+
+export const CreateInscription = ({ network }: Props) => {
+  const [content, setContent] = useState<string>('');
+
+  const onClick = useCallback(() => {
+    (async () => {
+      alert(content);
+      await createInscription({
+        payload: {
+          network: {
+            type: network,
+          },
+          contentType: 'text/plain',
+          content: content,
+          payloadType: 'PLAIN_TEXT',
+        },
+        onFinish: (response) => {
+          alert(response.txId);
+        },
+        onCancel: () => alert('Canceled'),
+      });
+    })().catch(console.error);
+  }, [content]);
+
+  return (
+    <Card>
+      <h3>Create Inscription</h3>
+      <h4>Sample BRC20 deploy payload</h4>
+      <pre>{'{ "p": "brc-20","op": "deploy","tick": "rrfq","max": "21000000","lim": "1000"}'}</pre>
+
+      <h4>Sample BRC20 mint payload</h4>
+      <pre>{'{ "p": "brc-20","op": "mint","tick": "rrfq","amt": "1000" }'}</pre>
+
+      <h2>Inscription text/plain payload</h2>
+      <Input
+        type="text"
+        placeholder="Payload"
+        value={content}
+        onChange={(e) => setContent(e.target.value)}
+      />
+
+      <Button onClick={onClick}>Create inscription</Button>
+    </Card>
+  );
+};

example/src/components/transferRunes/index.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useMemo, useState } from 'react';
 import Wallet, { BitcoinNetworkType } from 'sats-connect';
 import { Button, Card, Input, Success } from '../../App.styles';
+import { getMempoolEndpoint } from '../../util';
 
 interface Props {
   network: BitcoinNetworkType;
@@ -52,13 +53,7 @@ const TransferRunes = ({ network }: Props) => {
     })().catch(console.error);
   }, [recipients]);
 
-  const explorerUrl = useMemo(
-    () =>
-      network === BitcoinNetworkType.Mainnet
-        ? `https://mempool.space/tx/${txnId}`
-        : `https://mempool.space/testnet/tx/${txnId}`,
-    [network, txnId]
-  );
+  const explorerUrl = useMemo(() => `${getMempoolEndpoint(network)}tx/${txnId}`, [network, txnId]);
 
   return (
     <Card>

example/src/util.ts

@@ -0,0 +1,17 @@
+import { BitcoinNetworkType } from '@sats-connect/core';
+
+export function getMempoolEndpoint(network: BitcoinNetworkType): string {
+  let url = 'https://mempool.space/';
+  switch (network) {
+    case BitcoinNetworkType.Testnet:
+      url += '/testnet/';
+      break;
+    case BitcoinNetworkType.Signet:
+      url += '/signet/';
+      break;
+    case BitcoinNetworkType.Testnet4:
+      url += '/testnet4/';
+      break;
+  }
+  return url;
+}

package.json

@@ -24,7 +24,7 @@
     ]
   },
   "dependencies": {
-    "@sats-connect/core": "0.4.1",
+    "@sats-connect/core": "0.5.1",
     "@sats-connect/make-default-provider-config": "0.0.10",
     "@sats-connect/ui": "0.0.7"
   },