├── src
    ├── react-app-env.d.ts
    ├── setupTests.ts
    ├── App.test.tsx
    ├── reportWebVitals.ts
    ├── index.css
    ├── index.tsx
    ├── App.css
    ├── utils.ts
    ├── components
    │   ├── InscribeTransferCard.tsx
    │   ├── PushTxCard.tsx
    │   ├── PushPsbtCard.tsx
    │   ├── SignPsbtCard.tsx
    │   ├── SendBitcoinCard.tsx
    │   ├── SendInscriptionCard.tsx
    │   ├── SendRunesCard.tsx
    │   └── SignMessageCard.tsx
    ├── logo.svg
    ├── const.ts
    └── App.tsx
├── public
    ├── robots.txt
    ├── screen.png
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── index.html
├── README.md
├── .gitignore
├── tsconfig.json
└── package.json


/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="react-scripts" />
2 | 


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/screen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dappboris-dev/Fractal-bitcoin-frontend-demo/HEAD/public/screen.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dappboris-dev/Fractal-bitcoin-frontend-demo/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dappboris-dev/Fractal-bitcoin-frontend-demo/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dappboris-dev/Fractal-bitcoin-frontend-demo/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Overview
2 | 
3 | React app for demo of using Fractal mainnet and testnet.<br/>
4 | <br/><br/>
5 | <img src = "public/screen.png"></img>
6 | 


--------------------------------------------------------------------------------
/src/setupTests.ts:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 | 


--------------------------------------------------------------------------------
/src/App.test.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { render, screen } from '@testing-library/react';
 3 | import App from './App';
 4 | 
 5 | test('renders learn react link', () => {
 6 |   render(<App />);
 7 |   const linkElement = screen.getByText(/learn react/i);
 8 |   expect(linkElement).toBeInTheDocument();
 9 | });
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/reportWebVitals.ts:
--------------------------------------------------------------------------------
 1 | import { ReportHandler } from 'web-vitals';
 2 | 
 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => {
 4 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 5 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 6 |       getCLS(onPerfEntry);
 7 |       getFID(onPerfEntry);
 8 |       getFCP(onPerfEntry);
 9 |       getLCP(onPerfEntry);
10 |       getTTFB(onPerfEntry);
11 |     });
12 |   }
13 | };
14 | 
15 | export default reportWebVitals;
16 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
 2 | 
 3 | body {
 4 |   margin: 0;
 5 |   font-family: -apple-system, BlinkMacSystemFont, "Quicksand", 'Segoe UI', 'Roboto', 'Oxygen',
 6 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 7 |     sans-serif;
 8 |   -webkit-font-smoothing: antialiased;
 9 |   -moz-osx-font-smoothing: grayscale;
10 | }
11 | 
12 | 
13 | code {
14 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
15 |     monospace;
16 | }
17 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import './index.css';
 4 | import App from './App';
 5 | import reportWebVitals from './reportWebVitals';
 6 | 
 7 | const root = ReactDOM.createRoot(
 8 |   document.getElementById('root') as HTMLElement
 9 | );
10 | root.render(
11 |   <React.StrictMode>
12 |     <App />
13 |   </React.StrictMode>
14 | );
15 | 
16 | // If you want to start measuring performance in your app, pass a function
17 | // to log results (for example: reportWebVitals(console.log))
18 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
19 | reportWebVitals();
20 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "esModuleInterop": true,
12 |     "allowSyntheticDefaultImports": true,
13 |     "strict": true,
14 |     "forceConsistentCasingInFileNames": true,
15 |     "noFallthroughCasesInSwitch": true,
16 |     "module": "esnext",
17 |     "moduleResolution": "node",
18 |     "resolveJsonModule": true,
19 |     "isolatedModules": true,
20 |     "noEmit": true,
21 |     "jsx": "react-jsx"
22 |   },
23 |   "include": [
24 |     "src"
25 |   ]
26 | }
27 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | .App {
 2 |   text-align: center;
 3 | }
 4 | 
 5 | .App-logo {
 6 |   height: 40vmin;
 7 |   pointer-events: none;
 8 | }
 9 | 
