Permissioned domains

[oeggert]

Add modular tutorial for Permissioned Domains. Includes pending refactors from #3091

[oeggert]

@maria-robobug After #3091 is merged, I'll update whatever changes happened there into this PR. I expect only the code to change on the backend, the frontend functionality and tutorial page should stay the same, so those can be safely reviewed.

[maria-robobug]

Don't think we need the comment here?

Suggested change

	Download the [Modular Tutorials](https://github.com/XRPLF/xrpl-dev-portal/tree/master/_code-samples/modular-tutorials/)<!-- {.github-code-download} --> folder.
	Download the [Modular Tutorials](https://github.com/XRPLF/xrpl-dev-portal/tree/master/_code-samples/modular-tutorials/).

[maria-robobug]

The try-catch formatting needs indentation:

Suggested change

	try {
	// Get account wallet from seed
	const wallet = xrpl.Wallet.fromSeed(accountSeedField.value)
	// Get Domain ID
	const domainID = domainIDField.value
	// Get credential type - convert string to hex if needed
	let credentialType = credentialTypeField.value;
	if (!/^[0-9A-F]+$/i.test(credentialType)) {
	let hex = '';
	for (let i = 0; i < credentialType.length; i++) {
	const charCode = credentialType.charCodeAt(i);
	const hexCharCode = charCode.toString(16).padStart(2, '0');
	hex += hexCharCode;
	}
	credentialType = hex.toUpperCase();
	}
	// Prepare transaction
	const transaction = {
	"TransactionType": "PermissionedDomainSet",
	"Account": wallet.address,
	"AcceptedCredentials": [
	{
	"Credential": {
	"Issuer": wallet.address,
	"CredentialType": credentialType
	}
	}
	]
	}
	if (domainID) {
	transaction.DomainID = domainID
	}
	results = `\n\n===Preparing and Sending Transaction===\n\n${JSON.stringify(transaction, null, 2)}`
	updateResults()
	// Submit transaction
	const tx = await client.submitAndWait(transaction, {autofill: true, wallet: wallet})
	if (tx.result.meta.TransactionResult == "tesSUCCESS") {
	// Parse for domain info
	if (domainID) {
	results = `\n\n===Create Permissioned Domain Result===\n\n${JSON.stringify(tx.result.tx_json, null, 2)}`
	} else {
	const parsedResponse = JSON.parse(JSON.stringify(tx.result.meta.AffectedNodes, null, 2))
	const domainInfo = parsedResponse.find( node => node.CreatedNode && node.CreatedNode.LedgerEntryType === "PermissionedDomain" )
	results = `\n\n===Create Permissioned Domain Result===\n\n${JSON.stringify(domainInfo.CreatedNode, null, 2)}`
	}
	} else {
	results = `\n\n===Error===\n\n${JSON.stringify(tx.result.meta.TransactionResult, null, 2)}: Check codes at https://xrpl.org/docs/references/protocol/transactions/types/permissioneddomainset#error-cases`
	}
	updateResults()
	} catch (error) {
	results = `\n\n===Error===\n\n${error}`
	updateResults()
	}
	try {
	// Get account wallet from seed
	const wallet = xrpl.Wallet.fromSeed(accountSeedField.value)
	// Get Domain ID
	const domainID = domainIDField.value
	// Get credential type - convert string to hex if needed
	let credentialType = credentialTypeField.value;
	if (!/^[0-9A-F]+$/i.test(credentialType)) {
	let hex = '';
	for (let i = 0; i < credentialType.length; i++) {
	const charCode = credentialType.charCodeAt(i);
	const hexCharCode = charCode.toString(16).padStart(2, '0');
	hex += hexCharCode;
	}
	credentialType = hex.toUpperCase();
	}
	// Prepare transaction
	const transaction = {
	"TransactionType": "PermissionedDomainSet",
	"Account": wallet.address,
	"AcceptedCredentials": [
	{
	"Credential": {
	"Issuer": wallet.address,
	"CredentialType": credentialType
	}
	}
	]
	}
	if (domainID) {
	transaction.DomainID = domainID
	}
	results = `\n\n===Preparing and Sending Transaction===\n\n${JSON.stringify(transaction, null, 2)}`
	updateResults()
	// Submit transaction
	const tx = await client.submitAndWait(transaction, {autofill: true, wallet: wallet})
	if (tx.result.meta.TransactionResult == "tesSUCCESS") {
	// Parse for domain info
	if (domainID) {
	results = `\n\n===Create Permissioned Domain Result===\n\n${JSON.stringify(tx.result.tx_json, null, 2)}`
	} else {
	const parsedResponse = JSON.parse(JSON.stringify(tx.result.meta.AffectedNodes, null, 2))
	const domainInfo = parsedResponse.find( node => node.CreatedNode && node.CreatedNode.LedgerEntryType === "PermissionedDomain" )
	results = `\n\n===Create Permissioned Domain Result===\n\n${JSON.stringify(domainInfo.CreatedNode, null, 2)}`
	}
	} else {
	results = `\n\n===Error===\n\n${JSON.stringify(tx.result.meta.TransactionResult, null, 2)}: Check codes at https://xrpl.org/docs/references/protocol/transactions/types/permissioneddomainset#error-cases`
	}
	updateResults()
	} catch (error) {
	results = `\n\n===Error===\n\n${error}`
	updateResults()
	}

[maria-robobug]

We can use convenience functions from the @xrplf/isomorphic package to convert string to hex or hex back to string: stringToHex, hexToString.

Also mentioned in xrpl.js reference:
https://js.xrpl.org/functions/convertStringToHex.html
https://js.xrpl.org/functions/convertHexToString.html

[maria-robobug]

This is a question I had in the other PR as well, more for my own benefit to understand which approach we want to go with.

Shouldn't we be referencing code snippets like this now?

{% code-snippet file="/_code-samples/modular-tutorials/send-checks.js" language="js" from="async function sendCheck() {" before="let check_amount = amountField.value" /%}

[maria-robobug]

Suggested change

	2. Click **Create Credential**
	2. Click **Create Credential**.

[maria-robobug]

Suggested change

	2. Click **Delete Permissioned Domain**..
	2. Click **Delete Permissioned Domain**.