Update demo app

README.md

@@ -18,8 +18,15 @@ Light paper to describe the Nostr binding protocol
 - [docs/lightpaper.md](/docs/lightpaper.md)
 - [docs/lightpaper-zh.md](/docs/lightpaper-zh.md)(中文版)
 
+Spec for implementation
+
+- [docs/nostr-binding-type-script.md](/docs/nostr-binding-type-script.md)
+- [docs/nostr-lock-script.md](/docs/nostr-lock-script.md)
+
 ## Run Demo
 
+### On Local Devnet
+
 ### 1. Start Devnet
 
 ```sh
@@ -45,7 +52,16 @@ Run the following commands to build the Scripts:
 
 ```sh
 make build
-cp deps/auth build/release/auth
+```
+
+The script binaries are located in `build/release`
+
+```sh
+cd build/release && ls -hl && cd ../..
+
+> total 704
+> -rwxr-xr-x  1 staff   170K Jun 28 11:32 nostr-binding
+> -rwxr-xr-x  1 staff   176K Jun 28 11:32 nostr-lock
 ```
 
 ### 3. Deploy Scripts

app/nostr-mint/app/conmponents/asset-button.tsx

@@ -1,30 +1,53 @@
 import { ReactNode, useContext } from "react";
 import { SingerContext } from "~/context/signer";
-import { Event } from "@rust-nostr/nostr-sdk";
+import { listTypeCells } from "~/protocol/ckb-helper.client";
+import { NostrBinding } from "~/protocol/script/nostr-binding.client";
 
 export interface AssetButtonProp {
-  assetEvent: Event | undefined;
   setResult: (res: string | ReactNode) => void;
 }
 
-export function AssetButton({ setResult, assetEvent }: AssetButtonProp) {
+export function AssetButton({ setResult }: AssetButtonProp) {
   const context = useContext(SingerContext);
 
   const onClick = async () => {
-    const jsonEvent = assetEvent?.asJson();
-    if (jsonEvent) {
-      return setResult(
-        <code className="whitespace-pre">
-          {JSON.stringify(JSON.parse(jsonEvent), null, 2)}
-        </code>
-      );
+    const ckbAddress = context.ckbSigner?.ckbAddress;
+    if (ckbAddress) {
+      const cells = await listTypeCells(ckbAddress, undefined, 20);
+      if (cells.length > 0) {
+        return setResult(
+          <div className="flex flex-row gap-2">
+            {cells.map((cell) => (
+              <div>
+                {(
+                  <div className="border text-center py-2 px-4 rounded">
+                    <div>
+                    {(BigInt(cell.cellOutput.capacity) / 100000000n).toString()} CKB
+                    </div>
+                    <div className="text-gray-500 text-sm">
+                    {NostrBinding.isBindingType(cell.cellOutput.type) && "Nostr Binding Asset"}
+                    {cell.cellOutput.type == null && "Native CKB"}
+                    </div>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        );
+      } else {
+        setResult("Not found");
+      }
     }
-    setResult("not found");
   };
 
   return (
-    <div>
-      <button onClick={onClick}>My Asset</button>
+    <div className="my-1">
+      <button
+        className="border border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white font-bold py-2 px-4 rounded"
+        onClick={onClick}
+      >
+        List My Asset
+      </button>
     </div>
   );
 }

app/nostr-mint/app/conmponents/connect-nostr.tsx

@@ -7,12 +7,15 @@ import {
 import { useContext, useMemo, useState } from "react";
 import { commons, helpers } from "@ckb-lumos/lumos";
 import { CKBSigner, SingerContext } from "~/context/signer";
-import { capacityOf, computeTransactionHash } from "~/protocol/ckb-helper.client";
+import {
+  capacityOf,
+  computeTransactionHash,
+} from "~/protocol/ckb-helper.client";
 import { blockchain } from "@ckb-lumos/base";
 import { bytes } from "@ckb-lumos/codec";
 import { NostrLock } from "~/protocol/script/nostr-lock.client";
 import { Unlock } from "~/protocol/event/unlock.client";
-import copy from 'copy-to-clipboard';
+import { readEnvNetwork } from "offckb.config";
 
 export function ConnectNostr() {
   const [nostrPubkey, setNostrPubkey] = useState<string>();
@@ -122,14 +125,42 @@ export function ConnectNostr() {
   }, [ckbAddress]);
 
   return (
-    <div className="flex flex-col">
-      <button onClick={connect}>
-        {nostrPubkey
-          ? `${nostrPubkey.slice(0, 8)}..${nostrPubkey.slice(-4)}`
-          : "Connect Nostr"}
-      </button>
-      {ckbAddress && <div onClick={()=>copy(ckbAddress, {onCopy: (_) => alert("address copied: " + ckbAddress)})}>{ckbAddress.slice(0, 8)}..{ckbAddress.slice(-4)}</div>}
-      {ckbAddress && balance != null && <div>{balance} CKB</div>}
+    <div className="mb-4 w-full">
+      <div>
+        {nostrPubkey ? (
+          `${nostrPubkey}`
+        ) : (
+          <button
+            onClick={connect}
+            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+          >
+            Connect Nostr
+          </button>
+        )}
+      </div>
+      {ckbAddress && <div>{ckbAddress}</div>}
+      {ckbAddress && balance != null && <div>{balance} CKB </div>}
+      {ckbAddress && (
+        <div className="w-full">
+          <div className="text-gray-500">
+            Hints: use{" "}
+            <a
+              href="https://github.com/RetricSu/offckb?tab=readme-ov-file#usage"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-purple-500 hover:text-purple-700 underline hover:no-underline"
+            >
+              offckb
+            </a>{" "}
+            to deposit some CKBs
+          </div>
+          <pre className="bg-gray-800 text-white p-4 rounded-md shadow-md overflow-x-auto w-full">
+            <code className="text-yellow-400">
+              offckb deposit {ckbAddress} 100000000000 --network {readEnvNetwork()}
+            </code>
+          </pre>
+        </div>
+      )}
     </div>
   );
 }