10 | @media (prefers-reduced-motion: no-preference) {
11 |   .App-logo {
12 |     animation: App-logo-spin infinite 20s linear;
13 |   }
14 | }
15 | 
16 | .App-header {
17 |   background-color: #282c34;
18 |   min-height: 100vh;
19 |   display: flex;
20 |   flex-direction: column;
21 |   align-items: center;
22 |   justify-content: start;
23 |   font-size: calc(10px + 2vmin);
24 |   color: white;
25 | }
26 | 
27 | .App-link {
28 |   color: #61dafb;
29 | }
30 | 
31 | @keyframes App-logo-spin {
32 |   from {
33 |     transform: rotate(0deg);
34 |   }
35 |   to {
36 |     transform: rotate(360deg);
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/src/utils.ts:
--------------------------------------------------------------------------------
 1 | import BigNumber from "bignumber.js";
 2 | 
 3 | export function satoshisToAmount(val: number) {
 4 |   const num = new BigNumber(val);
 5 |   return num.dividedBy(100000000).toFixed(8);
 6 | }
 7 | 
 8 | export function amountToSatoshis(val: any) {
 9 |   const num = new BigNumber(val);
10 |   return num.multipliedBy(100000000).toNumber();
11 | }
12 | 
13 | export const copyToClipboard = (textToCopy: string | number) => {
14 |   if (navigator.clipboard && window.isSecureContext) {
15 |     return navigator.clipboard.writeText(textToCopy.toString());
16 |   } else {
17 |     const textArea = document.createElement("textarea");
18 |     textArea.value = textToCopy.toString();
19 |     textArea.style.position = "absolute";
20 |     textArea.style.opacity = "0";
21 |     textArea.style.left = "-999999px";
22 |     textArea.style.top = "-999999px";
23 |     document.body.appendChild(textArea);
24 |     textArea.focus();
25 |     textArea.select();
26 |     return new Promise<void>((res, rej) => {
27 |       document.execCommand("copy") ? res() : rej();
28 |       textArea.remove();
29 |     });
30 |   }
31 | };
32 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "unisat-web3-demo",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.16.5",
 7 |     "@testing-library/react": "^13.4.0",
 8 |     "@testing-library/user-event": "^13.5.0",
 9 |     "@types/jest": "^27.5.2",
10 |     "@types/node": "^16.18.14",
11 |     "@types/react": "^18.0.28",
12 |     "@types/react-dom": "^18.0.11",
13 |     "antd": "^5.2.3",
14 |     "bignumber.js": "^9.1.2",
15 |     "react": "^18.2.0",
16 |     "react-dom": "^18.2.0",
17 |     "react-scripts": "5.0.1",
18 |     "typescript": "^4.9.5",
19 |     "web-vitals": "^2.1.4",
20 |     "yarn": "^1.22.22"
21 |   },
22 |   "scripts": {
23 |     "start": "react-scripts start",
24 |     "build": "react-scripts build",
25 |     "test": "react-scripts test",
26 |     "eject": "react-scripts eject"
27 |   },
28 |   "eslintConfig": {
29 |     "extends": [
30 |       "react-app",
31 |       "react-app/jest"
32 |     ]
33 |   },
34 |   "browserslist": {
35 |     "production": [
36 |       ">0.2%",
37 |       "not dead",
38 |       "not op_mini all"
39 |     ],
40 |     "development": [
41 |       "last 1 chrome version",
42 |       "last 1 firefox version",
43 |       "last 1 safari version"
44 |     ]
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>Unisat Wallet Demo</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/src/components/InscribeTransferCard.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useRef, useState } from "react";
 2 | import { Button, Card, Input, Radio } from "antd";
 3 | 
 4 | export function InscribeTransferCard() {
 5 |   const [ticker, setTicker] = useState("");
 6 |   const [amount, setAmount] = useState("");
 7 |   const [result, setResult] = useState({
 8 |     success: false,
 9 |     error: "",
10 |   });
11 | 
12 |   const doc_url =
13 |     "https://docs.unisat.io/dev/unisat-developer-center/unisat-wallet#pushtx";
14 | 
15 |   return (
16 |     <Card size="small" title="InscribeTransfer" style={{ margin: 10 }}>
17 |       <div style={{ textAlign: "left", marginTop: 10 }}>
18 |         <div style={{ fontWeight: "bold" }}>Docs:</div>
19 |         <a href={doc_url} target="_blank">
20 |           {doc_url}
21 |         </a>
22 |       </div>
23 |       <div style={{ textAlign: "left", marginTop: 10 }}>
24 |         <div style={{ fontWeight: "bold" }}>Ticker:</div>
25 |         <Input
26 |           defaultValue={ticker}
27 |           onChange={(e) => {
28 |             setTicker(e.target.value);
29 |           }}
30 |         ></Input>
31 |       </div>
32 | 
33 |       <div style={{ textAlign: "left", marginTop: 10 }}>
34 |         <div style={{ fontWeight: "bold" }}>Amount: </div>
35 |         <Input
36 |           defaultValue={amount}
37 |           onChange={(e) => {
38 |             setAmount(e.target.value);
39 |           }}
40 |         ></Input>
41 |       </div>
42 |       <Button
43 |         style={{ marginTop: 10 }}
44 |         onClick={async () => {
45 |           setResult({
46 |             success: false,
47 |             error: "Requesting...",
48 |           });
49 |           try {
50 |             await (window as any).unisat.inscribeTransfer(ticker, amount);
51 |             setResult({
52 |               success: true,
53 |               error: "",
54 |             });
55 |           } catch (e) {
56 |             setResult({
57 |               success: false,
58 |               error: (e as any).message,
59 |             });
60 |           }
61 |         }}
62 |       >
63 |         Submit
64 |       </Button>
65 |     </Card>
66 |   );
67 | }
68 | 


--------------------------------------------------------------------------------
/src/components/PushTxCard.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useRef, useState } from "react";
 2 | import { Button, Card, Input, Radio } from "antd";
 3 | 
 4 | export function PushTxCard() {
 5 |   const [rawtx, setRawtx] = useState("");
 6 |   const [result, setResult] = useState({
 7 |     success: false,
 8 |     error: "",
 9 |     data: "",
10 |   });
11 | 
12 |   const doc_url =
13 |     "https://docs.unisat.io/dev/unisat-developer-center/unisat-wallet#pushtx";
14 | 
15 |   return (
16 |     <Card size="small" title="Push Transaction Hex" style={{ margin: 10 }}>
17 |       <div style={{ textAlign: "left", marginTop: 10 }}>
18 |         <div style={{ fontWeight: "bold" }}>Docs:</div>
19 |         <a href={doc_url} target="_blank">
20 |           {doc_url}
21 |         </a>
22 |       </div>
23 | 
24 |       <div style={{ textAlign: "left", marginTop: 10 }}>
25 |         <div style={{ fontWeight: "bold" }}>rawtx:</div>
26 |         <Input
27 |           defaultValue={rawtx}
28 |           onChange={(e) => {
29 |             setRawtx(e.target.value);
30 |           }}
31 |         ></Input>
32 |       </div>
33 | 
34 |       {result.success ? (
35 |         <div style={{ textAlign: "left", marginTop: 10 }}>
36 |           <div style={{ fontWeight: "bold" }}>Txid:</div>
37 |           <div style={{ wordWrap: "break-word" }}>{result.data}</div>
38 |         </div>
39 |       ) : (
40 |         <div style={{ textAlign: "left", marginTop: 10 }}>
41 |           <div style={{ wordWrap: "break-word" }}>{result.error}</div>
42 |         </div>
43 |       )}
44 | 
45 |       <Button
46 |         style={{ marginTop: 10 }}
47 |         onClick={async () => {
48 |           setResult({
49 |             success: false,
50 |             error: "Requesting...",
51 |             data: "",
52 |           });
53 |           try {
54 |             const txid = await (window as any).unisat.pushTx(rawtx);
55 |             setResult({
56 |               success: true,
57 |               error: "",
58 |               data: txid,
59 |             });
60 |           } catch (e) {
61 |             setResult({
62 |               success: false,
63 |               error: (e as any).message,
64 |               data: "",
65 |             });
66 |           }
67 |         }}
68 |       >
69 |         Submit
70 |       </Button>
71 |     </Card>
72 |   );
73 | }
74 | 


