From 68654858dbc3f2f213b6f61c36145736b28a24e0 Mon Sep 17 00:00:00 2001 From: Weronika K Date: Tue, 7 May 2024 12:28:35 +0200 Subject: [PATCH 1/5] docs: add Akord to atomic assets guide --- .../guides/smartweave/atomic-assets/akord.md | 92 +++++++++++++++++++ .../guides/smartweave/atomic-assets/index.md | 1 + 2 files changed, 93 insertions(+) create mode 100644 docs/src/guides/smartweave/atomic-assets/akord.md diff --git a/docs/src/guides/smartweave/atomic-assets/akord.md b/docs/src/guides/smartweave/atomic-assets/akord.md new file mode 100644 index 0000000..f79643f --- /dev/null +++ b/docs/src/guides/smartweave/atomic-assets/akord.md @@ -0,0 +1,92 @@ +# Mint your Atomic Assets with Akord + +Akord enables the creation of Atomic NFTs compliant with the [Atomic Asset standard](https://atomic-assets.arweave.dev/). + +The Atomic Asset can be minted with the option to attach the [Universal Data License](https://arwiki.wiki/#/en/Universal-Data-License-How-to-use-it) (UDL), and can be listed on the [Universal Content Marketplace](https://docs.akord.com/nfts/minting-atomic-nfts/universal-content-marketplace) (UCM). + +## with AkordJS + +You can mint your Atomic Assets using [AkordJS](https://github.com/Akord-com/akord-js) package. + +### Before you get started + +> Requires NodeJS - https://nodejs.org + + + + +```console +npm install @akord/akord-js +``` + + + + +```console +yarn add @akord/akord-js +``` + + + + +### Defining NFT metadata +You can define following fields for your NFT +| Name | Description | Optional +| ---- | ----------- | -------- +| owner | the address of the asset owner | false +| name | the name of the asset (max 150 characters) | false +| description | a description of the asset (max 300 characters) | false +| types | the types of the asset, ex: "image", "video" | false +| topics | the topics or categories associated with the assets, ex: "nature", "music" | true +| creator | the address of the asset creator, if not provided, defaults to the asset owner | true +| thumbnail | a thumbnail image associated with the asset | true +| contractTxId | contract source transaction id, if not provided, defaults to "Of9pi--Gj7hCTawhgxOwbuWnFI1h24TTgO5pw8ENJNQ" | true +| ticker | the symbol of the token, if not provided, defaults to "ATOMIC" | true + + +### Minting flow example + +```js +import { Akord, Auth } from '@akord/akord-js' + +// First, let's initialize Akord instance +// In order to mint Atomic NFTs with AkordJS, you first need an Akord account. +// Sign up for Akord here: https://v2.akord.com/signup +const { wallet } = await Auth.signIn(email, password); +const akord = await Akord.init(wallet); + +// Now, let's define our NFT metadata +const metadata = { + name: "Golden Orchid - Flora Fantasy #1", + owner: "zpCttRSE4zoDmmqu37PwGkwoMI89JsoY9mZx4IfzVb8", + creator: "oB8a20xgJy9ytEPkrFeIkQ9_6nWuoaNbsQYtaCVkNIY", + description: "A rare digital representation of the mythical Golden Orchid", + types: ["image"], + topics: ["floral", "nature"] +}; + +// Let's create a public vault to contain our NFTs +const { vaultId } = await akord.vault.create("My NFTs", { public: true }); + +// Finally, let's mint the NFT by passing the path to the asset data, NFT metadata +const { uri } = await akord.nft.mint(vaultId, "./my-nft.jpeg", metadata); +``` + +### Congrats! + +Once the transaction is accepted on Arweave network (it takes 5-15 minutes on average), \ +it will get automatically registered on [Warp](https://sonar.warp.cc/) and you can access your NFT on ViewBlock by visiting the following URL: +https://viewblock.io/arweave/tx/{uri} + +## with Akord web app + +Alternatively, you can find a complete user-friendly guide that walk you through the creation of atomic assets from within a web application. \ +[Go to the minting guide here.](https://docs.akord.com/nfts/minting-atomic-nfts) \ +And the best part is, no coding is involved! + +## Summary + +In this guide, we demonstrated how to mint a single NFT with AkordJS, but the SDK doesn't stop there. \ +To delve deeper, check out these AkordJS modules: +- [NFT](https://github.com/Akord-com/akord-js?tab=readme-ov-file#nft) - learn how to mint NFTs with the UDL attached and list them on UCM +- [Collection](https://github.com/Akord-com/akord-js?tab=readme-ov-file#collection) - learn how to mint a collection of Atomic NFTs \ No newline at end of file diff --git a/docs/src/guides/smartweave/atomic-assets/index.md b/docs/src/guides/smartweave/atomic-assets/index.md index 0bc6578..40f3713 100644 --- a/docs/src/guides/smartweave/atomic-assets/index.md +++ b/docs/src/guides/smartweave/atomic-assets/index.md @@ -9,4 +9,5 @@ The SmartWeave Token has a special feature called a balances object that keeps t ## Deploying Atomic Assets +* [using Akord](akord.md) * [using ArDrive CLI](ardrive-cli) \ No newline at end of file From 8719acebeff612014ab6bbf926a47ccd6ec8f471 Mon Sep 17 00:00:00 2001 From: Weronika K Date: Tue, 7 May 2024 12:58:48 +0200 Subject: [PATCH 2/5] docs: add Akord posting transactions guide --- docs/src/concepts/post-transactions.md | 1 + .../src/guides/posting-transactions/README.md | 1 + docs/src/guides/posting-transactions/akord.md | 104 ++++++++++++++++++ 3 files changed, 106 insertions(+) create mode 100644 docs/src/guides/posting-transactions/akord.md diff --git a/docs/src/concepts/post-transactions.md b/docs/src/concepts/post-transactions.md index a4bd3c4..170df56 100644 --- a/docs/src/concepts/post-transactions.md +++ b/docs/src/concepts/post-transactions.md @@ -58,3 +58,4 @@ An example of how to post a 100KB or less bundled transaction with an Arweave wa - [irys.xyz](../guides/posting-transactions/irys.md) example - [dispatch](../guides/posting-transactions/dispatch.md) example - [arseeding-js](../guides/posting-transactions/arseeding-js.md) example +- [akord](../guides/posting-transactions/akord.md) example diff --git a/docs/src/guides/posting-transactions/README.md b/docs/src/guides/posting-transactions/README.md index 496848a..2e9c174 100644 --- a/docs/src/guides/posting-transactions/README.md +++ b/docs/src/guides/posting-transactions/README.md @@ -5,3 +5,4 @@ Please the the examples attached to Posting Transactions Core Concept. - [dispatch](/guides//posting-transactions/dispatch.md) example - [arseeding-js](/guides//posting-transactions/arseeding-js.md) example - [turbo](/guides//posting-transactions/turbo.md) example +- [akord](/guides/posting-transactions/akord.md) example diff --git a/docs/src/guides/posting-transactions/akord.md b/docs/src/guides/posting-transactions/akord.md new file mode 100644 index 0000000..94d05d9 --- /dev/null +++ b/docs/src/guides/posting-transactions/akord.md @@ -0,0 +1,104 @@ +# Posting Transactions using Akord + +Posting transactions to Arweave can be done directly via Akord API, no new dependencies in your code, just a simple HTTP. + +## Getting Started + +You just need two things to get started: + +- [Create your Akord account (100 MB free)](https://v2.akord.com/signup) + +- [Get your API key here](https://v2.akord.com/account/developers) + +## HTTP API + +```js +import fs from "fs"; + +const data = fs.readFileSync('PATH_TO_YOUR_FILE_HERE'); + +// add some custom tags to the transaction +const tags = [ + { + name: "Title", + value: "My first Arweave file" + }, + { + name: "Type", + value: "image" + } +]; + +// encode tags to base64 +const jsonTags = JSON.stringify(tags); +const encodedTags = Buffer.from(jsonTags).toString('base64'); + +const response = await fetch('https://api.akord.com/files', { + method: 'POST', + headers: { + 'Accept': 'application/json', + 'Api-Key': 'YOUR_API_KEY_HERE', + 'Content-Type': 'YOUR_FILE_MIME_TYPE_HERE', // see: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types + 'Tags': encodedTags + }, + body: data +}); +const body = await response.json(); +console.log(body); +``` + +That's it! You just uploaded the file to Arweave. Here is the example response body: + +```json +{ + "id": "a6f1fbfc-403d-4607-b648-4b949fdd50bd", + // technical id of upload. can be used to get metadata of the upload or file binary from Akord cache + "mimeType": "image/jpeg", // depends on content-type of upload, goes as a tag + "sizeInBytes": 437432, + "cloud": { + "uri": "a6f1fbfc-403d-4607-b648-4b949fdd50bd", // same as ID + "url": "https://api.akord.com/files/a6f1fbfc-403d-4607-b648-4b949fdd50bd", // url to binary served from Akord cache + }, + "tx": { + "id": "LAWVdsBRTkUF8ptiEwiU6n4Q-_5ukBJIFmeAllX7Q0E", // fixed ID of Arweave transaction (ANS-104 data item ID) + "status": "scheduled", // indicates where is your file in Arweave bundling context: + // scheduled - file is in Akord cache and is scheduled for ANS-104 bundling + // verification - file is being verified for malicious content + // blocked - file is recognized as malicious, won't go to Arweave + // bundled - file is bundled and is scheduled for posting + // pending - file was posted to Arweave + // committed - file is confirmed on Arweave + // rejected - this indicates a technical problem with our bundling service + "tags": [ + { + "name": "Title", + "value": "My first Arweave file" + }, + { + "name": "Type", + "value": "image" + }, + { + "name": "Content-Type", + "value": "image/jpeg" + } + ], // your Arweave tags appended to transaction + "statusUrl": "https://api.akord.com/files/a6f1fbfc-403d-4607-b648-4b949fdd50bd/status", + // check file status endpoint, returns similar JSON schema + "gatewayUrls": [ + "https://arweave.net/LAWVdsBRTkUF8ptiEwiU6n4Q-_5ukBJIFmeAllX7Q0E", + // this url will only work when file is in 'committed' status + "https://akrd.net/LAWVdsBRTkUF8ptiEwiU6n4Q-_5ukBJIFmeAllX7Q0E" + // Akord instance of Arweave gateway - this url will work always, even right after upload since it falls back to Akord cache when file is not yet on Arweave + ], + "viewblockUrl": "https://viewblock.io/arweave/tx/LAWVdsBRTkUF8ptiEwiU6n4Q-_5ukBJIFmeAllX7Q0E", // see your file on ViewBlock - this url will only work when file is in 'committed' status & indexed by ViewBlock + "info": "Transaction is visible on the blockchain indexers when in the \"committed\" status.", + } +} +``` + +## Resources +- For an overview of all the ways you can post transactions, see the [Posting Transactions](../../concepts/post-transactions.md) section of the cookbook. +- More examples of how to upload files to Arweave with Akord API can be found [here](https://docs.akord.com/api-and-dev-tools/quickest-way-to-upload-to-arweave). +- Full documentation of Akord API can be found [here](https://api.akord.com/docs). +- More about bundles [ANS-104 Standard](https://specs.g8way.io/#/view/xwOgX-MmqN5_-Ny_zNu2A8o-PnTGsoRb_3FrtiMAkuw) \ No newline at end of file From 451629e38564bba63fca6a90feaa5180027e2278 Mon Sep 17 00:00:00 2001 From: Weronika K Date: Tue, 7 May 2024 13:08:35 +0200 Subject: [PATCH 3/5] docs: add React + Akord starter kit --- docs/src/kits/react/akord.md | 173 +++++++++++++++++++++++++++++++++++ docs/src/kits/react/index.md | 1 + 2 files changed, 174 insertions(+) create mode 100644 docs/src/kits/react/akord.md diff --git a/docs/src/kits/react/akord.md b/docs/src/kits/react/akord.md new file mode 100644 index 0000000..16ba479 --- /dev/null +++ b/docs/src/kits/react/akord.md @@ -0,0 +1,173 @@ +# React Starter Kit with Vite & Akord + +This guide will walk you through in a step by step flow to configure your development environment to build and deploy a permaweb react application. + +## Prerequisites + +- Basic Typescript Knowledge (Not Mandatory) - [https://www.typescriptlang.org/docs/](Learn Typescript) +- NodeJS v16.15.0 or greater - [https://nodejs.org/en/download/](Download NodeJS) +- Knowledge of ReactJS - [https://reactjs.org/](Learn ReactJS) +- Know git and common terminal commands + +## Development Dependencies + +- TypeScript +- NPM or Yarn Package Manager + +## Steps + +### Create React App + +```sh +yarn create vite my-arweave-app --template react-ts +cd my-arweave-app +yarn +``` + +### Add React Router DOM + +```sh +yarn add react-router-dom +``` + +We need to use the hash-router to create a working app on arweave. + +### Page Components + +```sh +touch src/Home.tsx src/About.tsx +``` + +src/Home.tsx + +```tsx +import { Link } from "react-router-dom"; + +function Home() { + return ( +
+ Welcome to the Permaweb! + +
About
+ +
+ ); +} + +export default Home; +``` + +src/About.tsx + +```tsx +import { Link } from "react-router-dom"; + +function About() { + return ( +
+ Welcome to the About page! + +
Home
+ +
+ ); +} + +export default About; +``` + +#### Modify App.tsx + +We need to update the App.tsx to manage different pages + +```tsx +import { HashRouter } from "react-router-dom"; +import { Routes, Route } from "react-router-dom"; + +import Home from "./Home"; +import About from "./About"; + +function App() { + return ( + + + } /> + } /> + + + ); +} + +export default App; +``` + +#### Modify index.css + +Alter the `body` selector + +```css +body { + margin: 0; + padding-top: 200px; + display: flex; + flex-direction: column; + place-items: center; + min-width: 100%; + min-height: 100vh; +} +``` + +```sh +yarn dev +``` + +### Building React App + +#### Modify vite.config.ts + +```ts +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +// https://vitejs.dev/config/ +export default defineConfig({ + base: "", + plugins: [react()], +}) +``` +#### Build App + +```sh +yarn build +``` + +### Publishing to Arweave + +### Install Akord CLI + +> Requires NodeJS - https://nodejs.org + +```sh +yarn global add @akord/akord-cli +``` + +### Login to Akord (you can create an account [here](https://v2.akord.com/signup)) + +```sh +akord login {your_email_address} +``` + +### Deploy your app + +```sh +akord deploy ./dist 'My perma app' +``` + +### Congrats! + +You just published a react application on the Permaweb! This app will be hosted forever! + +## Resources & further reading + +- [Recipes](https://github.com/Akord-com/recipes) - learn how to trivially interact with Arweave blockchain +- [Akord CLI](https://github.com/Akord-com/akord-cli) \ No newline at end of file diff --git a/docs/src/kits/react/index.md b/docs/src/kits/react/index.md index 2f38fce..838e8df 100644 --- a/docs/src/kits/react/index.md +++ b/docs/src/kits/react/index.md @@ -9,6 +9,7 @@ React Starter Kit Guides: * [Turbo](./turbo.md) - React + Vite, publish with Turbo * [Vite](./vite.md) - utilize Vite to build a React permaweb app * [Create React App](./create-react-app.md) - utilize Create React App to build a React permaweb app +* [Akord](./akord.md) - React + Vite, deploy with Akord ::: info Permaweb Application Constraints From f87303b59a87bbf63d3a50db89fa7846febf1c09 Mon Sep 17 00:00:00 2001 From: Weronika K Date: Tue, 7 May 2024 13:10:18 +0200 Subject: [PATCH 4/5] docs: add Akord deploying manifests guide --- docs/src/guides/deploying-manifests/akord.md | 168 +++++++++++++++++++ 1 file changed, 168 insertions(+) create mode 100644 docs/src/guides/deploying-manifests/akord.md diff --git a/docs/src/guides/deploying-manifests/akord.md b/docs/src/guides/deploying-manifests/akord.md new file mode 100644 index 0000000..71dac19 --- /dev/null +++ b/docs/src/guides/deploying-manifests/akord.md @@ -0,0 +1,168 @@ +## with Akord CLI + +You can generate manifests using [Akord CLI](https://github.com/Akord-com/akord-cli). + +### Before you get started + +> Requires NodeJS - https://nodejs.org + + + + +```console +npm install -g @akord/akord-cli +``` + + + + +```console +yarn global add @akord/akord-cli +``` + + + + +### Login to Akord (you can create an account [here](https://v2.akord.com/signup)) +Once you have the CLI installed, log in by following the prompts to authenticate with your Akord username and password. + +```console +akord login {your_email_address} +``` + +### Choose your vault +You'll need a vault id of your public vault to generate the manifest. To list your vaults: + +```console +akord vault:list +``` + +### Generate manifest +Now that you are logged in and you have a vault id, you can generate the manifest for your files and contents. \ +If you do not have "index.html" file in your vault, you can provide a custom index: + +```console +akord manifest:generate {vaultId} --index "my-custom-index.html" +``` + +After generating the manifest, a file named manifest.json will appear in your vault. Once it's confirmed on the Arweave blockchain and propagated by the gateways, your public vault will be available on the permaweb under following link: https://arweave.net/{uri} + +## with AkordJS + +Alternatively, you can generate your manifests using [AkordJS](https://github.com/Akord-com/akord-js) package. + +### Before you get started + +> Requires NodeJS - https://nodejs.org + + + + +```console +npm install @akord/akord-js +``` + + + + +```console +yarn add @akord/akord-js +``` + + + + +### Let's generate manifest + +### Generate a manifest automatically from files inside a vault +```js +import { Akord, Auth } from '@akord/akord-js' + +// First, let's initialize Akord instance +// In order to use AkordJS, you first need an Akord account. +// Sign up for Akord here: https://v2.akord.com/signup +const { wallet } = await Auth.signIn(email, password); +const akord = await Akord.init(wallet); + +// Let's create a public vault to contain our files +const { vaultId } = await akord.vault.create("My hello world app", { public: true }); + +// Let's upload a Hello world html file +const { stackId } = await akord.stack.create( + vaultId, + ["

