It uses the preprod network on Cardano to mint a project used only for testing purposes.
Frontend code
<!doctype html>
<html lang="en">
<head>
<script src="https://unpkg.com/@ada-anvil/sdk-client/dist/anvil-sdk-client.min.js"></script>
</head>
<body>
<main>
<button onclick="signTx()">signTx</button>
<p id="baseUrl"></p>
<p id="hash">Sign and Submit tx to get an hash</p>
<p id="status">Sign a tx to update this text.</p>
</main>
<script defer>
window.onload = async function () {
window.Anvil.debug.enable();
window.Anvil.config.setBaseUrl(
"https://preprod.api.ada-anvil.app",
);
window.Anvil.config.authenticate(
"client_CgYuz62xAS7EfM0hCP1gz1aOeHlQ4At36pGwnnLf",
);
// Put the wallet you need here, for this example it is hardcoded.
await window.Anvil.wallet.connect("nami");
document.getElementById("baseUrl").innerText =
"https://preprod.api.ada-anvil.app";
};
async function signTx() {
const utxos = await window.Anvil.wallet.getUtxos();
const changeAddress =
await window.Anvil.wallet.getChangeAddress();
// See below for the backend code (it uses deno + hono)
const response = await fetch("http://localhost:8000", {
method: "POST",
body: JSON.stringify({
utxos,
changeAddress,
}),
headers: {
"Content-Type": "application/json",
},
}).then((res) => res.json());
if (response.success) {
const tx = response.transaction;
const sign = await window.Anvil.walletExt.signAndSubmit({
transaction: response.transaction,
partialSign: true,
});
document.getElementById("hash").innerText =
sign.transactionHash;
document.getElementById("status").innerText = "Wait for it";
const wait = await window.Anvil.walletExt.waitTx({
transaction: sign.transactionHash,
progressCallback: updateUI,
});
document.getElementById("status").innerText =
`${wait.status} (${wait.confirmedBlocksCount}) - ${JSON.stringify(wait.assets)}`;
} else {
document.getElementById("status").innerText =
response.message;
}
}
function updateUI(data) {
document.getElementById("status").innerText =
`${data.status} (${data.confirmedBlocksCount})`;
}
</script>
</body>
</html>
This code loads the Anvil SDK through the CDN.
Then it loads and setup the API Key to communicate with Anvil Backend.
The wallet (nami) is currently hardcoded to keep this flow straightforward.
Prerequisites
This html code must be run where you have your wallet installed. You must run a server to be able to access your wallet, otherwise Anvil SDK will print a message saying unable to find wallet. To do so you can do one of the following:
python -m http.server
OR
npm i -g http-server
http-server
Then access the http://localhost:8000 and accept to connect your wallet.
The signTx Function
This example has only one button to test the mint capability of the SDK.
It gets the latest information from the wallet, in this case the changeAddress and utxos.
Calls the backend (see below for the code) to create a transaction, in this case a mint for the Anvil Kittens collection
Using the created transaction, we can request to the customer to sign it using the connected wallet (in this case the NAMI wallet)
Once the tx is signed, a process is started to monitor the TX Status and the TX Hash is shown on the screen.
Once the TX is confirmed, the UI updates accordingly to show the NFT minted.
My beautiful functional UI
Backend Code
I used Deno and Hono to build this very simple Backend.
It offers only one route to create a mint transaction
// deno serve --watch -A backend.ts
import { anvil } from "npm:@ada-anvil/sdk-server";
import { Hono } from "npm:hono";
import { cors } from "npm:hono/cors";
// This key is provided by hand on-demand by contacting Anvil on Discord,
// this one only works on preprod.
const api_key = "server_VTatcyotdwuNBYJxSiTS4EkfJNvP8dUMSUFuh460";
anvil.config.authenticate(api_key);
// to use the preprod network,
// to use mainnet omit this field or use api.ada-anvil.app
anvil.config.setBaseUrl("https://preprod.api.ada-anvil.app");
const app = new Hono();
app.use("*", cors());
// Demo project on preprod
const project_id = 224;
const collection_id = 956;
app.post("/", async (c) => {
const { changeAddress, utxos } = await c.req.json();
try {
const mint = await anvil.mint.create({
// Contact anvil to get this ID
// Represent the project created in our database to offer the minting service
projectId: project_id,
// Contact anvil to get the collection ID
// Represent the collection assigned to a project in our database
assets: [{ collectionId: collection_id, quantity: 1 }],
// See browser step above
changeAddress,
// See browser step above
utxos,
});
return c.json(mint);
} catch (e) {
return c.json({ message: e.message, success: false });
}
});
export default app;
The provided API Key only works on preprod network, it has a very little rate limit, it allows you to test and experiment with Anvil services.