--------------------------------------------------------------------------------
/src/components/PushPsbtCard.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useRef, useState } from "react";
 2 | import { Button, Card, Input, Radio } from "antd";
 3 | 
 4 | export function PushPsbtCard() {
 5 |   const [psbtHex, setPsbtHex] = useState("");
 6 | 
 7 |   const [result, setResult] = useState({
 8 |     success: false,
 9 |     error: "",
10 |     data: "",
11 |   });
12 |   const doc_url =
13 |     "https://docs.unisat.io/dev/unisat-developer-center/unisat-wallet#pushtx";
14 | 
15 |   return (
16 |     <Card size="small" title="Push Psbt Hex" style={{ margin: 10 }}>
17 |       <div style={{ textAlign: "left", marginTop: 10 }}>
18 |         <div style={{ fontWeight: "bold" }}>Docs:</div>
19 |         <a href={doc_url} target="_blank">
20 |           {doc_url}
21 |         </a>
22 |       </div>
23 | 
24 |       <div style={{ textAlign: "left", marginTop: 10 }}>
25 |         <div style={{ fontWeight: "bold" }}>psbt hex:</div>
26 |         <Input
27 |           defaultValue={psbtHex}
28 |           onChange={(e) => {
29 |             setPsbtHex(e.target.value);
30 |           }}
31 |         ></Input>
32 |       </div>
33 | 
34 |       {result.success ? (
35 |         <div style={{ textAlign: "left", marginTop: 10 }}>
36 |           <div style={{ fontWeight: "bold" }}>Txid:</div>
37 |           <div style={{ wordWrap: "break-word" }}>{result.data}</div>
38 |         </div>
39 |       ) : (
40 |         <div style={{ textAlign: "left", marginTop: 10 }}>
41 |           <div style={{ wordWrap: "break-word" }}>{result.error}</div>
42 |         </div>
43 |       )}
44 | 
45 |       <Button
46 |         style={{ marginTop: 10 }}
47 |         onClick={async () => {
48 |           setResult({
49 |             success: false,
50 |             error: "Requesting...",
51 |             data: "",
52 |           });
53 |           try {
54 |             const txid = await (window as any).unisat.pushPsbt(psbtHex);
55 |             setResult({
56 |               success: true,
57 |               error: "",
58 |               data: txid,
59 |             });
60 |           } catch (e) {
61 |             setResult({
62 |               success: false,
63 |               error: (e as any).message,
64 |               data: "",
65 |             });
66 |           }
67 |         }}
68 |       >
69 |         Submit
70 |       </Button>
71 |     </Card>
72 |   );
73 | }
74 | 


--------------------------------------------------------------------------------
/src/components/SignPsbtCard.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useRef, useState } from "react";
 2 | import { Button, Card, Input, Radio } from "antd";
 3 | 
 4 | export function SignPsbtCard() {
 5 |   const [psbtHex, setPsbtHex] = useState("");
 6 |   const [psbtResult, setPsbtResult] = useState("");
 7 |   const [result, setResult] = useState({
 8 |     success: false,
 9 |     error: "",
10 |     data: "",
11 |   });
12 |   const doc_url =
13 |     "https://docs.unisat.io/dev/unisat-developer-center/unisat-wallet#signpsbt";
14 |   return (
15 |     <Card size="small" title="Sign Psbt" style={{ margin: 10 }}>
16 |       <div style={{ textAlign: "left", marginTop: 10 }}>
17 |         <div style={{ fontWeight: "bold" }}>Docs:</div>
18 |         <a href={doc_url} target="_blank">
19 |           {doc_url}
20 |         </a>
21 |       </div>
22 |       <div style={{ textAlign: "left", marginTop: 10 }}>
23 |         <div style={{ fontWeight: "bold" }}>PsbtHex:</div>
24 |         <Input
25 |           defaultValue={psbtHex}
26 |           onChange={(e) => {
27 |             setPsbtHex(e.target.value);
28 |           }}
29 |         ></Input>
30 |       </div>
31 | 
32 |       {result.success ? (
33 |         <div style={{ textAlign: "left", marginTop: 10 }}>
34 |           <div style={{ fontWeight: "bold" }}>Result:</div>
35 |           <div style={{ wordWrap: "break-word" }}>{result.data}</div>
36 |         </div>
37 |       ) : (
38 |         <div style={{ textAlign: "left", marginTop: 10 }}>
39 |           <div style={{ wordWrap: "break-word" }}>{result.error}</div>
40 |         </div>
41 |       )}
42 | 
43 |       <Button
44 |         style={{ marginTop: 10 }}
45 |         onClick={async () => {
46 |           setResult({
47 |             success: false,
48 |             error: "Requesting...",
49 |             data: "",
50 |           });
51 |           try {
52 |             const psbtResult = await (window as any).unisat.signPsbt(psbtHex);
53 | 
54 |             setResult({
55 |               success: true,
56 |               error: "",
57 |               data: psbtResult,
58 |             });
59 |           } catch (e) {
60 |             setResult({
61 |               success: false,
62 |               error: (e as any).message,
63 |               data: "",
64 |             });
65 |           }
66 |         }}
67 |       >
68 |         Submit
69 |       </Button>
70 |     </Card>
71 |   );
72 | }
73 | 


--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>


--------------------------------------------------------------------------------
/src/components/SendBitcoinCard.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useRef, useState } from "react";
 2 | import { Button, Card, Input, Radio } from "antd";
 3 | 
 4 | export function SendBitcoinCard() {
 5 |   const [toAddress, setToAddress] = useState("");
 6 |   const [satoshis, setSatoshis] = useState(1000);
 7 |   const [result, setResult] = useState({
 8 |     success: false,
 9 |     error: "",
10 |     data: "",
11 |   });
12 |   const doc_url =
13 |     "https://docs.unisat.io/dev/unisat-developer-center/unisat-wallet#sendbitcoin";
14 | 
15 |   return (
16 |     <Card size="small" title="Send Bitcoin" style={{ margin: 10 }}>
17 |       <div style={{ textAlign: "left", marginTop: 10 }}>
18 |         <div style={{ fontWeight: "bold" }}>Docs:</div>
19 |         <a href={doc_url} target="_blank">
20 |           {doc_url}
21 |         </a>
22 |       </div>
23 | 
24 |       <div style={{ textAlign: "left", marginTop: 10 }}>
25 |         <div style={{ fontWeight: "bold" }}>Receiver Address:</div>
26 |         <Input
27 |           defaultValue={toAddress}
28 |           onChange={(e) => {
29 |             setToAddress(e.target.value);
30 |           }}
31 |         ></Input>
32 |       </div>
33 | 
34 |       <div style={{ textAlign: "left", marginTop: 10 }}>
35 |         <div style={{ fontWeight: "bold" }}>Amount: </div>
36 |         <Input
37 |           defaultValue={satoshis}
38 |           onChange={(e) => {
39 |             setSatoshis(parseInt(e.target.value));
40 |           }}
41 |         ></Input>
42 |       </div>
43 | 
44 |       {result.success ? (
45 |         <div style={{ textAlign: "left", marginTop: 10 }}>
46 |           <div style={{ fontWeight: "bold" }}>Txid:</div>
47 |           <div style={{ wordWrap: "break-word" }}>{result.data}</div>
48 |         </div>
49 |       ) : (
50 |         <div style={{ textAlign: "left", marginTop: 10 }}>
51 |           <div style={{ wordWrap: "break-word" }}>{result.error}</div>
52 |         </div>
53 |       )}
54 | 
55 |       <Button
56 |         style={{ marginTop: 10 }}
57 |         onClick={async () => {
58 |           setResult({
59 |             success: false,
60 |             error: "Requesting...",
61 |             data: "",
62 |           });
63 |           try {
64 |             const txid = await (window as any).unisat.sendBitcoin(
65 |               toAddress,
66 |               satoshis
67 |             );
68 | 
69 |             setResult({
70 |               success: true,
71 |               error: "",
72 |               data: txid,
73 |             });
74 |           } catch (e) {
75 |             setResult({
76 |               success: false,
77 |               error: (e as any).message,
78 |               data: "",
79 |             });
80 |           }
81 |         }}
82 |       >
83 |         Submit
84 |       </Button>
85 |     </Card>
86 |   );
87 | }
88 | 


