Multiple child bounty actions (#434)

src/components/Footer/Footer.svelte

@@ -35,7 +35,7 @@
 	<!-- Terms and Conditions -->
 	<a
 		href={isOnImprintPage ? '/curator-actions' : '/imprint'}
-		class="text-xs text-white underline underline-offset-2 pr-5"
+		class="text-xs text-white underline underline-offset-2"
 	>
 		{isOnImprintPage ? 'Back' : 'Imprint and Terms & Conditions'}
 	</a>

src/components/curator-actions/CuratorActions.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
 	import type { Bounty } from '../../types/bounty';
-	import { onMount } from 'svelte';
 	import { activeAccount, activeAccountBounties, bounties, showAllBounties } from '../../stores';
-	import { fetchBountiesAndChildBounties } from '../../utils/fetch-bounties';
 	import BountyCard from './BountyCard.svelte';
 	import Pagination from './Pagination.svelte';
 
@@ -28,12 +26,6 @@
 		itemsPerPage = value;
 		currentPage = 1;
 	}
-
-	onMount(async () => {
-		if ($bounties.length === 0) {
-			await fetchBountiesAndChildBounties();
-		}
-	});
 </script>
 
 <div

src/components/curator-actions/child-bounties/operations/AddChildBounty.svelte

@@ -66,9 +66,7 @@
 			<span>#{bounty.id}</span>
 			<span>{bounty.description ?? ''}</span>
 		</div>
-		<p>
-			Please use a descriptive title and add info about the task and beneficiary in the description.
-		</p>
+		<p>Please use a descriptive title.</p>
 	</div>
 
 	<div class="flex flex-col gap-6 mt-6">
@@ -103,13 +101,24 @@
 			<p><Fee {transaction} /></p>
 		</section>
 
-		<button
-			on:click={submit}
-			class="{`w-full md:w-fit mt-10 h-12 ${isFormValid ? 'button-active' : 'cursor-not-allowed'}`}
-		{!isFormValid ? 'button-active' : 'cursor-allowed'}"
-			disabled={!isFormValid}
-		>
-			SIGN
-		</button>
+		<p class="mt-10 flex flex-col md:flex-row-reverse gap-6 justify-between md:items-center">
+			<a
+				class="underline"
+				href="/curator-actions/batch/create?{new URLSearchParams({
+					'bounty-id': String(bounty.id),
+					value: bountyValue,
+					title: bountyTitle
+				}).toString()}"
+			>
+				Add several in one transaction
+			</a>
+			<button
+				on:click={submit}
+				class={['h-12 button-active', !isFormValid && 'cursor-not-allowed']}
+				disabled={!isFormValid}
+			>
+				SIGN
+			</button>
+		</p>
 	</div>
 </Dialog>

src/components/curator-actions/child-bounties/operations/BatchAllChildBountyCalls.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { convertFormattedDotToPlanck, isValidAddress } from '../../../../utils/polkadot';
+	import { isValidAddress } from '../../../../utils/polkadot';
+	import { getAllChildBountyCalls } from '../../../../utils/getAllChildBountyCalls';
 	import Dialog from '../../../common/Dialog.svelte';
 	import { activeAccount, dotApi } from '../../../../stores';
 	import { showErrorDialog } from '../../../../utils/loading-screen';
 	import { isPositiveNumber } from '../../../../utils/common';
 	import PolkaCoin from '../../../svg/PolkaCoin.svg';
-	import { MultiAddress } from '@polkadot-api/descriptors';
 	import { maybeTransaction, submitTransaction } from '../../../../utils/transaction';
 	import ExtendBountyLabel from '../../../ExtendBountyLabel.svelte';
 	import ToggleIcon from '../../../ToggleIcon.svelte';
