From 513851a1cb2de693edde3f94e5bbfef1fb27c97e Mon Sep 17 00:00:00 2001
From: mfbz <mfbz@users.noreply.github.com>
Date: Tue, 19 Aug 2025 16:26:21 +0200
Subject: [PATCH 01/11] Implemented cross-vm-receive-nft hook and updated demo

---
 packages/demo/src/app.css                     |  63 +++++
 packages/demo/src/app.tsx                     |  10 +
 .../cards/cross-vm-receive-nft-card.tsx       | 147 ++++++++++++
 .../cards/cross-vm-spend-nft-card.tsx         | 151 ++++++++++++
 packages/demo/src/components/container.tsx    |   8 +
 packages/demo/src/components/navbar.tsx       |   7 +-
 packages/demo/src/components/sidebar.tsx      |   6 +
 packages/demo/src/constants.ts                |   6 +
 packages/react-sdk/src/hooks/index.ts         |   1 +
 .../src/hooks/useCrossVmReceiveNft.test.ts    | 167 ++++++++++++++
 .../src/hooks/useCrossVmReceiveNft.ts         | 215 ++++++++++++++++++
 11 files changed, 779 insertions(+), 2 deletions(-)
 create mode 100644 packages/demo/src/components/cards/cross-vm-receive-nft-card.tsx
 create mode 100644 packages/demo/src/components/cards/cross-vm-spend-nft-card.tsx
 create mode 100644 packages/react-sdk/src/hooks/useCrossVmReceiveNft.test.ts
 create mode 100644 packages/react-sdk/src/hooks/useCrossVmReceiveNft.ts

diff --git a/packages/demo/src/app.css b/packages/demo/src/app.css
index 9337aa2a2..d5e3bf9bd 100644
--- a/packages/demo/src/app.css
+++ b/packages/demo/src/app.css
@@ -25,3 +25,66 @@ body {
   height: 100vh;
   background-color: #ffffff;
 }
+
+/* Custom scrollbar styles - Light mode (default) */
+::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+::-webkit-scrollbar-track {
+  background: #ffffff;
+  border-radius: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #d1d5db;
+  border-radius: 8px;
+  border: 2px solid #ffffff;
+  transition: background-color 0.2s ease-in-out;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #9ca3af;
+}
+
+::-webkit-scrollbar-thumb:active {
+  background: #6b7280;
+}
+
+::-webkit-scrollbar-corner {
+  background: #ffffff;
+}
+
+/* Firefox scrollbar styles - Light mode (default) */
+html {
+  scrollbar-width: thin;
+  scrollbar-color: #d1d5db #ffffff;
+}
+
+/* Class-based dark mode support (theme toggle) */
+html.dark ::-webkit-scrollbar-track {
+  background: #374151 !important;
+}
+
+html.dark ::-webkit-scrollbar-thumb {
+  background: #6b7280 !important;
+  border: 2px solid #374151 !important;
+}
+
+html.dark ::-webkit-scrollbar-thumb:hover {
+  background: #9ca3af !important;
+}
+
+html.dark ::-webkit-scrollbar-thumb:active {
+  background: #d1d5db !important;
+}
+
+html.dark ::-webkit-scrollbar-corner {
+  background: #374151 !important;
+}
+
+/* Firefox class-based dark mode (theme toggle) */
+html.dark {
+  scrollbar-color: #6b7280 #374151 !important;
+}
diff --git a/packages/demo/src/app.tsx b/packages/demo/src/app.tsx
index 7efa037f4..3551c5520 100644
--- a/packages/demo/src/app.tsx
+++ b/packages/demo/src/app.tsx
@@ -5,10 +5,20 @@ import FlowProviderWrapper, {
 } from "./components/flow-provider-wrapper"
 import {Navbar} from "./components/navbar"
 import {Sidebar} from "./components/sidebar"
+import {useEffect} from "react"
 
 function AppContent() {
   const {darkMode} = useDarkMode()
 
+  // Apply dark class to document element for scrollbar styling
+  useEffect(() => {
+    if (darkMode) {
+      document.documentElement.classList.add('dark')
+    } else {
+      document.documentElement.classList.remove('dark')
+    }
+  }, [darkMode])
+
   return (
     <div
       className={`min-h-screen flex flex-col ${
diff --git a/packages/demo/src/components/cards/cross-vm-receive-nft-card.tsx b/packages/demo/src/components/cards/cross-vm-receive-nft-card.tsx
new file mode 100644
index 000000000..37c626bc1
--- /dev/null
+++ b/packages/demo/src/components/cards/cross-vm-receive-nft-card.tsx
@@ -0,0 +1,147 @@
+import {useCrossVmReceiveNft, useFlowConfig} from "@onflow/react-sdk"
+import {useState, useMemo} from "react"
+import {getContractAddress} from "../../constants"
+
+export function CrossVmReceiveNftCard() {
+  const config = useFlowConfig()
+  const currentNetwork = config.flowNetwork || "emulator"
+  const [nftIdentifier, setNftIdentifier] = useState("")
+  const [nftId, setNftId] = useState("1") // NFT ID to bridge
+
+  const {
+    receiveNft,
+    isPending,
+    data: transactionId,
+    error,
+  } = useCrossVmReceiveNft()
+
+  const isNetworkSupported = currentNetwork === "testnet"
+
+  const exampleNftData = useMemo(() => {
+    if (currentNetwork !== "testnet") return null
+
+    const exampleNftAddress = getContractAddress("ExampleNFT", currentNetwork)
+    return {
+      name: "Example NFT",
+      nftIdentifier: `A.${exampleNftAddress.replace("0x", "")}.ExampleNFT.NFT`,
+      nftId: "1",
+    }
+  }, [currentNetwork])
+
+  // Set default NFT identifier when network changes
+  useMemo(() => {
+    if (exampleNftData && !nftIdentifier) {
+      setNftIdentifier(exampleNftData.nftIdentifier)
+    }
+  }, [exampleNftData, nftIdentifier])
+
+  const handleReceiveNft = () => {
+    receiveNft({
+      nftIdentifier,
+      nftId,
+    })
+  }
+
+  if (!isNetworkSupported) {
+    return (
+      <div className="p-4 border border-gray-200 rounded-xl bg-white mb-8">
+        <h2 className="text-black mt-0 mb-6 text-xl font-bold">
+          useCrossVmReceiveNft
+        </h2>
+        <div className="p-4 bg-yellow-100 border border-yellow-200 rounded text-yellow-800">
+          <p className="m-0">
+            <strong>Network not supported:</strong> This feature is only
+            available on testnet.
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="p-4 border border-gray-200 rounded-xl bg-white mb-8">
+      <h2 className="text-black mt-0 mb-6 text-xl font-bold">
+        useCrossVmReceiveNft
+      </h2>
+      <div className="mb-6">
+        <label className="block mb-2 text-black">
+          <strong>Note:</strong> Example prefilled with ExampleNFT type
+          identifier
+        </label>
+        <label className="block mb-2 text-black font-medium">
+          NFT Identifier:
+        </label>
+        <input
+          type="text"
+          value={nftIdentifier}
+          onChange={e => setNftIdentifier(e.target.value)}
+          placeholder={
+            exampleNftData
+              ? exampleNftData.nftIdentifier
+              : "e.g., A.dfc20aee650fcbdf.ExampleNFT.NFT"
+          }
+          className="p-3 border-2 border-[#00EF8B] rounded-md text-sm text-black bg-white
+            outline-none transition-colors duration-200 ease-in-out w-full mb-4 font-mono"
+        />
+
+        <label className="block mb-2 text-black font-medium">
+          NFT ID (UInt256):
+        </label>
+        <input
+          type="text"
+          value={nftId}
+          onChange={e => setNftId(e.target.value)}
+          placeholder="e.g., 1"
+          className="p-3 border-2 border-[#00EF8B] rounded-md text-sm text-black bg-white
+            outline-none transition-colors duration-200 ease-in-out w-full mb-4 font-mono"
+        />
+
+        <button
+          onClick={handleReceiveNft}
+          className={`py-3 px-6 text-base font-semibold rounded-md transition-all duration-200
+            ease-in-out mr-4 ${
+            isPending || !nftIdentifier || !nftId
+                ? "bg-gray-300 text-gray-500 cursor-not-allowed"
+                : "bg-[#00EF8B] text-black cursor-pointer"
+            }`}
+          disabled={isPending || !nftIdentifier || !nftId}
+        >
+          {isPending ? "Receiving..." : "Receive NFT"}
+        </button>
+      </div>
+
+      <div className="p-4 bg-[#f8f9fa] rounded-md border border-[#00EF8B]">
+        <h4 className="text-black m-0 mb-4">Transaction Status:</h4>
+
+        {isPending && (
+          <p className="text-gray-500 m-0">Receiving NFT from EVM...</p>
+        )}
+
+        {error && (
+          <div className="p-4 bg-red-100 border border-red-200 rounded text-red-800 m-0">
+            <strong>Error:</strong> {error.message}
+          </div>
+        )}
+
+        {transactionId && !isPending && !error && (
+          <div className="p-4 bg-green-100 border border-green-200 rounded m-0">
+            <p className="text-green-800 m-0 mb-2">
+              <strong>NFT received successfully!</strong>
+            </p>
+            <p className="text-green-800 m-0 font-mono">
+              <strong>Transaction ID:</strong> {transactionId}
+            </p>
+          </div>
+        )}
+
+        {!transactionId && !isPending && !error && (
+          <div className="text-gray-500 m-0">
+            <p className="mb-2">
+              Click "Receive NFT" to bridge an NFT from EVM to Cadence
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/packages/demo/src/components/cards/cross-vm-spend-nft-card.tsx b/packages/demo/src/components/cards/cross-vm-spend-nft-card.tsx
new file mode 100644
index 000000000..41c630522
--- /dev/null
+++ b/packages/demo/src/components/cards/cross-vm-spend-nft-card.tsx
@@ -0,0 +1,151 @@
+import {useCrossVmSpendNft, useFlowConfig} from "@onflow/react-sdk"
+import {useState, useMemo} from "react"
+import {getContractAddress} from "../../constants"
+
+export function CrossVmSpendNftCard() {
+  const config = useFlowConfig()
+  const currentNetwork = config.flowNetwork || "emulator"
+  const [nftIdentifier, setNftIdentifier] = useState("")
+  const [nftIds, setNftIds] = useState("1") // NFT IDs to bridge (comma-separated)
+
+  const {
+    spendNft,
+    isPending,
+    data: transactionId,
+    error,
+  } = useCrossVmSpendNft()
+
+  const isNetworkSupported = currentNetwork === "testnet"
+
+  const exampleNftData = useMemo(() => {
+    if (currentNetwork !== "testnet") return null
+
+    const exampleNftAddress = getContractAddress("ExampleNFT", currentNetwork)
+    return {
+      name: "Example NFT",
+      nftIdentifier: `A.${exampleNftAddress.replace("0x", "")}.ExampleNFT.NFT`,
+      nftIds: "1",
+    }
+  }, [currentNetwork])
+
+  // Set default NFT identifier when network changes
+  useMemo(() => {
+    if (exampleNftData && !nftIdentifier) {
+      setNftIdentifier(exampleNftData.nftIdentifier)
+      setNftIds(exampleNftData.nftIds)
+    }
+  }, [exampleNftData, nftIdentifier])
+
+  const handleSpendNft = () => {
+    const nftIdArray = nftIds.split(",").map(id => id.trim())
+
+    spendNft({
+      nftIdentifier,
+      nftIds: nftIdArray,
+      calls: [], // No EVM calls, just bridging
+    })
+  }
+
+  if (!isNetworkSupported) {
+    return (
+      <div className="p-4 border border-gray-200 rounded-xl bg-white mb-8">
+        <h2 className="text-black mt-0 mb-6 text-xl font-bold">
+          useCrossVmSpendNft
+        </h2>
+        <div className="p-4 bg-yellow-100 border border-yellow-200 rounded text-yellow-800">
+          <p className="m-0">
+            <strong>Network not supported:</strong> This feature is only
+            available on testnet.
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="p-4 border border-gray-200 rounded-xl bg-white mb-8">
+      <h2 className="text-black mt-0 mb-6 text-xl font-bold">
+        useCrossVmSpendNft
+      </h2>
+      <div className="mb-6">
+        <label className="block mb-2 text-black">
+          <strong>Note:</strong> Bridge NFTs from Cadence to EVM
+        </label>
+        
+        <label className="block mb-2 text-black font-medium">
+          NFT Identifier:
+        </label>
+        <input
+          type="text"
+          value={nftIdentifier}
+          onChange={e => setNftIdentifier(e.target.value)}
+          placeholder={
+            exampleNftData
+              ? exampleNftData.nftIdentifier
+              : "e.g., A.012e4d204a60ac6f.ExampleNFT.NFT"
+          }
+          className="p-3 border-2 border-[#00EF8B] rounded-md text-sm text-black bg-white
+            outline-none transition-colors duration-200 ease-in-out w-full mb-4 font-mono"
+        />
+
+        <label className="block mb-2 text-black font-medium">
+          NFT IDs (UInt64, comma-separated):
+        </label>
+        <input
+          type="text"
+          value={nftIds}
+          onChange={e => setNftIds(e.target.value)}
+          placeholder="e.g., 1,2,3"
+          className="p-3 border-2 border-[#00EF8B] rounded-md text-sm text-black bg-white
+            outline-none transition-colors duration-200 ease-in-out w-full mb-4 font-mono"
+        />
+
+        <button
+          onClick={handleSpendNft}
+          className={`py-3 px-6 text-base font-semibold rounded-md transition-all duration-200
+            ease-in-out mr-4 ${
+            isPending || !nftIdentifier || !nftIds
+                ? "bg-gray-300 text-gray-500 cursor-not-allowed"
+                : "bg-[#00EF8B] text-black cursor-pointer"
+            }`}
+          disabled={isPending || !nftIdentifier || !nftIds}
+        >
+          {isPending ? "Spending..." : "Spend NFT"}
+        </button>
+      </div>
+
+      <div className="p-4 bg-[#f8f9fa] rounded-md border border-[#00EF8B]">
+        <h4 className="text-black m-0 mb-4">Transaction Status:</h4>
+
+        {isPending && (
+          <p className="text-gray-500 m-0">Bridging NFTs to EVM...</p>
+        )}
+
+        {error && (
+          <div className="p-4 bg-red-100 border border-red-200 rounded text-red-800 m-0">
+            <strong>Error:</strong> {error.message}
+          </div>
+        )}
+
+        {transactionId && !isPending && !error && (
+          <div className="p-4 bg-green-100 border border-green-200 rounded m-0">
+            <p className="text-green-800 m-0 mb-2">
+              <strong>NFTs spent successfully!</strong>
+            </p>
+            <p className="text-green-800 m-0 font-mono">
+              <strong>Transaction ID:</strong> {transactionId}
+            </p>
+          </div>
+        )}
+
+        {!transactionId && !isPending && !error && (
+          <div className="text-gray-500 m-0">
+            <p className="mb-2">
+              Click "Spend NFT" to bridge NFTs from Cadence to EVM
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/packages/demo/src/components/container.tsx b/packages/demo/src/components/container.tsx
index 57930e7b8..2c84b0a35 100644
--- a/packages/demo/src/components/container.tsx
+++ b/packages/demo/src/components/container.tsx
@@ -9,6 +9,8 @@ import {FlowQueryCard} from "./cards/flow-query-card"
 import {FlowQueryRawCard} from "./cards/flow-query-raw-card"
 import {FlowRevertibleRandomCard} from "./cards/flow-revertible-random-card"
 import {FlowTransactionStatusCard} from "./cards/flow-transaction-status-card"
+import {CrossVmReceiveNftCard} from "./cards/cross-vm-receive-nft-card"
+import {CrossVmSpendNftCard} from "./cards/cross-vm-spend-nft-card"
 import {KitConnectCard} from "./kits/kit-connect-card"
 import {KitTransactionButtonCard} from "./kits/kit-transaction-button-card"
 import {KitTransactionDialogCard} from "./kits/kit-transaction-dialog-card"
@@ -57,6 +59,12 @@ export function Container() {
           <div id="flow-transaction-status" className="scroll-mt-4">
             <FlowTransactionStatusCard />
           </div>
+          <div id="cross-vm-receive-nft" className="scroll-mt-4">
+            <CrossVmReceiveNftCard />
+          </div>
+          <div id="cross-vm-spend-nft" className="scroll-mt-4">
+            <CrossVmSpendNftCard />
+          </div>
         </div>
       </section>
 
diff --git a/packages/demo/src/components/navbar.tsx b/packages/demo/src/components/navbar.tsx
index bddb895c6..927ffe726 100644
--- a/packages/demo/src/components/navbar.tsx
+++ b/packages/demo/src/components/navbar.tsx
@@ -10,8 +10,11 @@ export function Navbar() {
   return (
     <nav
       className={`flex justify-between items-center p-4 sm:p-8 border-l border-r border-b
-        border-l-gray-200 border-r-gray-200 border-b-gray-200 rounded-b-xl mb-0 ${
-        darkMode ? "bg-gray-900" : "bg-white" }`}
+        rounded-b-xl mb-0 ${
+        darkMode 
+          ? "bg-gray-900 border-l-gray-700 border-r-gray-700 border-b-gray-700" 
+          : "bg-white border-l-gray-200 border-r-gray-200 border-b-gray-200" 
+        }`}
     >
       <div
         className={`text-2xl font-bold ${darkMode ? "text-white" : "text-black"}`}
diff --git a/packages/demo/src/components/sidebar.tsx b/packages/demo/src/components/sidebar.tsx
index ab2fb13a9..07eea5c05 100644
--- a/packages/demo/src/components/sidebar.tsx
+++ b/packages/demo/src/components/sidebar.tsx
@@ -22,6 +22,12 @@ const sidebarItems: SidebarItem[] = [
     label: "Transaction Status",
     category: "hooks",
   },
+  {id: "cross-vm-spend-nft", label: "Cross VM Spend NFT", category: "hooks"},
+  {
+    id: "cross-vm-receive-nft",
+    label: "Cross VM Receive NFT",
+    category: "hooks",
+  },
 
   // Components section
   {id: "kit-connect", label: "Connect Kit", category: "components"},
diff --git a/packages/demo/src/constants.ts b/packages/demo/src/constants.ts
index bed6423f3..e04105c8a 100644
--- a/packages/demo/src/constants.ts
+++ b/packages/demo/src/constants.ts
@@ -21,6 +21,12 @@ export const CONTRACT_ADDRESSES: Record<string, Record<any, string>> = {
     testnet: "0x7e60df042a9c0868",
     mainnet: "0x1654653399040a61",
   },
+  ExampleNFT: {
+    local: "0xf8d6e0586b0a20c7",
+    emulator: "0xf8d6e0586b0a20c7",
+    testnet: "0x012e4d204a60ac6f",
+    mainnet: "0x1d7e57aa55817448",
+  },
 }
 
 // Helper function to get contract address for current network
diff --git a/packages/react-sdk/src/hooks/index.ts b/packages/react-sdk/src/hooks/index.ts
index 7c0b9b8d3..1a3ed3f6d 100644
--- a/packages/react-sdk/src/hooks/index.ts
+++ b/packages/react-sdk/src/hooks/index.ts
@@ -14,4 +14,5 @@ export {useFlowTransaction} from "./useFlowTransaction"
 export {useFlowTransactionStatus} from "./useFlowTransactionStatus"
 export {useCrossVmSpendNft} from "./useCrossVmSpendNft"
 export {useCrossVmSpendToken} from "./useCrossVmSpendToken"
+export {useCrossVmReceiveNft} from "./useCrossVmReceiveNft"
 export {useCrossVmTransactionStatus} from "./useCrossVmTransactionStatus"
diff --git a/packages/react-sdk/src/hooks/useCrossVmReceiveNft.test.ts b/packages/react-sdk/src/hooks/useCrossVmReceiveNft.test.ts
new file mode 100644
index 000000000..bb8ac26cb
--- /dev/null
+++ b/packages/react-sdk/src/hooks/useCrossVmReceiveNft.test.ts
@@ -0,0 +1,167 @@
+import {renderHook, act, waitFor} from "@testing-library/react"
+import * as fcl from "@onflow/fcl"
+import {FlowProvider} from "../provider"
+import {
+  getCrossVmReceiveNftTransaction,
+  useCrossVmReceiveNft,
+} from "./useCrossVmReceiveNft"
+import {useFlowChainId} from "./useFlowChainId"
+import {createMockFclInstance, MockFclInstance} from "../__mocks__/flow-client"
+
+jest.mock("@onflow/fcl", () => require("../__mocks__/fcl").default)
+jest.mock("./useFlowChainId", () => ({
+  useFlowChainId: jest.fn(),
+}))
+
+describe("useCrossVmReceiveNft", () => {
+  let mockFcl: MockFclInstance
+
+  const mockTxId = "0x123"
+  const mockTxResult = {
+    events: [
+      {
+        type: "TransactionExecuted",
+        data: {
+          hash: ["1", "2", "3"],
+          errorCode: "0",
+          errorMessage: "",
+        },
+      },
+    ],
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockFcl = createMockFclInstance()
+    jest.mocked(fcl.createFlowClient).mockReturnValue(mockFcl.mockFclInstance)
+    jest.mocked(useFlowChainId).mockReturnValue({
+      data: "testnet",
+      isLoading: false,
+    } as any)
+  })
+
+  describe("getCrossVmReceiveNftTransaction", () => {
+    it("should return correct cadence for mainnet", () => {
+      const result = getCrossVmReceiveNftTransaction("mainnet")
+      expect(result).toContain("import EVM from 0xe467b9dd11fa00df")
+    })
+
+    it("should return correct cadence for testnet", () => {
+      const result = getCrossVmReceiveNftTransaction("testnet")
+      expect(result).toContain("import EVM from 0x8c5303eaa26202d6")
+    })
+
+    it("should throw error for unsupported chain", () => {
+      expect(() => getCrossVmReceiveNftTransaction("unsupported")).toThrow(
+        "Unsupported chain: unsupported"
+      )
+    })
+  })
+
+  describe("useCrossVmReceiveNft", () => {
+    test("should handle successful transaction", async () => {
+      jest.mocked(mockFcl.mockFclInstance.mutate).mockResolvedValue(mockTxId)
+      jest.mocked(mockFcl.mockFclInstance.tx).mockReturnValue({
+        onceExecuted: jest.fn().mockResolvedValue(mockTxResult),
+      } as any)
+
+      let result: any
+      let rerender: any
+      await act(async () => {
+        ;({result, rerender} = renderHook(useCrossVmReceiveNft, {
+          wrapper: FlowProvider,
+        }))
+      })
+
+      await act(async () => {
+        await result.current.receiveNft({
+          nftIdentifier: "A.dfc20aee650fcbdf.ExampleNFT.NFT",
+          nftId: "123",
+        })
+        rerender()
+      })
+
+      await waitFor(() => result.current.isPending === false)
+
+      expect(result.current.isError).toBe(false)
+      expect(result.current.data).toBe(mockTxId)
+    })
+
+    it("should handle missing chain ID", async () => {
+      ;(useFlowChainId as jest.Mock).mockReturnValue({
+        data: null,
+        isLoading: false,
+      })
+
+      let hookResult: any
+
+      await act(async () => {
+        const {result} = renderHook(() => useCrossVmReceiveNft(), {
+          wrapper: FlowProvider,
+        })
+        hookResult = result
+      })
+
+      await act(async () => {
+        await hookResult.current.receiveNft({
+          nftIdentifier: "A.dfc20aee650fcbdf.ExampleNFT.NFT",
+          nftId: "123",
+        })
+      })
+
+      await waitFor(() => expect(hookResult.current.isError).toBe(true))
+      expect(hookResult.current.error?.message).toBe("No current chain found")
+    })
+
+    it("should handle loading chain ID", async () => {
+      ;(useFlowChainId as jest.Mock).mockReturnValue({
+        data: null,
+        isLoading: true,
+      })
+
+      let hookResult: any
+
+      await act(async () => {
+        const {result} = renderHook(() => useCrossVmReceiveNft(), {
+          wrapper: FlowProvider,
+        })
+        hookResult = result
+      })
+
+      await act(async () => {
+        await hookResult.current.receiveNft({
+          nftIdentifier: "A.dfc20aee650fcbdf.ExampleNFT.NFT",
+          nftId: "123",
+        })
+      })
+
+      await waitFor(() => expect(hookResult.current.isError).toBe(true))
+      expect(hookResult.current.error?.message).toBe("No current chain found")
+    })
+
+    it("should handle mutation error", async () => {
+      jest
+        .mocked(mockFcl.mockFclInstance.mutate)
+        .mockRejectedValue(new Error("Mutation failed"))
+
+      let hookResult: any
+
+      await act(async () => {
+        const {result} = renderHook(() => useCrossVmReceiveNft(), {
+          wrapper: FlowProvider,
+        })
+        hookResult = result
+      })
+
+      await act(async () => {
+        await hookResult.current.receiveNft({
+          nftIdentifier: "A.dfc20aee650fcbdf.ExampleNFT.NFT",
+          nftId: "123",
+        })
+      })
+
+      await waitFor(() => expect(hookResult.current.isError).toBe(true))
+      expect(hookResult.current.error?.message).toBe("Mutation failed")
+    })
+  })
+})
diff --git a/packages/react-sdk/src/hooks/useCrossVmReceiveNft.ts b/packages/react-sdk/src/hooks/useCrossVmReceiveNft.ts
new file mode 100644
index 000000000..597a1897f
--- /dev/null
+++ b/packages/react-sdk/src/hooks/useCrossVmReceiveNft.ts
@@ -0,0 +1,215 @@
+import {
+  UseMutateAsyncFunction,
+  UseMutateFunction,
+  useMutation,
+  UseMutationOptions,
+  UseMutationResult,
+} from "@tanstack/react-query"
+import {useFlowChainId} from "./useFlowChainId"
+import {useFlowQueryClient} from "../provider/FlowQueryClient"
+import {CONTRACT_ADDRESSES} from "../constants"
+import {useFlowClient} from "./useFlowClient"
+
+export interface UseCrossVmReceiveNftTxArgs {
+  mutation?: Omit<
+    UseMutationOptions<string, Error, UseCrossVmReceiveNftTxMutateArgs>,
+    "mutationFn"
+  >
+  flowClient?: ReturnType<typeof useFlowClient>
+}
+
+export interface UseCrossVmReceiveNftTxMutateArgs {
+  nftIdentifier: string
+  nftId: string
+}
+
+export interface UseCrossVmReceiveNftTxResult
+  extends Omit<UseMutationResult<string, Error>, "mutate" | "mutateAsync"> {
+  receiveNft: UseMutateFunction<string, Error, UseCrossVmReceiveNftTxMutateArgs>
+  receiveNftAsync: UseMutateAsyncFunction<
+    string,
+    Error,
+    UseCrossVmReceiveNftTxMutateArgs
+  >
+}
+
+// Takes a chain id and returns the cadence tx with addresses set
+export const getCrossVmReceiveNftTransaction = (chainId: string) => {
+  const contractAddresses =
+    CONTRACT_ADDRESSES[chainId as keyof typeof CONTRACT_ADDRESSES]
+  if (!contractAddresses) {
+    throw new Error(`Unsupported chain: ${chainId}`)
+  }
+
+  return `
+import FungibleToken from ${contractAddresses.FungibleToken}
+import NonFungibleToken from ${contractAddresses.NonFungibleToken}
+import ViewResolver from ${contractAddresses.ViewResolver}
+import MetadataViews from ${contractAddresses.MetadataViews}
+import FlowToken from ${contractAddresses.FlowToken}
+
+import ScopedFTProviders from ${contractAddresses.ScopedFTProviders}
+
+import EVM from ${contractAddresses.EVM}
+
+import FlowEVMBridge from ${contractAddresses.FlowEVMBridge}
+import FlowEVMBridgeConfig from ${contractAddresses.FlowEVMBridgeConfig}
+import FlowEVMBridgeUtils from ${contractAddresses.FlowEVMBridgeUtils}
+
+/// Bridges an NFT from the signer's COA in FlowEVM to their collection in Cadence
+///
+/// @param nftIdentifier: The Cadence type identifier of the NFT to bridge - e.g. nft.getType().identifier
+/// @param id: The EVM NFT ID to bridge to Cadence
+///
+transaction(nftIdentifier: String, id: UInt256) {
+    let nftType: Type
+    let collection: &{NonFungibleToken.Collection}
+    let scopedProvider: @ScopedFTProviders.ScopedFTProvider
+    let coa: auth(EVM.Bridge) &EVM.CadenceOwnedAccount
+    
+    prepare(signer: auth(BorrowValue, CopyValue, IssueStorageCapabilityController, PublishCapability, SaveValue, UnpublishCapability) &Account) {
+        /* --- Reference the signer's CadenceOwnedAccount --- */
+        //
+        // Borrow a reference to the signer's COA
+        self.coa = signer.storage.borrow<auth(EVM.Bridge) &EVM.CadenceOwnedAccount>(from: /storage/evm)
+            ?? panic("Could not borrow COA signer's account at path /storage/evm")
+
+        /* --- Construct the NFT type --- */
+        //
+        // Construct the NFT type from the provided identifier
+        self.nftType = CompositeType(nftIdentifier)
+            ?? panic("Could not construct NFT type from identifier: ".concat(nftIdentifier))
+        // Parse the NFT identifier into its components
+        let nftContractAddress = FlowEVMBridgeUtils.getContractAddress(fromType: self.nftType)
+            ?? panic("Could not get contract address from identifier: ".concat(nftIdentifier))
+        let nftContractName = FlowEVMBridgeUtils.getContractName(fromType: self.nftType)
+            ?? panic("Could not get contract name from identifier: ".concat(nftIdentifier))
+
+        /* --- Configure the NFT Collection --- */
+        //
+        // Borrow a reference to the NFT collection, configuring if necessary
+        let viewResolver = getAccount(nftContractAddress).contracts.borrow<&{ViewResolver}>(name: nftContractName)
+            ?? panic("Could not borrow ViewResolver from NFT contract with name "
+                .concat(nftContractName).concat(" and address ")
+                .concat(nftContractAddress.toString()))
+        let collectionData = viewResolver.resolveContractView(
+                resourceType: self.nftType,
+                viewType: Type<MetadataViews.NFTCollectionData>()
+            ) as! MetadataViews.NFTCollectionData?
+            ?? panic("Could not resolve NFTCollectionData view for NFT type ".concat(self.nftType.identifier))
+        
+        // Configure collection if it doesn't exist
+        if signer.storage.borrow<&{NonFungibleToken.Collection}>(from: collectionData.storagePath) == nil {
+            signer.storage.save(<-collectionData.createEmptyCollection(), to: collectionData.storagePath)
+
+            signer.capabilities.unpublish(collectionData.publicPath)
+
+            let collectionCap = signer.capabilities.storage.issue<&{NonFungibleToken.Collection}>(collectionData.storagePath)
+            signer.capabilities.publish(collectionCap, at: collectionData.publicPath)
+        }
+        
+        self.collection = signer.storage.borrow<&{NonFungibleToken.Collection}>(from: collectionData.storagePath)
+            ?? panic("Could not borrow a NonFungibleToken Collection from the signer's storage path "
+                .concat(collectionData.storagePath.toString()))
+
+        /* --- Configure a ScopedFTProvider --- */
+        //
+        // Set a cap on the withdrawable bridge fee
+        var approxFee = FlowEVMBridgeUtils.calculateBridgeFee(
+                bytes: 400_000 // 400 kB as upper bound on movable storage used in a single transaction
+            )
+
+        // Issue and store bridge-dedicated Provider Capability in storage if necessary
+        if signer.storage.type(at: FlowEVMBridgeConfig.providerCapabilityStoragePath) == nil {
+            let providerCap = signer.capabilities.storage.issue<auth(FungibleToken.Withdraw) &{FungibleToken.Provider}>(
+                /storage/flowTokenVault
+            )
+            signer.storage.save(providerCap, to: FlowEVMBridgeConfig.providerCapabilityStoragePath)
+        }
+        // Copy the stored Provider capability and create a ScopedFTProvider
+        let providerCapCopy = signer.storage.copy<Capability<auth(FungibleToken.Withdraw) &{FungibleToken.Provider}>>(
+                from: FlowEVMBridgeConfig.providerCapabilityStoragePath
+            ) ?? panic("Invalid FungibleToken Provider Capability found in storage at path "
+                .concat(FlowEVMBridgeConfig.providerCapabilityStoragePath.toString()))
+        let providerFilter = ScopedFTProviders.AllowanceFilter(approxFee)
+        self.scopedProvider <- ScopedFTProviders.createScopedFTProvider(
+                provider: providerCapCopy,
+                filters: [ providerFilter ],
+                expiration: getCurrentBlock().timestamp + 1.0
+            )
+    }
+
+    execute {
+        // Execute the bridge request
+        let nft: @{NonFungibleToken.NFT} <- self.coa.withdrawNFT(
+            type: self.nftType,
+            id: id,
+            feeProvider: &self.scopedProvider as auth(FungibleToken.Withdraw) &{FungibleToken.Provider}
+        )
+        // Ensure the bridged NFT is the correct type
+        assert(
+            nft.getType() == self.nftType,
+            message: "Bridged NFT type mismatch - requested: ".concat(self.nftType.identifier)
+                .concat(", received: ").concat(nft.getType().identifier)
+        )
+        // Deposit the bridged NFT into the signer's collection
+        self.collection.deposit(token: <-nft)
+        // Destroy the ScopedFTProvider
+        destroy self.scopedProvider
+    }
+}
+`
+}
+
+/**
+ * Hook to receive a cross-VM NFT transaction from EVM to Cadence. This function will
+ * withdraw an NFT from the signer's COA in EVM and deposit it into their Cadence collection.
+ *
+ * @returns The mutation object used to send the transaction.
+ */
+export function useCrossVmReceiveNft({
+  mutation: mutationOptions = {},
+  flowClient,
+}: UseCrossVmReceiveNftTxArgs = {}): UseCrossVmReceiveNftTxResult {
+  const chainId = useFlowChainId()
+  const cadenceTx = chainId.data
+    ? getCrossVmReceiveNftTransaction(chainId.data)
+    : null
+
+  const queryClient = useFlowQueryClient()
+  const fcl = useFlowClient({flowClient})
+  const mutation = useMutation(
+    {
+      mutationFn: async ({
+        nftIdentifier,
+        nftId,
+      }: UseCrossVmReceiveNftTxMutateArgs) => {
+        if (!cadenceTx) {
+          throw new Error("No current chain found")
+        }
+
+        const txId = await fcl.mutate({
+          cadence: cadenceTx,
+          args: (arg, t) => [
+            arg(nftIdentifier, t.String),
+            arg(nftId, t.UInt256),
+          ],
+          limit: 9999,
+        })
+
+        return txId
+      },
+      retry: false,
+      ...mutationOptions,
+    },
+    queryClient
+  )
+
+  const {mutate: receiveNft, mutateAsync: receiveNftAsync, ...rest} = mutation
+
+  return {
+    receiveNft,
+    receiveNftAsync,
+    ...rest,
+  }
+}

