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.
+
+ );
+}
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
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- // {response !== null && (
- // <>
- //
- // Result:
- //
- //
- // >
- // )}
- //
- // );
}
diff --git a/packages/demo/components/pages/apis/transaction/lockAssets.tsx b/packages/demo/components/pages/apis/transaction/smart-contract/lockAssets.tsx
similarity index 93%
rename from packages/demo/components/pages/apis/transaction/lockAssets.tsx
rename to packages/demo/components/pages/apis/transaction/smart-contract/lockAssets.tsx
index 4fb7383b..2c73b5df 100644
--- a/packages/demo/components/pages/apis/transaction/lockAssets.tsx
+++ b/packages/demo/components/pages/apis/transaction/smart-contract/lockAssets.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 ConnectCipWallet from '../../../../common/connectCipWallet';
+import Input from '../../../../ui/input';
import { Transaction, Asset } from '@meshsdk/core';
-import FetchSelectAssets from '../../../common/fetchSelectAssets';
+import FetchSelectAssets from '../../../../common/fetchSelectAssets';
import Link from 'next/link';
-import useDemo from '../../../../contexts/demo';
+import useDemo from '../../../../../contexts/demo';
// always succeed
const script = '4e4d01000033222220051200120011';
@@ -163,6 +163,7 @@ function Right({ userInput, updateField, inputDatum, setInputDatum }) {
async function runDemo() {
setState(1);
+ setResponse(null);
setResponseError(null);
try {
diff --git a/packages/demo/components/pages/apis/transaction/smart-contract/plutus-minting.tsx b/packages/demo/components/pages/apis/transaction/smart-contract/plutus-minting.tsx
index 06a581ec..61af8865 100644
--- a/packages/demo/components/pages/apis/transaction/smart-contract/plutus-minting.tsx
+++ b/packages/demo/components/pages/apis/transaction/smart-contract/plutus-minting.tsx
@@ -225,6 +225,7 @@ function Right({ userInput, updateField }) {
async function runDemo() {
setState(1);
+ setResponse(null);
setResponseError(null);
try {
diff --git a/packages/demo/components/pages/apis/transaction/redeemer.tsx b/packages/demo/components/pages/apis/transaction/smart-contract/redeemer.tsx
similarity index 68%
rename from packages/demo/components/pages/apis/transaction/redeemer.tsx
rename to packages/demo/components/pages/apis/transaction/smart-contract/redeemer.tsx
index d25c31e0..36bc64e2 100644
--- a/packages/demo/components/pages/apis/transaction/redeemer.tsx
+++ b/packages/demo/components/pages/apis/transaction/smart-contract/redeemer.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';
export default function UsingRedeemer() {
return (
@@ -108,55 +108,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
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- //
- // {response !== null && (
- // <>
- //
- // Result:
- //
- //
- // >
- // )}
- //
- // );
}
diff --git a/packages/demo/components/pages/apis/transaction/unlockAssets.tsx b/packages/demo/components/pages/apis/transaction/smart-contract/unlockAssets.tsx
similarity index 95%
rename from packages/demo/components/pages/apis/transaction/unlockAssets.tsx
rename to packages/demo/components/pages/apis/transaction/smart-contract/unlockAssets.tsx
index 8d66273d..13eba4c4 100644
--- a/packages/demo/components/pages/apis/transaction/unlockAssets.tsx
+++ b/packages/demo/components/pages/apis/transaction/smart-contract/unlockAssets.tsx
@@ -1,15 +1,15 @@
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, resolveDataHash, KoiosProvider } from '@meshsdk/core';
import Link from 'next/link';
-import useDemo from '../../../../contexts/demo';
+import useDemo from '../../../../../contexts/demo';
// always succeed
const script = '4e4d01000033222220051200120011';
@@ -170,6 +170,7 @@ function Right({ assetUnit, setAssetUnit, inputDatum, setInputDatum }) {
async function runDemo() {
setState(1);
+ setResponse(null);
setResponseError(null);
const assetUtxo = await _getAssetUtxo({
diff --git a/packages/demo/components/pages/apis/transaction/delegateStake.tsx b/packages/demo/components/pages/apis/transaction/staking/delegateStake.tsx
similarity index 88%
rename from packages/demo/components/pages/apis/transaction/delegateStake.tsx
rename to packages/demo/components/pages/apis/transaction/staking/delegateStake.tsx
index 794f14ed..98e40b6d 100644
--- a/packages/demo/components/pages/apis/transaction/delegateStake.tsx
+++ b/packages/demo/components/pages/apis/transaction/staking/delegateStake.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 } from '@meshsdk/core';
export default function DelegateStake() {
@@ -72,6 +72,7 @@ function Right({ userInput, setUserInput }) {
async function runDemo() {
setState(1);
+ setResponse(null);
setResponseError(null);
try {
diff --git a/packages/demo/components/pages/apis/transaction/deregisterStake.tsx b/packages/demo/components/pages/apis/transaction/staking/deregisterStake.tsx
similarity index 87%
rename from packages/demo/components/pages/apis/transaction/deregisterStake.tsx
rename to packages/demo/components/pages/apis/transaction/staking/deregisterStake.tsx
index 416b4ee6..d0ab86ee 100644
--- a/packages/demo/components/pages/apis/transaction/deregisterStake.tsx
+++ b/packages/demo/components/pages/apis/transaction/staking/deregisterStake.tsx
@@ -1,11 +1,11 @@
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 ConnectCipWallet from '../../../../common/connectCipWallet';
import { Transaction } from '@meshsdk/core';
export default function DeregisterStake() {
@@ -62,6 +62,7 @@ function Right({}) {
async function runDemo() {
setState(1);
+ setResponse(null);
setResponseError(null);
try {
diff --git a/packages/demo/components/pages/apis/transaction/registerStake.tsx b/packages/demo/components/pages/apis/transaction/staking/registerStake.tsx
similarity index 90%
rename from packages/demo/components/pages/apis/transaction/registerStake.tsx
rename to packages/demo/components/pages/apis/transaction/staking/registerStake.tsx
index 97a775a5..86ad99c1 100644
--- a/packages/demo/components/pages/apis/transaction/registerStake.tsx
+++ b/packages/demo/components/pages/apis/transaction/staking/registerStake.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 } from '@meshsdk/core';
export default function RegisterStake() {
@@ -90,6 +90,7 @@ function Right({ userInput, setUserInput }) {
async function runDemo() {
setState(1);
+ setResponse(null);
setResponseError(null);
try {
diff --git a/packages/demo/components/pages/apis/transaction/withdrawRewards.tsx b/packages/demo/components/pages/apis/transaction/staking/withdrawRewards.tsx
similarity index 87%
rename from packages/demo/components/pages/apis/transaction/withdrawRewards.tsx
rename to packages/demo/components/pages/apis/transaction/staking/withdrawRewards.tsx
index 8390bd7c..a030f3b4 100644
--- a/packages/demo/components/pages/apis/transaction/withdrawRewards.tsx
+++ b/packages/demo/components/pages/apis/transaction/staking/withdrawRewards.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 } from '@meshsdk/core';
export default function WithdrawRewards() {
@@ -65,6 +65,7 @@ function Right({ userInput, setUserInput }) {
async function runDemo() {
setState(1);
+ setResponse(null);
setResponseError(null);
try {
diff --git a/packages/demo/package.json b/packages/demo/package.json
index 4a5b97d8..9c42f2bc 100644
--- a/packages/demo/package.json
+++ b/packages/demo/package.json
@@ -14,8 +14,8 @@
"dependencies": {
"@headlessui/react": "^1.6.6",
"@heroicons/react": "^2.0.10",
- "@meshsdk/core": "1.4.1",
- "@meshsdk/react": "1.1.4",
+ "@meshsdk/core": "1.5.0",
+ "@meshsdk/react": "1.1.5",
"copy-to-clipboard": "^3.3.2",
"flowbite": "^1.5.3",
"flowbite-react": "^0.1.10",
diff --git a/packages/demo/pages/apis/transaction/index.tsx b/packages/demo/pages/apis/transaction/index.tsx
index 79a7810c..c58b8283 100644
--- a/packages/demo/pages/apis/transaction/index.tsx
+++ b/packages/demo/pages/apis/transaction/index.tsx
@@ -2,19 +2,21 @@ import { PaperAirplaneIcon } from '@heroicons/react/24/solid';
import type { NextPage } from 'next';
import CommonLayout from '../../../components/common/layout';
import SendAdaHandler from '../../../components/pages/apis/transaction/basic/sendAdaHandler';
+import SendToken from '../../../components/pages/apis/transaction/basic/sendToken';
import TxSetMetadata from '../../../components/pages/apis/transaction/basic/setMetadata';
-import CoinSelection from '../../../components/pages/apis/transaction/coinSelection';
+import CoinSelection from '../../../components/pages/apis/transaction/basic/coinSelection';
import CommonHero from '../../../components/pages/apis/transaction/commonHero';
-import SendAda from '../../../components/pages/apis/transaction/sendAda';
-import SendAssets from '../../../components/pages/apis/transaction/sendAssets';
-import SetTimeLimit from '../../../components/pages/apis/transaction/setTimeLimit';
+import SendAda from '../../../components/pages/apis/transaction/basic/sendAda';
+import SendAssets from '../../../components/pages/apis/transaction/basic/sendAssets';
+import SetTimeLimit from '../../../components/pages/apis/transaction/basic/setTimeLimit';
import Metatags from '../../../components/site/metatags';
const TransactionPage: NextPage = () => {
const sidebarItems = [
{ label: 'Send ADA to addresses', to: 'sendAda' },
- { label: 'Send multi-assets to addresses', to: 'sendAssets' },
- { label: 'Send Assets to Handler', to: 'sendAdaHandler' },
+ { label: 'Send multi-assets', to: 'sendAssets' },
+ { label: 'Send tokens', to: 'sendToken' },
+ { label: 'Send assets to Handler', to: 'sendAdaHandler' },
{ label: 'Set time limit', to: 'setTimeLimit' },
{ label: 'Set metadata', to: 'setMetadata' },
{ label: 'Coin Selection', to: 'coinSelection' },
@@ -34,6 +36,7 @@ const TransactionPage: NextPage = () => {
/>
+
diff --git a/packages/demo/pages/apis/transaction/minting.tsx b/packages/demo/pages/apis/transaction/minting.tsx
index 28396b8f..3fb61fb4 100644
--- a/packages/demo/pages/apis/transaction/minting.tsx
+++ b/packages/demo/pages/apis/transaction/minting.tsx
@@ -1,9 +1,9 @@
import { FireIcon } from '@heroicons/react/24/solid';
import type { NextPage } from 'next';
import CommonLayout from '../../../components/common/layout';
-import Burning from '../../../components/pages/apis/transaction/burning';
+import Burning from '../../../components/pages/apis/transaction/minting/burning';
import CommonHero from '../../../components/pages/apis/transaction/commonHero';
-import Minting from '../../../components/pages/apis/transaction/minting';
+import Minting from '../../../components/pages/apis/transaction/minting/minting';
import Metatags from '../../../components/site/metatags';
const TransactionMintingPage: NextPage = () => {
diff --git a/packages/demo/pages/apis/transaction/smart-contract.tsx b/packages/demo/pages/apis/transaction/smart-contract.tsx
index 4152ce76..d7e30e2c 100644
--- a/packages/demo/pages/apis/transaction/smart-contract.tsx
+++ b/packages/demo/pages/apis/transaction/smart-contract.tsx
@@ -2,11 +2,11 @@ import { NewspaperIcon } from '@heroicons/react/24/solid';
import type { NextPage } from 'next';
import CommonLayout from '../../../components/common/layout';
import CommonHero from '../../../components/pages/apis/transaction/commonHero';
-import DesignDatum from '../../../components/pages/apis/transaction/datum';
-import LockAssets from '../../../components/pages/apis/transaction/lockAssets';
-import UsingRedeemer from '../../../components/pages/apis/transaction/redeemer';
+import DesignDatum from '../../../components/pages/apis/transaction/smart-contract/datum';
+import LockAssets from '../../../components/pages/apis/transaction/smart-contract/lockAssets';
+import UsingRedeemer from '../../../components/pages/apis/transaction/smart-contract/redeemer';
import PlutusMinting from '../../../components/pages/apis/transaction/smart-contract/plutus-minting';
-import UnlockAssets from '../../../components/pages/apis/transaction/unlockAssets';
+import UnlockAssets from '../../../components/pages/apis/transaction/smart-contract/unlockAssets';
import Metatags from '../../../components/site/metatags';
const TransactionMintingPage: NextPage = () => {
diff --git a/packages/demo/pages/apis/transaction/staking.tsx b/packages/demo/pages/apis/transaction/staking.tsx
index 53a22d51..1b979dba 100644
--- a/packages/demo/pages/apis/transaction/staking.tsx
+++ b/packages/demo/pages/apis/transaction/staking.tsx
@@ -1,12 +1,12 @@
import { ArrowsPointingInIcon } from '@heroicons/react/24/solid';
import type { NextPage } from 'next';
import CommonLayout from '../../../components/common/layout';
-import DelegateStake from '../../../components/pages/apis/transaction/delegateStake';
+import DelegateStake from '../../../components/pages/apis/transaction/staking/delegateStake';
import CommonHero from '../../../components/pages/apis/transaction/commonHero';
import Metatags from '../../../components/site/metatags';
-import RegisterStake from '../../../components/pages/apis/transaction/registerStake';
-// import DeregisterStake from '../../../components/pages/apis/transaction/deregisterStake';
-// import WithdrawRewards from '../../../components/pages/apis/transaction/withdrawRewards';
+import RegisterStake from '../../../components/pages/apis/transaction/staking/registerStake';
+// import DeregisterStake from '../../../components/pages/apis/transaction/staking/deregisterStake';
+// import WithdrawRewards from '../../../components/pages/apis/transaction/staking/withdrawRewards';
const TransactionStakingPage: NextPage = () => {
const sidebarItems = [
diff --git a/packages/demo/pages/guides/custom-provider.tsx b/packages/demo/pages/guides/custom-provider.tsx
index b3b96411..93104ab7 100644
--- a/packages/demo/pages/guides/custom-provider.tsx
+++ b/packages/demo/pages/guides/custom-provider.tsx
@@ -107,7 +107,7 @@ function HowItWorksSection() {
IFetcher and ISubmitter are implemented in the{' '}
- KoiosProvider class using the the implement{' '}
+ KoiosProvider class using the implement{' '}
keyword: