diff --git a/packages/demo/pages/guides/index.tsx b/packages/demo/pages/guides/index.tsx index 1bda677ce..190ec3029 100644 --- a/packages/demo/pages/guides/index.tsx +++ b/packages/demo/pages/guides/index.tsx @@ -64,6 +64,12 @@ const GuidesPage: NextPage = () => { link: '/guides/aiken', thumbnail: '/guides/aiken.png', }, + { + title: 'Executing a standalone script', + desc: 'Learn how to execute a standalone script to manage wallets and creating transactions.', + link: '/guides/standalone', + thumbnail: '/guides/standalone.png', + }, ]; return ( diff --git a/packages/demo/pages/guides/standalone.tsx b/packages/demo/pages/guides/standalone.tsx new file mode 100644 index 000000000..691b55619 --- /dev/null +++ b/packages/demo/pages/guides/standalone.tsx @@ -0,0 +1,212 @@ +import type { NextPage } from 'next'; +import GuidesLayout from '../../components/pages/guides/layout'; +import Codeblock from '../../components/ui/codeblock'; +import { Element } from 'react-scroll'; +import Metatags from '../../components/site/metatags'; + +const GuideNextjsPage: NextPage = () => { + const sidebarItems = [ + { label: 'Setting up', to: 'settingup' }, + { label: 'Make a transaction', to: 'createtx' }, + ]; + + let codePackage = ``; + codePackage += `{\n`; + codePackage += ` "type": "module",\n`; + codePackage += ` "dependencies": {},\n`; + codePackage += ` "scripts": {\n`; + codePackage += ` "dev": "tsx index.ts"\n`; + codePackage += ` }\n`; + codePackage += `}\n`; + + let codeInstall = ``; + codeInstall += `npm install\n`; + codeInstall += `npm install tsx @meshsdk/core\n`; + + let codePackageUpdated = ``; + codePackageUpdated += `{\n`; + codePackageUpdated += ` "type": "module",\n`; + codePackageUpdated += ` "dependencies": {\n`; + codePackageUpdated += ` "@meshsdk/core": "^1.5.17",\n`; + codePackageUpdated += ` "tsx": "^4.9.4"\n`; + codePackageUpdated += ` },\n`; + codePackageUpdated += ` "scripts": {\n`; + codePackageUpdated += ` "dev": "tsx index.ts"\n`; + codePackageUpdated += ` }\n`; + codePackageUpdated += `}\n`; + + let codeTx = ``; + codeTx += `import { BlockfrostProvider, MeshWallet, Transaction } from "@meshsdk/core";\n`; + codeTx += `\n`; + codeTx += `// Set up the blockchain provider with your key\n`; + codeTx += `const blockchainProvider = new BlockfrostProvider("YOUR_KEY_HERE");\n`; + codeTx += `\n`; + codeTx += `// Initialize the wallet with a mnemonic key\n`; + codeTx += `const wallet = new MeshWallet({\n`; + codeTx += ` networkId: 0,\n`; + codeTx += ` fetcher: blockchainProvider,\n`; + codeTx += ` submitter: blockchainProvider,\n`; + codeTx += ` key: {\n`; + codeTx += ` type: "mnemonic",\n`; + codeTx += ` words: [\n`; + codeTx += ` "your", "mnemonic", "...", "here",\n`; + codeTx += ` ],\n`; + codeTx += ` },\n`; + codeTx += `});\n`; + codeTx += `\n`; + codeTx += `// Create and send a transaction\n`; + codeTx += `const tx = new Transaction({ initiator: wallet }).sendLovelace(\n`; + codeTx += ` "addr_test1qp2k7wnshzngpqw0xmy33hvexw4aeg60yr79x3yeeqt3s2uvldqg2n2p8y4kyjm8sqfyg0tpq9042atz0fr8c3grjmysdp6yv3",\n`; + codeTx += ` "1000000"\n`; + codeTx += `);\n`; + codeTx += `\n`; + codeTx += `const unsignedTx = await tx.build();\n`; + codeTx += `const signedTx = await wallet.signTx(unsignedTx);\n`; + codeTx += `const txHash = await wallet.submitTx(signedTx);\n`; + codeTx += `console.log(txHash);\n`; + + return ( + <> + + +

+ If you're looking to run a javascript files to interact with the + blockchain, you can use the tsx package to run the files directly from + the command line. +

+

+ This guide will walk you through setting up a simple project using + MeshSDK. By the end, you'll have a working environment that can create + a wallet, build and sign transactions, and submit them to the + blockchain. +

+

In this tutorial, we'll cover:

+ +

Let's get started!

+ + +

Setting up

+ +

Create a package.json file

+

+ First, create a new `package.json` file in the root of your project + with the following content: +

+ + + +

Install the necessary packages

+ +

+ Open your terminal and run these commands to install the required + packages and MeshSDK: +

+ + +

+ Here's how your `package.json` file should look after installing the + packages: +

+ + + +
    +
  • + @meshsdk/core: Core functionality for network interactions, + wallets, and transactions. +
    • +
  • + tsx: Allows running TypeScript files directly from the command + line. +
    • +
+ + + +

Make a simple transaction

+ +

Create the index.ts file

+ +

+ Next, create a new `index.ts` file in the root of your project and + add the following code: +

+ + + +

Explanation:

+
    +
  • + Wallet Initialization: The code sets up a new wallet using + MeshWallet with a mnemonic key and a blockchain provider. +
    • +
  • + Transaction Creation: A new transaction is created to send 1 ADA + to a specific address. The transaction is built, signed, and + submitted to the blockchain. +
    • +
  • Output: The transaction hash is logged to the console.
    • +
+ +

Run Your Application

+ +

+ In the code, you must replace `YOUR_KEY_HERE` with a valid + blockfrost key, and replace the mnemonic words with your own. You + can visit{' '} + + Blockfrost + {' '} + to get a free API key, and generate a new mnemonic key from the{' '} + + Mesh website + + . +

+ +

Finally, start your application by running this command:

+ + +

+ If everything is set up correctly, you should see the transaction + hash logged to the console. Congratulations! You've successfully + created a wallet and sent a transaction using MeshSDK. +

+ +

+ You can find the complete code for this guide in the{' '} + + Mesh GitHub repo + + . +

+ + + + ); +}; + +export default GuideNextjsPage; diff --git a/packages/demo/public/guides/salt-harvesting-3060093_1280.jpg b/packages/demo/public/guides/salt-harvesting-3060093_1280.jpg new file mode 100644 index 000000000..72d58db30 Binary files /dev/null and b/packages/demo/public/guides/salt-harvesting-3060093_1280.jpg differ diff --git a/packages/demo/public/guides/standalone.png b/packages/demo/public/guides/standalone.png new file mode 100644 index 000000000..b21e02d92 Binary files /dev/null and b/packages/demo/public/guides/standalone.png differ