From 3e9f6cda6aafddb1c4fc2295ecb8a88190945374 Mon Sep 17 00:00:00 2001
From: mfbz <mfbz@users.noreply.github.com>
Date: Tue, 19 Aug 2025 21:45:04 +0200
Subject: [PATCH 02/11] Added changeset

---
 .changeset/mighty-rocks-smell.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/mighty-rocks-smell.md

diff --git a/.changeset/mighty-rocks-smell.md b/.changeset/mighty-rocks-smell.md
new file mode 100644
index 000000000..cdd01e81d
--- /dev/null
+++ b/.changeset/mighty-rocks-smell.md
@@ -0,0 +1,6 @@
+---
+"@onflow/react-sdk": minor
+"@onflow/demo": minor
+---
+
+Added hook to move NFT from evm to cadence

From e79e7ca5a5b54cdadfb212672b798b6ade842c75 Mon Sep 17 00:00:00 2001
From: mfbz <mfbz@users.noreply.github.com>
Date: Tue, 19 Aug 2025 22:15:16 +0200
Subject: [PATCH 03/11] Fixed prettier check

---
 packages/demo/src/app.tsx                             |  4 ++--
 .../src/components/cards/cross-vm-spend-nft-card.tsx  | 11 +++--------
 packages/demo/src/components/navbar.tsx               |  6 +++---
 3 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/packages/demo/src/app.tsx b/packages/demo/src/app.tsx
index 3551c5520..1a71f2190 100644
--- a/packages/demo/src/app.tsx
+++ b/packages/demo/src/app.tsx
@@ -13,9 +13,9 @@ function AppContent() {
   // Apply dark class to document element for scrollbar styling
   useEffect(() => {
     if (darkMode) {
-      document.documentElement.classList.add('dark')
+      document.documentElement.classList.add("dark")
     } else {
-      document.documentElement.classList.remove('dark')
+      document.documentElement.classList.remove("dark")
     }
   }, [darkMode])
 
diff --git a/packages/demo/src/components/cards/cross-vm-spend-nft-card.tsx b/packages/demo/src/components/cards/cross-vm-spend-nft-card.tsx
index 41c630522..ba6132be2 100644
--- a/packages/demo/src/components/cards/cross-vm-spend-nft-card.tsx
+++ b/packages/demo/src/components/cards/cross-vm-spend-nft-card.tsx
@@ -8,12 +8,7 @@ export function CrossVmSpendNftCard() {
   const [nftIdentifier, setNftIdentifier] = useState("")
   const [nftIds, setNftIds] = useState("1") // NFT IDs to bridge (comma-separated)
 
-  const {
-    spendNft,
-    isPending,
-    data: transactionId,
-    error,
-  } = useCrossVmSpendNft()
+  const {spendNft, isPending, data: transactionId, error} = useCrossVmSpendNft()
 
   const isNetworkSupported = currentNetwork === "testnet"
 
@@ -71,7 +66,7 @@ export function CrossVmSpendNftCard() {
         <label className="block mb-2 text-black">
           <strong>Note:</strong> Bridge NFTs from Cadence to EVM
         </label>
-        
+
         <label className="block mb-2 text-black font-medium">
           NFT Identifier:
         </label>
@@ -148,4 +143,4 @@ export function CrossVmSpendNftCard() {
       </div>
     </div>
   )
-}
\ No newline at end of file
+}
diff --git a/packages/demo/src/components/navbar.tsx b/packages/demo/src/components/navbar.tsx
index 927ffe726..3e858db40 100644
--- a/packages/demo/src/components/navbar.tsx
+++ b/packages/demo/src/components/navbar.tsx
@@ -11,9 +11,9 @@ export function Navbar() {
     <nav
       className={`flex justify-between items-center p-4 sm:p-8 border-l border-r border-b
         rounded-b-xl mb-0 ${
-        darkMode 
-          ? "bg-gray-900 border-l-gray-700 border-r-gray-700 border-b-gray-700" 
-          : "bg-white border-l-gray-200 border-r-gray-200 border-b-gray-200" 
+        darkMode
+            ? "bg-gray-900 border-l-gray-700 border-r-gray-700 border-b-gray-700"
+            : "bg-white border-l-gray-200 border-r-gray-200 border-b-gray-200"
         }`}
     >
       <div

From bd5b2e796866a4270f083620063da4a92c45283b Mon Sep 17 00:00:00 2001
From: mfbz <mfbz@users.noreply.github.com>
Date: Thu, 2 Oct 2025 14:56:25 +0200
Subject: [PATCH 04/11] Fixed demo after master merge conflict

---
 packages/demo/src/app.css | 65 +--------------------------------------
 packages/demo/src/app.tsx | 19 ++++--------
 2 files changed, 7 insertions(+), 77 deletions(-)

diff --git a/packages/demo/src/app.css b/packages/demo/src/app.css
index 5d58db35b..16f301e9e 100644
--- a/packages/demo/src/app.css
+++ b/packages/demo/src/app.css
@@ -106,67 +106,4 @@
 
 .dark ::selection {
   @apply bg-flow-primary/30 text-flow-100;
-}
-
-/* Custom scrollbar styles - Light mode (default) */
-::-webkit-scrollbar {
-  width: 12px;
-  height: 12px;
-}
-
-::-webkit-scrollbar-track {
-  background: #ffffff;
-  border-radius: 8px;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #d1d5db;
-  border-radius: 8px;
-  border: 2px solid #ffffff;
-  transition: background-color 0.2s ease-in-out;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: #9ca3af;
-}
-
-::-webkit-scrollbar-thumb:active {
-  background: #6b7280;
-}
-
-::-webkit-scrollbar-corner {
-  background: #ffffff;
-}
-
-/* Firefox scrollbar styles - Light mode (default) */
-html {
-  scrollbar-width: thin;
-  scrollbar-color: #d1d5db #ffffff;
-}
-
-/* Class-based dark mode support (theme toggle) */
-html.dark ::-webkit-scrollbar-track {
-  background: #374151 !important;
-}
-
-html.dark ::-webkit-scrollbar-thumb {
-  background: #6b7280 !important;
-  border: 2px solid #374151 !important;
-}
-
-html.dark ::-webkit-scrollbar-thumb:hover {
-  background: #9ca3af !important;
-}
-
-html.dark ::-webkit-scrollbar-thumb:active {
-  background: #d1d5db !important;
-}
-
-html.dark ::-webkit-scrollbar-corner {
-  background: #374151 !important;
-}
-
-/* Firefox class-based dark mode (theme toggle) */
-html.dark {
-  scrollbar-color: #6b7280 #374151 !important;
-}
+}
\ No newline at end of file
diff --git a/packages/demo/src/app.tsx b/packages/demo/src/app.tsx
index 58d17839b..b3d24089b 100644
--- a/packages/demo/src/app.tsx
+++ b/packages/demo/src/app.tsx
@@ -1,10 +1,12 @@
-import {useEffect, useState} from "react"
 import "./app.css"
-import {ContentSection} from "./components/content-section"
+import FlowProviderWrapper, {
+  useDarkMode,
+} from "./components/flow-provider-wrapper"
+import {Header} from "./components/header"
 import {ContentSidebar} from "./components/content-sidebar"
-import FlowProviderWrapper from "./components/flow-provider-wrapper"
+import {ContentSection} from "./components/content-section"
 import {Footer} from "./components/footer"
-import {Header} from "./components/header"
+import {useState} from "react"
 
 function AppContent() {
   // Move dark mode state outside FlowProvider to prevent sidebar reset on network change
@@ -26,15 +28,6 @@ function AppContent() {
     })
   }
 
