WIP

src/actions/fetch-assets.js

@@ -3,7 +3,7 @@
 import { configFromEnv } from "@/lib/config";
 import { fetchAssets as innerFetchAssets } from "@/lib/cobuild/assets-manager";
 
-export default async function fetchAssets(address) {
-  const config = configFromEnv(process.env);
+export default async function fetchAssets(address, config) {
+  config = config ?? configFromEnv(process.env);
   return await innerFetchAssets(config, address);
 }

src/actions/transfer.js

@@ -4,8 +4,8 @@ import { parseUnit } from "@ckb-lumos/bi";
 import { transferCkb } from "@/lib/cobuild/publishers";
 import { configFromEnv } from "@/lib/config";
 
-export default async function transfer(_prevState, formData) {
-  const config = configFromEnv(process.env);
+export default async function transfer(_prevState, formData, config) {
+  config = config ?? configFromEnv(process.env);
 
   const from = formData.get("from");
   const to = formData.get("to");

src/app/accounts/[address]/page.js

@@ -4,7 +4,9 @@ import Assets from "./assets";
 import Loading from "./loading";
 import AccountHeader from "./account-header";
 
-export default function Account({ params: { address } }) {
+export default function Account({ params: { address }, config }) {
+  config = config ?? configFromEnv(process.env);
+
   return (
     <>
       <header>

src/app/accounts/[address]/sign-form.js

@@ -2,11 +2,20 @@
 
 import { Button } from "flowbite-react";
 
-export default function SignForm({ address, buildingPacket }) {
+import BuildingPacketReview from "@/lib/cobuild/react/building-packet-review";
+import { applyLockActions } from "@/lib/cobuild/lock-actions";
+
+export default function SignForm({ address, buildingPacket, config }) {
+  const appliedBuildingPacket = applyLockActions(
+    address,
+    buildingPacket,
+    config,
+  );
+
   return (
     <>
       <Button>Sign</Button>
-      <pre>{JSON.stringify(buildingPacket, null, 2)}</pre>
+      <BuildingPacketReview buildingPacket={appliedBuildingPacket} />
     </>
   );
 }

src/app/accounts/[address]/transfer/form.js

@@ -11,7 +11,7 @@ import transfer from "@/actions/transfer";
 import Loading from "../loading";
 import SignForm from "../sign-form";
 
-export function TransferFormStep1({ formAction, formState, address }) {
+export function TransactionForm({ formAction, formState, address }) {
   const [balance, setBalance] = useState();
   useEffect(() => {
     fetchAssets(address).then(({ ckbBalance }) => setBalance(ckbBalance));
@@ -59,13 +59,17 @@ export function TransferFormStep1({ formAction, formState, address }) {
   );
 }
 
-export default function TransferForm({ address }) {
+export default function TransferForm({ address, config }) {
   const [formState, formAction] = useFormState(transfer, {});
 
   return formState.buildingPacket === null ||
     formState.buildingPacket === undefined ? (
-    <TransferFormStep1 {...{ formAction, formState, address }} />
+    <TransactionForm {...{ formAction, formState, address }} />
   ) : (
-    <SignForm address={address} buildingPacket={formState.buildingPacket} />
+    <SignForm
+      address={address}
+      buildingPacket={formState.buildingPacket}
+      config={config}
+    />
   );
 }

src/app/accounts/[address]/transfer/page.js

@@ -2,11 +2,13 @@ import { configFromEnv } from "@/lib/config";
 
 import TransferForm from "./form";
 
-export default function Transfer({ params: { address } }) {
+export default function Transfer({ params: { address }, config }) {
+  config = config ?? configFromEnv(process.env);
+
   return (
     <section>
       <h2>Transfer</h2>
-      <TransferForm address={address} />
+      <TransferForm address={address} config={config} />
     </section>
   );
 }

src/app/header.js

@@ -4,10 +4,8 @@ import { Button } from "flowbite-react";
 import { useRouter } from "next/navigation";
 
 import * as joyid from "@/lib/wallet/joyid";
-import { configFromEnv } from "@/lib/config";
 
-export default function RootClientPage() {
-  const config = configFromEnv(process.env);
+export default function RootClientPage({ config }) {
   const router = useRouter();
 
   const connect = async () => {

src/app/page.js

@@ -1,5 +1,7 @@
+import { configFromEnv } from "@/lib/config";
 import RootHeader from "./header";
 
-export default function RootPage() {
-  return <RootHeader />;
+export default function RootPage({ config }) {
+  config = config ?? configFromEnv(process.env);
+  return <RootHeader config={config} />;
 }

src/lib/cobuild/lock-actions.js

@@ -0,0 +1,14 @@
+import { addressToScript } from "@ckb-lumos/helpers";
+
+export function applyLockActions(address, buildingPacket, config) {
+  const lock = addressToScript(address, { config: config.ckbChainConfig });
+  if (lock.codeHash === config.SCRIPTS.JOYID_COBUILD_POC.CODE_HASH) {
+    return applyJoyidCobuildPocLockActions(lock, buildingPacket, config);
+  }
+
+  return buildingPacket;
+}
+
+function applyJoyidCobuildPocLockActions(lock, buildingPacket, config) {
+  // Assume that the tx uses Cobuild WitnessLayout structure
+}

src/lib/cobuild/react/building-packet-review.js

@@ -0,0 +1,4 @@
+// TODO: present the buildingPacket
+export default function BuildingPacketReview({ buildingPacket }) {
+  return <pre>{JSON.stringify(buildingPacket, null, 2)}</pre>;
+}