5 posts tagged with "CODE"

Welcome to our NFT generation and deployment tutorial! In just two clicks, you can create and deploy your own valuable NFTs. Our tutorial will guide you through the process of generating and deploying unique NFTs quickly and easily.

This tutorial will guide you on how to set up your environment to create an AI-generated NFT collection. You will learn how to configure your .env file, run the backend and frontend servers, and ensure that you have enough faucet funds.

What is DALL-E 2?

DALL-E 2 is an artificial intelligence (AI) model developed by OpenAI. DALL-E 2 is designed to generate images from textual descriptions.

It is capable of generating complex and detailed images. It can create images that are up to 1024x1024 pixels in size, and can generate multiple objects and textures within a single image. DALL-E 2 can also create images that are animated and can be interacted with.

INSTALLING THE PROJECT​

CREATING STARTON PROJECT​

1. Clone the project from Starton AI generative NFT collection GitHub.

SETTING UP ENVIRONMENT VARIABLES​

Before you start setting up the project, you need to set the environment variables.

1. In the backend folder of the project, set up an .env according to .env.example:

API_HOST=localhost
API_PORT=8000

## Put on the following line your Starton API key (available at https://app.starton.com)
STARTON_API_URL='https://api.starton.io/v3'
STARTON_API_KEY=

## Put on the following line your Signer wallet address
STARTON_SIGNER_WALLET=

## Put on the following line your OpenAI API key (available at https://platform.openai.com/account/api-keys)
OPEN_AI_API_KEY=

1. In the frontend set up your .env file according to .env.example :

NEXT_PUBLIC_BACK_URL=http://localhost:8000

SETTING UP THE SERVER SIDE​

Here we would like to enter the data needed to generate and deploy your collection as well as entering your API, so that you can authenticate safely to the API.

1. Go to the backend folder of the project.
2. Run the command yarn install to install the required dependencies.
3. Start the server by running the command yarn dev.

SETTING UP OUR CLIENT SIDE​

On the client side, we will set up all the information of your smart contract to connect your project to Web3Auth.

1. Go to the frontend folder of the project.
2. Run the command yarn install to install the required dependencies.

RUNNING THE PROJECT​

To run your project, you will need to run commands both on server and client side.

1. In server, run the command yarn dev
2. In client, run the command yarn dev

Visit http://localhost:3000 to test your project.

GENERATING AND DEPLOYING YOUR COLLECTION​

Once started, visit http://localhost:3000 to enter the following parameters:

1. Enter the receiver wallet of the NFT (where you want to send the NFTs).
2. Select the network on which you want to deploy your NFTs. If you are testing, then use the testnet network, and if you are ready to deploy, use the mainnet network (between Polygon, Avalanche, Binance, and Ethereum).
3. Choose the number of NFTs that you want to create for your collection.
4. Enter the prompt that will generate the images for your NFTs. You can use different prompts to create unique and personalised NFTs.
5. Click Generate to display the assets for your NFTs.
6. Review the generated assets.
7. Once you are satisfied with the images, click Deploy.

Congratulations! You just deployed an NFT collection of images generated by AI.

Learn how to receive ngrok-integrated webhooks to monitor blockchain activity locally.

STARTON_API_KEY=YOUR_STARTON_API_KEY
NGROK_TOKEN=YOUR_NGROK_AUTH_TOKEN

const express = require("express");
const bodyParser = require('body-parser');
const notifier = require('node-notifier');
const ngrok = require('ngrok');
const axios = require("axios");
require('dotenv').config();

const app = express();
app.use(bodyParser.json());

const axiosInstance = axios.create({
    baseURL: "<https://api.starton.com>",
    headers: {
        "x-api-key": process.env.STARTON_API_KEY,
    },
});
let watcherId = null;

app.post('/', (req, res) => {
        if (req.body.data) {
            notifier.notify({
                title: 'New transaction',
                message: `Hash: ${req.body.data.transaction.hash}`
            })
        }
        res.send('ok')
    })