-  // Apply dark class to document element for scrollbar styling
-  useEffect(() => {
-    if (darkMode) {
-      document.documentElement.classList.add("dark")
-    } else {
-      document.documentElement.classList.remove("dark")
-    }
-  }, [darkMode])
-
   return (
     <div
       className={`font-flow transition-colors duration-200 ${

From 622cf1c1ce5bcbc3685d53ebdb87ca27aa1e92de Mon Sep 17 00:00:00 2001
From: mfbz <mfbz@users.noreply.github.com>
Date: Thu, 2 Oct 2025 14:57:24 +0200
Subject: [PATCH 05/11] Minor spacing fix

---
 packages/demo/src/app.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/demo/src/app.css b/packages/demo/src/app.css
index 16f301e9e..83bb39aa1 100644
--- a/packages/demo/src/app.css
+++ b/packages/demo/src/app.css
@@ -106,4 +106,4 @@
 
 .dark ::selection {
   @apply bg-flow-primary/30 text-flow-100;
-}
\ No newline at end of file
+}

From aa274056f7a218d9272451f146061221636be87f Mon Sep 17 00:00:00 2001
From: mfbz <mfbz@users.noreply.github.com>
Date: Thu, 2 Oct 2025 16:23:30 +0200
Subject: [PATCH 06/11] Renamed hook

---
 packages/react-sdk/src/hooks/index.ts         |  2 +-
 ...ft.test.ts => useBridgeNftFromEvm.test.ts} | 34 ++++++++--------
 ...VmReceiveNft.ts => useBridgeNftFromEvm.ts} | 39 ++++++++++++-------
 3 files changed, 42 insertions(+), 33 deletions(-)
 rename packages/react-sdk/src/hooks/{useCrossVmReceiveNft.test.ts => useBridgeNftFromEvm.test.ts} (81%)
 rename packages/react-sdk/src/hooks/{useCrossVmReceiveNft.ts => useBridgeNftFromEvm.ts} (89%)

diff --git a/packages/react-sdk/src/hooks/index.ts b/packages/react-sdk/src/hooks/index.ts
index 9438e05c2..ab98a1f14 100644
--- a/packages/react-sdk/src/hooks/index.ts
+++ b/packages/react-sdk/src/hooks/index.ts
@@ -15,5 +15,5 @@ export {useFlowTransaction} from "./useFlowTransaction"
 export {useFlowTransactionStatus} from "./useFlowTransactionStatus"
 export {useCrossVmSpendNft} from "./useCrossVmSpendNft"
 export {useCrossVmSpendToken} from "./useCrossVmSpendToken"
-export {useCrossVmReceiveNft} from "./useCrossVmReceiveNft"
+export {useBridgeNftFromEvm} from "./useBridgeNftFromEvm"
 export {useCrossVmTransactionStatus} from "./useCrossVmTransactionStatus"
diff --git a/packages/react-sdk/src/hooks/useCrossVmReceiveNft.test.ts b/packages/react-sdk/src/hooks/useBridgeNftFromEvm.test.ts
similarity index 81%
rename from packages/react-sdk/src/hooks/useCrossVmReceiveNft.test.ts
rename to packages/react-sdk/src/hooks/useBridgeNftFromEvm.test.ts
index bb8ac26cb..61355b5bf 100644
--- a/packages/react-sdk/src/hooks/useCrossVmReceiveNft.test.ts
+++ b/packages/react-sdk/src/hooks/useBridgeNftFromEvm.test.ts
@@ -2,9 +2,9 @@ import {renderHook, act, waitFor} from "@testing-library/react"
 import * as fcl from "@onflow/fcl"
 import {FlowProvider} from "../provider"
 import {
-  getCrossVmReceiveNftTransaction,
-  useCrossVmReceiveNft,
-} from "./useCrossVmReceiveNft"
+  getBridgeNftFromEvmTransaction,
+  useBridgeNftFromEvm,
+} from "./useBridgeNftFromEvm"
 import {useFlowChainId} from "./useFlowChainId"
 import {createMockFclInstance, MockFclInstance} from "../__mocks__/flow-client"
 
@@ -13,7 +13,7 @@ jest.mock("./useFlowChainId", () => ({
   useFlowChainId: jest.fn(),
 }))
 
-describe("useCrossVmReceiveNft", () => {
+describe("useBridgeNftFromEvm", () => {
   let mockFcl: MockFclInstance
 
   const mockTxId = "0x123"
@@ -40,25 +40,25 @@ describe("useCrossVmReceiveNft", () => {
     } as any)
   })
 
-  describe("getCrossVmReceiveNftTransaction", () => {
+  describe("getBridgeNftFromEvmTransaction", () => {
     it("should return correct cadence for mainnet", () => {
-      const result = getCrossVmReceiveNftTransaction("mainnet")
+      const result = getBridgeNftFromEvmTransaction("mainnet")
       expect(result).toContain("import EVM from 0xe467b9dd11fa00df")
     })
 
     it("should return correct cadence for testnet", () => {
-      const result = getCrossVmReceiveNftTransaction("testnet")
+      const result = getBridgeNftFromEvmTransaction("testnet")
       expect(result).toContain("import EVM from 0x8c5303eaa26202d6")
     })
 
     it("should throw error for unsupported chain", () => {
-      expect(() => getCrossVmReceiveNftTransaction("unsupported")).toThrow(
+      expect(() => getBridgeNftFromEvmTransaction("unsupported")).toThrow(
         "Unsupported chain: unsupported"
       )
     })
   })
 
-  describe("useCrossVmReceiveNft", () => {
+  describe("useBridgeNftFromEvmTx", () => {
     test("should handle successful transaction", async () => {
       jest.mocked(mockFcl.mockFclInstance.mutate).mockResolvedValue(mockTxId)
       jest.mocked(mockFcl.mockFclInstance.tx).mockReturnValue({
@@ -68,13 +68,13 @@ describe("useCrossVmReceiveNft", () => {
       let result: any
       let rerender: any
       await act(async () => {
-        ;({result, rerender} = renderHook(useCrossVmReceiveNft, {
+        ;({result, rerender} = renderHook(useBridgeNftFromEvm, {
           wrapper: FlowProvider,
         }))
       })
 
       await act(async () => {
-        await result.current.receiveNft({
+        await result.current.bridgeNftFromEvm({
           nftIdentifier: "A.dfc20aee650fcbdf.ExampleNFT.NFT",
           nftId: "123",
         })
@@ -96,14 +96,14 @@ describe("useCrossVmReceiveNft", () => {
       let hookResult: any
 
       await act(async () => {
-        const {result} = renderHook(() => useCrossVmReceiveNft(), {
+        const {result} = renderHook(() => useBridgeNftFromEvm(), {
           wrapper: FlowProvider,
         })
         hookResult = result
       })
 
       await act(async () => {
-        await hookResult.current.receiveNft({
+        await hookResult.current.bridgeNftFromEvm({
           nftIdentifier: "A.dfc20aee650fcbdf.ExampleNFT.NFT",
           nftId: "123",
         })
@@ -122,14 +122,14 @@ describe("useCrossVmReceiveNft", () => {
       let hookResult: any
 
       await act(async () => {
-        const {result} = renderHook(() => useCrossVmReceiveNft(), {
+        const {result} = renderHook(() => useBridgeNftFromEvm(), {
           wrapper: FlowProvider,
         })
         hookResult = result
       })
 
       await act(async () => {
-        await hookResult.current.receiveNft({
+        await hookResult.current.bridgeNftFromEvm({
           nftIdentifier: "A.dfc20aee650fcbdf.ExampleNFT.NFT",
           nftId: "123",
         })
@@ -147,14 +147,14 @@ describe("useCrossVmReceiveNft", () => {
       let hookResult: any
 
       await act(async () => {
-        const {result} = renderHook(() => useCrossVmReceiveNft(), {
+        const {result} = renderHook(() => useBridgeNftFromEvm(), {
           wrapper: FlowProvider,
         })
         hookResult = result
       })
 
       await act(async () => {
-        await hookResult.current.receiveNft({
+        await hookResult.current.bridgeNftFromEvm({
           nftIdentifier: "A.dfc20aee650fcbdf.ExampleNFT.NFT",
           nftId: "123",
         })
diff --git a/packages/react-sdk/src/hooks/useCrossVmReceiveNft.ts b/packages/react-sdk/src/hooks/useBridgeNftFromEvm.ts
similarity index 89%
rename from packages/react-sdk/src/hooks/useCrossVmReceiveNft.ts
rename to packages/react-sdk/src/hooks/useBridgeNftFromEvm.ts
index 597a1897f..e81cbb477 100644
--- a/packages/react-sdk/src/hooks/useCrossVmReceiveNft.ts
+++ b/packages/react-sdk/src/hooks/useBridgeNftFromEvm.ts
@@ -10,31 +10,36 @@ import {useFlowQueryClient} from "../provider/FlowQueryClient"
 import {CONTRACT_ADDRESSES} from "../constants"
 import {useFlowClient} from "./useFlowClient"
 
-export interface UseCrossVmReceiveNftTxArgs {
+export interface UseBridgeNftFromEvmTxArgs {
   mutation?: Omit<
-    UseMutationOptions<string, Error, UseCrossVmReceiveNftTxMutateArgs>,
+    UseMutationOptions<string, Error, UseBridgeNftFromEvmTxMutateArgs>,
     "mutationFn"
   >
   flowClient?: ReturnType<typeof useFlowClient>
 }
 
-export interface UseCrossVmReceiveNftTxMutateArgs {
+export interface UseBridgeNftFromEvmTxMutateArgs {
   nftIdentifier: string
+  /** The EVM NFT ID to bridge to Cadence as a string representation of a UInt256 (e.g., "123", "0x7b") */
   nftId: string
 }
 
-export interface UseCrossVmReceiveNftTxResult
+export interface UseBridgeNftFromEvmTxResult
   extends Omit<UseMutationResult<string, Error>, "mutate" | "mutateAsync"> {
-  receiveNft: UseMutateFunction<string, Error, UseCrossVmReceiveNftTxMutateArgs>
-  receiveNftAsync: UseMutateAsyncFunction<
+  bridgeNftFromEvm: UseMutateFunction<
     string,
     Error,
-    UseCrossVmReceiveNftTxMutateArgs
+    UseBridgeNftFromEvmTxMutateArgs
+  >
+  bridgeNftFromEvmAsync: UseMutateAsyncFunction<
+    string,
+    Error,
+    UseBridgeNftFromEvmTxMutateArgs
   >
 }
 
 // Takes a chain id and returns the cadence tx with addresses set
-export const getCrossVmReceiveNftTransaction = (chainId: string) => {
+export const getBridgeNftFromEvmTransaction = (chainId: string) => {
   const contractAddresses =
     CONTRACT_ADDRESSES[chainId as keyof typeof CONTRACT_ADDRESSES]
   if (!contractAddresses) {
@@ -167,13 +172,13 @@ transaction(nftIdentifier: String, id: UInt256) {
  *
  * @returns The mutation object used to send the transaction.
  */
-export function useCrossVmReceiveNft({
+export function useBridgeNftFromEvm({
   mutation: mutationOptions = {},
   flowClient,
-}: UseCrossVmReceiveNftTxArgs = {}): UseCrossVmReceiveNftTxResult {
+}: UseBridgeNftFromEvmTxArgs = {}): UseBridgeNftFromEvmTxResult {
   const chainId = useFlowChainId()
   const cadenceTx = chainId.data
-    ? getCrossVmReceiveNftTransaction(chainId.data)
+    ? getBridgeNftFromEvmTransaction(chainId.data)
     : null
 
   const queryClient = useFlowQueryClient()
@@ -183,7 +188,7 @@ export function useCrossVmReceiveNft({
       mutationFn: async ({
         nftIdentifier,
         nftId,
-      }: UseCrossVmReceiveNftTxMutateArgs) => {
+      }: UseBridgeNftFromEvmTxMutateArgs) => {
         if (!cadenceTx) {
           throw new Error("No current chain found")
         }
@@ -205,11 +210,15 @@ export function useCrossVmReceiveNft({
     queryClient
   )
 
-  const {mutate: receiveNft, mutateAsync: receiveNftAsync, ...rest} = mutation
+  const {
+    mutate: bridgeNftFromEvm,
+    mutateAsync: bridgeNftFromEvmAsync,
+    ...rest
+  } = mutation
 
   return {
-    receiveNft,
-    receiveNftAsync,
+    bridgeNftFromEvm,
+    bridgeNftFromEvmAsync,
     ...rest,
   }
 }

From 12814f3790bf239c024e84bbbd2664da0d08ae7d Mon Sep 17 00:00:00 2001
From: mfbz <mfbz@users.noreply.github.com>
Date: Thu, 2 Oct 2025 16:25:43 +0200
Subject: [PATCH 07/11] Improved changeset

---
 .changeset/mighty-rocks-smell.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/mighty-rocks-smell.md b/.changeset/mighty-rocks-smell.md
index cdd01e81d..e8c5086d4 100644
--- a/.changeset/mighty-rocks-smell.md
+++ b/.changeset/mighty-rocks-smell.md
@@ -3,4 +3,4 @@
 "@onflow/demo": minor
 ---
 
-Added hook to move NFT from evm to cadence
+Added `useBridgeNftFromEvm` hook for bridging NFTs from Flow EVM to Cadence. This hook withdraws an NFT from the signer's Cadence-Owned Account (COA) in EVM and deposits it into their Cadence collection, automatically configuring the collection if needed.

From 596b89a40d47b6b27eac9169d26a5fbf5478b859 Mon Sep 17 00:00:00 2001
From: mfbz <mfbz@users.noreply.github.com>
Date: Thu, 2 Oct 2025 16:51:42 +0200
Subject: [PATCH 08/11] Implemented playground cards for new hook and the
 opposite one for testing

---
 .../cards/cross-vm-receive-nft-card.tsx       | 147 ----------------
 .../cards/cross-vm-spend-nft-card.tsx         | 146 ----------------
 .../demo/src/components/content-section.tsx   |   4 +
 .../demo/src/components/content-sidebar.tsx   |  12 ++
 .../use-bridge-nft-from-evm-card.tsx          | 160 ++++++++++++++++++
 .../use-cross-vm-spend-nft-card.tsx           | 160 ++++++++++++++++++
 packages/demo/src/constants.ts                |   3 -
 7 files changed, 336 insertions(+), 296 deletions(-)
 delete mode 100644 packages/demo/src/components/cards/cross-vm-receive-nft-card.tsx
 delete mode 100644 packages/demo/src/components/cards/cross-vm-spend-nft-card.tsx
 create mode 100644 packages/demo/src/components/hook-cards/use-bridge-nft-from-evm-card.tsx
 create mode 100644 packages/demo/src/components/hook-cards/use-cross-vm-spend-nft-card.tsx

diff --git a/packages/demo/src/components/cards/cross-vm-receive-nft-card.tsx b/packages/demo/src/components/cards/cross-vm-receive-nft-card.tsx
deleted file mode 100644
index 37c626bc1..000000000
--- a/packages/demo/src/components/cards/cross-vm-receive-nft-card.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-import {useCrossVmReceiveNft, useFlowConfig} from "@onflow/react-sdk"
-import {useState, useMemo} from "react"
-import {getContractAddress} from "../../constants"
-
-export function CrossVmReceiveNftCard() {
-  const config = useFlowConfig()
-  const currentNetwork = config.flowNetwork || "emulator"
-  const [nftIdentifier, setNftIdentifier] = useState("")
-  const [nftId, setNftId] = useState("1") // NFT ID to bridge
-
-  const {
-    receiveNft,
-    isPending,
-    data: transactionId,
-    error,
-  } = useCrossVmReceiveNft()
-
-  const isNetworkSupported = currentNetwork === "testnet"
-
-  const exampleNftData = useMemo(() => {
-    if (currentNetwork !== "testnet") return null
-
-    const exampleNftAddress = getContractAddress("ExampleNFT", currentNetwork)
-    return {
-      name: "Example NFT",
-      nftIdentifier: `A.${exampleNftAddress.replace("0x", "")}.ExampleNFT.NFT`,
-      nftId: "1",
-    }
-  }, [currentNetwork])
-
-  // Set default NFT identifier when network changes
-  useMemo(() => {
-    if (exampleNftData && !nftIdentifier) {
-      setNftIdentifier(exampleNftData.nftIdentifier)
-    }
-  }, [exampleNftData, nftIdentifier])
-
-  const handleReceiveNft = () => {
-    receiveNft({
-      nftIdentifier,
-      nftId,
-    })
-  }
-
-  if (!isNetworkSupported) {
-    return (
-      <div className="p-4 border border-gray-200 rounded-xl bg-white mb-8">
-        <h2 className="text-black mt-0 mb-6 text-xl font-bold">
-          useCrossVmReceiveNft
-        </h2>
-        <div className="p-4 bg-yellow-100 border border-yellow-200 rounded text-yellow-800">
-          <p className="m-0">
-            <strong>Network not supported:</strong> This feature is only
-            available on testnet.
-          </p>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div className="p-4 border border-gray-200 rounded-xl bg-white mb-8">
-      <h2 className="text-black mt-0 mb-6 text-xl font-bold">
-        useCrossVmReceiveNft
-      </h2>
-      <div className="mb-6">
-        <label className="block mb-2 text-black">
-          <strong>Note:</strong> Example prefilled with ExampleNFT type
-          identifier
-        </label>
-        <label className="block mb-2 text-black font-medium">
-          NFT Identifier:
-        </label>
-        <input
-          type="text"
-          value={nftIdentifier}
-          onChange={e => setNftIdentifier(e.target.value)}
-          placeholder={
-            exampleNftData
-              ? exampleNftData.nftIdentifier
-              : "e.g., A.dfc20aee650fcbdf.ExampleNFT.NFT"
-          }
-          className="p-3 border-2 border-[#00EF8B] rounded-md text-sm text-black bg-white
-            outline-none transition-colors duration-200 ease-in-out w-full mb-4 font-mono"
-        />
-
-        <label className="block mb-2 text-black font-medium">
-          NFT ID (UInt256):
-        </label>
-        <input
-          type="text"
-          value={nftId}
-          onChange={e => setNftId(e.target.value)}
-          placeholder="e.g., 1"
-          className="p-3 border-2 border-[#00EF8B] rounded-md text-sm text-black bg-white
-            outline-none transition-colors duration-200 ease-in-out w-full mb-4 font-mono"
-        />
-
-        <button
-          onClick={handleReceiveNft}
-          className={`py-3 px-6 text-base font-semibold rounded-md transition-all duration-200
-            ease-in-out mr-4 ${
-            isPending || !nftIdentifier || !nftId
-                ? "bg-gray-300 text-gray-500 cursor-not-allowed"
-                : "bg-[#00EF8B] text-black cursor-pointer"
-            }`}
-          disabled={isPending || !nftIdentifier || !nftId}
-        >
-          {isPending ? "Receiving..." : "Receive NFT"}
-        </button>
-      </div>
-
-      <div className="p-4 bg-[#f8f9fa] rounded-md border border-[#00EF8B]">
-        <h4 className="text-black m-0 mb-4">Transaction Status:</h4>
-
-        {isPending && (
-          <p className="text-gray-500 m-0">Receiving NFT from EVM...</p>
-        )}
-
-        {error && (
-          <div className="p-4 bg-red-100 border border-red-200 rounded text-red-800 m-0">
-            <strong>Error:</strong> {error.message}
-          </div>
-        )}
-
-        {transactionId && !isPending && !error && (
-          <div className="p-4 bg-green-100 border border-green-200 rounded m-0">
-            <p className="text-green-800 m-0 mb-2">
-              <strong>NFT received successfully!</strong>
-            </p>
-            <p className="text-green-800 m-0 font-mono">
-              <strong>Transaction ID:</strong> {transactionId}
-            </p>
-          </div>
-        )}
-
-        {!transactionId && !isPending && !error && (
-          <div className="text-gray-500 m-0">
-            <p className="mb-2">
-              Click "Receive NFT" to bridge an NFT from EVM to Cadence
-            </p>
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
diff --git a/packages/demo/src/components/cards/cross-vm-spend-nft-card.tsx b/packages/demo/src/components/cards/cross-vm-spend-nft-card.tsx
deleted file mode 100644
index ba6132be2..000000000
--- a/packages/demo/src/components/cards/cross-vm-spend-nft-card.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import {useCrossVmSpendNft, useFlowConfig} from "@onflow/react-sdk"
-import {useState, useMemo} from "react"
-import {getContractAddress} from "../../constants"
-
-export function CrossVmSpendNftCard() {
-  const config = useFlowConfig()
-  const currentNetwork = config.flowNetwork || "emulator"
-  const [nftIdentifier, setNftIdentifier] = useState("")
-  const [nftIds, setNftIds] = useState("1") // NFT IDs to bridge (comma-separated)
-
-  const {spendNft, isPending, data: transactionId, error} = useCrossVmSpendNft()
-
-  const isNetworkSupported = currentNetwork === "testnet"
-
-  const exampleNftData = useMemo(() => {
-    if (currentNetwork !== "testnet") return null
-
-    const exampleNftAddress = getContractAddress("ExampleNFT", currentNetwork)
-    return {
-      name: "Example NFT",
-      nftIdentifier: `A.${exampleNftAddress.replace("0x", "")}.ExampleNFT.NFT`,
-      nftIds: "1",
-    }
-  }, [currentNetwork])
-
-  // Set default NFT identifier when network changes
-  useMemo(() => {
-    if (exampleNftData && !nftIdentifier) {
-      setNftIdentifier(exampleNftData.nftIdentifier)
-      setNftIds(exampleNftData.nftIds)
-    }
-  }, [exampleNftData, nftIdentifier])
-
-  const handleSpendNft = () => {
-    const nftIdArray = nftIds.split(",").map(id => id.trim())
-
-    spendNft({
-      nftIdentifier,
-      nftIds: nftIdArray,
-      calls: [], // No EVM calls, just bridging
-    })
-  }
-
-  if (!isNetworkSupported) {
-    return (
-      <div className="p-4 border border-gray-200 rounded-xl bg-white mb-8">
-        <h2 className="text-black mt-0 mb-6 text-xl font-bold">
-          useCrossVmSpendNft
-        </h2>
-        <div className="p-4 bg-yellow-100 border border-yellow-200 rounded text-yellow-800">
-          <p className="m-0">
-            <strong>Network not supported:</strong> This feature is only
-            available on testnet.
-          </p>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div className="p-4 border border-gray-200 rounded-xl bg-white mb-8">
-      <h2 className="text-black mt-0 mb-6 text-xl font-bold">
-        useCrossVmSpendNft
-      </h2>
-      <div className="mb-6">
-        <label className="block mb-2 text-black">
-          <strong>Note:</strong> Bridge NFTs from Cadence to EVM
-        </label>
-
-        <label className="block mb-2 text-black font-medium">
-          NFT Identifier:
-        </label>
-        <input
-          type="text"
-          value={nftIdentifier}
-          onChange={e => setNftIdentifier(e.target.value)}
-          placeholder={
-            exampleNftData
-              ? exampleNftData.nftIdentifier
-              : "e.g., A.012e4d204a60ac6f.ExampleNFT.NFT"
-          }
-          className="p-3 border-2 border-[#00EF8B] rounded-md text-sm text-black bg-white
-            outline-none transition-colors duration-200 ease-in-out w-full mb-4 font-mono"
-        />
-
-        <label className="block mb-2 text-black font-medium">
-          NFT IDs (UInt64, comma-separated):
-        </label>
-        <input
-          type="text"
-          value={nftIds}
-          onChange={e => setNftIds(e.target.value)}
-          placeholder="e.g., 1,2,3"
-          className="p-3 border-2 border-[#00EF8B] rounded-md text-sm text-black bg-white
-            outline-none transition-colors duration-200 ease-in-out w-full mb-4 font-mono"
-        />
-
-        <button
-          onClick={handleSpendNft}
-          className={`py-3 px-6 text-base font-semibold rounded-md transition-all duration-200
-            ease-in-out mr-4 ${
-            isPending || !nftIdentifier || !nftIds
-                ? "bg-gray-300 text-gray-500 cursor-not-allowed"
-                : "bg-[#00EF8B] text-black cursor-pointer"
-            }`}
-          disabled={isPending || !nftIdentifier || !nftIds}
-        >
-          {isPending ? "Spending..." : "Spend NFT"}
-        </button>
-      </div>
-
-      <div className="p-4 bg-[#f8f9fa] rounded-md border border-[#00EF8B]">
-        <h4 className="text-black m-0 mb-4">Transaction Status:</h4>
-
-        {isPending && (
-          <p className="text-gray-500 m-0">Bridging NFTs to EVM...</p>
-        )}
-
-        {error && (
-          <div className="p-4 bg-red-100 border border-red-200 rounded text-red-800 m-0">
-            <strong>Error:</strong> {error.message}
-          </div>
-        )}
-
-        {transactionId && !isPending && !error && (
-          <div className="p-4 bg-green-100 border border-green-200 rounded m-0">
-            <p className="text-green-800 m-0 mb-2">
-              <strong>NFTs spent successfully!</strong>
-            </p>
-            <p className="text-green-800 m-0 font-mono">
-              <strong>Transaction ID:</strong> {transactionId}
-            </p>
-          </div>
-        )}
-
-        {!transactionId && !isPending && !error && (
-          <div className="text-gray-500 m-0">
-            <p className="mb-2">
-              Click "Spend NFT" to bridge NFTs from Cadence to EVM
-            </p>
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
diff --git a/packages/demo/src/components/content-section.tsx b/packages/demo/src/components/content-section.tsx
index 75928a2e5..61e140280 100644
--- a/packages/demo/src/components/content-section.tsx
+++ b/packages/demo/src/components/content-section.tsx
@@ -12,6 +12,8 @@ import {UseFlowMutateCard} from "./hook-cards/use-flow-mutate-card"
 import {UseFlowEventsCard} from "./hook-cards/use-flow-events-card"
 import {UseFlowTransactionStatusCard} from "./hook-cards/use-flow-transaction-status-card"
 import {UseFlowRevertibleRandomCard} from "./hook-cards/use-flow-revertible-random-card"
+import {UseBridgeNftFromEvmCard} from "./hook-cards/use-bridge-nft-from-evm-card"
+import {UseCrossVmSpendNftCard} from "./hook-cards/use-cross-vm-spend-nft-card"
 
 // Import setup cards
 import {InstallationCard} from "./setup-cards/installation-card"
@@ -85,6 +87,8 @@ export function ContentSection() {
             <UseFlowEventsCard />
             <UseFlowRevertibleRandomCard />
             <UseFlowTransactionStatusCard />
+            <UseBridgeNftFromEvmCard />
+            <UseCrossVmSpendNftCard />
           </div>
 
           <div className="mb-24">
diff --git a/packages/demo/src/components/content-sidebar.tsx b/packages/demo/src/components/content-sidebar.tsx
index 29d88da5e..3b8b84253 100644
--- a/packages/demo/src/components/content-sidebar.tsx
+++ b/packages/demo/src/components/content-sidebar.tsx
@@ -110,6 +110,18 @@ const sidebarItems: SidebarItem[] = [
     category: "hooks",
     description: "Track transaction status",
   },
+  {
+    id: "hook-bridge-nft-from-evm",
+    label: "Bridge NFT from EVM",
+    category: "hooks",
+    description: "Bridge NFTs from EVM to Cadence",
+  },
+  {
+    id: "hook-cross-vm-spend-nft",
+    label: "Bridge NFT to EVM",
+    category: "hooks",
+    description: "Bridge NFTs from Cadence to EVM",
+  },
 
   // Advanced section
   {
diff --git a/packages/demo/src/components/hook-cards/use-bridge-nft-from-evm-card.tsx b/packages/demo/src/components/hook-cards/use-bridge-nft-from-evm-card.tsx
new file mode 100644
index 000000000..8caedd822
--- /dev/null
+++ b/packages/demo/src/components/hook-cards/use-bridge-nft-from-evm-card.tsx
@@ -0,0 +1,160 @@
+import {useBridgeNftFromEvm, useFlowConfig} from "@onflow/react-sdk"
+import {useState, useMemo} from "react"
+import {useDarkMode} from "../flow-provider-wrapper"
+import {DemoCard} from "../ui/demo-card"
+import {ResultsSection} from "../ui/results-section"
+import {getContractAddress} from "../../constants"
+import {PlusGridIcon} from "../ui/plus-grid"
+
+const IMPLEMENTATION_CODE = `import { useBridgeNftFromEvm } from "@onflow/react-sdk"
+
+const {
+  bridgeNftFromEvm,
+  isPending,
+  error,
+  data: txId
+} = useBridgeNftFromEvm()
+
+bridgeNftFromEvm({
+  nftIdentifier: "A.dfc20aee650fcbdf.ExampleNFT.NFT",
+  nftId: "1"
+})`
+
+export function UseBridgeNftFromEvmCard() {
+  const {darkMode} = useDarkMode()
+  const config = useFlowConfig()
+  const currentNetwork = config.flowNetwork || "emulator"
+  const [nftIdentifier, setNftIdentifier] = useState("")
+  const [nftId, setNftId] = useState("1")
+
+  const {
+    bridgeNftFromEvm,
+    isPending,
+    data: transactionId,
+    error,
+  } = useBridgeNftFromEvm()
+
+  const exampleNftData = useMemo(() => {
+    if (currentNetwork !== "testnet") return null
+
+    const exampleNftAddress = getContractAddress("ExampleNFT", currentNetwork)
+    return {
+      name: "Example NFT",
+      nftIdentifier: `A.${exampleNftAddress.replace("0x", "")}.ExampleNFT.NFT`,
+      nftId: "1",
+    }
+  }, [currentNetwork])
+
+  // Set default NFT identifier when network changes to testnet
+  useMemo(() => {
+    if (exampleNftData && !nftIdentifier) {
+      setNftIdentifier(exampleNftData.nftIdentifier)
+    }
+  }, [exampleNftData, nftIdentifier])
+
+  const handleBridgeNft = () => {
+    bridgeNftFromEvm({
+      nftIdentifier,
+      nftId,
+    })
+  }
+
+  return (
+    <DemoCard
+      id="hook-bridge-nft-from-evm"
+      title="useBridgeNftFromEvm"
+      description="Bridge NFTs from Flow EVM to Cadence by withdrawing from the signer's Cadence-Owned Account (COA) in EVM."
+      code={IMPLEMENTATION_CODE}
+      docsUrl="https://developers.flow.com/build/tools/react-sdk/hooks#usebridgenftfromevm"
+    >
+      <div className="space-y-6">
+        {exampleNftData && (
+          <div
+            className={`relative p-4 rounded-lg border ${
+              darkMode
+                ? "bg-blue-500/10 border-blue-500/20"
+                : "bg-blue-50 border-blue-200"
+            }`}
+          >
+            <PlusGridIcon placement="top left" className="absolute" />
+            <p
+              className={`text-sm ${darkMode ? "text-blue-300" : "text-blue-800"}`}
+            >
+              <strong>Note:</strong> Example prefilled with ExampleNFT type
+              identifier for testnet
+            </p>
+          </div>
+        )}
+
+        <div className="space-y-3">
+          <label
+            className={`block text-sm font-medium ${darkMode ? "text-gray-300" : "text-gray-700"}`}
+          >
+            NFT Identifier
+          </label>
+          <input
+            type="text"
+            value={nftIdentifier}
+            onChange={e => setNftIdentifier(e.target.value)}
+            placeholder={
+              exampleNftData
+                ? exampleNftData.nftIdentifier
+                : "e.g., A.dfc20aee650fcbdf.ExampleNFT.NFT"
+            }
+            className={`w-full px-4 py-3 rounded-lg border font-mono text-sm transition-all duration-200 ${
+              darkMode
+                ? "bg-gray-900/50 border-white/10 text-white placeholder-gray-500 focus:border-flow-primary/50"
+                : "bg-white border-black/10 text-black placeholder-gray-400 focus:border-flow-primary/50"
+            } outline-none`}
+          />
+        </div>
+
+        <div className="space-y-3">
+          <label
+            className={`block text-sm font-medium ${darkMode ? "text-gray-300" : "text-gray-700"}`}
+          >
+            NFT ID (UInt256)
+          </label>
+          <input
+            type="text"
+            value={nftId}
+            onChange={e => setNftId(e.target.value)}
+            placeholder="e.g., 1"
+            className={`w-full px-4 py-3 rounded-lg border font-mono text-sm transition-all duration-200 ${
+              darkMode
+                ? "bg-gray-900/50 border-white/10 text-white placeholder-gray-500 focus:border-flow-primary/50"
+                : "bg-white border-black/10 text-black placeholder-gray-400 focus:border-flow-primary/50"
+            } outline-none`}
+          />
+        </div>
+
+        <div className="flex justify-start">
+          <button
+            onClick={handleBridgeNft}
+            disabled={isPending || !nftIdentifier || !nftId}
+            className={`px-6 py-3 rounded-lg font-medium transition-all duration-200 ${
+              isPending || !nftIdentifier || !nftId
+                ? "bg-gray-300 text-gray-500 cursor-not-allowed"
+                : "bg-flow-primary text-black hover:bg-flow-primary/80"
+            }`}
+          >
+            {isPending ? "Bridging..." : "Bridge NFT from EVM"}
+          </button>
+        </div>
+
+        <ResultsSection
+          data={transactionId || error}
+          darkMode={darkMode}
+          show={!!transactionId || !!error}
+          title={
+            transactionId
+              ? "NFT bridged successfully!"
+              : error
+                ? "Bridge failed"
+                : undefined
+          }
+        />
+      </div>
+    </DemoCard>
+  )
+}
diff --git a/packages/demo/src/components/hook-cards/use-cross-vm-spend-nft-card.tsx b/packages/demo/src/components/hook-cards/use-cross-vm-spend-nft-card.tsx
new file mode 100644
index 000000000..298590083
--- /dev/null
+++ b/packages/demo/src/components/hook-cards/use-cross-vm-spend-nft-card.tsx
@@ -0,0 +1,160 @@
+import {useCrossVmSpendNft, useFlowConfig} from "@onflow/react-sdk"
+import {useState, useMemo} from "react"
+import {useDarkMode} from "../flow-provider-wrapper"
+import {DemoCard} from "../ui/demo-card"
+import {ResultsSection} from "../ui/results-section"
+import {getContractAddress} from "../../constants"
+import {PlusGridIcon} from "../ui/plus-grid"
+
+const IMPLEMENTATION_CODE = `import { useCrossVmSpendNft } from "@onflow/react-sdk"
+
+const {
+  spendNft,
+  isPending,
+  error,
+  data: txId
+} = useCrossVmSpendNft()
+
+spendNft({
+  nftIdentifier: "A.012e4d204a60ac6f.ExampleNFT.NFT",
+  nftIds: ["1", "2", "3"],
+  calls: []
+})`
+
+export function UseCrossVmSpendNftCard() {
+  const {darkMode} = useDarkMode()
+  const config = useFlowConfig()
+  const currentNetwork = config.flowNetwork || "emulator"
+  const [nftIdentifier, setNftIdentifier] = useState("")
+  const [nftIds, setNftIds] = useState("1")
+
+  const {spendNft, isPending, data: transactionId, error} = useCrossVmSpendNft()
+
+  const exampleNftData = useMemo(() => {
+    if (currentNetwork !== "testnet") return null
+
+    const exampleNftAddress = getContractAddress("ExampleNFT", currentNetwork)
+    return {
+      name: "Example NFT",
+      nftIdentifier: `A.${exampleNftAddress.replace("0x", "")}.ExampleNFT.NFT`,
+      nftIds: "1",
+    }
+  }, [currentNetwork])
+
+  // Set default NFT identifier when network changes to testnet
+  useMemo(() => {
+    if (exampleNftData && !nftIdentifier) {
+      setNftIdentifier(exampleNftData.nftIdentifier)
+      setNftIds(exampleNftData.nftIds)
+    }
+  }, [exampleNftData, nftIdentifier])
+
+  const handleSpendNft = () => {
+    const nftIdArray = nftIds.split(",").map(id => id.trim())
+
+    spendNft({
+      nftIdentifier,
+      nftIds: nftIdArray,
+      calls: [], // No EVM calls, just bridging
+    })
+  }
+
+  return (
+    <DemoCard
+      id="hook-cross-vm-spend-nft"
+      title="useCrossVmSpendNft"
+      description="Bridge NFTs from Cadence to Flow EVM by depositing them into the signer's Cadence-Owned Account (COA)."
+      code={IMPLEMENTATION_CODE}
+      docsUrl="https://developers.flow.com/build/tools/react-sdk/hooks#usecrossvmspendnft"
+    >
+      <div className="space-y-6">
+        {exampleNftData && (
+          <div
+            className={`relative p-4 rounded-lg border ${
+              darkMode
+                ? "bg-blue-500/10 border-blue-500/20"
+                : "bg-blue-50 border-blue-200"
+            }`}
+          >
+            <PlusGridIcon placement="top right" className="absolute" />
+            <p
+              className={`text-sm ${darkMode ? "text-blue-300" : "text-blue-800"}`}
+            >
+              <strong>Note:</strong> Example prefilled with ExampleNFT type
+              identifier for testnet
+            </p>
+          </div>
+        )}
+
+        <div className="space-y-3">
+          <label
+            className={`block text-sm font-medium ${darkMode ? "text-gray-300" : "text-gray-700"}`}
+          >
+            NFT Identifier
+          </label>
+          <input
+            type="text"
+            value={nftIdentifier}
+            onChange={e => setNftIdentifier(e.target.value)}
+            placeholder={
+              exampleNftData
+                ? exampleNftData.nftIdentifier
+                : "e.g., A.012e4d204a60ac6f.ExampleNFT.NFT"
+            }
+            className={`w-full px-4 py-3 rounded-lg border font-mono text-sm transition-all duration-200 ${
+              darkMode
+                ? "bg-gray-900/50 border-white/10 text-white placeholder-gray-500 focus:border-flow-primary/50"
+                : "bg-white border-black/10 text-black placeholder-gray-400 focus:border-flow-primary/50"
+            } outline-none`}
+          />
+        </div>
+
+        <div className="space-y-3">
+          <label
+            className={`block text-sm font-medium ${darkMode ? "text-gray-300" : "text-gray-700"}`}
+          >
+            NFT IDs (UInt64, comma-separated)
+          </label>
+          <input
+            type="text"
+            value={nftIds}
+            onChange={e => setNftIds(e.target.value)}
+            placeholder="e.g., 1,2,3"
+            className={`w-full px-4 py-3 rounded-lg border font-mono text-sm transition-all duration-200 ${
+              darkMode
+                ? "bg-gray-900/50 border-white/10 text-white placeholder-gray-500 focus:border-flow-primary/50"
+                : "bg-white border-black/10 text-black placeholder-gray-400 focus:border-flow-primary/50"
+            } outline-none`}
+          />
+        </div>
+
+        <div className="flex justify-start">
+          <button
+            onClick={handleSpendNft}
+            disabled={isPending || !nftIdentifier || !nftIds}
+            className={`px-6 py-3 rounded-lg font-medium transition-all duration-200 ${
+              isPending || !nftIdentifier || !nftIds
+                ? "bg-gray-300 text-gray-500 cursor-not-allowed"
+                : "bg-flow-primary text-black hover:bg-flow-primary/80"
+            }`}
+          >
+            {isPending ? "Bridging..." : "Bridge NFT to EVM"}
+          </button>
+        </div>
+
+        <ResultsSection
+          data={transactionId || error}
+          darkMode={darkMode}
+          show={!!transactionId || !!error}
+          title={
+            transactionId
+              ? "NFTs bridged successfully!"
+              : error
+                ? "Bridge failed"
+                : undefined
+          }
+        />
+      </div>
+    </DemoCard>
+  )
+}
diff --git a/packages/demo/src/constants.ts b/packages/demo/src/constants.ts
index b989fe887..73661b8ed 100644
--- a/packages/demo/src/constants.ts
+++ b/packages/demo/src/constants.ts
@@ -22,10 +22,7 @@ export const CONTRACT_ADDRESSES: Record<string, Record<any, string>> = {
     mainnet: "0x1654653399040a61",
   },
   ExampleNFT: {
-    local: "0xf8d6e0586b0a20c7",
-    emulator: "0xf8d6e0586b0a20c7",
     testnet: "0x012e4d204a60ac6f",
-    mainnet: "0x012e4d204a60ac6f",
   },
   FungibleToken: {
     local: "0xee82856bf20e2aa6",

From 95b5e5e9369505e50b2fb0c03fa87549b589abab Mon Sep 17 00:00:00 2001
From: mfbz <mfbz@users.noreply.github.com>
Date: Thu, 2 Oct 2025 18:30:26 +0200
Subject: [PATCH 09/11] Prettier fix

---
 .../use-bridge-nft-from-evm-card.tsx          | 26 ++++++++++++-------
 .../use-cross-vm-spend-nft-card.tsx           | 26 ++++++++++++-------
 2 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/packages/demo/src/components/hook-cards/use-bridge-nft-from-evm-card.tsx b/packages/demo/src/components/hook-cards/use-bridge-nft-from-evm-card.tsx
index 8caedd822..8bdc825e1 100644
--- a/packages/demo/src/components/hook-cards/use-bridge-nft-from-evm-card.tsx
+++ b/packages/demo/src/components/hook-cards/use-bridge-nft-from-evm-card.tsx
@@ -71,7 +71,7 @@ export function UseBridgeNftFromEvmCard() {
         {exampleNftData && (
           <div
             className={`relative p-4 rounded-lg border ${
-              darkMode
+            darkMode
                 ? "bg-blue-500/10 border-blue-500/20"
                 : "bg-blue-50 border-blue-200"
             }`}
@@ -101,11 +101,14 @@ export function UseBridgeNftFromEvmCard() {
                 ? exampleNftData.nftIdentifier
                 : "e.g., A.dfc20aee650fcbdf.ExampleNFT.NFT"
             }
-            className={`w-full px-4 py-3 rounded-lg border font-mono text-sm transition-all duration-200 ${
+            className={`w-full px-4 py-3 rounded-lg border font-mono text-sm transition-all duration-200
+              ${
               darkMode
-                ? "bg-gray-900/50 border-white/10 text-white placeholder-gray-500 focus:border-flow-primary/50"
-                : "bg-white border-black/10 text-black placeholder-gray-400 focus:border-flow-primary/50"
-            } outline-none`}
+                  ? `bg-gray-900/50 border-white/10 text-white placeholder-gray-500
+                    focus:border-flow-primary/50`
+                  : `bg-white border-black/10 text-black placeholder-gray-400
+                    focus:border-flow-primary/50`
+              } outline-none`}
           />
         </div>
 
@@ -120,11 +123,14 @@ export function UseBridgeNftFromEvmCard() {
             value={nftId}
             onChange={e => setNftId(e.target.value)}
             placeholder="e.g., 1"
-            className={`w-full px-4 py-3 rounded-lg border font-mono text-sm transition-all duration-200 ${
+            className={`w-full px-4 py-3 rounded-lg border font-mono text-sm transition-all duration-200
+              ${
               darkMode
-                ? "bg-gray-900/50 border-white/10 text-white placeholder-gray-500 focus:border-flow-primary/50"
-                : "bg-white border-black/10 text-black placeholder-gray-400 focus:border-flow-primary/50"
-            } outline-none`}
+                  ? `bg-gray-900/50 border-white/10 text-white placeholder-gray-500
+                    focus:border-flow-primary/50`
+                  : `bg-white border-black/10 text-black placeholder-gray-400
+                    focus:border-flow-primary/50`
+              } outline-none`}
           />
         </div>
 
@@ -136,7 +142,7 @@ export function UseBridgeNftFromEvmCard() {
               isPending || !nftIdentifier || !nftId
                 ? "bg-gray-300 text-gray-500 cursor-not-allowed"
                 : "bg-flow-primary text-black hover:bg-flow-primary/80"
-            }`}
+              }`}
           >
             {isPending ? "Bridging..." : "Bridge NFT from EVM"}
           </button>
diff --git a/packages/demo/src/components/hook-cards/use-cross-vm-spend-nft-card.tsx b/packages/demo/src/components/hook-cards/use-cross-vm-spend-nft-card.tsx
index 298590083..affff83c8 100644
--- a/packages/demo/src/components/hook-cards/use-cross-vm-spend-nft-card.tsx
+++ b/packages/demo/src/components/hook-cards/use-cross-vm-spend-nft-card.tsx
@@ -71,7 +71,7 @@ export function UseCrossVmSpendNftCard() {
         {exampleNftData && (
           <div
             className={`relative p-4 rounded-lg border ${
-              darkMode
+            darkMode
                 ? "bg-blue-500/10 border-blue-500/20"
                 : "bg-blue-50 border-blue-200"
             }`}
@@ -101,11 +101,14 @@ export function UseCrossVmSpendNftCard() {
                 ? exampleNftData.nftIdentifier
                 : "e.g., A.012e4d204a60ac6f.ExampleNFT.NFT"
             }
-            className={`w-full px-4 py-3 rounded-lg border font-mono text-sm transition-all duration-200 ${
+            className={`w-full px-4 py-3 rounded-lg border font-mono text-sm transition-all duration-200
+              ${
               darkMode
-                ? "bg-gray-900/50 border-white/10 text-white placeholder-gray-500 focus:border-flow-primary/50"
-                : "bg-white border-black/10 text-black placeholder-gray-400 focus:border-flow-primary/50"
-            } outline-none`}
+                  ? `bg-gray-900/50 border-white/10 text-white placeholder-gray-500
+                    focus:border-flow-primary/50`
+                  : `bg-white border-black/10 text-black placeholder-gray-400
+                    focus:border-flow-primary/50`
+              } outline-none`}
           />
         </div>
 
@@ -120,11 +123,14 @@ export function UseCrossVmSpendNftCard() {
             value={nftIds}
             onChange={e => setNftIds(e.target.value)}
             placeholder="e.g., 1,2,3"
-            className={`w-full px-4 py-3 rounded-lg border font-mono text-sm transition-all duration-200 ${
+            className={`w-full px-4 py-3 rounded-lg border font-mono text-sm transition-all duration-200
+              ${
               darkMode
-                ? "bg-gray-900/50 border-white/10 text-white placeholder-gray-500 focus:border-flow-primary/50"
-                : "bg-white border-black/10 text-black placeholder-gray-400 focus:border-flow-primary/50"
-            } outline-none`}
+                  ? `bg-gray-900/50 border-white/10 text-white placeholder-gray-500
+                    focus:border-flow-primary/50`
+                  : `bg-white border-black/10 text-black placeholder-gray-400
+                    focus:border-flow-primary/50`
+              } outline-none`}
           />
         </div>
 
@@ -136,7 +142,7 @@ export function UseCrossVmSpendNftCard() {
               isPending || !nftIdentifier || !nftIds
                 ? "bg-gray-300 text-gray-500 cursor-not-allowed"
                 : "bg-flow-primary text-black hover:bg-flow-primary/80"
-            }`}
+              }`}
           >
             {isPending ? "Bridging..." : "Bridge NFT to EVM"}
           </button>

From 3d8ff6e1967787273d5d26c8248a0078dfb25d58 Mon Sep 17 00:00:00 2001
From: mfbz <mfbz@users.noreply.github.com>
Date: Mon, 20 Oct 2025 21:38:41 +0200
Subject: [PATCH 10/11] Renamed crossvm nft hooks

---
 .changeset/mighty-rocks-smell.md              |   2 +-
 .../demo/src/components/content-section.tsx   |   8 +-
 .../demo/src/components/content-sidebar.tsx   |   4 +-
 ...use-cross-vm-bridge-nft-from-evm-card.tsx} |  24 +-
 ...> use-cross-vm-bridge-nft-to-evm-card.tsx} |  26 +-
 packages/react-sdk/src/hooks/index.ts         |   3 +-
 ....ts => useCrossVmBridgeNftFromEvm.test.ts} |  34 +--
 ...omEvm.ts => useCrossVmBridgeNftFromEvm.ts} |  34 +--
 .../hooks/useCrossVmBridgeNftToEvm.test.ts    | 175 +++++++++++
 .../src/hooks/useCrossVmBridgeNftToEvm.ts     | 284 ++++++++++++++++++
 .../react-sdk/src/hooks/useCrossVmSpendNft.ts |   3 +
 11 files changed, 530 insertions(+), 67 deletions(-)
 rename packages/demo/src/components/hook-cards/{use-bridge-nft-from-evm-card.tsx => use-cross-vm-bridge-nft-from-evm-card.tsx} (90%)
 rename packages/demo/src/components/hook-cards/{use-cross-vm-spend-nft-card.tsx => use-cross-vm-bridge-nft-to-evm-card.tsx} (89%)
 rename packages/react-sdk/src/hooks/{useBridgeNftFromEvm.test.ts => useCrossVmBridgeNftFromEvm.test.ts} (79%)
 rename packages/react-sdk/src/hooks/{useBridgeNftFromEvm.ts => useCrossVmBridgeNftFromEvm.ts} (90%)
 create mode 100644 packages/react-sdk/src/hooks/useCrossVmBridgeNftToEvm.test.ts
 create mode 100644 packages/react-sdk/src/hooks/useCrossVmBridgeNftToEvm.ts

diff --git a/.changeset/mighty-rocks-smell.md b/.changeset/mighty-rocks-smell.md
index e8c5086d4..0db7e2c96 100644
--- a/.changeset/mighty-rocks-smell.md
+++ b/.changeset/mighty-rocks-smell.md
@@ -3,4 +3,4 @@
 "@onflow/demo": minor
 ---
 
-Added `useBridgeNftFromEvm` hook for bridging NFTs from Flow EVM to Cadence. This hook withdraws an NFT from the signer's Cadence-Owned Account (COA) in EVM and deposits it into their Cadence collection, automatically configuring the collection if needed.
+Added `useCrossVmBridgeNftFromEvm` hook for bridging NFTs from Flow EVM to Cadence. This hook withdraws an NFT from the signer's Cadence-Owned Account (COA) in EVM and deposits it into their Cadence collection, automatically configuring the collection if needed.
diff --git a/packages/demo/src/components/content-section.tsx b/packages/demo/src/components/content-section.tsx
index 6a767dbb8..a130db2be 100644
--- a/packages/demo/src/components/content-section.tsx
+++ b/packages/demo/src/components/content-section.tsx
@@ -12,8 +12,8 @@ import {UseFlowMutateCard} from "./hook-cards/use-flow-mutate-card"
 import {UseFlowEventsCard} from "./hook-cards/use-flow-events-card"
 import {UseFlowTransactionStatusCard} from "./hook-cards/use-flow-transaction-status-card"
 import {UseFlowRevertibleRandomCard} from "./hook-cards/use-flow-revertible-random-card"
-import {UseBridgeNftFromEvmCard} from "./hook-cards/use-bridge-nft-from-evm-card"
-import {UseCrossVmSpendNftCard} from "./hook-cards/use-cross-vm-spend-nft-card"
+import {UseCrossVmBridgeNftFromEvmCard} from "./hook-cards/use-cross-vm-bridge-nft-from-evm-card"
+import {UseCrossVmBridgeNftToEvmCard} from "./hook-cards/use-cross-vm-bridge-nft-to-evm-card"
 import {UseFlowNftMetadataCard} from "./hook-cards/use-flow-nft-metadata-card"
 
 // Import setup cards
@@ -88,8 +88,8 @@ export function ContentSection() {
             <UseFlowEventsCard />
             <UseFlowRevertibleRandomCard />
             <UseFlowTransactionStatusCard />
-            <UseBridgeNftFromEvmCard />
-            <UseCrossVmSpendNftCard />
+            <UseCrossVmBridgeNftFromEvmCard />
+            <UseCrossVmBridgeNftToEvmCard />
             <UseFlowNftMetadataCard />
           </div>
 
diff --git a/packages/demo/src/components/content-sidebar.tsx b/packages/demo/src/components/content-sidebar.tsx
index daf9ba7ae..be5e528b2 100644
--- a/packages/demo/src/components/content-sidebar.tsx
+++ b/packages/demo/src/components/content-sidebar.tsx
@@ -111,13 +111,13 @@ const sidebarItems: SidebarItem[] = [
     description: "Track transaction status",
   },
   {
-    id: "usebridgenftfromevm",
+    id: "usecrossvmbridgenftfromevm",
     label: "Bridge NFT from EVM",
     category: "hooks",
     description: "Bridge NFTs from EVM to Cadence",
   },
   {
-    id: "usecrossvmspendnft",
+    id: "usecrossvmbridgenfttoevm",
     label: "Bridge NFT to EVM",
     category: "hooks",
     description: "Bridge NFTs from Cadence to EVM",
diff --git a/packages/demo/src/components/hook-cards/use-bridge-nft-from-evm-card.tsx b/packages/demo/src/components/hook-cards/use-cross-vm-bridge-nft-from-evm-card.tsx
similarity index 90%
rename from packages/demo/src/components/hook-cards/use-bridge-nft-from-evm-card.tsx
rename to packages/demo/src/components/hook-cards/use-cross-vm-bridge-nft-from-evm-card.tsx
index 18522d8b8..7948ae25b 100644
--- a/packages/demo/src/components/hook-cards/use-bridge-nft-from-evm-card.tsx
+++ b/packages/demo/src/components/hook-cards/use-cross-vm-bridge-nft-from-evm-card.tsx
@@ -1,4 +1,4 @@
-import {useBridgeNftFromEvm, useFlowConfig} from "@onflow/react-sdk"
+import {useCrossVmBridgeNftFromEvm, useFlowConfig} from "@onflow/react-sdk"
 import {useState, useMemo} from "react"
 import {useDarkMode} from "../flow-provider-wrapper"
 import {DemoCard} from "../ui/demo-card"
@@ -6,21 +6,21 @@ import {ResultsSection} from "../ui/results-section"
 import {getContractAddress} from "../../constants"
 import {PlusGridIcon} from "../ui/plus-grid"
 
-const IMPLEMENTATION_CODE = `import { useBridgeNftFromEvm } from "@onflow/react-sdk"
+const IMPLEMENTATION_CODE = `import { useCrossVmBridgeNftFromEvm } from "@onflow/react-sdk"
 
 const {
-  bridgeNftFromEvm,
+  crossVmBridgeNftFromEvm,
   isPending,
   error,
   data: txId
-} = useBridgeNftFromEvm()
+} = useCrossVmBridgeNftFromEvm()
 
-bridgeNftFromEvm({
+crossVmBridgeNftFromEvm({
   nftIdentifier: "A.dfc20aee650fcbdf.ExampleNFT.NFT",
   nftId: "1"
 })`
 