--------------------------------------------------------------------------------
/src/components/SendInscriptionCard.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useRef, useState } from "react";
 2 | import { Button, Card, Input, Radio } from "antd";
 3 | 
 4 | export function SendInscriptionCard() {
 5 |   const [toAddress, setToAddress] = useState("");
 6 |   const [inscriptionId, setInscriptionId] = useState("");
 7 |   const [result, setResult] = useState({
 8 |     success: false,
 9 |     error: "",
10 |     data: "",
11 |   });
12 |   const doc_url =
13 |     "https://docs.unisat.io/dev/unisat-developer-center/unisat-wallet#sendinscription";
14 |   return (
15 |     <Card size="small" title="Send Inscription" style={{ margin: 10 }}>
16 |       <div style={{ textAlign: "left", marginTop: 10 }}>
17 |         <div style={{ fontWeight: "bold" }}>Docs:</div>
18 |         <a href={doc_url} target="_blank">
19 |           {doc_url}
20 |         </a>
21 |       </div>
22 | 
23 |       <div style={{ textAlign: "left", marginTop: 10 }}>
24 |         <div style={{ fontWeight: "bold" }}>Receiver Address:</div>
25 |         <Input
26 |           defaultValue={toAddress}
27 |           onChange={(e) => {
28 |             setToAddress(e.target.value);
29 |           }}
30 |         ></Input>
31 |       </div>
32 | 
33 |       <div style={{ textAlign: "left", marginTop: 10 }}>
34 |         <div style={{ fontWeight: "bold" }}>InscriptionId: </div>
35 |         <Input
36 |           defaultValue={inscriptionId}
37 |           onChange={(e) => {
38 |             setInscriptionId(e.target.value);
39 |           }}
40 |         ></Input>
41 |       </div>
42 | 
43 |       {result.success ? (
44 |         <div style={{ textAlign: "left", marginTop: 10 }}>
45 |           <div style={{ fontWeight: "bold" }}>Txid:</div>
46 |           <div style={{ wordWrap: "break-word" }}>{result.data}</div>
47 |         </div>
48 |       ) : (
49 |         <div style={{ textAlign: "left", marginTop: 10 }}>
50 |           <div style={{ wordWrap: "break-word" }}>{result.error}</div>
51 |         </div>
52 |       )}
53 | 
54 |       <Button
55 |         style={{ marginTop: 10 }}
56 |         onClick={async () => {
57 |           setResult({
58 |             success: false,
59 |             error: "Requesting...",
60 |             data: "",
61 |           });
62 |           try {
63 |             const txid = await (window as any).unisat.sendInscription(
64 |               toAddress,
65 |               inscriptionId
66 |             );
67 | 
68 |             setResult({
69 |               success: true,
70 |               error: "",
71 |               data: txid,
72 |             });
73 |           } catch (e) {
74 |             setResult({
75 |               success: false,
76 |               error: (e as any).message,
77 |               data: "",
78 |             });
79 |           }
80 |         }}
81 |       >
82 |         Submit
83 |       </Button>
84 |     </Card>
85 |   );
86 | }
87 | 


--------------------------------------------------------------------------------
/src/components/SendRunesCard.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useRef, useState } from "react";
 2 | import { Button, Card, Input, Radio } from "antd";
 3 | 
 4 | export function SendRunesCard() {
 5 |   const [toAddress, setToAddress] = useState("");
 6 |   const [runeid, setRuneid] = useState("");
 7 |   const [amount, setAmount] = useState("");
 8 |   const [result, setResult] = useState({
 9 |     success: false,
10 |     error: "",
11 |     data: "",
12 |   });
13 |   const doc_url =
14 |     "https://docs.unisat.io/dev/unisat-developer-center/unisat-wallet#sendrunes";
15 |   return (
16 |     <Card size="small" title="Send Runes" style={{ margin: 10 }}>
17 |       <div style={{ textAlign: "left", marginTop: 10 }}>
18 |         <div style={{ fontWeight: "bold" }}>Docs:</div>
19 |         <a href={doc_url} target="_blank">
20 |           {doc_url}
21 |         </a>
22 |       </div>
23 | 
24 |       <div style={{ textAlign: "left", marginTop: 10 }}>
25 |         <div style={{ fontWeight: "bold" }}>Receiver Address:</div>
26 |         <Input
27 |           defaultValue={toAddress}
28 |           onChange={(e) => {
29 |             setToAddress(e.target.value);
30 |           }}
31 |         ></Input>
32 |       </div>
33 | 
34 |       <div style={{ textAlign: "left", marginTop: 10 }}>
35 |         <div style={{ fontWeight: "bold" }}>Runeid: </div>
36 |         <Input
37 |           defaultValue={runeid}
38 |           onChange={(e) => {
39 |             setRuneid(e.target.value);
40 |           }}
41 |         ></Input>
42 |       </div>
43 | 
44 |       <div style={{ textAlign: "left", marginTop: 10 }}>
45 |         <div style={{ fontWeight: "bold" }}>Amount: </div>
46 |         <Input
47 |           defaultValue={amount}
48 |           onChange={(e) => {
49 |             setAmount(e.target.value);
50 |           }}
51 |         ></Input>
52 |       </div>
53 | 
54 |       {result.success ? (
55 |         <div style={{ textAlign: "left", marginTop: 10 }}>
56 |           <div style={{ fontWeight: "bold" }}>Txid:</div>
57 |           <div style={{ wordWrap: "break-word" }}>{result.data}</div>
58 |         </div>
59 |       ) : (
60 |         <div style={{ textAlign: "left", marginTop: 10 }}>
61 |           <div style={{ wordWrap: "break-word" }}>{result.error}</div>
62 |         </div>
63 |       )}
64 | 
65 |       <Button
66 |         style={{ marginTop: 10 }}
67 |         onClick={async () => {
68 |           setResult({
69 |             success: false,
70 |             error: "Requesting...",
71 |             data: "",
72 |           });
73 |           try {
74 |             const txid = await (window as any).unisat.sendRunes(
75 |               toAddress,
76 |               runeid,
77 |               amount
78 |             );
79 | 
80 |             setResult({
81 |               success: true,
82 |               error: "",
83 |               data: txid,
84 |             });
85 |           } catch (e) {
86 |             setResult({
87 |               success: false,
88 |               error: (e as any).message,
89 |               data: "",
90 |             });
91 |           }
92 |         }}
93 |       >
94 |         Submit
95 |       </Button>
96 |     </Card>
97 |   );
98 | }
99 | 