const port = 30001
app.listen(port, () => {
    console.log(`Server listening on port ${port}`)
    createNgrokTunnelAndWatcher()
})

const createNgrokTunnelAndWatcher = async () => {
    const url = await ngrok.connect({
        authtoken: process.env.NGROK_TOKEN,
        addr: port
    })
	  console.log(`NGROK listening on ${url}`)
    axiosInstance.post("/v3/watcher", {
        name: "Watcher test",
        address: "0x7ceB23fD6bC0adD59E62ac25578270cFf1b9f619",
        network: "polygon-mainnet",
        type: "EVENT_TRANSFER",
        webhookUrl: url,
        confirmationsBlocks: 0
    }).then((response) => {
        console.log("Watcher created", response.data)
        watcherId = response.data.id
    }).catch(e => console.log(e.response.data))
}

const deleteWatcher = async () => {
    await axiosInstance.delete(`/v3/watcher/${watcherId}`).then(response => {
        console.log("Watcher deleted")
    })
    process.exit();
}
   
process.on('SIGINT', deleteWatcher)
process.on('SIGTERM', deleteWatcher)

Congratulations! You've successfully integrated Starton's Monitor with webhook notifications using Ngrok. This setup allows you to monitor blockchain activities locally and in real-time. As you transition to a production environment, remember to use permanent and secure webhook endpoints.

In this tutorial, we’ll use Starton Connect to create our own crypto token!

We will deploy a smart contract directly from code using the Relayer.

The contract will be an instance of an audited premade template available in Starton.

The language used will be Javascript but any language would work in a similar manner.

Get the list of available templates​

Before deploying our contract let's get the list of templates in order to find one that suits our need.

To do this, we’ll need to query Connect’s API and to authenticate ourselves using an API key.

We can create an API key from the dashboard in the Developer section. Using this API key we can call the API with the following JS code:

const axios = require("axios")

const http = axios.create({
	baseURL: "https://api.starton.com/v3",
	headers: {
		"x-api-key": "YOUR_API_KEY",
	},
})
http.get("/smart-contract-template").then((response) => {
	console.log(response.data)
})

Be sure to replace x-api-key value with your own api key! When querying the API, it should return a list of template items:

{
	"id": "ERC20_META_TRANSACTION",
	"name": "ERC20 Fungible Token with fixed supply",
	"description": "An ERC20 token contract keeps track of fungible tokens: any one token is exactly equal to any other token",
	"tags": ["..."],
	"blockchains": ["..."],
	"bytecode": "string",
	"constructorParams": ["..."],
	"abi": ["..."],
	"compilerVersion": "string",
	"source": "string",
	"isAudited": true,
	"isActivated": true,
	"createdAt": "string",
	"updatedAt": "string"
}

This is the object associated with the template we’ll use for our crypto token.

We’ll be using an ERC20 template as it is the standard for token creation on EVM based blockchains.

Choose a Network and fuel wallet​

Now that we know which template to use, we also need to choose a network on which to deploy.

The compatible blockchains for this template can be seen inside the blockchain objects in the previously returned template object.

For example for the Ethereum blockchain there are multiple available networks such as ethereum-mainnet or ethereum-sepolia (testnet).

We’ll choose to deploy our contract on the ethereum-sepolia network.

It is now important that we fuel our wallet with some Ether faucet otherwise the blockchain will reject our smart contract’s deployment as we will lack funds to cover the gas fees.

In order to claim test faucets we need to go on the Wallet section on Connect’s dashboard and find the address associated to the network we are interested in.

Here, it is the ethereum-sepolia network.

We can now claim free faucet on the official Ethereum faucet website. Enter your address, click Send me test Ether and wait for the transaction to complete.

Deploying the contract​

Everything is now in place so we can create an instance of the smart contract template we picked.

We’ll use the ID of the template we got in order to tell Deploy which template to use for the contract creation.

We also need to provide values for the parameters of our smart contract’s constructor.

For our ERC20, we’ll need to provide:

• a name for our token
• a ticker
• the initial supply

Let’s call our token the DemoToken, with DEMO as its ticker and an initial supply of 1.000.000 tokens.

Here is the code to deploy the contract (Axios being configured as before):

http.post("/smart-contract/from-template", {
	network: "ethereum-sepolia",
	templateId: "ERC20_META_TRANSACTION",
	name: "DemoToken",
	description: "Our own crypto token.",
	params: ["1000000", "DemoToken", "DEMO"],
}).then((response) => {
	console.log(response.data)
})

The expected result:

{
	"id": "sc_24dce9e26a7d46a7b707e257a6a6cfb2",
	"name": "DemoToken",
	"description": "Our own crypto token.",
	"network": "ethereum-sepolia",
	"bytecode": " … ",
	"abi": ["..."],
	"projectId": "prj_f2108b28949d47898a39939cbc7277c3",
	"address": "0xDA96a733ec2C3eC1142A5A1Ef31cfd7755CAE037",
	"creationHash": "0xef4313209959d6441e14db5d43905f674a78adba2173b522b7fe37311e135c05",
	"createdAt": "Tue Jun 29 2021 13:09:17 GMT+0000 (Coordinated Universal Time)",
	"updatedAt": "Tue Jun 29 2021 13:09:17 GMT+0000 (Coordinated Universal Time)"
}

If it worked, congrats! You just created your own crypto token in a few minutes and with a minimal amount of code.

Checking the contract creation​

Most blockchains propose a blockchain explorer so we can inspect the state and history of the blockchain.

We can thus use the previously returned address and creation hash to check for our contract’s status on the blockchain.

The summary of the transaction created for the deployment of our contract (using the creationHash in the url) is available. We can also track here our new DEMO token.

Result​

Or more generally, we can use the address of the contract to find out how it interacted with the world.

Congratulations for completing this tutorial!

You can also deploy your smart contract from our web application.

WHAT IS WEB3AUTH?

Web3auth is an open-source authentication library for web3 applications. It allows users to authenticate with wallets using a social login flow. Similarly, Web3auth offers a solution of wallet address from social login, allowing users to discover Web3 while using a login system they are most likely used to.

This tutorial will cover how to create meta transactions with Starton and Web3auth. Meta transactions are a useful way to onboard users to the Web3 ecosystem by allowing them to use their familiar social login system, and execute transactions without having to pay gas fees or have Ether in their wallets.

By using two routes on Starton, you can create meta transactions. This use case is handy when you want to onboard users to web3.

Installing the project​

The project has been set up using a client-side and a server-side so that your API key is not exposed on client. You can also use the server-side to connect a database for metrics.

Creating Starton Project​

1. Clone the project from Starton Metatransactions GitHub.

Setting up the server side​

Here we would like to enter the data needed to request funds and set up your metatransactions as well as entering your API, so that you can authenticate safely to the API.

1. In server, add your Starton API key in .env.
2. In src > config > startonconfig.ts, set the following parameters:
   • the route to interact with your smart contract call URL (ex: /smart-contract/avalanche-fuji/0xcEB17Bf0E3d198ec985370f456332f10f373CdB3/call)
   • the speed of your transaction (ex: low, average, fast, fastest)
   • the signer wallet
   • the amount of requested funds

Let’s continue with our config files in client.

Setting up our client side​

On the client side, we will set up all the information of your smart contract to connect your project to Web3Auth.

1. Install the client side.

2. In client, add the port where your server is running in .env.

3. In src > config >smart-contract go to smartContract.config.ts and set the following parameters:

   • the version of your smart contract
   • the name of your smart contract
   • the chainId of the network on which you deployed your contract
   • the address of your smart contract

   USING FUNCTIONS TO RETRIEVE YOUR SMART CONTRACT INFORMATION

   You can retrieve all of this information using the Interact tab of your smart contract. Learn more

4. In src>config > smart-contractABI.config.ts, enter the ABI of your contract.

5. In starton, go to starton.config.ts, enter the value of the meta transaction.