@@ -33,50 +33,23 @@
 	$: transaction = maybeTransaction(() => {
 		if (!$activeAccount || !isValidAddress(beneficiary) || !isPositiveNumber(curatorFee)) return;
 
-		const add = $dotApi.tx.ChildBounties.add_child_bounty({
-			parent_bounty_id: bounty.id,
-			value: convertFormattedDotToPlanck(bountyValue),
-			description: Binary.fromText(bountyTitle)
-		});
-
-		const propose = $dotApi.tx.ChildBounties.propose_curator({
-			parent_bounty_id: bounty.id,
-			child_bounty_id: childBountyId,
-			curator: MultiAddress.Id($activeAccount.address),
-			fee: convertFormattedDotToPlanck(curatorFee)
-		});
-
-		const accept = $dotApi.tx.ChildBounties.accept_curator({
-			parent_bounty_id: bounty.id,
-			child_bounty_id: childBountyId
-		});
-
-		const award = $dotApi.tx.ChildBounties.award_child_bounty({
+		const batch = getAllChildBountyCalls({
 			parent_bounty_id: bounty.id,
 			child_bounty_id: childBountyId,
-			beneficiary: MultiAddress.Id(beneficiary)
+			title: bountyTitle,
+			value: bountyValue,
+			curator: $activeAccount.address,
+			beneficiary: beneficiary,
+			fee: curatorFee
 		});
 
-		const claim = $dotApi.tx.ChildBounties.claim_child_bounty({
-			parent_bounty_id: bounty.id,
-			child_bounty_id: childBountyId
-		});
-
-		const extendTx = $dotApi.tx.Bounties.extend_bounty_expiry({
+		const extendCall = $dotApi.tx.Bounties.extend_bounty_expiry({
 			bounty_id: bounty.id,
 			remark: new Binary(new Uint8Array())
-		});
+		}).decodedCall;
 
-		return $dotApi.tx.Utility.batch_all({
-			calls: [
-				add.decodedCall,
-				propose.decodedCall,
-				accept.decodedCall,
-				award.decodedCall,
-				claim.decodedCall,
-				...(extend ? [extendTx.decodedCall] : [])
-			]
-		});
+		const calls = [...batch, ...(extend ? [extendCall] : [])];
+		return $dotApi.tx.Utility.batch_all({ calls });
 	});
 
 	async function submit() {
@@ -110,29 +83,32 @@
 			#{bounty.id}
 			{bounty.description ?? ''}
 		</p>
-		<ol class="text-xs mt-6 ml-4 list-decimal">
-			<li>Add new child bounty.</li>
-			<li>Assign the connected account as sub-curator.</li>
-			<li>Accept sub-curator role.</li>
-			<li>Award child bounty to the provided beneficiary.</li>
-			<li>Claim child bounty.</li>
-		</ol>
+
+		<section class="mt-6">
+			<p class="text-xs">Executed actions:</p>
+
+			<ol class="text-xs mt-2 ml-4 list-decimal">
+				<li>Create a new child bounty.</li>
+				<li>Assign the connected account as sub-curator.</li>
+				<li>Accept the sub-curator role.</li>
+				<li>Award the child bounty to the provided beneficiary.</li>
+				<li>Claim the child bounty.</li>
+			</ol>
+		</section>
 
 		<p class="text-xs mt-6 border border-red text-red rounded-[3px] p-2">
-			Currently, the child bounty's index needs to be guessed in order to execute a batch call. To
-			create multiple batch transactions, increment the child bounty's index by 1 for each new
-			transaction after the first to avoid conflicts. <br /> Please note: If multiple batch transactions
-			are assigned the same index or if another bounty creates a child bounty in the time between the
-			transaction creation and confirmation on Multix, the transaction will fail.
+			Currently, the child bounty’s index is estimated by incrementing the highest available on the
+			blockchain. <br /> Please note: if multiple child bounties are assigned the same index, or if another
+			bounty creates a child between this transaction’s creation and confirmation, this transaction will
+			fail.
 		</p>
 		<div class="mt-5">
 			<p class="text-xs">Child Bounty Index</p>
 			<input
 				type="number"
 				min={nextAvailableChildBountyId}
 				bind:value={childBountyId}
-				class="border border-black rounded-[3px] bg-childBountyHeaderBackground pl-2 pt-1 h-10 w-full"
-				placeholder=""
+				class="border border-black rounded-[3px] bg-white pl-2 pt-1 h-10 w-full"
 			/>
 		</div>
 
@@ -158,7 +134,7 @@
 			/>
 		</div>
 		<div class="mt-5 relative">
-			<p class="text-xs">Sub-curator fee:</p>
+			<p class="text-xs">Sub-curator fee</p>
 			<input
 				bind:value={curatorFee}
 				class="border border-primary rounded-[3px] bg-white pl-2 pt-1 h-10 w-full"
@@ -175,7 +151,6 @@
 			<input
 				bind:value={beneficiary}
 				class="border border-primary rounded-[3px] bg-white pl-2 pt-1 h-10 w-full text-primary"
-				placeholder=""
 			/>
 		</div>
 
@@ -195,14 +170,29 @@
 		soon as possible
 	</p>
 
-	<button
-		on:click={submit}
-		disabled={!beneficiary.length || !curatorFee.length}
-		class="w-full md:w-fit mt-10 h-12 bg-childBountyGray basic-button
+	<p class="mt-10 flex flex-col md:flex-row-reverse gap-6 justify-between md:items-center">
+		<a
+			class="underline"
+			href="/curator-actions/batch/everything?{new URLSearchParams({
+				'bounty-id': String(bounty.id),
+				'child-bounty-id': String(childBountyId),
+				value: bountyValue,
+				title: bountyTitle,
+				fee: curatorFee,
+				beneficiary
+			}).toString()}"
+		>
+			Run several in one transaction
+		</a>
+		<button
+			on:click={submit}
+			disabled={!beneficiary.length || !curatorFee.length}
+			class="h-12 bg-childBountyGray basic-button
 		{beneficiary.length === 0 || curatorFee.length === 0
-			? 'basic-button opacity-50'
-			: 'cursor-allowed'}"
-	>
-		SIGN
-	</button>
+				? 'cursor-not-allowed opacity-50'
+				: 'cursor-allowed'}"
+		>
+			SIGN
+		</button>
+	</p>
 </Dialog>

src/routes/+layout.ts

@@ -1,8 +1,9 @@
 import { dotApi } from '../stores';
 import { endpoints } from '../utils/endpoints';
+import { get } from 'svelte/store';
 
 export async function load() {
-	if (typeof window !== 'undefined') {
+	if (typeof window !== 'undefined' && typeof get(dotApi) === 'undefined') {
 		// in browser create the API before rendering page contents
 		const { createTypedApi } = await import('../utils/createTypedApi');
 		dotApi.set(createTypedApi(endpoints));

src/routes/curator-actions/+layout.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { fetchBountiesAndChildBounties } from '../../utils/fetch-bounties';
+	import { bounties } from '../../stores';
+
+	onMount(async () => {
+		if ($bounties.length === 0) {
+			await fetchBountiesAndChildBounties();
+		}
+	});
+</script>
+
+<slot />