From 69faf1e52cb60269d5e18367887f827d7d3bd6b6 Mon Sep 17 00:00:00 2001
From: mtyszczak <mateusz.tyszczak@gmail.com>
Date: Thu, 13 Mar 2025 13:28:56 +0100
Subject: [PATCH] Allow different types of account creation
---
src/components/ui/radio-group/RadioGroup.vue | 25 +++++++
.../ui/radio-group/RadioGroupItem.vue | 39 +++++++++++
src/components/ui/radio-group/index.ts | 2 +
.../utilcards/ConfirmCreateAccountCard.vue | 70 +++++++++++++++++--
4 files changed, 131 insertions(+), 5 deletions(-)
create mode 100644 src/components/ui/radio-group/RadioGroup.vue
create mode 100644 src/components/ui/radio-group/RadioGroupItem.vue
create mode 100644 src/components/ui/radio-group/index.ts
diff --git a/src/components/ui/radio-group/RadioGroup.vue b/src/components/ui/radio-group/RadioGroup.vue
new file mode 100644
index 0000000..1983645
--- /dev/null
+++ b/src/components/ui/radio-group/RadioGroup.vue
@@ -0,0 +1,25 @@
+<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>
diff --git a/src/components/ui/radio-group/RadioGroupItem.vue b/src/components/ui/radio-group/RadioGroupItem.vue
new file mode 100644
index 0000000..7bb10ac
--- /dev/null
+++ b/src/components/ui/radio-group/RadioGroupItem.vue
@@ -0,0 +1,39 @@
+<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>
diff --git a/src/components/ui/radio-group/index.ts b/src/components/ui/radio-group/index.ts
new file mode 100644
index 0000000..fa1da9c
--- /dev/null
+++ b/src/components/ui/radio-group/index.ts
@@ -0,0 +1,2 @@
+export { default as RadioGroup } from './RadioGroup.vue'
+export { default as RadioGroupItem } from './RadioGroupItem.vue'
diff --git a/src/components/utilcards/ConfirmCreateAccountCard.vue b/src/components/utilcards/ConfirmCreateAccountCard.vue
index 287c2f0..be55531 100644
--- a/src/components/utilcards/ConfirmCreateAccountCard.vue
+++ b/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>
--
GitLab