diff --git a/packages/demo/components/pages/apis/transaction/basic/coinSelection.tsx b/packages/demo/components/pages/apis/transaction/basic/coinSelection.tsx new file mode 100644 index 00000000..ea665d8c --- /dev/null +++ b/packages/demo/components/pages/apis/transaction/basic/coinSelection.tsx @@ -0,0 +1,177 @@ +import Codeblock from '../../../../ui/codeblock'; +import SectionTwoCol from '../../../../common/sectionTwoCol'; +// import { useWallet } from '@meshsdk/react'; +// import { largestFirstMultiAsset, keepRelevant } from '@meshsdk/core'; +// import type { Unit, Quantity } from '@meshsdk/core'; +// import ConnectCipWallet from '../../../../common/connectCipWallet'; + +export default function CoinSelection() { + return ( + + ); +} + +function Left() { + let codeSnippet1 = `import { largestFirst } from '@meshsdk/core';\n\n`; + codeSnippet1 += `const utxos = await wallet.getUtxos();\n\n`; + codeSnippet1 += `const costLovelace = '10000000';\n`; + codeSnippet1 += `const selectedUtxos = largestFirst(costLovelace, utxos, true);`; + + let codeSnippet2 = `import { largestFirstMultiAsset } from '@meshsdk/core';\n`; + codeSnippet2 += `import type { Unit, Quantity } from '@meshsdk/core';\n\n`; + codeSnippet2 += `const utxos = await wallet.getUtxos();\n\n`; + codeSnippet2 += `const assetMap = new Map();\n`; + codeSnippet2 += `assetMap.set(\n`; + codeSnippet2 += ` 'd9312da562da182b02322fd8acb536f37eb9d29fba7c49dc172555274d657368546f6b656e',\n`; + codeSnippet2 += ` '1'\n`; + codeSnippet2 += `);\n`; + codeSnippet2 += `// if you need to include lovelace\n`; + codeSnippet2 += `assetMap.set(\n`; + codeSnippet2 += ` 'lovelace',\n`; + codeSnippet2 += ` '10000000'\n`; + codeSnippet2 += `);\n`; + codeSnippet2 += `// if you need to include more than 1 native asset\n`; + codeSnippet2 += `assetMap.set(\n`; + codeSnippet2 += ` 'another asset unit',\n`; + codeSnippet2 += ` '1'\n`; + codeSnippet2 += `);\n\n`; + codeSnippet2 += `const selectedUtxos = largestFirstMultiAsset(assetMap, utxos, true);`; + + let code3 = ``; + code3 += `largestFirst = (\n`; + code3 += ` lovelace: Quantity, initialUTxOSet: UTxO[], includeTxFees = false,\n`; + code3 += ` { maxTxSize, minFeeA, minFeeB } = DEFAULT_PROTOCOL_PARAMETERS,\n`; + code3 += `): UTxO[]`; + let code4 = ``; + code4 += `largestFirstMultiAsset = (\n`; + code4 += ` requestedOutputSet: Map, initialUTxOSet: UTxO[],\n`; + code4 += ` includeTxFees = false, parameters = DEFAULT_PROTOCOL_PARAMETERS,\n`; + code4 += `): UTxO[]\n`; + + let codeKeepRelevant = ``; + codeKeepRelevant += `import { keepRelevant } from '@meshsdk/core';\n`; + codeKeepRelevant += `import type { Unit, Quantity } from '@meshsdk/core';\n`; + codeKeepRelevant += `\n`; + codeKeepRelevant += `const utxos = await wallet.getUtxos();\n\n`; + codeKeepRelevant += `const assetMap = new Map();\n`; + codeKeepRelevant += `assetMap.set(\n`; + codeKeepRelevant += ` 'd9312da562da182b02322fd8acb536f37eb9d29fba7c49dc172555274d657368546f6b656e',\n`; + codeKeepRelevant += ` '1'\n`; + codeKeepRelevant += `);\n`; + codeKeepRelevant += `// if you need to include lovelace\n`; + codeKeepRelevant += `assetMap.set(\n`; + codeKeepRelevant += ` 'lovelace',\n`; + codeKeepRelevant += ` '10000000'\n`; + codeKeepRelevant += `);\n\n`; + codeKeepRelevant += `const selectedUtxos = keepRelevant(assetMap, utxos);\n`; + + let codeKeepRelevantDesc = ``; + codeKeepRelevantDesc += `keepRelevant = (\n`; + codeKeepRelevantDesc += ` requestedOutputSet: Map,\n`; + codeKeepRelevantDesc += ` initialUTxOSet: UTxO[],\n`; + codeKeepRelevantDesc += ` minimumLovelaceRequired = '5000000',\n`; + codeKeepRelevantDesc += `);\n`; + + return ( + <> +