Hello World

"], + { name: "index.html", mimeType: "text/html" } +); + +// Let's generate a manifest +const { uri } = await akord.manifest.generate(vaultId); +// In few minutes, you will be able to access your manifest here: https://arweave.net/{uri} +``` + + +### Upload your own manifest file manually +```js +import { Akord, Auth } from '@akord/akord-js' + +// First, let's initialize Akord instance +// In order to use AkordJS, you first need an Akord account. +// Sign up for Akord here: https://v2.akord.com/signup +const { wallet } = await Auth.signIn(email, password); +const akord = await Akord.init(wallet); + +// let's define our manifest +const manifest = { + "manifest": "arweave/paths", + "version": "0.1.0", + "index": { + "path": "index.html" + }, + "paths": { + "index.html": { + "id": "cG7Hdi_iTQPoEYgQJFqJ8NMpN4KoZ-vH_j7pG4iP7NI" + }, + "js/app.js": { + "id": "fZ4d7bkCAUiXSfo3zFsPiQvpLVKVtXUKB6kiLNt2XVQ" + }, + "css/style.css": { + "id": "fZ4d7bkCAUiXSfo3zFsPiQvpLVKVtXUKB6kiLNt2XVQ" + }, + "css/mobile.css": { + "id": "fZ4d7bkCAUiXSfo3zFsPiQvpLVKVtXUKB6kiLNt2XVQ" + }, + "assets/img/logo.png": { + "id": "QYWh-QsozsYu2wor0ZygI5Zoa_fRYFc8_X1RkYmw_fU" + }, + "assets/img/icon.png": { + "id": "0543SMRGYuGKTaqLzmpOyK4AxAB96Fra2guHzYxjRGo" + } + } +}; + +// Let's create a public vault to contain the manifest +const { vaultId } = await akord.vault.create("My manifest", { public: true }); + +const { uri } = await akord.manifest.generate(vaultId, manifest); +// In few minutes, you will be able to access your manifest here: https://arweave.net/{uri} +``` + +### Congrats! + +Once the transaction is accepted on Arweave network (it takes 5-15 minutes on average), \ +you can access the permaweb URL in your web browser by replacing {uri} with your unique manifest tx id: +https://arweave.net/{uri} + +## with Akord web app + +From the [web app](https://v2.akord.com/login) it's also possible to create the manifest and add it to your vault by selecting "Add Manifest" from the "+" button inside your public permanent vault. + +The action will automatically create a manifest for all of the files & folders within the vault. + +You can download your manifest and view it in the media gallery by clicking the title in the vault. + +It's as simple as that! + +## Resources & further reading +- [Generating manifests in Akord vaults](https://docs.akord.com/nft-projects/get-the-arweave-urls) +- [Publishing a website to the permaweb](https://docs.akord.com/api-and-dev-tools/learn/publishing-a-website) +- [AkordJS manifest module](https://github.com/Akord-com/akord-js?tab=readme-ov-file#manifest) \ No newline at end of file From a00a2456c7416994ca43c12d9c5c05ae100b8d76 Mon Sep 17 00:00:00 2001 From: Weronika K Date: Tue, 7 May 2024 13:10:41 +0200 Subject: [PATCH 5/5] docs: add Akord to sidebar & README --- docs/src/.vuepress/sidebar.js | 19 +++++++++++++++++++ docs/src/guides/README.md | 2 ++ 2 files changed, 21 insertions(+) diff --git a/docs/src/.vuepress/sidebar.js b/docs/src/.vuepress/sidebar.js index cef8a0a..30623ba 100644 --- a/docs/src/.vuepress/sidebar.js +++ b/docs/src/.vuepress/sidebar.js @@ -64,6 +64,10 @@ const getI18NSidebar = (langCode) => [ text: "Turbo-SDK", link: get_i18n_link(langCode, "/guides/posting-transactions/turbo") }, + { + text: "Akord", + link: get_i18n_link(langCode, "/guides/posting-transactions/akord") + }, ], }, { @@ -231,6 +235,10 @@ const getI18NSidebar = (langCode) => [ text: "arseeding-js", link: get_i18n_link(langCode, "/guides/deploying-manifests/arseeding-js"), }, + { + text: "Akord", + link: get_i18n_link(langCode, "/guides/deploying-manifests/akord"), + }, ], }, { @@ -305,6 +313,17 @@ const getI18NSidebar = (langCode) => [ { text: get_i18n_str(langCode, "guides-atomic-asset"), link: get_i18n_link(langCode, "/guides/smartweave/atomic-assets/index"), + collapsible: false, + children: [ + { + text: "using Akord", + link: get_i18n_link(langCode, "/guides/smartweave/atomic-assets/akord.md"), + }, + { + text: "using ArDrive CLI", + link: get_i18n_link(langCode, "/guides/smartweave/atomic-assets/ardrive-cli.md"), + } + ], }, { text: get_i18n_str(langCode, "guides-atomic-token"), diff --git a/docs/src/guides/README.md b/docs/src/guides/README.md index 617e574..3e60124 100755 --- a/docs/src/guides/README.md +++ b/docs/src/guides/README.md @@ -18,6 +18,7 @@ Snack-sized guides for the building blocks of the Permaweb - [arweave.app](deploying-manifests/arweave-app.md) - [ardrive](deploying-manifests/ardrive.md) - [irys.xyz](deploying-manifests/irys.md) + - [Akord](deploying-manifests/akord.md) - [Deploying PSTs](deploying-psts.md) - [GraphQL](querying-arweave/queryingArweave.md) - [ArDB](querying-arweave/ardb.md) @@ -26,6 +27,7 @@ Snack-sized guides for the building blocks of the Permaweb - [Irys Query Package](irysQueryPackage.md) - SmartWeave - [Atomic Assets](smartweave/atomic-assets/index.md) + - [using Akord](smartweave/atomic-assets/akord.md) - [using ArDrive CLI](smartweave/atomic-assets/ardrive-cli.md) - [Atomic Tokens](atomic-tokens/intro.md) - [Vouch](vouch.md)