6. In src > services> ethersRPC.ts, enter the wallet from which to transfer.

7. In src > hooks> useWeb3AuthInit.ts:

   1. In chainId, replace the value in Number(43113) with the chainId of your network.
   2. In rpcTarget, enter the address of your node, such as 'https://api.avax-test.network/ext/bc/C/rpc'.

   info

   You can find public nodes on https://chainlist.org/

Now that we’re all set, let’s run our project.

Running the project​

To run your project, you will need to run commands both on server and client side.

1. In server, run the command npm run build

2. Then, run npm run start

3. In client, run the command npm run build

4. Then, run npm run start

   Visit http://localhost:3000 to test your project.

Now that you have used our project, visit this guide to learn more about the project How did we build a Meta-Transaction Site with Web3Auth and Starton.

When creating and selling a collection, you can allow only a few chosen people to buy them for a defined price. This system is called a whitelist sale and it is what we are going to see today.

In this tutorial, we will:

Create a merkle root from all approved addresses
Deploy the Sale contract from API
Interact with the contract

To deploy this contract, you need to compute a special parameter called definitiveMerkleRoot.

import { ethers } from "ethers"
import { MerkleTree } from "merkletreejs"

// Compute the root of the merkletree
const addresses = [
    /* The addresses of the wallets allowed to mint */
]
const leaves = addresses.map((addr) => ethers.keccak256(addr))
const merkleTree = new MerkleTree(leaves, ethers.keccak256, { sortPairs: true })
const rootHash = merkleTree.getRoot()

const axios = require("axios")

const axiosInstance = axios.create({
	baseURL: "https://api.starton.com",
	headers: { "x-api-key": "PUT HERE YOUR API KEY" },
})

axiosInstance
	.post("/v3/smart-contract/from-template", {
		network: "",
		signerWallet: "",
		templateId: "ERC721_SALE",
		name: "My first NFT Whitesale",
		description: "This is my first NFT Whitesale ",
		params: [
			"", // definitiveTokenAddress
			"", // definitiveMerkleRoot
			"", // definitivePrice
			"", // definitiveStartTime
			"", // definitiveEndTime
			"", // definitiveMaxTokensPerAddress
			"", // definitiveMaxSupply
			"", // definitiveFeeReceiver
		],
		speed: "average",
	})
	.then((response) => {
		console.log(response.data)
	})

const axios = require("axios")

const axiosInstance = axios.create({
	baseURL: "https://api.starton.com",
	headers: {
		"x-api-key": "PUT HERE YOUR API KEY",
	},
})

axiosInstance
	.post("/v3/smart-contract/{network}/{YOUR_BASE_CONTRACT}/read", {
		functionName: "MINTER_ROLE",
		params: [],
	})
	.then((response) => {
		console.log(response.data)
	})

const axios = require("axios")

const axiosInstance = axios.create({
	baseURL: "https://api.starton.com",
	headers: { "x-api-key": "PUT HERE YOUR API KEY" },
})

axiosInstance
	.post("/v3/smart-contract/${network}/${YOUR SMART CONTRAT ADDRESS}/call", {
		functionName: "grantRole(bytes32,address)",
		params: [
			"0x9f2df0fed2c77648de5860a4cc508cd0818c85b8b8a1ab4ceeef8d981c8956a6", // MINTER_ROLE
			"", // account
		],
		signerWallet: "",
		speed: "average",
	})
	.then((response) => {
		console.log(response.data)
	})

import { keccak256 } from "ethers/lib/utils"
import { MerkleTree } from "merkletreejs"

// Compute the root of the merkletree
const addresses = [
	/* The addresses of the wallets allowed to mint */
]
const leaves = addresses.map((addr) => keccak256(addr))
merkleTree = new MerkleTree(leaves, keccak256, { sortPairs: true })

// replace MINTER_ADDRESS with the address of the account that will mint the NFT
const proof = merkleTree.getHexProof(keccak256(MINTER_ADDRESS))