--------------------------------------------------------------------------------
/src/components/SignMessageCard.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useRef, useState } from "react";
  2 | import { Button, Card, Input, Radio } from "antd";
  3 | 
  4 | export function SignMessageCard() {
  5 |   const [message, setMessage] = useState("hello world~");
  6 |   const [result, setResult] = useState({
  7 |     success: false,
  8 |     error: "",
  9 |     data: "",
 10 |   });
 11 |   const doc_url =
 12 |     "https://docs.unisat.io/dev/unisat-developer-center/unisat-wallet#signmessage";
 13 |   return (
 14 |     <Card size="small" title="Sign Message" style={{ margin: 10 }}>
 15 |       <div style={{ textAlign: "left", marginTop: 10 }}>
 16 |         <div style={{ fontWeight: "bold" }}>Docs:</div>
 17 |         <a href={doc_url} target="_blank">
 18 |           {doc_url}
 19 |         </a>
 20 |       </div>
 21 |       <div style={{ textAlign: "left", marginTop: 10 }}>
 22 |         <div style={{ fontWeight: "bold" }}>Message:</div>
 23 |         <Input
 24 |           defaultValue={message}
 25 |           onChange={(e) => {
 26 |             setMessage(e.target.value);
 27 |           }}
 28 |         ></Input>
 29 |       </div>
 30 |       {result.success ? (
 31 |         <div style={{ textAlign: "left", marginTop: 10 }}>
 32 |           <div style={{ fontWeight: "bold" }}>Signature:</div>
 33 |           <div style={{ wordWrap: "break-word" }}>{result.data}</div>
 34 |         </div>
 35 |       ) : (
 36 |         <div style={{ textAlign: "left", marginTop: 10 }}>
 37 |           <div style={{ wordWrap: "break-word" }}>{result.error}</div>
 38 |         </div>
 39 |       )}
 40 | 
 41 |       <Button
 42 |         style={{ margin: 10 }}
 43 |         onClick={async () => {
 44 |           setResult({
 45 |             success: false,
 46 |             error: "Requesting...",
 47 |             data: "",
 48 |           });
 49 |           try {
 50 |             const signature = await (window as any).unisat.signMessage(message);
 51 |             setResult({
 52 |               success: true,
 53 |               error: "",
 54 |               data: signature,
 55 |             });
 56 |           } catch (e) {
 57 |             setResult({
 58 |               success: false,
 59 |               error: (e as any).message,
 60 |               data: "",
 61 |             });
 62 |           }
 63 |         }}
 64 |       >
 65 |         Sign By ecdsa
 66 |       </Button>
 67 | 
 68 |       <Button
 69 |         style={{ margin: 10 }}
 70 |         onClick={async () => {
 71 |           setResult({
 72 |             success: false,
 73 |             error: "Requesting...",
 74 |             data: "",
 75 |           });
 76 |           try {
 77 |             const signature = await (window as any).unisat.signMessage(
 78 |               message,
 79 |               "bip322-simple"
 80 |             );
 81 |             setResult({
 82 |               success: true,
 83 |               error: "",
 84 |               data: signature,
 85 |             });
 86 |           } catch (e) {
 87 |             setResult({
 88 |               success: false,
 89 |               error: (e as any).message,
 90 |               data: "",
 91 |             });
 92 |           }
 93 |         }}
 94 |       >
 95 |         Sign By bip322-simple
 96 |       </Button>
 97 |     </Card>
 98 |   );
 99 | }
100 | 


--------------------------------------------------------------------------------
/src/const.ts:
--------------------------------------------------------------------------------
 1 | export enum ChainType {
 2 |   BITCOIN_MAINNET = "BITCOIN_MAINNET",
 3 |   BITCOIN_TESTNET = "BITCOIN_TESTNET",
 4 |   BITCOIN_TESTNET4 = "BITCOIN_TESTNET4",
 5 |   BITCOIN_SIGNET = "BITCOIN_SIGNET",
 6 |   FRACTAL_BITCOIN_MAINNET = "FRACTAL_BITCOIN_MAINNET",
 7 |   FRACTAL_BITCOIN_TESTNET = "FRACTAL_BITCOIN_TESTNET",
 8 | }
 9 | 
