produce mint transaction manually

kinode/src/register-ui/package.json

@@ -17,8 +17,8 @@
     "react-icons": "^5.0.1",
     "react-modal": "^3.16.1",
     "react-router-dom": "^6.16.0",
-    "viem": "^2.15.1",
-    "wagmi": "^2.10.3"
+    "viem": "^2.19.0",
+    "wagmi": "^2.12.5"
   },
   "scripts": {
     "start": "vite",

kinode/src/register-ui/src/abis/index.ts

@@ -25,8 +25,28 @@ export const mechAbi = parseAbi([
     "function token() external view returns (uint256,address,uint256)"
 ])
 
-export const dotOsAbi = parseAbi([
-    "function commit(bytes32)",
-    "function getCommit(bytes memory, bytes32)",
-    "function mint(address,bytes,bytes,bytes,address,bytes32)",
-])
+export const dotOsAbi = [
+    {
+        type: 'function',
+        name: 'commit',
+        stateMutability: 'nonpayable',
+        inputs: [
+            { name: '_commit', type: 'bytes32' },
+        ],
+        outputs: [],
+    },
+    {
+        type: 'function',
+        name: 'mint',
+        stateMutability: 'nonpayable',
+        inputs: [
+            { name: 'who', type: 'address' },
+            { name: 'name', type: 'bytes' },
+            { name: 'initialization', type: 'bytes' },
+            { name: 'erc721Data', type: 'bytes' },
+            { name: 'implementation', type: 'address' },
+            { name: 'secret', type: 'bytes32' },
+        ],
+        outputs: [{ type: 'address' }],
+    },
+] as const

kinode/src/register-ui/src/index.css

@@ -66,7 +66,7 @@
 }
 
 .section {
-    background-color: var(--tasteful-dark);
+    background-color: light-dark(var(--off-white), var(--tasteful-dark));
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     padding: 2rem;

kinode/src/register-ui/src/pages/MintDotOsName.tsx

@@ -3,10 +3,10 @@ import { useNavigate } from "react-router-dom";
 import Loader from "../components/Loader";
 import { PageProps } from "../lib/types";
 
-import { useAccount, useWaitForTransactionReceipt, useWriteContract } from "wagmi";
+import { useAccount, useWaitForTransactionReceipt, useSendTransaction } from "wagmi";
 import { useConnectModal, useAddRecentTransaction } from "@rainbow-me/rainbowkit"
 import { dotOsAbi, generateNetworkingKeys, KINO_ACCOUNT_IMPL, DOTOS } from "../abis";
-import { encodePacked, getFunctionSelector, stringToHex } from "viem";
+import { encodePacked, parseAbi, encodeFunctionData, stringToHex } from "viem";
 
 interface RegisterOsNameProps extends PageProps { }
 
@@ -24,7 +24,7 @@ function MintDotOsName({
   let navigate = useNavigate();
   let { openConnectModal } = useConnectModal();
 
-  const { data: hash, writeContract, isPending, isError, error } = useWriteContract({
+  const { data: hash, sendTransaction, isPending, isError, error } = useSendTransaction({
     mutation: {
       onSuccess: (data) => {
         addRecentTransaction({ hash: data, description: `Mint ${knsName}` });
@@ -71,13 +71,12 @@ function MintDotOsName({
     // strip .os suffix
     const name = knsName.replace(/\.os$/, '');
 
-    const selector = getFunctionSelector('function mint(address,bytes,bytes,bytes,address,bytes32)')
+    const abi = parseAbi([
+      'function mint(address,bytes,bytes,bytes,address,bytes32)',
+    ])
 
-    console.log("selector: ", selector)
-
-    writeContract({
-      abi: dotOsAbi,
-      address: DOTOS,
+    const data = encodeFunctionData({
+      abi,
       functionName: 'mint',
       args: [
         address,
@@ -87,10 +86,26 @@ function MintDotOsName({
         KINO_ACCOUNT_IMPL,
         commitSecret
       ],
-      gas: 1000000n,
     })
 
-  }, [direct, address, writeContract, setNetworkingKey, setIpAddress, setWsPort, setTcpPort, setRouters, openConnectModal])
+    console.log("data: ", data)
+
+    // use data to write to contract -- do NOT use writeContract
+    // writeContract will NOT generate the correct selector for some reason
+    // probably THEIR bug.. no abi works
+    try {
+      sendTransaction({
+        to: DOTOS,
+        data: data,
+        gas: 1000000n,
+      })
+      console.log('Transaction sent?')
+      // You might want to add some state management here to track the transaction
+    } catch (error) {
+      console.error('Failed to send transaction:', error)
+      // Handle the error appropriately, maybe set an error state
+    }
+  }, [direct, address, sendTransaction, setNetworkingKey, setIpAddress, setWsPort, setTcpPort, setRouters, openConnectModal])
 
   useEffect(() => {
     if (isConfirmed) {