-export function UseBridgeNftFromEvmCard() {
+export function UseCrossVmBridgeNftFromEvmCard() {
   const {darkMode} = useDarkMode()
   const config = useFlowConfig()
   const currentNetwork = config.flowNetwork || "emulator"
@@ -28,11 +28,11 @@ export function UseBridgeNftFromEvmCard() {
   const [nftId, setNftId] = useState("1")
 
   const {
-    bridgeNftFromEvm,
+    crossVmBridgeNftFromEvm,
     isPending,
     data: transactionId,
     error,
-  } = useBridgeNftFromEvm()
+  } = useCrossVmBridgeNftFromEvm()
 
   const exampleNftData = useMemo(() => {
     if (currentNetwork !== "testnet") return null
@@ -53,7 +53,7 @@ export function UseBridgeNftFromEvmCard() {
   }, [exampleNftData, nftIdentifier])
 
   const handleBridgeNft = () => {
-    bridgeNftFromEvm({
+    crossVmBridgeNftFromEvm({
       nftIdentifier,
       nftId,
     })
@@ -61,11 +61,11 @@ export function UseBridgeNftFromEvmCard() {
 
   return (
     <DemoCard
-      id="usebridgenftfromevm"
-      title="useBridgeNftFromEvm"
+      id="usecrossvmbridgenftfromevm"
+      title="useCrossVmBridgeNftFromEvm"
       description="Bridge NFTs from Flow EVM to Cadence by withdrawing from the signer's Cadence-Owned Account (COA) in EVM."
       code={IMPLEMENTATION_CODE}
-      docsUrl="https://developers.flow.com/build/tools/react-sdk/hooks#usebridgenftfromevm"
+      docsUrl="https://developers.flow.com/build/tools/react-sdk/hooks#usecrossvmbridgenftfromevm"
     >
       <div className="space-y-6">
         {exampleNftData && (
diff --git a/packages/demo/src/components/hook-cards/use-cross-vm-spend-nft-card.tsx b/packages/demo/src/components/hook-cards/use-cross-vm-bridge-nft-to-evm-card.tsx
similarity index 89%
rename from packages/demo/src/components/hook-cards/use-cross-vm-spend-nft-card.tsx
rename to packages/demo/src/components/hook-cards/use-cross-vm-bridge-nft-to-evm-card.tsx
index 8fe14a484..30e8127cc 100644
--- a/packages/demo/src/components/hook-cards/use-cross-vm-spend-nft-card.tsx
+++ b/packages/demo/src/components/hook-cards/use-cross-vm-bridge-nft-to-evm-card.tsx
@@ -1,4 +1,4 @@
-import {useCrossVmSpendNft, useFlowConfig} from "@onflow/react-sdk"
+import {useCrossVmBridgeNftToEvm, useFlowConfig} from "@onflow/react-sdk"
 import {useState, useMemo} from "react"
 import {useDarkMode} from "../flow-provider-wrapper"
 import {DemoCard} from "../ui/demo-card"
@@ -6,29 +6,29 @@ import {ResultsSection} from "../ui/results-section"
 import {getContractAddress} from "../../constants"
 import {PlusGridIcon} from "../ui/plus-grid"
 
-const IMPLEMENTATION_CODE = `import { useCrossVmSpendNft } from "@onflow/react-sdk"
+const IMPLEMENTATION_CODE = `import { useCrossVmBridgeNftToEvm } from "@onflow/react-sdk"
 
 const {
-  spendNft,
+  crossVmBridgeNftToEvm,
   isPending,
   error,
   data: txId
-} = useCrossVmSpendNft()
+} = useCrossVmBridgeNftToEvm()
 
-spendNft({
+crossVmBridgeNftToEvm({
   nftIdentifier: "A.012e4d204a60ac6f.ExampleNFT.NFT",
   nftIds: ["1", "2", "3"],
   calls: []
 })`
 
-export function UseCrossVmSpendNftCard() {
+export function UseCrossVmBridgeNftToEvmCard() {
   const {darkMode} = useDarkMode()
   const config = useFlowConfig()
   const currentNetwork = config.flowNetwork || "emulator"
   const [nftIdentifier, setNftIdentifier] = useState("")
   const [nftIds, setNftIds] = useState("1")
 
-  const {spendNft, isPending, data: transactionId, error} = useCrossVmSpendNft()
+  const {crossVmBridgeNftToEvm, isPending, data: transactionId, error} = useCrossVmBridgeNftToEvm()
 
   const exampleNftData = useMemo(() => {
     if (currentNetwork !== "testnet") return null
@@ -49,10 +49,10 @@ export function UseCrossVmSpendNftCard() {
     }
   }, [exampleNftData, nftIdentifier])
 
-  const handleSpendNft = () => {
+  const handleBridgeNft = () => {
     const nftIdArray = nftIds.split(",").map(id => id.trim())
 
-    spendNft({
+    crossVmBridgeNftToEvm({
       nftIdentifier,
       nftIds: nftIdArray,
       calls: [], // No EVM calls, just bridging
@@ -61,11 +61,11 @@ export function UseCrossVmSpendNftCard() {
 
   return (
     <DemoCard
-      id="usecrossvmspendnft"
-      title="useCrossVmSpendNft"
+      id="usecrossvmbridgenfttoevm"
+      title="useCrossVmBridgeNftToEvm"
       description="Bridge NFTs from Cadence to Flow EVM by depositing them into the signer's Cadence-Owned Account (COA)."
       code={IMPLEMENTATION_CODE}
-      docsUrl="https://developers.flow.com/build/tools/react-sdk/hooks#usecrossvmspendnft"
+      docsUrl="https://developers.flow.com/build/tools/react-sdk/hooks#usecrossvmbridgenfttoevm"
     >
       <div className="space-y-6">
         {exampleNftData && (
@@ -136,7 +136,7 @@ export function UseCrossVmSpendNftCard() {
 
         <div className="flex justify-start">
           <button
-            onClick={handleSpendNft}
+            onClick={handleBridgeNft}
             disabled={isPending || !nftIdentifier || !nftIds}
             className={`px-6 py-3 rounded-lg font-medium transition-all duration-200 ${
               isPending || !nftIdentifier || !nftIds
diff --git a/packages/react-sdk/src/hooks/index.ts b/packages/react-sdk/src/hooks/index.ts
index bce3ea6b2..a13a6c6aa 100644
--- a/packages/react-sdk/src/hooks/index.ts
+++ b/packages/react-sdk/src/hooks/index.ts
@@ -16,6 +16,7 @@ export {useFlowTransaction} from "./useFlowTransaction"
 export {useFlowTransactionStatus} from "./useFlowTransactionStatus"
 export {useCrossVmSpendNft} from "./useCrossVmSpendNft"
 export {useCrossVmSpendToken} from "./useCrossVmSpendToken"
-export {useBridgeNftFromEvm} from "./useBridgeNftFromEvm"
+export {useCrossVmBridgeNftFromEvm} from "./useCrossVmBridgeNftFromEvm"
+export {useCrossVmBridgeNftToEvm} from "./useCrossVmBridgeNftToEvm"
 export {useCrossVmTransactionStatus} from "./useCrossVmTransactionStatus"
 export {useFlowNftMetadata, type NftViewResult} from "./useFlowNftMetadata"
diff --git a/packages/react-sdk/src/hooks/useBridgeNftFromEvm.test.ts b/packages/react-sdk/src/hooks/useCrossVmBridgeNftFromEvm.test.ts
similarity index 79%
rename from packages/react-sdk/src/hooks/useBridgeNftFromEvm.test.ts
rename to packages/react-sdk/src/hooks/useCrossVmBridgeNftFromEvm.test.ts
index 61355b5bf..7dc8222f7 100644
--- a/packages/react-sdk/src/hooks/useBridgeNftFromEvm.test.ts
+++ b/packages/react-sdk/src/hooks/useCrossVmBridgeNftFromEvm.test.ts
@@ -2,9 +2,9 @@ import {renderHook, act, waitFor} from "@testing-library/react"
 import * as fcl from "@onflow/fcl"
 import {FlowProvider} from "../provider"
 import {
-  getBridgeNftFromEvmTransaction,
-  useBridgeNftFromEvm,
-} from "./useBridgeNftFromEvm"
+  getCrossVmBridgeNftFromEvmTransaction,
+  useCrossVmBridgeNftFromEvm,
+} from "./useCrossVmBridgeNftFromEvm"
 import {useFlowChainId} from "./useFlowChainId"
 import {createMockFclInstance, MockFclInstance} from "../__mocks__/flow-client"
 
@@ -13,7 +13,7 @@ jest.mock("./useFlowChainId", () => ({
   useFlowChainId: jest.fn(),
 }))
 
-describe("useBridgeNftFromEvm", () => {
+describe("useCrossVmBridgeNftFromEvm", () => {
   let mockFcl: MockFclInstance
 
   const mockTxId = "0x123"
@@ -40,25 +40,25 @@ describe("useBridgeNftFromEvm", () => {
     } as any)
   })
 
-  describe("getBridgeNftFromEvmTransaction", () => {
+  describe("getCrossVmBridgeNftFromEvmTransaction", () => {
     it("should return correct cadence for mainnet", () => {
-      const result = getBridgeNftFromEvmTransaction("mainnet")
+      const result = getCrossVmBridgeNftFromEvmTransaction("mainnet")
       expect(result).toContain("import EVM from 0xe467b9dd11fa00df")
     })
 
     it("should return correct cadence for testnet", () => {
-      const result = getBridgeNftFromEvmTransaction("testnet")
+      const result = getCrossVmBridgeNftFromEvmTransaction("testnet")
       expect(result).toContain("import EVM from 0x8c5303eaa26202d6")
     })
 
     it("should throw error for unsupported chain", () => {
-      expect(() => getBridgeNftFromEvmTransaction("unsupported")).toThrow(
+      expect(() => getCrossVmBridgeNftFromEvmTransaction("unsupported")).toThrow(
         "Unsupported chain: unsupported"
       )
     })
   })
 
-  describe("useBridgeNftFromEvmTx", () => {
+  describe("useCrossVmBridgeNftFromEvmTx", () => {
     test("should handle successful transaction", async () => {
       jest.mocked(mockFcl.mockFclInstance.mutate).mockResolvedValue(mockTxId)
       jest.mocked(mockFcl.mockFclInstance.tx).mockReturnValue({
@@ -68,13 +68,13 @@ describe("useBridgeNftFromEvm", () => {
       let result: any
       let rerender: any
       await act(async () => {
-        ;({result, rerender} = renderHook(useBridgeNftFromEvm, {
+        ;({result, rerender} = renderHook(useCrossVmBridgeNftFromEvm, {
           wrapper: FlowProvider,
         }))
       })
 
       await act(async () => {
-        await result.current.bridgeNftFromEvm({
+        await result.current.crossVmBridgeNftFromEvm({
           nftIdentifier: "A.dfc20aee650fcbdf.ExampleNFT.NFT",
           nftId: "123",
         })
@@ -96,14 +96,14 @@ describe("useBridgeNftFromEvm", () => {
       let hookResult: any
 
       await act(async () => {
-        const {result} = renderHook(() => useBridgeNftFromEvm(), {
+        const {result} = renderHook(() => useCrossVmBridgeNftFromEvm(), {
           wrapper: FlowProvider,
         })
         hookResult = result
       })
 
       await act(async () => {
-        await hookResult.current.bridgeNftFromEvm({
+        await hookResult.current.crossVmBridgeNftFromEvm({
           nftIdentifier: "A.dfc20aee650fcbdf.ExampleNFT.NFT",
           nftId: "123",
         })
@@ -122,14 +122,14 @@ describe("useBridgeNftFromEvm", () => {
       let hookResult: any
 
       await act(async () => {
-        const {result} = renderHook(() => useBridgeNftFromEvm(), {
+        const {result} = renderHook(() => useCrossVmBridgeNftFromEvm(), {
           wrapper: FlowProvider,
         })
         hookResult = result
       })
 
       await act(async () => {
-        await hookResult.current.bridgeNftFromEvm({
+        await hookResult.current.crossVmBridgeNftFromEvm({
           nftIdentifier: "A.dfc20aee650fcbdf.ExampleNFT.NFT",
           nftId: "123",
         })
@@ -147,14 +147,14 @@ describe("useBridgeNftFromEvm", () => {
       let hookResult: any
 
       await act(async () => {
-        const {result} = renderHook(() => useBridgeNftFromEvm(), {
+        const {result} = renderHook(() => useCrossVmBridgeNftFromEvm(), {
           wrapper: FlowProvider,
         })
         hookResult = result
       })
 
       await act(async () => {
-        await hookResult.current.bridgeNftFromEvm({
+        await hookResult.current.crossVmBridgeNftFromEvm({
           nftIdentifier: "A.dfc20aee650fcbdf.ExampleNFT.NFT",
           nftId: "123",
         })
diff --git a/packages/react-sdk/src/hooks/useBridgeNftFromEvm.ts b/packages/react-sdk/src/hooks/useCrossVmBridgeNftFromEvm.ts
similarity index 90%
rename from packages/react-sdk/src/hooks/useBridgeNftFromEvm.ts
rename to packages/react-sdk/src/hooks/useCrossVmBridgeNftFromEvm.ts
index e81cbb477..ae8737697 100644
--- a/packages/react-sdk/src/hooks/useBridgeNftFromEvm.ts
+++ b/packages/react-sdk/src/hooks/useCrossVmBridgeNftFromEvm.ts
@@ -10,36 +10,36 @@ import {useFlowQueryClient} from "../provider/FlowQueryClient"
 import {CONTRACT_ADDRESSES} from "../constants"
 import {useFlowClient} from "./useFlowClient"
 
-export interface UseBridgeNftFromEvmTxArgs {
+export interface UseCrossVmBridgeNftFromEvmTxArgs {
   mutation?: Omit<
-    UseMutationOptions<string, Error, UseBridgeNftFromEvmTxMutateArgs>,
+    UseMutationOptions<string, Error, UseCrossVmBridgeNftFromEvmTxMutateArgs>,
     "mutationFn"
   >
   flowClient?: ReturnType<typeof useFlowClient>
 }
 
-export interface UseBridgeNftFromEvmTxMutateArgs {
+export interface UseCrossVmBridgeNftFromEvmTxMutateArgs {
   nftIdentifier: string
   /** The EVM NFT ID to bridge to Cadence as a string representation of a UInt256 (e.g., "123", "0x7b") */
   nftId: string
 }
 
-export interface UseBridgeNftFromEvmTxResult
+export interface UseCrossVmBridgeNftFromEvmTxResult
   extends Omit<UseMutationResult<string, Error>, "mutate" | "mutateAsync"> {
-  bridgeNftFromEvm: UseMutateFunction<
+  crossVmBridgeNftFromEvm: UseMutateFunction<
     string,
     Error,
-    UseBridgeNftFromEvmTxMutateArgs
+    UseCrossVmBridgeNftFromEvmTxMutateArgs
   >
-  bridgeNftFromEvmAsync: UseMutateAsyncFunction<
+  crossVmBridgeNftFromEvmAsync: UseMutateAsyncFunction<
     string,
     Error,
-    UseBridgeNftFromEvmTxMutateArgs
+    UseCrossVmBridgeNftFromEvmTxMutateArgs
   >
 }
 
 // Takes a chain id and returns the cadence tx with addresses set
-export const getBridgeNftFromEvmTransaction = (chainId: string) => {
+export const getCrossVmBridgeNftFromEvmTransaction = (chainId: string) => {
   const contractAddresses =
     CONTRACT_ADDRESSES[chainId as keyof typeof CONTRACT_ADDRESSES]
   if (!contractAddresses) {
@@ -172,13 +172,13 @@ transaction(nftIdentifier: String, id: UInt256) {
  *
  * @returns The mutation object used to send the transaction.
  */
-export function useBridgeNftFromEvm({
+export function useCrossVmBridgeNftFromEvm({
   mutation: mutationOptions = {},
   flowClient,
-}: UseBridgeNftFromEvmTxArgs = {}): UseBridgeNftFromEvmTxResult {
+}: UseCrossVmBridgeNftFromEvmTxArgs = {}): UseCrossVmBridgeNftFromEvmTxResult {
   const chainId = useFlowChainId()
   const cadenceTx = chainId.data
-    ? getBridgeNftFromEvmTransaction(chainId.data)
+    ? getCrossVmBridgeNftFromEvmTransaction(chainId.data)
     : null
 
   const queryClient = useFlowQueryClient()
@@ -188,7 +188,7 @@ export function useBridgeNftFromEvm({
       mutationFn: async ({
         nftIdentifier,
         nftId,
-      }: UseBridgeNftFromEvmTxMutateArgs) => {
+      }: UseCrossVmBridgeNftFromEvmTxMutateArgs) => {
         if (!cadenceTx) {
           throw new Error("No current chain found")
         }
@@ -211,14 +211,14 @@ export function useBridgeNftFromEvm({
   )
 
   const {
-    mutate: bridgeNftFromEvm,
-    mutateAsync: bridgeNftFromEvmAsync,
+    mutate: crossVmBridgeNftFromEvm,
+    mutateAsync: crossVmBridgeNftFromEvmAsync,
     ...rest
   } = mutation
 
   return {
-    bridgeNftFromEvm,
-    bridgeNftFromEvmAsync,
+    crossVmBridgeNftFromEvm,
+    crossVmBridgeNftFromEvmAsync,
     ...rest,
   }
 }
diff --git a/packages/react-sdk/src/hooks/useCrossVmBridgeNftToEvm.test.ts b/packages/react-sdk/src/hooks/useCrossVmBridgeNftToEvm.test.ts
new file mode 100644
index 000000000..4e2078ee4
--- /dev/null
+++ b/packages/react-sdk/src/hooks/useCrossVmBridgeNftToEvm.test.ts
@@ -0,0 +1,175 @@
+import {renderHook, act, waitFor} from "@testing-library/react"
+import * as fcl from "@onflow/fcl"
+import {FlowProvider} from "../provider"
+import {
+  getCrossVmBridgeNftToEvmTransaction,
+  useCrossVmBridgeNftToEvm,
+} from "./useCrossVmBridgeNftToEvm"
+import {useFlowChainId} from "./useFlowChainId"
+import {createMockFclInstance, MockFclInstance} from "../__mocks__/flow-client"
+
+jest.mock("@onflow/fcl", () => require("../__mocks__/fcl").default)
+jest.mock("./useFlowChainId", () => ({
+  useFlowChainId: jest.fn(),
+}))
+
+describe("useCrossVmBridgeNftToEvm", () => {
+  let mockFcl: MockFclInstance
+
+  const mockCalls = [
+    {
+      address: "0x123",
+      abi: [{type: "function", name: "test"}],
+      functionName: "test",
+      args: [1, 2],
+      gasLimit: BigInt(100000),
+      value: BigInt(0),
+    },
+  ]
+
+  const mockTxId = "0x123"
+  const mockTxResult = {
+    events: [
+      {
+        type: "TransactionExecuted",
+        data: {
+          hash: ["1", "2", "3"],
+          errorCode: "0",
+          errorMessage: "",
+        },
+      },
+    ],
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    jest.mocked(useFlowChainId).mockReturnValue({
+      data: "mainnet",
+      isLoading: false,
+    } as any)
+
+    mockFcl = createMockFclInstance()
+    jest.mocked(fcl.createFlowClient).mockReturnValue(mockFcl.mockFclInstance)
+  })
+
+  describe("getCrossVmBridgeNftToEvmTransaction", () => {
+    it("should return correct cadence for mainnet", () => {
+      const result = getCrossVmBridgeNftToEvmTransaction("mainnet")
+      expect(result).toContain("import EVM from 0xe467b9dd11fa00df")
+    })
+
+    it("should return correct cadence for testnet", () => {
+      const result = getCrossVmBridgeNftToEvmTransaction("testnet")
+      expect(result).toContain("import EVM from 0x8c5303eaa26202d6")
+    })
+
+    it("should throw error for unsupported chain", () => {
+      expect(() => getCrossVmBridgeNftToEvmTransaction("unsupported")).toThrow(
+        "Unsupported chain: unsupported"
+      )
+    })
+  })
+
+  describe("useCrossVmBridgeNftToEvmTx", () => {
+    test("should handle successful transaction", async () => {
+      jest.mocked(mockFcl.mockFclInstance.mutate).mockResolvedValue(mockTxId)
+      jest.mocked(mockFcl.mockFclInstance.tx).mockReturnValue({
+        onceExecuted: jest.fn().mockResolvedValue(mockTxResult),
+      } as any)
+
+      let result: any
+      let rerender: any
+      await act(async () => {
+        ;({result, rerender} = renderHook(useCrossVmBridgeNftToEvm, {
+          wrapper: FlowProvider,
+        }))
+      })
+
+      await act(async () => {
+        await result.current.crossVmBridgeNftToEvm({
+          calls: mockCalls,
+          nftIdentifier: "nft123",
+          nftIds: ["1", "2"],
+        })
+        rerender()
+      })
+
+      await waitFor(() => result.current.isPending === false)
+
+      expect(result.current.isError).toBe(false)
+      expect(result.current.data).toBe(mockTxId)
+    })
+
+    it("should handle missing chain ID", async () => {
+      jest.mocked(useFlowChainId).mockReturnValue({
+        data: null,
+        isLoading: false,
+      } as any)
+
+      let hookResult: any
+
+      await act(async () => {
+        const {result} = renderHook(() => useCrossVmBridgeNftToEvm(), {
+          wrapper: FlowProvider,
+        })
+        hookResult = result
+      })
+
+      await act(async () => {
+        await hookResult.current.crossVmBridgeNftToEvm({calls: mockCalls})
+      })
+
+      await waitFor(() => expect(hookResult.current.isError).toBe(true))
+      expect(hookResult.current.error?.message).toBe("No current chain found")
+    })
+
+    it("should handle loading chain ID", async () => {
+      ;(useFlowChainId as jest.Mock).mockReturnValue({
+        data: null,
+        isLoading: true,
+      })
+
+      let hookResult: any
+
+      await act(async () => {
+        const {result} = renderHook(() => useCrossVmBridgeNftToEvm(), {
+          wrapper: FlowProvider,
+        })
+        hookResult = result
+      })
+
+      await act(async () => {
+        await hookResult.current.crossVmBridgeNftToEvm(mockCalls)
+      })
+
+      await waitFor(() => expect(hookResult.current.isError).toBe(true))
+      expect(hookResult.current.error?.message).toBe("No current chain found")
+    })
+
+    it("should handle mutation error", async () => {
+      jest
+        .mocked(mockFcl.mockFclInstance.mutate)
+        .mockRejectedValue(new Error("Mutation failed"))
+
+      let hookResult: any
+
+      await act(async () => {
+        const {result} = renderHook(() => useCrossVmBridgeNftToEvm(), {
+          wrapper: FlowProvider,
+        })
+        hookResult = result
+      })
+
+      await act(async () => {
+        await hookResult.current.crossVmBridgeNftToEvm({
+          calls: mockCalls,
+          nftIdentifier: "nft123",
+          nftIds: ["1", "2"],
+        })
+      })
+
+      await waitFor(() => expect(hookResult.current.isError).toBe(true))
+      expect(hookResult.current.error?.message).toBe("Mutation failed")
+    })
+  })
+})
diff --git a/packages/react-sdk/src/hooks/useCrossVmBridgeNftToEvm.ts b/packages/react-sdk/src/hooks/useCrossVmBridgeNftToEvm.ts
new file mode 100644
index 000000000..52bdb328d
--- /dev/null
+++ b/packages/react-sdk/src/hooks/useCrossVmBridgeNftToEvm.ts
@@ -0,0 +1,284 @@
+import {
+  UseMutateAsyncFunction,
+  UseMutateFunction,
+  useMutation,
+  UseMutationOptions,
+  UseMutationResult,
+} from "@tanstack/react-query"
+import {useFlowChainId} from "./useFlowChainId"
+import {useFlowQueryClient} from "../provider/FlowQueryClient"
+import {encodeCalls, EvmBatchCall} from "./useCrossVmBatchTransaction"
+import {CONTRACT_ADDRESSES} from "../constants"
+import {useFlowClient} from "./useFlowClient"
+
+export interface UseCrossVmBridgeNftToEvmTxArgs {
+  mutation?: Omit<
+    UseMutationOptions<string, Error, UseCrossVmBridgeNftToEvmTxMutateArgs>,
+    "mutationFn"
+  >
+  flowClient?: ReturnType<typeof useFlowClient>
+}
+
+export interface UseCrossVmBridgeNftToEvmTxMutateArgs {
+  nftIdentifier: string
+  nftIds: string[]
+  calls: EvmBatchCall[]
+}
+
+export interface UseCrossVmBridgeNftToEvmTxResult
+  extends Omit<UseMutationResult<string, Error>, "mutate" | "mutateAsync"> {
+  crossVmBridgeNftToEvm: UseMutateFunction<string, Error, UseCrossVmBridgeNftToEvmTxMutateArgs>
+  crossVmBridgeNftToEvmAsync: UseMutateAsyncFunction<
+    string,
+    Error,
+    UseCrossVmBridgeNftToEvmTxMutateArgs
+  >
+}
+
+// Takes a chain id and returns the cadence tx with addresses set
+export const getCrossVmBridgeNftToEvmTransaction = (chainId: string) => {
+  const contractAddresses =
+    CONTRACT_ADDRESSES[chainId as keyof typeof CONTRACT_ADDRESSES]
+  if (!contractAddresses) {
+    throw new Error(`Unsupported chain: ${chainId}`)
+  }
+
+  return `
+import FungibleToken from ${contractAddresses.FungibleToken}
+import NonFungibleToken from ${contractAddresses.NonFungibleToken}
+import ViewResolver from ${contractAddresses.ViewResolver}
+import MetadataViews from ${contractAddresses.MetadataViews}
+import FlowToken from ${contractAddresses.FlowToken}
+
+import ScopedFTProviders from ${contractAddresses.ScopedFTProviders}
+
+import EVM from ${contractAddresses.EVM}
+
+import FlowEVMBridge from ${contractAddresses.FlowEVMBridge}
+import FlowEVMBridgeConfig from ${contractAddresses.FlowEVMBridgeConfig}
+import FlowEVMBridgeUtils from ${contractAddresses.FlowEVMBridgeUtils}
+
+/// Bridges NFTs (from the same collection) from the signer's collection in Cadence to the signer's COA in FlowEVM
+/// and then performs an arbitrary number of calls afterwards to potentially do things
+/// with the bridged NFTs
+///
+/// NOTE: This transaction also onboards the NFT to the bridge if necessary which may incur additional fees
+///     than bridging an asset that has already been onboarded.
+///
+/// @param nftIdentifier: The Cadence type identifier of the NFT to bridge - e.g. nft.getType().identifier
+/// @param ids: The Cadence NFT.id of the NFTs to bridge to EVM
+/// @params evmContractAddressHexes, calldatas, gasLimits, values: Arrays of calldata
+///         to be included in transaction calls to Flow EVM from the signer's COA.
+///         The arrays are all expected to be of the same length
+///
+transaction(
+    nftIdentifier: String,
+    ids: [UInt64],
+    evmContractAddressHexes: [String],
+    calldatas: [String],
+    gasLimits: [UInt64],
+    values: [UInt]
+) {
+    let nftType: Type
+    let collection: auth(NonFungibleToken.Withdraw) &{NonFungibleToken.Collection}
+    let coa: auth(EVM.Bridge, EVM.Call) &EVM.CadenceOwnedAccount
+    let requiresOnboarding: Bool
+    let scopedProvider: @ScopedFTProviders.ScopedFTProvider
+    
+    prepare(signer: auth(CopyValue, BorrowValue, IssueStorageCapabilityController, PublishCapability, SaveValue) &Account) {
+        pre {
+            (evmContractAddressHexes.length == calldatas.length)
+            && (calldatas.length == gasLimits.length)
+            && (gasLimits.length == values.length):
+                "Calldata array lengths must all be the same!"
+        }
+
+        /* --- Reference the signer's CadenceOwnedAccount --- */
+        //
+        // Borrow a reference to the signer's COA
+        self.coa = signer.storage.borrow<auth(EVM.Bridge, EVM.Call) &EVM.CadenceOwnedAccount>(from: /storage/evm)
+            ?? panic("Could not borrow COA signer's account at path /storage/evm")
+        
+        /* --- Construct the NFT type --- */
+        //
+        // Construct the NFT type from the provided identifier
+        self.nftType = CompositeType(nftIdentifier)
+            ?? panic("Could not construct NFT type from identifier: ".concat(nftIdentifier))
+        // Parse the NFT identifier into its components
+        let nftContractAddress = FlowEVMBridgeUtils.getContractAddress(fromType: self.nftType)
+            ?? panic("Could not get contract address from identifier: ".concat(nftIdentifier))
+        let nftContractName = FlowEVMBridgeUtils.getContractName(fromType: self.nftType)
+            ?? panic("Could not get contract name from identifier: ".concat(nftIdentifier))
+
+        /* --- Retrieve the NFT --- */
+        //
+        // Borrow a reference to the NFT collection, configuring if necessary
+        let viewResolver = getAccount(nftContractAddress).contracts.borrow<&{ViewResolver}>(name: nftContractName)
+            ?? panic("Could not borrow ViewResolver from NFT contract with name "
+                .concat(nftContractName).concat(" and address ")
+                .concat(nftContractAddress.toString()))
+        let collectionData = viewResolver.resolveContractView(
+                resourceType: self.nftType,
+                viewType: Type<MetadataViews.NFTCollectionData>()
+            ) as! MetadataViews.NFTCollectionData?
+            ?? panic("Could not resolve NFTCollectionData view for NFT type ".concat(self.nftType.identifier))
+        self.collection = signer.storage.borrow<auth(NonFungibleToken.Withdraw) &{NonFungibleToken.Collection}>(
+                from: collectionData.storagePath
+            ) ?? panic("Could not borrow a NonFungibleToken Collection from the signer's storage path "
+                .concat(collectionData.storagePath.toString()))
+
+        // Withdraw the requested NFT & set a cap on the withdrawable bridge fee
+        var approxFee = FlowEVMBridgeUtils.calculateBridgeFee(
+                bytes: 400_000 // 400 kB as upper bound on movable storage used in a single transaction
+            ) + (FlowEVMBridgeConfig.baseFee * UFix64(ids.length))
+        // Determine if the NFT requires onboarding - this impacts the fee required
+        self.requiresOnboarding = FlowEVMBridge.typeRequiresOnboarding(self.nftType)
+            ?? panic("Bridge does not support the requested asset type ".concat(nftIdentifier))
+        // Add the onboarding fee if onboarding is necessary
+        if self.requiresOnboarding {
+            approxFee = approxFee + FlowEVMBridgeConfig.onboardFee
+        }
+
+        /* --- Configure a ScopedFTProvider --- */
+        //
+        // Issue and store bridge-dedicated Provider Capability in storage if necessary
+        if signer.storage.type(at: FlowEVMBridgeConfig.providerCapabilityStoragePath) == nil {
+            let providerCap = signer.capabilities.storage.issue<auth(FungibleToken.Withdraw) &{FungibleToken.Provider}>(
+                /storage/flowTokenVault
+            )
+            signer.storage.save(providerCap, to: FlowEVMBridgeConfig.providerCapabilityStoragePath)
+        }
+        // Copy the stored Provider capability and create a ScopedFTProvider
+        let providerCapCopy = signer.storage.copy<Capability<auth(FungibleToken.Withdraw) &{FungibleToken.Provider}>>(
+                from: FlowEVMBridgeConfig.providerCapabilityStoragePath
+            ) ?? panic("Invalid FungibleToken Provider Capability found in storage at path "
+                .concat(FlowEVMBridgeConfig.providerCapabilityStoragePath.toString()))
+        let providerFilter = ScopedFTProviders.AllowanceFilter(approxFee)
+        self.scopedProvider <- ScopedFTProviders.createScopedFTProvider(
+                provider: providerCapCopy,
+                filters: [ providerFilter ],
+                expiration: getCurrentBlock().timestamp + 1.0
+            )
+    }
+
+    execute {
+        if self.requiresOnboarding {
+            // Onboard the NFT to the bridge
+            FlowEVMBridge.onboardByType(
+                self.nftType,
+                feeProvider: &self.scopedProvider as auth(FungibleToken.Withdraw) &{FungibleToken.Provider}
+            )
+        }
+
+        // Iterate over requested IDs and bridge each NFT to the signer's COA in EVM
+        for id in ids {
+            // Withdraw the NFT & ensure it's the correct type
+            let nft <-self.collection.withdraw(withdrawID: id)
+            assert(
+                nft.getType() == self.nftType,
+                message: "Bridged nft type mismatch - requested: ".concat(self.nftType.identifier)
+                    .concat(", received: ").concat(nft.getType().identifier)
+            )
+            // Execute the bridge to EVM for the current ID
+            self.coa.depositNFT(
+                nft: <-nft,
+                feeProvider: &self.scopedProvider as auth(FungibleToken.Withdraw) &{FungibleToken.Provider}
+            )
+        }
+
+        // Destroy the ScopedFTProvider
+        destroy self.scopedProvider
+
+        // Perform all the calls
+        for index, evmAddressHex in evmContractAddressHexes { 
+            let evmAddress = EVM.addressFromString(evmAddressHex)
+
+            let valueBalance = EVM.Balance(attoflow: values[index])
+            let callResult = self.coa.call(
+                to: evmAddress,
+                data: calldatas[index].decodeHex(),
+                gasLimit: gasLimits[index],
+                value: valueBalance
+            )
+            assert(
+                callResult.status == EVM.Status.successful,
+                message: "Call failed with address \(evmAddressHex) and calldata \(calldatas[index]) with error \(callResult.errorMessage)"
+            )
+        }
+    }
+}
+`
+}
+
+/**
+ * Hook to send a cross-VM NFT bridge transaction from Cadence to EVM. This function will
+ * bundle multiple EVM calls into one atomic Cadence transaction and return the transaction ID.
+ *
+ * Use `useCrossVmTransactionStatus` to watch the status of the transaction and get the transaction id + result of each EVM call.
+ *
+ * @returns The mutation object used to send the transaction.
+ */
+export function useCrossVmBridgeNftToEvm({
+  mutation: mutationOptions = {},
+  flowClient,
+}: UseCrossVmBridgeNftToEvmTxArgs = {}): UseCrossVmBridgeNftToEvmTxResult {
+  const chainId = useFlowChainId()
+  const cadenceTx = chainId.data
+    ? getCrossVmBridgeNftToEvmTransaction(chainId.data)
+    : null
+
+  const queryClient = useFlowQueryClient()
+  const fcl = useFlowClient({flowClient})
+  const mutation = useMutation(
+    {
+      mutationFn: async ({
+        nftIdentifier,
+        nftIds,
+        calls,
+      }: UseCrossVmBridgeNftToEvmTxMutateArgs) => {
+        if (!cadenceTx) {
+          throw new Error("No current chain found")
+        }
+        const encodedCalls = encodeCalls(calls)
+
+        const txId = await fcl.mutate({
+          cadence: cadenceTx,
+          args: (arg, t) => [
+            arg(nftIdentifier, t.String),
+            arg(nftIds, t.Array(t.UInt64)),
+            arg(
+              encodedCalls.map(call => call.to),
+              t.Array(t.String)
+            ),
+            arg(
+              encodedCalls.map(call => call.data),
+              t.Array(t.String)
+            ),
+            arg(
+              encodedCalls.map(call => call.gasLimit),
+              t.Array(t.UInt64)
+            ),
+            arg(
+              encodedCalls.map(call => call.value),
+              t.Array(t.UInt)
+            ),
+          ],
+          limit: 9999,
+        })
+
+        return txId
+      },
+      retry: false,
+      ...mutationOptions,
+    },
+    queryClient
+  )
+
+  const {mutate: crossVmBridgeNftToEvm, mutateAsync: crossVmBridgeNftToEvmAsync, ...rest} = mutation
+
+  return {
+    crossVmBridgeNftToEvm,
+    crossVmBridgeNftToEvmAsync,
+    ...rest,
+  }
+}
diff --git a/packages/react-sdk/src/hooks/useCrossVmSpendNft.ts b/packages/react-sdk/src/hooks/useCrossVmSpendNft.ts
index ce68d88e6..e4f37b096 100644
--- a/packages/react-sdk/src/hooks/useCrossVmSpendNft.ts
+++ b/packages/react-sdk/src/hooks/useCrossVmSpendNft.ts
@@ -216,6 +216,9 @@ transaction(
  *
  * Use `useCrossVmSpendNftStatus` to watch the status of the transaction and get the transaction id + result of each EVM call.
  *
+ * @deprecated This hook has been renamed to `useCrossVmBridgeNftToEvm` for better clarity.
+ * Please use `useCrossVmBridgeNftToEvm` instead. This hook will be removed in a future version.
+ *
  * @returns The mutation object used to send the transaction.
  */
 export function useCrossVmSpendNft({

From 4d40847ede0bd4cf3d725456d1dabca85aaab262 Mon Sep 17 00:00:00 2001
From: mfbz <mfbz@users.noreply.github.com>
Date: Mon, 20 Oct 2025 22:05:31 +0200
Subject: [PATCH 11/11] Prettier fix

---
 .../use-cross-vm-bridge-nft-to-evm-card.tsx          |  7 ++++++-
 .../src/hooks/useCrossVmBridgeNftFromEvm.test.ts     |  6 +++---
 .../react-sdk/src/hooks/useCrossVmBridgeNftToEvm.ts  | 12 ++++++++++--
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/packages/demo/src/components/hook-cards/use-cross-vm-bridge-nft-to-evm-card.tsx b/packages/demo/src/components/hook-cards/use-cross-vm-bridge-nft-to-evm-card.tsx
index 30e8127cc..63ff8c86a 100644
--- a/packages/demo/src/components/hook-cards/use-cross-vm-bridge-nft-to-evm-card.tsx
+++ b/packages/demo/src/components/hook-cards/use-cross-vm-bridge-nft-to-evm-card.tsx
@@ -28,7 +28,12 @@ export function UseCrossVmBridgeNftToEvmCard() {
   const [nftIdentifier, setNftIdentifier] = useState("")
   const [nftIds, setNftIds] = useState("1")
 
-  const {crossVmBridgeNftToEvm, isPending, data: transactionId, error} = useCrossVmBridgeNftToEvm()
+  const {
+    crossVmBridgeNftToEvm,
+    isPending,
+    data: transactionId,
+    error,
+  } = useCrossVmBridgeNftToEvm()
 
   const exampleNftData = useMemo(() => {
     if (currentNetwork !== "testnet") return null
diff --git a/packages/react-sdk/src/hooks/useCrossVmBridgeNftFromEvm.test.ts b/packages/react-sdk/src/hooks/useCrossVmBridgeNftFromEvm.test.ts
index 7dc8222f7..a25617a2d 100644
--- a/packages/react-sdk/src/hooks/useCrossVmBridgeNftFromEvm.test.ts
+++ b/packages/react-sdk/src/hooks/useCrossVmBridgeNftFromEvm.test.ts
@@ -52,9 +52,9 @@ describe("useCrossVmBridgeNftFromEvm", () => {
     })
 
     it("should throw error for unsupported chain", () => {
-      expect(() => getCrossVmBridgeNftFromEvmTransaction("unsupported")).toThrow(
-        "Unsupported chain: unsupported"
-      )
+      expect(() =>
+        getCrossVmBridgeNftFromEvmTransaction("unsupported")
+      ).toThrow("Unsupported chain: unsupported")
     })
   })
 
diff --git a/packages/react-sdk/src/hooks/useCrossVmBridgeNftToEvm.ts b/packages/react-sdk/src/hooks/useCrossVmBridgeNftToEvm.ts
index 52bdb328d..439769dec 100644
--- a/packages/react-sdk/src/hooks/useCrossVmBridgeNftToEvm.ts
+++ b/packages/react-sdk/src/hooks/useCrossVmBridgeNftToEvm.ts
@@ -27,7 +27,11 @@ export interface UseCrossVmBridgeNftToEvmTxMutateArgs {
 
 export interface UseCrossVmBridgeNftToEvmTxResult
   extends Omit<UseMutationResult<string, Error>, "mutate" | "mutateAsync"> {
-  crossVmBridgeNftToEvm: UseMutateFunction<string, Error, UseCrossVmBridgeNftToEvmTxMutateArgs>
+  crossVmBridgeNftToEvm: UseMutateFunction<
+    string,
+    Error,
+    UseCrossVmBridgeNftToEvmTxMutateArgs
+  >
   crossVmBridgeNftToEvmAsync: UseMutateAsyncFunction<
     string,
     Error,
@@ -274,7 +278,11 @@ export function useCrossVmBridgeNftToEvm({
     queryClient
   )
 
-  const {mutate: crossVmBridgeNftToEvm, mutateAsync: crossVmBridgeNftToEvmAsync, ...rest} = mutation
+  const {
+    mutate: crossVmBridgeNftToEvm,
+    mutateAsync: crossVmBridgeNftToEvmAsync,
+    ...rest
+  } = mutation
 
   return {
     crossVmBridgeNftToEvm,