There are three coin selection algorithms:

+
    +
  • Keep Relevant
  • +
  • Largest First
  • +
  • Largest First Multi-Asset
  • +
+

Keep Relevant

+

+ keepRelevant is a two steps coin selection algorithm. First + it tries to eliminate all the irrelevant UTxOs from the initial + UTxOs set. Then, it will check if we have enough lovelace to cover all + the multiassts we got in our UTxO selection; if the selected UTxOs + doesn't have enough lovelace, it will try to pickup the largest lovelace + UTxO from the wallet. +

+ +

+ Here is an example how you can use keepRelevant(): +

+ + +

Largest First

+

+ To select UTXOs for transaction that only requires lovelace, use{' '} + largestFirst. +

+ +

For example, selecting the UTXOs for sending 10000000 lovelace:

+ + +

Largest First Multi-Asset

+

+ largestFirstMultiAsset allows you to select native assets + by defining a Map of required assets. +

+ +

+ Although you have use this to specify require lovelace to fulfill this + transaction, but if your transaction only required lovelace, the + algorithm will exclude all multiasset utxo from the selection, thus you + could select the required UTXOs more efficiently. +

+ +

+ The third parameter, includeTxFees, if True, + Mesh will calculate the fees required, and include additional UTXOs to + fulfill the fees amount. +

