+
State: {state}
+ {
+ wallet.decentralizedId ? (
Decentralized ID: {wallet.decentralizedId}
) : (
Fetching Decentralized ID...
)
+ }
+ {
+ wallet.addressBTC ? (
BTC Address: {wallet.addressBTC}
) : (
Fetching BTC Address...
)
+ }
+ {
+ wallet.addressSTX ? (
STX Address: {wallet.addressSTX}
) : (
Fetching STX Address...
)
+ }
+ {
+ wallet.publicKeyBTC ? (
BTC Public Key: {wallet.publicKeyBTC}
) : (
Fetching BTC Public Key...
)
+ }
+ {
+ wallet.balanceBTC ? (
BTC Balance: {wallet.balanceBTC}
) : (
Fetching BTC Balance...
)
+ }
+ {
+ wallet.balanceSBTC ? (
sBTC Balance: {wallet.balanceSBTC}
) : (
Fetching sBTC Balance...
)
+ }
+ {
+ wallet.utxos ? (
Number of UTXOs: {wallet.utxos.length}
) : (
Fetching UTXOs...
)
+ }
+ {
+ depositInfo.addressPeg ? (
sBTC Peg Address: {depositInfo.addressPeg}
) : (
Fetching sBTC Peg Address...
)
+ }
+ {
+ depositInfo.feeRate ? (
Fee Rate: {depositInfo.feeRate}
) : (
Fetching Fee Rate...
)
+ }
+ {
+ depositInfo.tx ? (
Transaction prepared
) : (
Transaction not prepared...
)
+ }
+ {
+ depositInfo.finalTx ? (
Transaction finalized: {depositInfo.finalTx}
) : (
Transaction not finalized...
)
+ }
+
+ );
+}
diff --git a/src/app/netconfig.tsx b/src/app/netconfig.tsx
new file mode 100644
index 0000000..279b6a2
--- /dev/null
+++ b/src/app/netconfig.tsx
@@ -0,0 +1,10 @@
+// import { TestnetHelper } from 'sbtc';
+// const network = Object.freeze(new TestnetHelper());
+import { DevEnvHelper } from 'sbtc';
+export const NETWORK = Object.freeze(new DevEnvHelper());
+export const MEMPOOLTXURL = "http://127.0.0.1:8083/tx/";
+export const MEMPOOLURLADDRESS = "http://127.0.0.1:8083/address/";
+export const MEMPOOLTXAPIURL = "http://127.0.0.1:8083/api/tx/";
+export const STACKSAPIURL = "http://localhost:3999/extended/v1/address/";
+export const STACKSURLADDRESS= "http://127.0.0.1:3020/address/";
+export const STACKSURLADDRESSPOST = "?chain=testnet&api=http://localhost:3999";
diff --git a/src/app/page.tsx b/src/app/page.tsx
new file mode 100644
index 0000000..6c85c28
--- /dev/null
+++ b/src/app/page.tsx
@@ -0,0 +1,428 @@
+"use client";
+import { useState, useEffect } from 'react';
+import type { UserData } from '@stacks/connect';
+import { AppConfig, UserSession, showConnect, } from "@stacks/connect";
+import { StacksTestnet } from "@stacks/network";
+import { bytesToHex, hexToBytes } from '@stacks/common';
+import { sbtcDepositHelper, UtxoWithTx, WALLET_00 } from 'sbtc';
+import * as btc from '@scure/btc-signer';
+
+// Network configuration
+import { NETWORK } from './netconfig';
+
+// Library
+import type { stateType, walletType, depositInfoType } from './lib';
+import { emptyWallet, emptyDepositInfo } from './lib';
+import { getBalanceSBTC, transactionConfirmed, getURLAddressBTC,
+ getURLAddressSTX, getURLTxBTC, getFeeRate } from './lib';
+import { humanReadableNumber as hrn } from './lib';
+
+// UI
+import { LogWindow } from './logwindow';
+import { Alert, Badge, Banner, Button, Card, Spinner } from 'flowbite-react';
+
+// Setting: How much to deposit
+const DEPOSITAMOUNT : number = 10_000;
+
+// Main component
+export default function Home() {
+ // State and wallet
+ const [state, setState] = useState