wip

src/Id.astro

@@ -1,10 +1,12 @@
 ---
 import type { ComposedItem } from '.'
 import TransactionForm from './TransactionForm.svelte'
+import TransactionFormT from './TransactionFormT.vue'
 import type { ClubsPropsPages } from '@devprotocol/clubs-core'
 import { Checkout } from '@devprotocol/clubs-core/ui/components'
 import { i18nFactory } from '@devprotocol/clubs-core'
 import { Strings } from './i18n'
+import type { only } from 'node:test'
 
 const { item, propertyAddress, rpcUrl, chainId, debugMode, ...other } =
   Astro.props as ClubsPropsPages & {
@@ -54,6 +56,7 @@ const { PUBLIC_POP_CLIENT_KEY } = import.meta.env
       rpcUrl={rpcUrl}
       debugMode={debugMode}
     />
+    <TransactionFormT client:only="vue"/>
   </div>
   <div slot="checkout:after:transaction-form" class="p-3">
     <a

src/TransactionFormT.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <h1>Transaction Form</h1>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, onMounted } from 'vue'
+import type { Failure, Success } from './api/payment-key'
+import type { ComposedItem } from '.'
+import { whenDefined, whenDefinedAll, whenNotError } from '@devprotocol/util-ts'
+import { JsonRpcProvider } from 'ethers'
+import { clientsSTokens } from '@devprotocol/dev-kit'
+import { i18nFactory, mintedIdByLogs } from '@devprotocol/clubs-core'
+import {
+  IconBouncingArrowRight,
+  IconSpinner,
+} from '@devprotocol/clubs-core/ui/vue'
+import { Strings } from './i18n'
+
+export default {
+
+
+    props: {
+        item: Object as () => ComposedItem,
+        chainId: Number,
+        rpcUrl: String,
+        debugMode: Boolean,
+    },
+}
+</script>