+ + ); +} + +function Right() { + // const [state, setState] = useState(0); + // const [response, setResponse] = useState(null); + // const [responseError, setResponseError] = useState(null); + // const { wallet, connected } = useWallet(); + + // async function runDemo() { + // console.log(111, keepRelevant); + // console.log(222, largestFirstMultiAsset); + + // setState(1); + // setResponseError(null); + + // const utxos = await wallet.getUtxos(); + // console.log('all utxos', utxos); + // const assetMap = new Map(); + // assetMap.set( + // 'd9312da562da182b02322fd8acb536f37eb9d29fba7c49dc172555274d657368546f6b656e', + // '1' + // ); + // // assetMap.set( + // // 'lovelace', + // // '10000000' + // // ); + // // const selectedUtxos = largestFirstMultiAsset(assetMap, utxos, true); + // const selectedUtxos = keepRelevant(assetMap, utxos); + + // console.log('selectedUtxos', selectedUtxos); + + // try { + // setState(2); + // } catch (error) { + // setResponseError(`${error}`); + // setState(0); + // } + // } + + return ( + <> + {/* + */} + + ); +} diff --git a/packages/demo/components/pages/apis/transaction/getSize.tsx b/packages/demo/components/pages/apis/transaction/basic/getSize.tsx similarity index 96% rename from packages/demo/components/pages/apis/transaction/getSize.tsx rename to packages/demo/components/pages/apis/transaction/basic/getSize.tsx index 390ae44e..08ac896d 100644 --- a/packages/demo/components/pages/apis/transaction/getSize.tsx +++ b/packages/demo/components/pages/apis/transaction/basic/getSize.tsx @@ -1,13 +1,13 @@ import { useEffect, useState } from 'react'; -import Codeblock from '../../../ui/codeblock'; -import Card from '../../../ui/card'; -import RunDemoButton from '../../../common/runDemoButton'; -import RunDemoResult from '../../../common/runDemoResult'; -import SectionTwoCol from '../../../common/sectionTwoCol'; -import Input from '../../../ui/input'; -import Button from '../../../ui/button'; +import Codeblock from '../../../../ui/codeblock'; +import Card from '../../../../ui/card'; +import RunDemoButton from '../../../../common/runDemoButton'; +import RunDemoResult from '../../../../common/runDemoResult'; +import SectionTwoCol from '../../../../common/sectionTwoCol'; +import Input from '../../../../ui/input'; +import Button from '../../../../ui/button'; import { PlusCircleIcon, TrashIcon } from '@heroicons/react/24/solid'; -import { demoAddresses, demoCLIKey } from '../../../../configs/demo'; +import { demoAddresses, demoCLIKey } from '../../../../../configs/demo'; import { AppWallet, Transaction, @@ -16,7 +16,7 @@ import { BlockfrostProvider, } from '@meshsdk/core'; import type { Mint } from '@meshsdk/core'; -import Textarea from '../../../ui/textarea'; +import Textarea from '../../../../ui/textarea'; import Link from 'next/link'; const defaultMetadata = { diff --git a/packages/demo/components/pages/apis/transaction/sendAda.tsx b/packages/demo/components/pages/apis/transaction/basic/sendAda.tsx similarity index 92% rename from packages/demo/components/pages/apis/transaction/sendAda.tsx rename to packages/demo/components/pages/apis/transaction/basic/sendAda.tsx index 8264f27a..3e66c19e 100644 --- a/packages/demo/components/pages/apis/transaction/sendAda.tsx +++ b/packages/demo/components/pages/apis/transaction/basic/sendAda.tsx @@ -1,14 +1,14 @@ import { useEffect, useState } from 'react'; -import Codeblock from '../../../ui/codeblock'; -import Card from '../../../ui/card'; -import RunDemoButton from '../../../common/runDemoButton'; -import RunDemoResult from '../../../common/runDemoResult'; -import SectionTwoCol from '../../../common/sectionTwoCol'; -import ConnectCipWallet from '../../../common/connectCipWallet'; -import Input from '../../../ui/input'; -import Button from '../../../ui/button'; +import Codeblock from '../../../../ui/codeblock'; +import Card from '../../../../ui/card'; +import RunDemoButton from '../../../../common/runDemoButton'; +import RunDemoResult from '../../../../common/runDemoResult'; +import SectionTwoCol from '../../../../common/sectionTwoCol'; +import ConnectCipWallet from '../../../../common/connectCipWallet'; +import Input from '../../../../ui/input'; +import Button from '../../../../ui/button'; import { PlusCircleIcon, TrashIcon } from '@heroicons/react/24/solid'; -import { demoAddresses } from '../../../../configs/demo'; +import { demoAddresses } from '../../../../../configs/demo'; import { Transaction } from '@meshsdk/core'; import { useWallet, useWalletList } from '@meshsdk/react'; @@ -23,12 +23,6 @@ export default function SendAda() { lovelace: 1000000, }, }, - { - address: 'ANOTHER ADDRESS HERE', - assets: { - lovelace: 1500000, - }, - }, ]); useEffect(() => { @@ -125,6 +119,7 @@ function Right({ userInput, updateField }) { async function runDemo() { setState(1); + setResponse(null); setResponseError(null); try { diff --git a/packages/demo/components/pages/apis/transaction/basic/sendAdaHandler.tsx b/packages/demo/components/pages/apis/transaction/basic/sendAdaHandler.tsx index 29cc152a..26960b0e 100644 --- a/packages/demo/components/pages/apis/transaction/basic/sendAdaHandler.tsx +++ b/packages/demo/components/pages/apis/transaction/basic/sendAdaHandler.tsx @@ -95,6 +95,7 @@ function Right({ userInput, updateField }) { async function runDemo() { setState(1); + setResponse(null); setResponseError(null); try { diff --git a/packages/demo/components/pages/apis/transaction/sendAssets.tsx b/packages/demo/components/pages/apis/transaction/basic/sendAssets.tsx similarity index 93% rename from packages/demo/components/pages/apis/transaction/sendAssets.tsx rename to packages/demo/components/pages/apis/transaction/basic/sendAssets.tsx index a9603dd3..cafb5c8f 100644 --- a/packages/demo/components/pages/apis/transaction/sendAssets.tsx +++ b/packages/demo/components/pages/apis/transaction/basic/sendAssets.tsx @@ -1,16 +1,16 @@ import { useEffect, useState } from 'react'; -import Codeblock from '../../../ui/codeblock'; -import Card from '../../../ui/card'; -import RunDemoButton from '../../../common/runDemoButton'; -import RunDemoResult from '../../../common/runDemoResult'; -import SectionTwoCol from '../../../common/sectionTwoCol'; +import Codeblock from '../../../../ui/codeblock'; +import Card from '../../../../ui/card'; +import RunDemoButton from '../../../../common/runDemoButton'; +import RunDemoResult from '../../../../common/runDemoResult'; +import SectionTwoCol from '../../../../common/sectionTwoCol'; import { useWallet } from '@meshsdk/react'; -import ConnectCipWallet from '../../../common/connectCipWallet'; -import Input from '../../../ui/input'; -import Button from '../../../ui/button'; +import ConnectCipWallet from '../../../../common/connectCipWallet'; +import Input from '../../../../ui/input'; +import Button from '../../../../ui/button'; import { PlusCircleIcon, TrashIcon } from '@heroicons/react/24/solid'; -import { demoAddresses } from '../../../../configs/demo'; -import FetchSelectAssets from '../../../common/fetchSelectAssets'; +import { demoAddresses } from '../../../../../configs/demo'; +import FetchSelectAssets from '../../../../common/fetchSelectAssets'; import { Transaction } from '@meshsdk/core'; import type { Asset } from '@meshsdk/core'; @@ -26,12 +26,6 @@ export default function SendAssets() { '64af286e2ad0df4de2e7de15f8ff5b3d27faecf4ab2757056d860a424d657368546f6b656e': 1, }, }, - { - address: 'ANOTHER ADDRESS HERE', - assets: { - lovelace: 1500000, - }, - }, ]); useEffect(() => { @@ -152,6 +146,7 @@ function Right({ userInput, updateField }) { async function runDemo() { setState(1); + setResponse(null); setResponseError(null); try { diff --git a/packages/demo/components/pages/apis/transaction/basic/sendToken.tsx b/packages/demo/components/pages/apis/transaction/basic/sendToken.tsx new file mode 100644 index 00000000..6ebc0005 --- /dev/null +++ b/packages/demo/components/pages/apis/transaction/basic/sendToken.tsx @@ -0,0 +1,270 @@ +import { useEffect, useState } from 'react'; +import Codeblock from '../../../../ui/codeblock'; +import Card from '../../../../ui/card'; +import RunDemoButton from '../../../../common/runDemoButton'; +import RunDemoResult from '../../../../common/runDemoResult'; +import SectionTwoCol from '../../../../common/sectionTwoCol'; +import { useWallet } from '@meshsdk/react'; +import ConnectCipWallet from '../../../../common/connectCipWallet'; +import Input from '../../../../ui/input'; +import Button from '../../../../ui/button'; +import { PlusCircleIcon, TrashIcon } from '@heroicons/react/24/solid'; +import { demoAddresses } from '../../../../../configs/demo'; +import { Transaction } from '@meshsdk/core'; +import Select from '../../../../ui/select'; + +export default function SendToken() { + const { wallet, connected } = useWallet(); + const [userInput, setUserInput] = useState< + { address: string; token: string; quantity: number }[] + >([ + { + address: demoAddresses.testnet, + token: 'DJED', + quantity: 1000000, + }, + ]); + + useEffect(() => { + async function init() { + const newRecipents = [ + { + address: + (await wallet.getNetworkId()) === 1 + ? demoAddresses.mainnet + : demoAddresses.testnet, + token: 'DJED', + quantity: 1000000, + }, + ]; + setUserInput(newRecipents); + } + if (connected) { + init(); + } + }, [connected]); + + function updateField(action, index, field, value) { + let updated = [...userInput]; + if (action == 'add') { + updated.push({ address: '', token: 'DJED', quantity: 0 }); + } else if (action == 'update') { + updated[index][field] = value; + } else if (action == 'remove') { + updated.splice(index, 1); + } + setUserInput(updated); + } + + return ( + + ); +} + +function Left({ userInput }) { + let codeSnippet = `import { Transaction } from '@meshsdk/core';\n\n`; + + codeSnippet += `const tx = new Transaction({ initiator: wallet })\n`; + for (const recipient of userInput) { + codeSnippet += ` .sendToken(\n`; + codeSnippet += ` '${recipient.address}', \n`; + codeSnippet += ` '${recipient.token}', \n`; + codeSnippet += ` '${recipient.quantity}'\n`; + codeSnippet += ` )\n`; + } + codeSnippet += `;\n\n`; + codeSnippet += `const unsignedTx = await tx.build();\n`; + codeSnippet += `const signedTx = await wallet.signTx(unsignedTx);\n`; + codeSnippet += `const txHash = await wallet.submitTx(signedTx);`; + + return ( + <> +

+ We can chain sendToken() to send to multiple recipients. + For each recipients, append: +

+ +

+ Like sendAssets(), we can chain sendToken(){' '} + along side tx.sendAssets() to send multiple assets to + multiple recipients. +

+ + + ); +} + +function Right({ userInput, updateField }) { + const [state, setState] = useState(0); + const [response, setResponse] = useState(null); + const [responseError, setResponseError] = useState(null); + const { wallet, connected } = useWallet(); + + async function runDemo() { + setState(1); + setResponse(null); + setResponseError(null); + + try { + const tx = new Transaction({ initiator: wallet }); + + for (const recipient of userInput) { + tx.sendToken( + recipient.address, + recipient.token, + recipient.quantity.toString() + ); + } + + const unsignedTx = await tx.build(); + const signedTx = await wallet.signTx(unsignedTx); + const txHash = await wallet.submitTx(signedTx); + setResponse(txHash); + setState(2); + } catch (error) { + console.error(error); + setResponseError(JSON.stringify(error)); + setState(0); + } + } + + return ( + + + {connected ? ( + <> + + + + ) : ( + + )} + + + ); +} + +function InputTable({ userInput, updateField }) { + return ( +
+ + + + + + + + + {userInput.map((row, i) => { + return ( + + + + ); + })} + + + + +
+ Send tokens to recipients +

+ Add or remove recipients, input the address and the amount tokens to send. +

+
+ Recipients +
+
+
+ Recipient #{i + 1} +
+
+ +
+
+ + updateField('update', i, 'address', e.target.value) + } + placeholder="Address" + label="Address" + /> + + + updateField('update', i, 'quantity', e.target.value) + } + placeholder="Amount in Lovelace" + label="Quantity" + /> +
+ +
+
+ ); +} diff --git a/packages/demo/components/pages/apis/transaction/basic/setMetadata.tsx b/packages/demo/components/pages/apis/transaction/basic/setMetadata.tsx index 11e50df7..f7eaefc9 100644 --- a/packages/demo/components/pages/apis/transaction/basic/setMetadata.tsx +++ b/packages/demo/components/pages/apis/transaction/basic/setMetadata.tsx @@ -83,6 +83,7 @@ function Right({ userInput, setUserInput }) { async function runDemo() { setState(1); + setResponse(null); setResponseError(null); try { diff --git a/packages/demo/components/pages/apis/transaction/setTimeLimit.tsx b/packages/demo/components/pages/apis/transaction/basic/setTimeLimit.tsx similarity index 95% rename from packages/demo/components/pages/apis/transaction/setTimeLimit.tsx rename to packages/demo/components/pages/apis/transaction/basic/setTimeLimit.tsx index 9a3606eb..ccb5a506 100644 --- a/packages/demo/components/pages/apis/transaction/setTimeLimit.tsx +++ b/packages/demo/components/pages/apis/transaction/basic/setTimeLimit.tsx @@ -1,5 +1,5 @@ -import Codeblock from '../../../ui/codeblock'; -import SectionTwoCol from '../../../common/sectionTwoCol'; +import Codeblock from '../../../../ui/codeblock'; +import SectionTwoCol from '../../../../common/sectionTwoCol'; export default function SetTimeLimit() { return ( diff --git a/packages/demo/components/pages/apis/transaction/coinSelection.tsx b/packages/demo/components/pages/apis/transaction/coinSelection.tsx deleted file mode 100644 index 11adf80c..00000000 --- a/packages/demo/components/pages/apis/transaction/coinSelection.tsx +++ /dev/null @@ -1,124 +0,0 @@ -import { useState } from 'react'; -import Codeblock from '../../../ui/codeblock'; -import SectionTwoCol from '../../../common/sectionTwoCol'; -import { useWallet } from '@meshsdk/react'; -import { largestFirstMultiAsset } from '@meshsdk/core'; -import type { Unit, Quantity } from '@meshsdk/core'; - -export default function CoinSelection() { - return ( - - ); -} - -function Left() { - let codeSnippet1 = `import { largestFirst } from '@meshsdk/core';\n\n`; - codeSnippet1 += `const utxos = await wallet.getUtxos();\n\n`; - codeSnippet1 += `const costLovelace = '10000000';\n`; - codeSnippet1 += `const selectedUtxos = largestFirst(costLovelace, utxos, true);`; - - let codeSnippet2 = `import { largestFirstMultiAsset } from '@meshsdk/core';\n`; - codeSnippet2 += `import type { Unit, Quantity } from '@meshsdk/core';\n\n`; - codeSnippet2 += `const utxos = await wallet.getUtxos();\n\n`; - codeSnippet2 += `const assetMap = new Map();\n`; - codeSnippet2 += `assetMap.set(\n`; - codeSnippet2 += ` 'd9312da562da182b02322fd8acb536f37eb9d29fba7c49dc172555274d657368546f6b656e',\n`; - codeSnippet2 += ` '1'\n`; - codeSnippet2 += `);\n`; - codeSnippet2 += `// if you need to include lovelace\n`; - codeSnippet2 += `assetMap.set(\n`; - codeSnippet2 += ` 'lovelace',\n`; - codeSnippet2 += ` '10000000'\n`; - codeSnippet2 += `);\n`; - codeSnippet2 += `// if you need to include more than 1 native asset\n`; - codeSnippet2 += `assetMap.set(\n`; - codeSnippet2 += ` 'another asset unit',\n`; - codeSnippet2 += ` '1'\n`; - codeSnippet2 += `);\n\n`; - codeSnippet2 += `const selectedUtxos = largestFirstMultiAsset(assetMap, utxos, true);`; - - let code3 = ``; - code3 += `largestFirst = (\n`; - code3 += ` lovelace: Quantity, initialUTxOSet: UTxO[], includeTxFees = false,\n`; - code3 += ` { maxTxSize, minFeeA, minFeeB } = DEFAULT_PROTOCOL_PARAMETERS,\n`; - code3 += `): UTxO[]`; - let code4 = ``; - code4 += `largestFirstMultiAsset = (\n`; - code4 += ` requestedOutputSet: Map, initialUTxOSet: UTxO[],\n`; - code4 += ` includeTxFees = false, parameters = DEFAULT_PROTOCOL_PARAMETERS,\n`; - code4 += `): UTxO[]\n`; - - return ( - <> -

- There are two coin selection algorithm, one for selecting lovelace, - another for selecting multiple assets. -

-

- To select UTXOs for transaction that only requires lovelace, use{' '} - largestFirst. -

- -

For example, selecting the UTXOs for sending 10000000 lovelace:

- -

- largestFirstMultiAsset allows you to select native assets - by defining a Map of required assets. -

- -

- Although you have use this to specify require lovelace to fulfill this - transaction, but if your transaction only required lovelace, the - algorithm will exclude all multiasset utxo from the selection, thus you - could select the required UTXOs more efficiently. -

- -

- The third parameter, includeTxFees, if True, - Mesh will calculate the fees required, and include additional UTXOs to - fulfill the fees amount. -

- - ); -} - -function Right() { - const [state, setState] = useState(0); - const [response, setResponse] = useState(null); - const [responseError, setResponseError] = useState(null); - const { wallet, connected } = useWallet(); - - async function runDemo() { - setState(1); - setResponseError(null); - - const utxos = await wallet.getUtxos(); - console.log('all utxos', utxos); - const assetMap = new Map(); - assetMap.set( - 'd9312da562da182b02322fd8acb536f37eb9d29fba7c49dc172555274d657368546f6b656e', - // '64af286e2ad0df4de2e7de15f8ff5b3d27faecf4ab2757056d860a424d657368546f6b656e', - '1' - ); - // assetMap.set( - // 'lovelace', - // '10000000' - // ); - const selectedUtxos = largestFirstMultiAsset(assetMap, utxos, true); - console.log('selectedUtxos', selectedUtxos); - - try { - setState(2); - } catch (error) { - setResponseError(`${error}`); - setState(0); - } - } - - return <>; -} diff --git a/packages/demo/components/pages/apis/transaction/index.tsx b/packages/demo/components/pages/apis/transaction/index.tsx deleted file mode 100644 index 88a15cb6..00000000 --- a/packages/demo/components/pages/apis/transaction/index.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import CommonLayout from '../../../common/layout'; -import Burning from './burning'; -import CoinSelection from './coinSelection'; -import DesignDatum from './datum'; -import Hero from './hero'; -import LockAssets from './lockAssets'; -import Minting from './minting'; -import SendAda from './sendAda'; -import SendAssets from './sendAssets'; -import SetTimeLimit from './setTimeLimit'; -import UnlockAssets from './unlockAssets'; -import UsingRedeemer from './redeemer'; - -export default function Transaction() { - const sidebarItems = [ - { label: 'Send ADA to addresses', to: 'sendAda' }, - { label: 'Send multi-assets to addresses', to: 'sendAssets' }, - { label: 'Minting assets', to: 'minting' }, - { label: 'Burning assets', to: 'burning' }, - { label: 'Lock assets in smart contract', to: 'lockAssets' }, - { label: 'Unlock assets from smart contract', to: 'unlockAssets' }, - { label: 'Designing datum', to: 'datum' }, - { label: 'Using redeemer', to: 'redeemer' }, - { label: 'Set time limit', to: 'setTimeLimit' }, - { label: 'Coin Selection', to: 'coinSelection' }, - ]; - - return ( - - -
- - ); -} - -function Main() { - return ( - <> - - - - - - - - - - - - ); -} diff --git a/packages/demo/components/pages/apis/transaction/burning.tsx b/packages/demo/components/pages/apis/transaction/minting/burning.tsx similarity index 94% rename from packages/demo/components/pages/apis/transaction/burning.tsx rename to packages/demo/components/pages/apis/transaction/minting/burning.tsx index df1ba0ef..73074860 100644 --- a/packages/demo/components/pages/apis/transaction/burning.tsx +++ b/packages/demo/components/pages/apis/transaction/minting/burning.tsx @@ -1,12 +1,12 @@ import { useEffect, useState } from 'react'; -import Codeblock from '../../../ui/codeblock'; -import Card from '../../../ui/card'; -import RunDemoButton from '../../../common/runDemoButton'; -import RunDemoResult from '../../../common/runDemoResult'; -import SectionTwoCol from '../../../common/sectionTwoCol'; +import Codeblock from '../../../../ui/codeblock'; +import Card from '../../../../ui/card'; +import RunDemoButton from '../../../../common/runDemoButton'; +import RunDemoResult from '../../../../common/runDemoResult'; +import SectionTwoCol from '../../../../common/sectionTwoCol'; import { useWallet } from '@meshsdk/react'; -import ConnectCipWallet from '../../../common/connectCipWallet'; -import Input from '../../../ui/input'; +import ConnectCipWallet from '../../../../common/connectCipWallet'; +import Input from '../../../../ui/input'; import { Transaction, ForgeScript } from '@meshsdk/core'; import type { Asset, AssetExtended } from '@meshsdk/core'; @@ -134,6 +134,7 @@ function Right({ userInput, updateField, walletAssets }) { async function runDemo() { setState(1); + setResponse(null); setResponseError(null); try { diff --git a/packages/demo/components/pages/apis/transaction/minting.tsx b/packages/demo/components/pages/apis/transaction/minting/minting.tsx similarity index 96% rename from packages/demo/components/pages/apis/transaction/minting.tsx rename to packages/demo/components/pages/apis/transaction/minting/minting.tsx index 9f7eb3a9..0eee63bb 100644 --- a/packages/demo/components/pages/apis/transaction/minting.tsx +++ b/packages/demo/components/pages/apis/transaction/minting/minting.tsx @@ -1,18 +1,18 @@ import { useEffect, useState } from 'react'; -import Codeblock from '../../../ui/codeblock'; -import Card from '../../../ui/card'; -import RunDemoButton from '../../../common/runDemoButton'; -import RunDemoResult from '../../../common/runDemoResult'; -import SectionTwoCol from '../../../common/sectionTwoCol'; +import Codeblock from '../../../../ui/codeblock'; +import Card from '../../../../ui/card'; +import RunDemoButton from '../../../../common/runDemoButton'; +import RunDemoResult from '../../../../common/runDemoResult'; +import SectionTwoCol from '../../../../common/sectionTwoCol'; import { useWallet } from '@meshsdk/react'; -import ConnectCipWallet from '../../../common/connectCipWallet'; -import Input from '../../../ui/input'; -import Button from '../../../ui/button'; +import ConnectCipWallet from '../../../../common/connectCipWallet'; +import Input from '../../../../ui/input'; +import Button from '../../../../ui/button'; import { PlusCircleIcon, TrashIcon } from '@heroicons/react/24/solid'; -import { demoAddresses } from '../../../../configs/demo'; +import { demoAddresses } from '../../../../../configs/demo'; import { Transaction, ForgeScript, AssetMetadata } from '@meshsdk/core'; import type { Mint } from '@meshsdk/core'; -import Textarea from '../../../ui/textarea'; +import Textarea from '../../../../ui/textarea'; import Link from 'next/link'; const defaultMetadata = { @@ -231,6 +231,7 @@ function Right({ userInput, updateField }) { async function runDemo() { setState(1); + setResponse(null); setResponseError(null); try { diff --git a/packages/demo/components/pages/apis/transaction/datum.tsx b/packages/demo/components/pages/apis/transaction/smart-contract/datum.tsx similarity index 76% rename from packages/demo/components/pages/apis/transaction/datum.tsx rename to packages/demo/components/pages/apis/transaction/smart-contract/datum.tsx index 807ef7ae..e016dd2f 100644 --- a/packages/demo/components/pages/apis/transaction/datum.tsx +++ b/packages/demo/components/pages/apis/transaction/smart-contract/datum.tsx @@ -1,6 +1,6 @@ import { useEffect, useState } from 'react'; -import Codeblock from '../../../ui/codeblock'; -import SectionTwoCol from '../../../common/sectionTwoCol'; +import Codeblock from '../../../../ui/codeblock'; +import SectionTwoCol from '../../../../common/sectionTwoCol'; import { resolveDataHash } from '@meshsdk/core'; import type { Data } from '@meshsdk/core'; @@ -145,55 +145,5 @@ function Left({}) { } function Right({}) { - // const [userDefine, setUserDefine] = useState(`meshtoken`); - // const [response, setResponse] = useState(null); - - // useEffect(() => { - // const datumHash = resolveDataHash(userDefine); - // setResponse(datumHash); - // }, [userDefine]); - return <>; - // return ( - // - //
- // - // - // - // - // - // - // - // - // - //
- // Design your own datum - //

- // Test your datum and get the datum hash. This demo is particularly - // helpful as you can use this to validate the datum hash against - // those generated by Cardano-CLI. - //

- //
- // Datum - //
- //