10 | export enum NetworkType {
11 |   MAINNET,
12 |   TESTNET,
13 | }
14 | 
15 | type TypeChain = {
16 |   enum: ChainType;
17 |   label: string;
18 |   icon: string;
19 |   unit: string;
20 |   networkType: NetworkType;
21 |   endpoints: string[];
22 |   mempoolSpaceUrl: string;
23 |   unisatUrl: string;
24 |   ordinalsUrl: string;
25 | };
26 | 
27 | export const CHAINS_MAP: { [key: string]: TypeChain } = {
28 |   [ChainType.BITCOIN_MAINNET]: {
29 |     enum: ChainType.BITCOIN_MAINNET,
30 |     label: "Bitcoin Mainnet",
31 |     icon: "./images/artifacts/bitcoin-mainnet.png",
32 |     unit: "BTC",
33 |     networkType: NetworkType.MAINNET,
34 |     endpoints: ["https://wallet-api.unisat.io"],
35 |     mempoolSpaceUrl: "https://mempool.space",
36 |     unisatUrl: "https://unisat.io",
37 |     ordinalsUrl: "https://ordinals.com",
38 |   },
39 |   [ChainType.BITCOIN_TESTNET]: {
40 |     enum: ChainType.BITCOIN_TESTNET,
41 |     label: "Bitcoin Testnet",
42 |     icon: "./images/artifacts/bitcoin-testnet.svg",
43 |     unit: "tBTC",
44 |     networkType: NetworkType.TESTNET,
45 |     endpoints: ["https://wallet-api-testnet.unisat.io"],
46 |     mempoolSpaceUrl: "https://mempool.space/testnet",
47 |     unisatUrl: "https://testnet.unisat.io",
48 |     ordinalsUrl: "https://testnet.ordinals.com",
49 |   },
50 |   [ChainType.BITCOIN_TESTNET4]: {
51 |     enum: ChainType.BITCOIN_TESTNET4,
52 |     label: "Bitcoin Testnet4 (Beta)",
53 |     icon: "./images/artifacts/bitcoin-testnet.svg",
54 |     unit: "tBTC",
55 |     networkType: NetworkType.TESTNET,
56 |     endpoints: ["https://wallet-api-testnet4.unisat.io"],
57 |     mempoolSpaceUrl: "https://mempool.space/testnet4",
58 |     unisatUrl: "https://testnet4.unisat.io",
59 |     ordinalsUrl: "https://testnet4.ordinals.com",
60 |   },
61 |   [ChainType.BITCOIN_SIGNET]: {
62 |     enum: ChainType.BITCOIN_SIGNET,
63 |     label: "Bitcoin Signet",
64 |     icon: "./images/artifacts/bitcoin-signet.svg",
65 |     unit: "sBTC",
66 |     networkType: NetworkType.TESTNET,
67 |     endpoints: ["https://wallet-api-signet.unisat.io"],
68 |     mempoolSpaceUrl: "https://mempool.space/signet",
69 |     unisatUrl: "https://signet.unisat.io",
70 |     ordinalsUrl: "https://signet.ordinals.com",
71 |   },
72 |   [ChainType.FRACTAL_BITCOIN_MAINNET]: {
73 |     enum: ChainType.FRACTAL_BITCOIN_MAINNET,
74 |     label: "Fractal Bitcoin Mainnet",
75 |     icon: "./images/artifacts/fractalbitcoin-mainnet.png",
76 |     unit: "FB",
77 |     networkType: NetworkType.MAINNET,
78 |     endpoints: ["https://wallet-api-fractal.unisat.io"],
79 |     mempoolSpaceUrl: "https://mempool.fractalbitcoin.io",
80 |     unisatUrl: "https://fractal.unisat.io",
81 |     ordinalsUrl: "https://ordinals.fractalbitcoin.io",
82 |   },
83 |   [ChainType.FRACTAL_BITCOIN_TESTNET]: {
84 |     enum: ChainType.FRACTAL_BITCOIN_TESTNET,
85 |     label: "Fractal Bitcoin Testnet",
86 |     icon: "./images/artifacts/fractalbitcoin-mainnet.png",
87 |     unit: "tFB",
88 |     networkType: NetworkType.MAINNET,
89 |     endpoints: ["https://wallet-api-fractal.unisat.io/testnet"],
90 |     mempoolSpaceUrl: "https://mempool-testnet.fractalbitcoin.io",
91 |     unisatUrl: "https://fractal-testnet.unisat.io",
92 |     ordinalsUrl: "https://ordinals-testnet.fractalbitcoin.io",
93 |   },
94 | };
95 | 


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useRef, useState } from "react";
  2 | import "./App.css";
  3 | import { Button, Card, CollapseProps, Input, Radio, message } from "antd";
  4 | import { CHAINS_MAP, ChainType } from "./const";
  5 | import { copyToClipboard, satoshisToAmount } from "./utils";
  6 | import { SendBitcoinCard } from "./components/SendBitcoinCard";
  7 | import { PushPsbtCard } from "./components/PushPsbtCard";
  8 | import { PushTxCard } from "./components/PushTxCard";
  9 | import { SignMessageCard } from "./components/SignMessageCard";
 10 | import { SignPsbtCard } from "./components/SignPsbtCard";
 11 | import { Collapse } from "antd";
 12 | import { InscribeTransferCard } from "./components/InscribeTransferCard";
 13 | import { SendInscriptionCard } from "./components/SendInscriptionCard";
 14 | import { SendRunesCard } from "./components/SendRunesCard";
 15 | import useMessage from "antd/es/message/useMessage";
 16 | 
 17 | function App() {
 18 |   const [unisatInstalled, setUnisatInstalled] = useState(false);
 19 |   const [connected, setConnected] = useState(false);
 20 |   const [accounts, setAccounts] = useState<string[]>([]);
 21 |   const [publicKey, setPublicKey] = useState("");
 22 |   const [address, setAddress] = useState("");
 23 |   const [balance, setBalance] = useState({
 24 |     confirmed: 0,
 25 |     unconfirmed: 0,
 26 |     total: 0,
 27 |   });
 28 |   const [network, setNetwork] = useState("livenet");
 29 | 
 30 |   const [version, setVersion] = useState("");
 31 | 
 32 |   const [chainType, setChainType] = useState<ChainType>(
 33 |     ChainType.BITCOIN_MAINNET
 34 |   );
 35 | 
 36 |   const chain = CHAINS_MAP[chainType];
 37 | 
 38 |   const getBasicInfo = async () => {
 39 |     const unisat = (window as any).unisat;
 40 | 
 41 |     try {
 42 |       const accounts = await unisat.getAccounts();
 43 |       setAccounts(accounts);
 44 |     } catch (e) {
 45 |       console.log("getAccounts error", e);
 46 |     }
 47 | 
 48 |     try {
 49 |       const publicKey = await unisat.getPublicKey();
 50 |       setPublicKey(publicKey);
 51 |     } catch (e) {
 52 |       console.log("getPublicKey error", e);
 53 |     }
 54 | 
 55 |     try {
 56 |       const balance = await unisat.getBalance();
 57 |       setBalance(balance);
 58 |     } catch (e) {
 59 |       console.log("getBalance error", e);
 60 |     }
 61 | 
 62 |     try {
 63 |       const chain = await unisat.getChain();
 64 |       console.log("chain==>",chain);
 65 |       setChainType(chain.enum);
 66 |     } catch (e) {
 67 |       console.log("getChain error", e);
 68 |     }
 69 | 
 70 |     try {
 71 |       const network = await unisat.getNetwork();
 72 |       setNetwork(network);
 73 |     } catch (e) {
 74 |       console.log("getNetwork error", e);
 75 |     }
 76 | 
 77 |     try {
 78 |       const version = await unisat.getVersion();
 79 |       setVersion(version);
 80 |     } catch (e) {
 81 |       console.log("getVersion error ", e);
 82 |     }
 83 | 
 84 |     if (unisat.getChain !== undefined) {
 85 |       try {
 86 |         const chain = await unisat.getChain();
 87 |         setChainType(chain.enum);
 88 |       } catch (e) {
 89 |         console.log("getChain error", e);
 90 |       }
 91 |     }
 92 |   };
 93 | 
 94 |   const selfRef = useRef<{ accounts: string[] }>({
 95 |     accounts: [],
 96 |   });
 97 |   const self = selfRef.current;
 98 |   const handleAccountsChanged = (_accounts: string[]) => {
 99 |     console.log("accounts changed", _accounts);
100 |     if (self.accounts[0] === _accounts[0]) {
101 |       // prevent from triggering twice
102 |       return;
103 |     }
104 |     self.accounts = _accounts;
105 |     if (_accounts.length > 0) {
106 |       setAccounts(_accounts);
107 |       setConnected(true);
108 | 
109 |       setAddress(_accounts[0]);
110 | 
111 |       getBasicInfo();
112 |     } else {
113 |       setConnected(false);
114 |     }
115 |   };
116 | 
117 |   const handleNetworkChanged = (network: string) => {
118 |     console.log("network changed", network);
119 |     setNetwork(network);
120 |     getBasicInfo();
121 |   };
122 | 
123 |   const handleChainChanged = (chain: {
124 |     enum: ChainType;
125 |     name: string;
126 |     network: string;
127 |   }) => {
128 |     console.log("chain changed", chain);
129 |     setChainType(chain.enum);
130 |     getBasicInfo();
131 |   };
132 | 
133 |   useEffect(() => {
134 |     async function checkUnisat() {
135 |       let unisat = (window as any).unisat;
136 | 
137 |       for (let i = 1; i < 10 && !unisat; i += 1) {
138 |         await new Promise((resolve) => setTimeout(resolve, 100 * i));
139 |         unisat = (window as any).unisat;
140 |       }
141 | 
142 |       if (unisat) {
143 |         setUnisatInstalled(true);
144 |       } else if (!unisat) return;
145 | 
146 |       unisat
147 |         .getAccounts()
148 |         .then((accounts: string[]) => {
149 |           // obtain account information once
150 |           handleAccountsChanged(accounts);
151 |         })
152 |         .catch((e: any) => {
153 |           messageApi.error((e as any).message);
154 |         });
155 | 
156 |       unisat.on("accountsChanged", handleAccountsChanged);
157 |       unisat.on("networkChanged", handleNetworkChanged);
158 |       unisat.on("chainChanged", handleChainChanged);
159 | 
160 |       return () => {
161 |         unisat.removeListener("accountsChanged", handleAccountsChanged);
162 |         unisat.removeListener("networkChanged", handleNetworkChanged);
163 |         unisat.removeListener("chainChanged", handleChainChanged);
164 |       };
165 |     }
166 | 
167 |     checkUnisat().then();
168 |   }, []);
169 | 
170 |   const [messageApi, contextHolder] = useMessage();
171 | 
172 |   if (!unisatInstalled) {
173 |     return (
174 |       <div className="App">
175 |         <header className="App-header">
176 |           {contextHolder}
177 |           <div>
178 |             <Button
179 |               onClick={() => {
180 |                 window.location.href = "https://unisat.io";
181 |               }}
182 |             >
183 |               Install Unisat Wallet
184 |             </Button>
185 |           </div>
186 |         </header>
187 |       </div>
188 |     );
189 |   }
190 | 
191 |   const unisat = (window as any).unisat;
192 | 
193 |   const items: CollapseProps["items"] = [
194 |     {
195 |       key: "sendBitcoin",
196 |       label: <div style={{ textAlign: "start", color: "white" }}>unisat.sendBitcoin</div>,
197 |       children: <SendBitcoinCard />,
198 |     },
199 |     {
200 |       key: "sendInscription",
201 |       label: <div style={{ textAlign: "start", color: "white" }}>unisat.sendInscription</div>,
202 |       children: <SendInscriptionCard />,
203 |     },
204 | 
205 |     {
206 |       key: "sendRunes",
207 |       label: <div style={{ textAlign: "start", color: "white" }}>unisat.sendRunes</div>,
208 |       children: <SendRunesCard />,
209 |     },
210 |     {
211 |       key: "inscribeTransfer",
212 |       label: <div style={{ textAlign: "start", color: "white" }}>unisat.inscribeTransfer</div>,
213 |       children: <InscribeTransferCard />,
214 |     },
215 |     {
216 |       key: "signMessage",
217 |       label: <div style={{ textAlign: "start", color: "white" }}>unisat.signMessage</div>,
218 |       children: <SignMessageCard />,
219 |     },
220 |     {
221 |       key: "signPsbt",
222 |       label: <div style={{ textAlign: "start", color: "white" }}>unisat.signPsbt</div>,
223 |       children: <SignPsbtCard />,
224 |     },
225 |     {
226 |       key: "pushPsbt",
227 |       label: <div style={{ textAlign: "start", color: "white" }}>unisat.signPsbt</div>,
228 |       children: <PushPsbtCard />,
229 |     },
230 |     {
231 |       key: "pushTx",
232 |       label: <div style={{ textAlign: "start", color: "white" }}>unisat.pushTx</div>,
233 |       children: <PushTxCard />,
234 |     },
235 |   ];
236 | 
237 |   const chains = Object.keys(CHAINS_MAP).map((key) => {
238 |     const chain = CHAINS_MAP[key as ChainType];
239 |     return {
240 |       label: chain.label,
241 |       value: chain.enum,
242 |     };
243 |   });
244 | 
245 |   const supportLegacyNetworks = ["livenet", "testnet"];
246 |   return (
247 |     <div className="App">
248 |       <header className="App-header">
249 |         <div
250 |           style={{
251 |             display: "flex",
252 |             flexDirection: "row",
253 |             alignItems: "center",
254 |             justifyContent: "space-between",
255 |             width: "67%",
256 |             marginTop: "60px",
257 |             alignSelf: "center",
258 |           }}
259 |         >
260 |           <div style={{ minWidth: 200 }}> </div>
261 |           {/* <p>Unisat Wallet Demo</p> */}
262 |           <div style={{ minWidth: 200 }}>
263 |             {connected ? (
264 |               <button
265 |                 onClick={async () => {
266 |                   await unisat.disconnect();
267 |                 }}
268 |                 style={{ padding: "8px 12px", backgroundColor: "#282c34", border: "1px solid white", color: "white", cursor: "pointer", borderRadius: "5px" }}
269 |               >
270 |                 disconnect
271 |               </button>
272 |             ) : null}
273 |           </div>
274 |         </div>
275 | 
276 |         {contextHolder}
277 |         {connected ? (
278 |           <div
279 |             style={{
280 |               padding: 10,
281 |               width: '60%'
282 |             }}
283 |           >
284 |             <div
285 |               style={{
286 |                 display: "flex",
287 |                 flex: 1,
288 |                 flexDirection: "row",
289 |                 width: "100%",
290 |                 padding: 10,
291 |                 gap: "10px"
292 |               }}
293 |             >
294 |               <Card
295 |                 size="small"
296 |                 title="Wallet Info"
297 |                 styles = {{ title: { color: "white" } }}
298 |                 style={{ width: "50%", backgroundColor: "#282c34", color: "white" }}
299 |               >
300 |                 {/* <div style={{ textAlign: "left", marginTop: 10 }}>
301 |                   <div style={{ fontWeight: "bold" }}>Version:</div>
302 |                   <div style={{ wordWrap: "break-word" }}>{version}</div>
303 |                 </div> */}
304 | 
305 |                 {chain ? (
306 |                   <div style={{ textAlign: "left", marginTop: 10 }}>
307 |                     <div style={{ fontWeight: "bold" }}>Chain:</div>
308 |                     <Radio.Group
309 |                       onChange={async (e) => {
310 |                         try {
311 |                           const chain = await unisat.switchChain(
312 |                             e.target.value
313 |                           );
314 |                           setChainType(chain.enum);
315 |                         } catch (e) {
316 |                           messageApi.error((e as any).message);
317 |                         }
318 |                       }}
319 |                       value={chain.enum}
320 |                       style={{ display: "flex", flexDirection: "column", gap: "8px" }}
321 |                     >
322 |                       {chains.map((chain) => (
323 |                         <Radio value={chain.value} style={{ color: "white" }}>{chain.label}</Radio>
324 |                       ))}
325 |                     </Radio.Group>
326 |                   </div>
327 |                 ) : null}
328 | 
329 |                 <div style={{ textAlign: "left", marginTop: 10 }}>
330 |                   <div style={{ fontWeight: "bold" }}>Network:</div>
331 |                   {supportLegacyNetworks.includes(network) ? (
332 |                     <Radio.Group
333 |                       onChange={async (e) => {
334 |                         try {
335 |                           const network = await unisat.switchNetwork(
336 |                             e.target.value
337 |                           );
338 |                           setNetwork(network);
339 |                         } catch (e) {
340 |                           messageApi.error((e as any).message);
341 |                         }
342 |                       }}
343 |                       value={network}
344 |                     >
345 |                       <Radio value={"livenet"}>livenet</Radio>
346 |                       <Radio value={"testnet"}>testnet</Radio>
347 |                     </Radio.Group>
348 |                   ) : (
349 |                     <div>
350 |                       <p>
351 |                         "unisat.getNetwork" is legacy. Please use
352 |                         "unisat.getChain" instead.{" "}
353 |                       </p>
354 |                     </div>
355 |                   )}
356 |                 </div>
357 |                 <div style={{ textAlign: "left", marginTop: 10 }}>
358 |                   <div style={{ fontWeight: "bold" }}>Address:</div>
359 |                   <div
360 |                     style={{ wordWrap: "break-word", cursor: "pointer" }}
361 |                     onClick={() => {
362 |                       copyToClipboard(address);
363 |                       messageApi.success("Address Copied.");
364 |                     }}
365 |                   >
366 |                     {address}
367 |                   </div>
368 |                   <div style={{ fontWeight: "bold", marginTop: "10px" }}>PublicKey:</div>
369 |                   <div
370 |                     style={{ wordWrap: "break-word", cursor: "pointer" }}
371 |                     onClick={() => {
372 |                       copyToClipboard(publicKey);
373 |                       messageApi.success("PublicKey Copied.");
374 |                     }}
375 |                   >
376 |                     {publicKey}
377 |                   </div>
378 |                   <div style={{ fontWeight: "bold", marginTop: "10px" }}>Balance: </div>
379 |                   <div style={{ wordWrap: "break-word", cursor: "pointer" }}>
380 |                     {satoshisToAmount(balance.total)} {chain && chain.unit}
381 |                   </div>
382 |                 </div>
383 |               </Card>
384 |               {/* <Card
385 |                 size="small"
386 |                 title="Account Info"
387 |                 style={{ width: "100%" }}
388 |               >
389 |                 <div style={{ textAlign: "left", marginTop: 10 }}>
390 |                   <div style={{ fontWeight: "bold" }}>Address:</div>
391 |                   <div
392 |                     style={{ wordWrap: "break-word" }}
393 |                     onClick={() => {
394 |                       copyToClipboard(address);
395 |                       messageApi.success("Address Copied.");
396 |                     }}
397 |                   >
398 |                     {address}
399 |                   </div>
400 |                 </div>
401 | 
402 |                 <div style={{ textAlign: "left", marginTop: 10 }}>
403 |                   <div style={{ fontWeight: "bold" }}>PublicKey:</div>
404 |                   <div
405 |                     style={{ wordWrap: "break-word" }}
406 |                     onClick={() => {
407 |                       copyToClipboard(publicKey);
408 |                       messageApi.success("PublicKey Copied.");
409 |                     }}
410 |                   >
411 |                     {publicKey}
412 |                   </div>
413 |                 </div>
414 | 
415 |                 <div style={{ textAlign: "left", marginTop: 10 }}>
416 |                   <div style={{ fontWeight: "bold" }}>Balance: </div>
417 |                   <div style={{ wordWrap: "break-word" }}>
418 |                     {satoshisToAmount(balance.total)} {chain && chain.unit}
419 |                   </div>
420 |                 </div>
421 |               </Card> */}
422 |               <Collapse
423 |                 style={{
424 |                   backgroundColor: "#282c34",
425 |                   color: "white !important",
426 |                   width: "50%",
427 |                 }}
428 |                 items={items}
429 |                 defaultActiveKey={[]}
430 |                 onChange={() => {
431 |                   // todo
432 |                 }}
433 |               />
434 |             </div>
435 | 
436 |           </div>
437 |         ) : (
438 |           <div>
439 |             <Button
440 |               onClick={async () => {
441 |                 try {
442 |                   const result = await unisat.requestAccounts();
443 |                   handleAccountsChanged(result);
444 |                 } catch (e) {
445 |                   messageApi.error((e as any).message);
446 |                 }
447 |               }}
448 |             >
449 |               Connect Unisat Wallet
450 |             </Button>
451 |           </div>
452 |         )}
453 |       </header>
454 |     </div>
455 |   );
456 | }
457 | 
458 | export default App;
459 | 


--------------------------------------------------------------------------------