Allow different types of account creation

src/components/ui/radio-group/RadioGroup.vue

+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<RadioGroupRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <RadioGroupRoot
+    :class="cn('grid gap-2', props.class)"
+    v-bind="forwarded"
+  >
+    <slot />
+  </RadioGroupRoot>
+</template>

src/components/ui/radio-group/RadioGroupItem.vue

+<script setup lang="ts">
+import type { RadioGroupItemProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Check } from 'lucide-vue-next'
+import {
+  RadioGroupIndicator,
+  RadioGroupItem,
+
+  useForwardProps,
+} from 'reka-ui'
+import { computed } from 'vue'
+
+const props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RadioGroupItem
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'peer aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <RadioGroupIndicator class="flex items-center justify-center">
+      <Check class="h-3.5 w-3.5 text-primary" />
+    </RadioGroupIndicator>
+  </RadioGroupItem>
+</template>

src/components/ui/radio-group/index.ts

+export { default as RadioGroup } from './RadioGroup.vue'
+export { default as RadioGroupItem } from './RadioGroupItem.vue'

src/components/utilcards/ConfirmCreateAccountCard.vue

@@ -4,7 +4,9 @@ import { mdiAccountPlusOutline } from '@mdi/js';
 import { Button } from '@/components/ui/button';
 import { Textarea } from '@/components/ui/textarea';
 import { Input } from '@/components/ui/input'
+import { Checkbox } from '@/components/ui/checkbox'
 import { Label } from '@/components/ui/label'
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
 import { useSettingsStore } from '@/stores/settings.store';
 import { onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
@@ -20,6 +22,9 @@ const postingKey = ref<string>('');
 const activeKey = ref<string>('');
 const ownerKey = ref<string>('');
 const postingMetadata = ref<string>('{}');
+const enableDelegation = ref<boolean>(false);
+const delegationAmount = ref<number>(0);
+const createAccountType = ref<"default" | "claimed">("default");
 
 const router = useRouter();
 const wallet = useWalletStore();
@@ -38,8 +43,7 @@ const createAccount = async() => {
   const wax = await getWax();
   const tx = await wax.createTransaction();
   const { median_props: { account_creation_fee } } = await wax.api.database_api.get_witness_schedule({});
-  tx.pushOperation({
-    account_create: {
+  const commonAccountCreateConfig = {
       creator: settings.account!,
       new_account_name: accountName.value.startsWith('@') ? accountName.value.slice(1) : accountName.value,
       memo_key: memoKey.value,
@@ -60,8 +64,41 @@ const createAccount = async() => {
       },
       json_metadata: postingMetadata.value,
       fee: account_creation_fee
+    };
+
+  if (createAccountType.value === "claimed") {
+    tx.pushOperation({
+      create_claimed_account: {
+        ...commonAccountCreateConfig,
+        extensions: []
+      }
+    });
+    if (enableDelegation.value) {
+      tx.pushOperation({
+        delegate_vesting_shares: {
+          delegator: settings.account!,
+          delegatee: accountName.value.startsWith('@') ? accountName.value.slice(1) : accountName.value,
+          vesting_shares: wax.vestsCoins(delegationAmount.value)
+        }
+      });
+    }
+  } else {
+    if (enableDelegation.value) {
+      tx.pushOperation({
+        account_create_with_delegation: {
+          ...commonAccountCreateConfig,
+          extensions: [],
+          delegation: wax.vestsCoins(delegationAmount.value)
+        }
+      });
+    } else {
+      tx.pushOperation({
+        account_create: {
+          ...commonAccountCreateConfig
+        }
+      });
     }
-  });
+  }
   const signature = await wallet.wallet!.signTransaction(tx, "active");
   tx.sign(signature);
   await wax.broadcast(tx);
@@ -78,7 +115,7 @@ const createAccount = async() => {
       <CardDescription class="mr-8">Use this module to process account creation request sent by other users</CardDescription>
     </CardHeader>
     <CardContent>
-      <div class="my-4 space-y-2">
+      <div class="my-4 space-y-4">
         <div class="grid w-full max-w-sm items-center">
           <Label for="createAccount_creator">Creator Account Name</Label>
           <Input id="createAccount_creator" v-model="creator" class="my-2" disabled />
@@ -107,7 +144,30 @@ const createAccount = async() => {
           <Label for="createAccount_postingMetadata">Posting Metadata</Label>
           <Textarea id="createAccount_postingMetadata" v-model="postingMetadata" class="my-2" />
         </div>
-        <Button class="my-2" @click="createAccount">Create account</Button>
+        <div class="flex items-center">
+          <Checkbox id="createAccountDelegation" v-model="enableDelegation" />
+          <label for="createAccountDelegation" class="pl-2 w-full flex items-center">
+            <span class="text-sm">Enable Delegation</span>
+          </label>
+        </div>
+        <div class="grid w-full max-w-sm items-center" v-if="enableDelegation">
+          <Label for="createAccount_delegationAmount">Delegation amount</Label>
+          <div class="flex items-center space-x-2">
+            <Input id="createAccount_delegationAmount" type="number" v-model="delegationAmount" min="0" class="my-2" />
+            <span>VESTS</span>
+          </div>
+        </div>
+        <RadioGroup default-value="default" v-model="createAccountType">
+          <div class="flex items-center space-x-2">
+            <RadioGroupItem id="createAccount_r1" value="default" />
+            <Label for="createAccount_r1">Default create</Label>
+          </div>
+          <div class="flex items-center space-x-2">
+            <RadioGroupItem id="createAccount_r3" value="claimed" />
+            <Label for="createAccount_r3">Create claimed</Label>
+          </div>
+        </RadioGroup>
+        <Button @click="createAccount">Create account</Button>
       </div>
     </CardContent>
   </Card>