From d952b4bb1ed8cc51848a1f31c01ce3431e619f70 Mon Sep 17 00:00:00 2001 From: kaz <87490841+0xkaz@users.noreply.github.com> Date: Tue, 8 Oct 2024 12:35:32 +0800 Subject: [PATCH 01/18] feat: Japanese settings --- docs/languages/def.js | 7 ++++ docs/languages/strings/ja.json | 72 ++++++++++++++++++++++++++++++++++ 2 files changed, 79 insertions(+) create mode 100644 docs/languages/strings/ja.json diff --git a/docs/languages/def.js b/docs/languages/def.js index c4f9d8b6..5fb77b31 100644 --- a/docs/languages/def.js +++ b/docs/languages/def.js @@ -3,6 +3,7 @@ const enStrings = require("./strings/en.json"); const esStrings = require("./strings/es.json"); const zhStrings = require("./strings/zh.json"); const idStrings = require("./strings/id.json"); +const jaStrings = require("./strings/ja.json"); // Start adding new languages by making a new language object inside the array // display: Name of the language displayed in UI @@ -28,6 +29,12 @@ const languages = [ code: "id", strings: idStrings, }, + { + display: "日本語", + name: "Japanese", + code: "ja", + strings: jaStrings, + }, ]; const i18n_strs = languages.reduce((langs, currentLang) => { diff --git a/docs/languages/strings/ja.json b/docs/languages/strings/ja.json new file mode 100644 index 00000000..92c2083a --- /dev/null +++ b/docs/languages/strings/ja.json @@ -0,0 +1,72 @@ +{ + "cookbook-meetup-notification": "Cookbook Community Meetup - 12pm ET / 5pm GMT every week on Wednesdays", + "edit": "Edit", + "language": "Language", + "docs": "Docs", + "contributors": "Contributors", + "last-updated": "Last Updated", + "featured-contributors": "Featured Contributors", + "featured-contributors-action": "See All Contributors", + "onboarding-title": "Build on the Permaweb.", + "onboarding-desc": "A curated collection of developer guides & more to build on the Permaweb. All in one place.", + "get-started": "Get Started", + "first-time": "First Time?", + "hello-world": "Hello World", + "hello-world-card-desc": "Getting started with the Permaweb", + "hello-world-card-action": "Let's Go", + "core-concepts": "Core Concepts", + "core-concepts-card-desc": "Comprehensive building blocks for developers", + "core-concepts-card-action": "Get Started", + "guides": "Guides", + "guides-card-desc": "Specific deployments made easy", + "guides-card-action": "Get Started", + "contribute": "Contribute", + "contribute-card-desc": "Share your knowledge", + "contribute-card-action": "Go to Github repo", + "documentation": "Documentation", + "getting-started": "Getting Started", + "getting-started-welcome": "Welcome", + "getting-started-hw-cli": "Hello World (CLI)", + "getting-started-hw-code": "Hello World (With Code)", + "getting-started-hw-node": "Hello World (Nodejs)", + "getting-started-contributing": "Contributing", + "concepts": "Core Concepts", + "concepts-post-transactions": "Posting Transactions", + "concepts-tags": "Metadata (Tags)", + "concepts-querying": "Querying", + "concepts-fetching-data": "Fetching Data", + "concepts-transaction-types": "Transaction Types", + "concepts-bundles": "Bundles", + "concepts-path-manifests": "Path Manifests", + "concepts-wallets-and-keys": "Wallets and Keys", + "concepts-permaweb-applications": "Permaweb Applications", + "concepts-gateways": "Gateway Services", + "concepts-bundlers": "Bundling Services", + "concepts-atomic-tokens": "Atomic Tokens", + "concepts-vouch": "Vouch", + "guides-arprofile": "ArProfile", + "guides-dns-integration": "DNS Integration", + "guides-server-side": "Server Side", + "guides-spheron": "Spheron", + "guides-atomic-token": "Atomic Tokens", + "guides-atomic-asset": "Atomic Assets", + "guides-deploying-apps": "Deploying Apps", + "guides-github-action": "Github Action", + "guides-deploying-manifests": "Deploying PathManifests", + "guides-deploying-psts": "Deploying PSTs", + "guides-execution-machine": "Execution Machine", + "guides-sdk-intro": "Execution Machine SDK", + "guides-sdk-deploy": "Deploy with SDK", + "guides-sdk-write": "Write with SDK", + "guides-sdk-read": "Read with SDK", + "guides-search-indexing-service": "Search Indexing Service", + "guides-intro": "Introduction", + "guides-warp-deploying-contracts": "Deploying Contracts", + "guides-warp-read-state": "Read Contract State", + "guides-warp-write-interactions": "Write Contract Interactions", + "guides-warp-evolve": "Evolve Contract", + "guides-api-token": "Api Token", + "guides-testing": "Testing", + "references": "References", + "kits": "Starter Kits" +} \ No newline at end of file From 9b3ff10ddbf17f4edab8c1aa335d8c2af69de619 Mon Sep 17 00:00:00 2001 From: kaz <87490841+0xkaz@users.noreply.github.com> Date: Tue, 8 Oct 2024 12:41:11 +0800 Subject: [PATCH 02/18] add src/ja/concepts without translate --- docs/src/ja/concepts/README.md | 28 ++ docs/src/ja/concepts/arfs/arfs.md | 54 ++++ docs/src/ja/concepts/arfs/content-types.md | 42 +++ docs/src/ja/concepts/arfs/data-model.md | 64 +++++ docs/src/ja/concepts/arfs/entity-types.md | 256 +++++++++++++++++++ docs/src/ja/concepts/arfs/privacy.md | 76 ++++++ docs/src/ja/concepts/arfs/schema-diagrams.md | 17 ++ docs/src/ja/concepts/arns.md | 60 +++++ docs/src/ja/concepts/atomic-tokens.md | 27 ++ docs/src/ja/concepts/bundlers.md | 31 +++ docs/src/ja/concepts/bundles.md | 50 ++++ docs/src/ja/concepts/gateways.md | 38 +++ docs/src/ja/concepts/keyfiles-and-wallets.md | 62 +++++ docs/src/ja/concepts/manifests.md | 91 +++++++ docs/src/ja/concepts/permaweb.md | 22 ++ docs/src/ja/concepts/permawebApplications.md | 58 +++++ docs/src/ja/concepts/post-transactions.md | 53 ++++ docs/src/ja/concepts/psts.md | 71 +++++ docs/src/ja/concepts/queryTransactions.md | 87 +++++++ docs/src/ja/concepts/smartweave.md | 126 +++++++++ docs/src/ja/concepts/tags.md | 58 +++++ docs/src/ja/concepts/transaction-data.md | 131 ++++++++++ docs/src/ja/concepts/vouch.md | 53 ++++ docs/src/ja/index.md | 39 +++ 24 files changed, 1594 insertions(+) create mode 100644 docs/src/ja/concepts/README.md create mode 100644 docs/src/ja/concepts/arfs/arfs.md create mode 100644 docs/src/ja/concepts/arfs/content-types.md create mode 100644 docs/src/ja/concepts/arfs/data-model.md create mode 100644 docs/src/ja/concepts/arfs/entity-types.md create mode 100644 docs/src/ja/concepts/arfs/privacy.md create mode 100644 docs/src/ja/concepts/arfs/schema-diagrams.md create mode 100644 docs/src/ja/concepts/arns.md create mode 100644 docs/src/ja/concepts/atomic-tokens.md create mode 100644 docs/src/ja/concepts/bundlers.md create mode 100644 docs/src/ja/concepts/bundles.md create mode 100644 docs/src/ja/concepts/gateways.md create mode 100644 docs/src/ja/concepts/keyfiles-and-wallets.md create mode 100644 docs/src/ja/concepts/manifests.md create mode 100644 docs/src/ja/concepts/permaweb.md create mode 100644 docs/src/ja/concepts/permawebApplications.md create mode 100644 docs/src/ja/concepts/post-transactions.md create mode 100644 docs/src/ja/concepts/psts.md create mode 100644 docs/src/ja/concepts/queryTransactions.md create mode 100644 docs/src/ja/concepts/smartweave.md create mode 100644 docs/src/ja/concepts/tags.md create mode 100644 docs/src/ja/concepts/transaction-data.md create mode 100644 docs/src/ja/concepts/vouch.md create mode 100644 docs/src/ja/index.md diff --git a/docs/src/ja/concepts/README.md b/docs/src/ja/concepts/README.md new file mode 100644 index 00000000..1f7e57c1 --- /dev/null +++ b/docs/src/ja/concepts/README.md @@ -0,0 +1,28 @@ +--- +title: Permaweb Cookbook - Core Concepts +--- + +# Core Concepts + +Foundations of Arweave and the Permaweb. + +- [Posting Transactions](post-transactions.md) +- [Metadata (Tags)](tags.md) +- [Querying](queryTransactions.md) +- [Fetching Data](/guides/http-api.md) +- [Transaction Types](bundles.md) + - [Bundles](bundles.md) + - [Path Manifests](manifests.md) +- [Wallets and Keys](keyfiles-and-wallets.md) +- [Permaweb](permaweb.md) + - [Permaweb Applications](permawebApplications.md) + - [Gateway Services](gateways.md) + - [Bundling Services](bundlers.md) +- [Arweave File System (ArFS)](arfs/arfs.md) + - [Data model](arfs/data-model.md) + - [Entity Types](arfs/entity-types.md) + - [Content Types](arfs/content-types.md) + - [Privacy](arfs/privacy.md) + - [Schema Diagrams](arfs/schema-diagrams.md) + +> Do you think a permaweb core concept is missing? Create a issue at [Github](https://github.com/twilson63/permaweb-cookbook/issues) or consider [contributing](../getting-started/contributing.md) diff --git a/docs/src/ja/concepts/arfs/arfs.md b/docs/src/ja/concepts/arfs/arfs.md new file mode 100644 index 00000000..5672a4ec --- /dev/null +++ b/docs/src/ja/concepts/arfs/arfs.md @@ -0,0 +1,54 @@ +--- +next: "data-model.md" +--- +# ArFS Protocol: A Decentralized File System on Arweave + +Arweave File System, or “ArFS” is a data modeling, storage, and retrieval protocol designed to emulate common file system operations and to provide aspects of mutability to your data hierarchy on [Arweave](https://ardrive.io/what-is-arweave/)'s otherwise permanent, immutable data storage blockweave. + +Due to Arweave's permanent, immutable and public nature traditional file system operations such as permissions, file/folder renaming and moving, and file updates cannot be done by simply updating the on-chain data model. + +ArFS works around this by implementing a privacy and encryption pattern and defining an append-only transaction data model using tags within [Arweave Transaction headers](https://docs.arweave.org/developers/server/http-api#transaction-format). + +## Key Features + +### File Structure + +ArFS organizes files and folders using a hierarchical structure. Files are stored as individual transactions on the Arweave blockchain, while folders are metadata that reference these file transactions. + +### Metadata + +Each file and folder has associated metadata, such as the name, type, size, and modification timestamp. ArFS leverages Arweave's tagging system to store this metadata in a standardized format, which allows for easy querying and organization. + +### File Permissions + +ArFS supports public and private file permissions. Public files can be accessed by anyone on the network, while private files are encrypted using the owner's private key, ensuring only they can decrypt and access the content. + +### File Versioning + +ArFS supports versioning of files, allowing users to store multiple versions of a file and access previous versions at any time. This is achieved by linking new file transactions to previous versions through the use of metadata tags. + +### Data Deduplication + +To minimize storage redundancy and costs, ArFS employs data deduplication techniques. If a user tries to store a file that already exists on the network, the protocol will simply create a new reference to the existing file instead of storing a duplicate copy. + +### Search and Discovery + +ArFS enables users to search and discover files based on their metadata, such as file names, types, and tags. This is made possible by indexing the metadata stored within the Arweave blockchain. + +### Interoperability + +ArFS is designed to be interoperable with other decentralized applications and services built on the Arweave network. This allows for seamless integration and collaboration between different applications and users. + +## Getting Started + +To start using ArFS, you'll need to familiarize yourself with the Arweave ecosystem, acquire AR tokens to cover storage costs, and choose a compatible client or library to interact with the ArFS protocol. + + +## Resources + +For more information, documentation, and community support, refer to the following resources: + +- [Arweave Official Website](https://www.arweave.org/) +- [Arweave Developer Documentation](https://docs.arweave.org/) +- [Arweave Community Forums](https://community.arweave.org/) + diff --git a/docs/src/ja/concepts/arfs/content-types.md b/docs/src/ja/concepts/arfs/content-types.md new file mode 100644 index 00000000..42c5420c --- /dev/null +++ b/docs/src/ja/concepts/arfs/content-types.md @@ -0,0 +1,42 @@ +--- +prev: "entity-types.md" +next: "privacy.md" +--- + +# Content Types + +All transaction types in ArFS leverage a specific metadata tag for the Content-Type (also known as mime-type) of the data that is included in the transaction. ArFS clients must determine what the mime-type of the data is, in order for Arweave gateways and browswers to render this content appropriately. + +All public drive, folder, and file (metadata only) entity transactions all use a JSON standard, therefore they must have the following content type tag: + +```json +Content-Type: '' +``` + +However, a file's data transaction must have its mime-type determined. This is stored in the file's corresponding metadata transaction JSON's `dataContentType` as well as the content type tag in the data transaction itself. + +```json +Content-Type: "" +``` + +All private drive, folder, and file entity transactions must have the following content type, since they are encrypted: + +```json +Content-Type: '' +``` + +[ArDrive-Core](https://docs.ardrive.io/docs/core-sdk.html) includes methods to determine a file's content type. + + +## Other Tags + +ArFS enabled clients should include the following tags on their transactions to identify their application + +```json +App-Name: " + +
Entity Relationship Diagram
+ +As you can see, each file and folder contains metadata which points to both the parent folder and the parent drive. The drive entity contains metadata about itself, but not the child contents. So clients must build drive states from the lowest level and work their way up. + +## Metadata Format + +Metadata stored in any Arweave transaction tag will be defined in the following manner: + +```json +{ "name": "Example-Tag", "value": "example-data" } +``` + +Metadata stored in the Transaction Data Payload will follow JSON formatting like below: + +```json +{ + "exampleField": "exampleData" +} +``` + +fields with a `?` suffix are optional. + +```json +{ + "name": "My Project", + "description": "This is a sample project.", + "version?": "1.0.0", + "author?": "John Doe" +} +``` + +Enumerated field values (those which must adhere to certain values) are defined in the format "value 1 | value 2". + +All UUIDs used for Entity-Ids are based on the [Universally Unique Identifier](https://en.wikipedia.org/wiki/Universally_unique_identifier) standard. + +There are no requirements to list ArFS tags in any specific order. \ No newline at end of file diff --git a/docs/src/ja/concepts/arfs/entity-types.md b/docs/src/ja/concepts/arfs/entity-types.md new file mode 100644 index 00000000..e2fbf00a --- /dev/null +++ b/docs/src/ja/concepts/arfs/entity-types.md @@ -0,0 +1,256 @@ +--- +prev: "data-model.md" +next: "content-types.md" +--- + +# Entity Types + +## Overview + +Arweave transactions are composed of transaction headers and data payloads. + +ArFS entities, therefore, have their data split between being stored as tags on their transaction header and encoded as JSON and stored as the data of a transaction. In the case of private entities, JSON data and file data payloads are always encrypted according to the protocol processes defined below. + +- Drive entities require a single metadata transaction, with standard Drive tags and encoded JSON with secondary metadata. + +- Folder entities require a single metadata transaction, with standard Folder tags and an encoded JSON with secondary metadata. + +- File entities require a metadata transaction, with standard File tags and an encoded Data JSON with secondary metadata relating to the file. + +- File entities also require a second data transaction, which includes a limited set of File tags and the actual file data itself. + +- Snapshot entities require a single transaction. which contains a Data JSON with all of the Drive’s rolled up ArFS metadata and standard Snapshot GQL tags that identify the Snapshot. + +## Drive + +A drive is the highest level logical grouping of folders and files. All folders and files must be part of a drive, and reference the Drive ID of that drive. + +When creating a Drive, a corresponding folder must be created as well. This will act as the root folder of the drive. This separation of drive and folder entity enables features such as folder view queries, renaming, and linking. + +```json +ArFS: "0.13" +Cipher?: "AES256-GCM" +Cipher-IV?: "<12 byte initialization vector as Base64>" +Content-Type: "" +Drive-Id: "" +Drive-Privacy: "" +Drive-Auth-Mode?: "password" +Entity-Type: "drive" +Unix-Time: "" + +Data JSON { + "name": "", + "rootFolderId": "" +} +``` + +
Drive Entity Transaction Example
+ +## Folder + +A folder is a logical grouping of other folders and files. Folder entity metadata transactions without a parent folder id are considered the Drive Root Folder of their corresponding Drives. All other Folder entities must have a parent folder id. Since folders do not have underlying data, there is no Folder data transaction required. + +```json +ArFS: "0.13" +Cipher?: "AES256-GCM" +Cipher-IV?: "<12 byte initialization vector as Base64>" +Content-Type: "" +Drive-Id: "" +Entity-Type: "folder" +Folder-Id: "" +Parent-Folder-Id?: "" +Unix-Time: "" + +Data JSON { + "name": "" +} +``` + +
Folder Entity Transaction Example
+ +## File + +A File contains uploaded data, like a photo, document, or movie. + + +In the Arweave File System, a single file is broken into 2 parts - its metadata and its data. + + +In the Arweave File System, a single file is broken into 2 parts - its metadata and its data. + +A File entity metadata transaction does not include the actual File data. Instead, the File data must be uploaded as a separate transaction, called the File Data Transaction. The File JSON metadata transaction contains a reference to the File Data Transaction ID so that it can retrieve the actual data. This separation allows for file metadata to be updated without requiring the file itself to be reuploaded. It also ensures that private files can have their JSON Metadata Transaction encrypted as well, ensuring that no one without authorization can see either the file or its metadata. + +```json +ArFS: "0.13" +Cipher?: "AES256-GCM" +Cipher-IV?: "<12 byte initialization vector as Base64>" +Content-Type: "" +Drive-Id: "" +Entity-Type: "file" +File-Id: "" +Parent-Folder-Id: "" +Unix-Time: "" + +Data JSON { + "name": "", + "size": "", + "lastModifiedDate": "", + "dataTxId": "", + "dataContentType": "", + "pinnedDataOwner": "" # Optional +} +``` + +
Pin Files
+ +Since the version v0.13, ArFS suports Pins. Pins are files whose data may be any transaction uploaded to Arweave, that may or may not be owned by the wallet that created the pin. + +When a new File Pin is created, the only created transaction is the Metadata Transaction. The `dataTxId` field will point it to any transaction in Arweave, and the optional `pinnedDataOwner` field is gonna hold the address of the wallet that owns the original copy of the data transaction. + +
File Data Transaction Example
+ +The File Data Transaction contains limited information about the file, such as the information required to decrypt it, or the Content-Type (mime-type) needed to view in the browser. + +```json +Cipher?: "AES256-GCM" +Cipher-IV?: "<12 byte initialization vector as Base64>" +Content-Type: "" + { File Data - Encrypted if private } +``` + +
File Metadata Transaction Example
+ +The the File Metadata Transaction contains the GQL Tags necessary to identify the file within a drive and folder. + +Its data contains the JSON metadata for the file. This includes the file name, size, last modified date, data transaction id, and data content type. + +```json +ArFS: "0.13" +Cipher?: "AES256-GCM" +Cipher-IV?: "<12 byte initialization vector as Base64>" +Content-Type: "" +Drive-Id: "" +Entity-Type: "file" +File-Id: "" +Parent-Folder-Id: "" +Unix-Time: "" + { File JSON Metadata - Encrypted if private } +``` + +## Snapshot + +ArFS applications generate the latest state of a drive by querying for all ArFS transactions made relating to a user's particular `Drive-Id`. This includes both paged queries for indexed ArFS data via GQL, as well as the ArFS JSON metadata entries for each ArFS transaction. + +For small drives (less than 1000 files), a few thousand requests for very small volumes of data can be achieved relatively quickly and reliably. For larger drives, however, this results in long sync times to pull every piece of ArFS metadata when the local database cache is empty. This can also potentially trigger rate-limiting related ArWeave Gateway delays. + +Once a drive state has been completely, and accurately generated, in can be rolled up into a single snapshot and uploaded as an Arweave transaction. ArFS clients can use GQL to find and retrieve this snapshot in order to rapidly reconstitute the total state of the drive, or a large portion of it. They can then query individual transactions performed after the snapshot. + +This optional method offers convenience and resource efficiency when building the drive state, at the cost of paying for uploading the snapshot data. Using this method means a client will only have to iterate through a few snapshots instead of every transaction performed on the drive. + +### Snapshot Entity Tags + +Snapshot entities require the following tags. These are queried by ArFS clients to find drive snapshots, organize them together with any other transactions not included within them, and build the latest state of the drive. + +```json +ArFS: "0.13" +Drive-Id: "" +Entity-Type: "snapshot" +Snapshot-Id: "" +Content-Type: "" +Block-Start: "" +Block-End: "" +Data-Start: "" +``` + +
Snapshot Transaction GQL tags example
+ +### Snapshot Entity Data + +A JSON data object must also be uploaded with every ArFS Snapshot entity. THis data contains all ArFS Drive, Folder, and File metadata changes within the associated drive, as well as any previous Snapshots. The Snapshot Data contains an array `txSnapshots`. Each item includes both the GQL and ArFS metadata details of each transaction made for the associated drive, within the snapshot's start and end period. + +A `tsSnapshot` contains a `gqlNode` object which uses the same GQL tags interface returned by the Arweave Gateway. It includes all of the important `block`, `owner`, `tags`, and `bundledIn` information needed by ArFS clients. It also contains a `dataJson` object which stores the correlated Data JSON for that ArFS entity. + +For private drives, the `dataJson` object contains the JSON-string-escaped encrypted text of the associated file or folder. This encrypted text uses the file's existing `Cipher` and `Cipher-IV`. This ensures clients can decrypt this information quickly using the existing ArFS privacy protocols. + +```json +{ + "txSnapshots": [ + { + "gqlNode": { + "id": "bWCvIc3cOzwVgquD349HUVsn5Dd1_GIri8Dglok41Vg", + "owner": { + "address": "hlWRbyJ6WUoErm3b0wqVgd1l3LTgaQeLBhB36v2HxgY" + }, + "bundledIn": { + "id": "39n5evzP1Ip9MhGytuFm7F3TDaozwHuVUbS55My-MBk" + }, + "block": { + "height": 1062005, + "timestamp": 1669053791 + }, + "tags": [ + { + "name": "Content-Type", + "value": "application/json" + }, + { + "name": "ArFS", + "value": "0.11" + }, + { + "name": "Entity-Type", + "value": "drive" + }, + { + "name": "Drive-Id", + "value": "f27abc4b-ed6f-4108-a9f5-e545fc4ff55b" + }, + { + "name": "Drive-Privacy", + "value": "public" + }, + { + "name": "App-Name", + "value": "ArDrive-App" + }, + { + "name": "App-Platform", + "value": "Web" + }, + { + "name": "App-Version", + "value": "1.39.0" + }, + { + "name": "Unix-Time", + "value": "1669053323" + } + ] + }, + "dataJson": "{\"name\":\"november\",\"rootFolderId\":\"71dfc1cb-5368-4323-972a-e9dd0b1c63a0\"}" + } + ] +} +``` + +
Snapshot Transaction JSON data example
+ + + +## Schema Diagrams + +The following diagrams show complete examples of Drive, Folder, and File entity Schemas. + +### Public Drive + + +
Public Drive Schema
+ +### Private Drive + + +
Private Drive Schema
+ + diff --git a/docs/src/ja/concepts/arfs/privacy.md b/docs/src/ja/concepts/arfs/privacy.md new file mode 100644 index 00000000..87147e04 --- /dev/null +++ b/docs/src/ja/concepts/arfs/privacy.md @@ -0,0 +1,76 @@ +--- +prev: "content-types.md" +next: "schema-diagrams.md" +--- + +# Privacy + +The Arweave blockweave is inherently public. But with apps that use ArFS, like ArDrive, your private data never leaves your computer without using military grade (and [quantum resistant](https://blog.boot.dev/cryptography/is-aes-256-quantum-resistant/#:~:text=Symmetric%20encryption%2C%20or%20more%20specifically,key%20sizes%20are%20large%20enough)) encryption. This privacy layer is applied at the Drive level, and users determine whether a Drive is public or private when they first create it. Private drives must follow the ArFS privacy model. + +Every file within a Private Drive is symmetrically encrypted using [AES-256-GCM](https://iopscience.iop.org/article/10.1088/1742-6596/1019/1/012008/pdf). Every Private drive has a master "Drive Key" which uses a combination of the user's Arweave wallet signature, a user defined drive password, and a unique drive identifier ([uuidv4](https://en.wikipedia.org/wiki/Universally_unique_identifier)). Each file has its own "File Key" derived from the "Drive Key". This allows for single files to be shared without exposing access to the other files within the Drive. + +Once a file is encrypted and stored on Arweave, it is locked forever and can only be decrypted using its file key. + +## Deriving Keys + +Private drives have a global drive key, `D`, and multiple file keys `F`, for encryption. This enables a drive to have as many uniquely encrypted files as needed. One key is used for all versions of a single file (since new file versions use the same File-Id) + +`D` is used for encrypting both Drive and Folder metadata, while `F` is used for encrypting File metadata and the actual stored data. Having these different keys, `D` and `F`, allows a user to share specific files without revealing the contents of their entire drive. + +`D` is derived using HKDF-SHA256 with an [unsalted](https://en.wikipedia.org/wiki/Salt_(cryptography)) RSA-PSS signature of the drive's id and a user provided password. + +`F` is also derived using HKDF-SHA256 with the drive key and the file's id. + + + +Other wallets (like [ArConnect](https://www.arconnect.io/)) integrate with this Key Derivation protocol just exposing an API to collect a signature from a given Arweave Wallet in order to get the SHA-256 signature needed for the [HKDF](https://en.wikipedia.org/wiki/HKDF) to derive the Drive Key. + +An example implementation, using Dart, is available [here](https://github.com/ardriveapp/ardrive-web/blob/187b3fb30808bda452123c2b18931c898df6a3fb/docs/private_drive_kdf_reference.dart), with a Typescript implementation [here](https://github.com/ardriveapp/ardrive-core-js/blob/f19da30efd30a4370be53c9b07834eae764f8535/src/utils/crypto.ts). + + +## Private Drives + +Drives can store either public or private data. This is indicated by the `Drive-Privacy` tag in the Drive entity metadata. + +```json +Drive-Privacy: "" +``` + +If a Drive entity is private, an additional tag `Drive-Auth-Mode` must also be used to indicate how the Drive Key is derived. ArDrive clients currently leverage a secure password along with the Arweave Wallet private key signature to derive the global Drive Key. + +```json +Drive-Auth-Mode?: 'password' +``` + +On every encrypted Drive Entity, a `Cipher` tag must be specified, along with the public parameters for decrypting the data. This is done by specifying the parameter with a `Cipher-*` tag. eg. `Cipher-IV`. If the parameter is byte data, it must be encoded as Base64 in the tag. + +ArDrive clients currently leverage AES256-GCM for all symmetric encryption, which requires a Cipher Initialization Vector consisting of 12 random bytes. + +```json +Cipher?: "AES256-GCM" +Cipher-IV?: "<12 byte initialization vector as Base64>" +``` + +Additionally, all encrypted transactions must have the `Content-Type` tag `application/octet-stream` as opposed to `application/json` + +Private Drive Entities and their corresponding Root Folder Entities will both use these keys and ciphers generated to symmetrically encrypt the JSON files that are included in the transaction. This ensures that only the Drive Owner (and whomever the keys have been shared with) can open the drive, discover the root folder, and continue to load the rest of the children in the drive. + + +## Private Files + +When a file is uploaded to a private drive, it by default also becomes private and leverages the same drive keys used for its parent drive. Each unique file in a drive will get its own set of file keys based off of that file's unique `FileId`. If a single file gets a new version, its `File-Id` will be reused, effectively leveraging the same File Key for all versions in that file's history. + +These file keys can be shared by the drive's owner as needed. + +Private File entities have both its metadata and data transactions encrypted using the same File Key, ensuring all facets of the data is truly private. As such, both the file's metadata and data transactions must both have a unique `Cipher-IV` and `Cipher` tag: + +```json +Cipher?: "AES256-GCM" +Cipher-IV?: "<12 byte initialization vector as Base64>" +``` + +Just like drives, private files must have the `Content-Type` tag set as `application/octet-stream` in both its metadata and data transactions: + +```json +Content-Type: "application/octet-stream" +``` \ No newline at end of file diff --git a/docs/src/ja/concepts/arfs/schema-diagrams.md b/docs/src/ja/concepts/arfs/schema-diagrams.md new file mode 100644 index 00000000..b72bf8d4 --- /dev/null +++ b/docs/src/ja/concepts/arfs/schema-diagrams.md @@ -0,0 +1,17 @@ +--- +prev: "privacy.md" +--- + +## Schema Diagrams + +The following diagrams show complete examples of Drive, Folder, and File entity Schemas. + +### Public Drive + +
Public Drive Schema
+ +### Private Drive + +
Private Drive Schema
+ +Arweave GQL Tag Byte Limit is restricted to `2048`. There is no determined limit on Data JSON custom metadata, though more data results in a higher upload cost. \ No newline at end of file diff --git a/docs/src/ja/concepts/arns.md b/docs/src/ja/concepts/arns.md new file mode 100644 index 00000000..3f9a5d80 --- /dev/null +++ b/docs/src/ja/concepts/arns.md @@ -0,0 +1,60 @@ +# ArNS - Arweave Name System + +## Overview +The Arweave Name System (ArNS) is the phonebook of the PermaWeb. + +It is a decentralized and censorship-resistant naming system that is enabled by AR.IO Gateways and used to connect friendly names to PermaWeb apps, pages and data. + +This system works similarly to traditional DNS, where a user can purchase a name in a registry and DNS Name servers resolve these names to IP addresses. + +With ArNS, the registry is decentralized, permanent and stored on Arweave and each AR.IO gateway acts as both cache and name resolver. Users can register a name within the ArNS Registry, like "my-name" and set a pointer to any Arweave Transaction ID. AR.IO Gateways will resolve that name as one of their own subdomains, eg. https://laserilla.arweave.net and proxy all requests to the associated Arweave Transaction ID. Each registered name can also have under names associated with it that each point to an Arweave Transaction ID, like https://v1_laserilla.arweave.net, giving even more flexibility and control to its owner. + +## The ArNS Registry + +ArNS uses the Smartweave protocol manage its name records. Each record, or name, is leased by a user and tied to an ANT token. You can register multiple ArNS names to a single ANT, but you cannot register multiple ANTs to a single ArNS name - the gateways wouldn't know where to point the routing ID. + +ArNS names can be up to 32 characters, including numbers [0-9], letters [a-z], and dashes [-]. The dashes cannot be trailing dashes, e.g. -myname. + +## ANTs (Arweave Name Tokens) + +ANTs are a crucial part of the ArNS ecosystem - they are the actual key to owning an ArNS name. When you register an ArNS name to an ANT, the ANT then becomes the transfer method for that name. The ArNS registry does not care who owns the ANT, it simply knows what name ANT it belongs to. + +Within ANTs you can build out whatever functionality you wish, within the scope ArNS registry approved source code transaction list. Up to and including NFT's, PST's, DAO's, or full on applications. + +## Under_Names + +Undernames are records held and managed by your ANT (Arweave Name Token). These records can be created and managed without even owning an ARNS name, and will be transferred along with the ant when sent to a new owner. Likewise if your ArNS name expires, and you register your ANT to a new ArNS name, all your undername will remain intact. + +Example: you own oldName.arweave.net. + +then: You create the undername "my" - my_oldName.arweave.net. + +then: oldName.arweave.net expires, and you register newName.arweave.net to your ANT. + +now: my_ undername is accessable on newName - my_newName.arweave.net. + +Below is an example of an ANT contract State: + +```json +{ + balances:{ QGWqtJdLLgm2ehFWiiPzMaoFLD50CnGuzZIPEdoDRGQ : 1 }, + controller: "QGWqtJdLLgm2ehFWiiPzMaoFLD50CnGuzZIPEdoDRGQ", + evolve: null, + name: "ArDrive OG Logo", + owner: "QGWqtJdLLgm2ehFWiiPzMaoFLD50CnGuzZIPEdoDRGQ", + records:{ + @:{ transactionId: "xWQ7UmbP0ZHDY7OLCxJsuPCN3wSUk0jCTJvOG1etCRo" }, + undername1:{ transactionId: "usOLUmbP0ZHDY7OLCxJsuPCN3wSUk0jkdlvOG1etCRo" } + }, + ticker:"ANT-ARDRIVE-OG-LOGO" +} +``` +the base "@" record is the initial routing id for the ANT. if you registered 'my-name' to this ANT, and tried to access it via my-name.arweave.net, you would be redirected to the @ record's transactionId. + +if you tried to access undername1_my-name.arweave.net, you would get 'undername1's transactionId. + +ANT's, in theory, have an UNLIMITED number of undernames. However, how many will be served depends on which tier is used with your ArNS name. + +## Resources +# [ArNS App](https://arns.app/) +# [ArNS Docs](https://docs.ar.io/arns/) \ No newline at end of file diff --git a/docs/src/ja/concepts/atomic-tokens.md b/docs/src/ja/concepts/atomic-tokens.md new file mode 100644 index 00000000..585128bf --- /dev/null +++ b/docs/src/ja/concepts/atomic-tokens.md @@ -0,0 +1,27 @@ +# Atomic Token Concept and Principles + +![https://arweave.net/bcHI0TW_nH-iTfZnobD9Wt6d0Qe6thWfPrGhnvi1m1A](https://arweave.net/bcHI0TW_nH-iTfZnobD9Wt6d0Qe6thWfPrGhnvi1m1A) + +An Atomic Token is a single permanent identifier that references data and a SmartWeave Contract on the Permaweb. + +## Specifications + +Data MUST be stored on the arweave network and referencable by a Transaction Identifier + +Contract MUST implement a `balances` object that represents the ownership of the Atomic Token + +Contract MUST implement a `transfer` function that takes the following arguments: +- target {WalletAddress or Contract} +- qty {Number} + +> The transfer function should transfer ownership from the caller to the target + +## Options + +_These are implementation options that can make the Atomic Token discoverable and tradeable on the Permaweb_ + +[Verto Flex](https://github.com/useverto/flex) - The Flex Library gives your atomic token to be sold or purchased without trusting an exchange. + +[Discoverability Tags - ANS 110](https://github.com/ArweaveTeam/arweave-standards/blob/master/ans/ANS-110.md) - These additional tags can help Permaweb applications and services discover your token. + +[Check out the Guide](../guides/atomic-tokens/intro.md) \ No newline at end of file diff --git a/docs/src/ja/concepts/bundlers.md b/docs/src/ja/concepts/bundlers.md new file mode 100644 index 00000000..adfe6eb3 --- /dev/null +++ b/docs/src/ja/concepts/bundlers.md @@ -0,0 +1,31 @@ +# Bundling Services + +--- + +With bundling services users can post their data transactions to a bundling service to have it "bundled" together with other users transactions and posted as a single Arweave transaction in an upcoming Arweave block. + +--- + +### What is a bundle? + +--- + +A description of transaction bundles and their benefits can be found [here](/concepts/bundles.md). + +### What is a Bundler node? + +--- + +A bundler is a node which is responsible for accepting transactions or data items from users, bundling them, and posting them to the Arweave network (with a guarantee they will be uploaded with a specific transaction ID). + +Services: + +- [Turbo](https://github.com/ardriveapp/turbo-upload-service/) + +Which make sure the data is persisted until it is uploaded to Arweave. + +### Supporting multiple currencies + +--- + +A key feature of bundling services is that because they pay for the base Arweave transaction to be posted (using AR tokens) they can choose to enable payments of storage fees on a variety of different tokens. This is the main entry point for other chains to enable Arweave's permanent storage for their users. diff --git a/docs/src/ja/concepts/bundles.md b/docs/src/ja/concepts/bundles.md new file mode 100644 index 00000000..72d0b2af --- /dev/null +++ b/docs/src/ja/concepts/bundles.md @@ -0,0 +1,50 @@ +--- +locale: ja +--- +# Transaction Bundles + +### What is a Bundle? + +--- + +A transaction bundle is a special type of Arweave transaction. It enables multiple other transactions and/or data items to be bundled inside it. Because transaction bundles contain many nested transactions they are key to Arweave's ability to scale to thousands of transactions per second. + +Users submit transactions to a bundling service, such as [turbo](https://ardrive.io/turbo-bundler/), which combines them into a 'bundle' with other transactions and posts them to the network. + +### How Do Bundles Help Arweave? + +--- + +#### Availability + +Bundling services guarantee that bundled transactions are reliably posted to Arweave without dropping. + +Transaction IDs of the bundled transactions are immediately made available, meaning the data can instantly be accessed as if it was already on the Arweave network. + +#### Reliability + +Transactions posted to Arweave can occasionally fail to confirm (resulting in a dropped transaction) due to a number of reasons, such as high network activity. In these instances transactions can become **orphaned**, i.e. stuck in the mempool and eventually removed. + +Bundlers solve this problem by continually attempting to post bundled data to Arweave, assuring that it does not fail or get stuck in the mempool. + +#### Scalability + +Bundles can store up to 2256 transactions, each of which are settled as a single transaction on Arweave. This makes Arweave blockspace scale to support almost any use case. + +### What are Nested Bundles? + +--- + +Bundles can include data items for uploading to Arweave and those data item can themselves be a bundle. + +This means it is possible to upload a bundle of bundles, or in other words **nested bundles**. + +Nested bundles have no theoretical limit on nesting depth, meaning that transaction throughput can be increased drastically. + +Nested bundles might be useful for when you have different groups of bundled data that you want to guarantee reach Arweave altogether, and at the same time. + +Sources and Further Reading: + +[Ardrive Turbo](https://ardrive.io/turbo-bundler/) + +[ANS-104 Standard](https://github.com/ArweaveTeam/arweave-standards/blob/master/ans/ANS-104.md) diff --git a/docs/src/ja/concepts/gateways.md b/docs/src/ja/concepts/gateways.md new file mode 100644 index 00000000..3ae75627 --- /dev/null +++ b/docs/src/ja/concepts/gateways.md @@ -0,0 +1,38 @@ +--- +locale: ja +--- +# Gateways + +--- + +Data uploaded to the Arweave network (or the [permaweb](https://cookbook.arweave.dev/concepts/permaweb.html)) isn't always immediately easy to work with. + +### What is a Gateway? + +Gateways are sometimes referred to as the "front door to the permaweb". They act as an interface between Arweave and end-users, making it easy to access data or use permaweb applications from your web browser. + +For example, accessing a HTML file stored on Arweave will be displayed as a web page in your browser. The same goes for viewing images, downloading files, viewing JSON data, or any other file stored on Arweave. This makes interacting with the permaweb very similar to using the traditional web. + +### Other Roles of Gateways + +Other than serving data for users to access, gateways offer other services such as: + +- Caching frequently accessed data and transactions +- Indexing and querying transactions (through Arweave tags and a GraphQl interface) +- Seeding transactions throughout the Arweave network +- Content moderation (content policies to choose which data is or isn't served) + +### Gateways and the Arweave Protocol + +Although gateways play a large role in allowing content to be accessed on Arweave, they are **not** part of the core protocol. + +This means hosting and running gateways is separate to running a node securing the Arweave network (although are frequently done together). + +As gateways are not part of the core protocol, there is no built-in incentive structure like the rewards or incentives for mining. This allows gateway operators or external services to choose how they want to structure their incentive system, leading to a more decentralized and democratic model. Individual applications could even operate their own gateway to allow for better caching and performance of their permaweb applications. + +Some popular gateways include [arweave.net](https://arweave.net/) ran by the Arweave team, and others like [arweave.world](https://cookbook.arweave.world/) [arweave.asia](https://cookbook.arweave.asia) [arweave.live](https://arweave.live/), and [g8way.io](https://g8way.io). However, operating gateways is being made easier and more accessible through teams such as [AR.IO](https://ar.io/). + +### Sources and Further Reading + +- [ArWiki](https://arwiki.wiki/#/en/gateways) +- [AR.IO](https://ar.io/) \ No newline at end of file diff --git a/docs/src/ja/concepts/keyfiles-and-wallets.md b/docs/src/ja/concepts/keyfiles-and-wallets.md new file mode 100644 index 00000000..389c6705 --- /dev/null +++ b/docs/src/ja/concepts/keyfiles-and-wallets.md @@ -0,0 +1,62 @@ +--- +locale: ja +--- +# Wallets and Keys + +--- + +### Arweave Wallets + +On Arweave a wallet secures a unique address on the blockchain. The address is used to keep track of your $AR balance, and interact with the Arweave +network - such as sending transactions, or interacting with [SmartWeave Contracts](../guides/smartweave/warp/intro.md). + +Like most blockchains, the concept of a wallet on Arweave is slightly misleading. + +A Wallet does not "hold" any tokens itself; token balances are stored on the blockchain and linked to the wallets address. Instead a wallet holds the cryptographic public-private key pair that can be used to sign transactions to post data or transfer tokens. The wallet +owner (the person with access to the wallet's **private key**) is the only one who can sign transactions for the address and access its funds. + +### Keypair and Wallet Format + +Arweave uses *4096bit* RSA-PSS key-pairs stored using the JWK (JSON Web Keys) format. The JWK format can be used to store many types of cryptographic keys, not just RSA key-pairs. + +Shown here is the contents of a JWK file which describes an RSA-PSS key-pair. The values are abbreviated so they are not accidentally used as the sender or recipient of an on-chain transaction. When storing RSA-PSS key-pairs the value associated with `n` in the JWK is your wallets **public key** and can be shared safely without compromising the security of your wallet. + +```json +{ + "d": "cgeeu66FlfX9wVgZr5AXKlw4MxTlxSuSwMtTR7mqcnoE...", + "dp": "DezP9yvB13s9edjhYz6Dl...", + "dq": "SzAT5DbV7eYOZbBkkh20D...", + "e": "AQAB", + "ext": true, + "kty": "RSA", + "n": "o4FU6y61V1cBLChYgF9O37S4ftUy4newYWLApz4CXlK8...", + "p": "5ht9nFGnpfW76CPW9IEFlw...", + "q": "tedJwzjrsrvk7o1-KELQxw...", + "qi": "zhL9fXSPljaVZ0WYhFGPU..." +} +``` + +Your **private key** is also stored in the JWK, primarily under the value associated with `d` but it is also partially derived from some of the other values in the JWK. The **private key** is like the password for your wallet - which can be used to create digital signatures (such as for signing transactions), or decrypting data. + +These JWKs are actual `json` files created and exported from a wallet app such as [Arweave.app](https://arweave.app) or generated through code using [arweave-js](https://github.com/ArweaveTeam/arweave-js). + +When using a wallet app to generate your key-pair your **private key** can also be represented as a mnemonic **seed phrase**, which in some cases can be used as an alternative to sign transactions and/or recover your wallet. + + +### Wallet Safety + +Your **private key** must be kept confidential at all times as it has the ability to transfer tokens from your address to someone elses. As a developer, +make sure not to include your keyfile in any public GitHub repositories or host it anywhere else publicly. + +### Wallet Addresses +Interestingly the address of your wallet is derived from its **public key**. While it's safe to share your **public key** with others, a *4096bit* **public key** is a bit large to pass around conveniently. To reduce that overhead and keep wallet addresses a little more human readable, the `SHA-256` hash of the **public key** is `Base64URL` encoded and used as the wallet address. This security and deterministically links a unique 43 character wallet address to the wallets **public-key** and provides a convenient shorthand that anyone with the **public-key** can verify. + +### Wallets +[Arweave.app](https://arweave.app/welcome) - Arweave web wallet to deploy permanent data, connect your accounts securely to decentralized applications, and navigate the weave. + +[ArConnect](https://www.arconnect.io/) - Arweave Wallet Browser Extension + +### Sources and Further Reading: +[Arweave Docs](https://docs.arweave.org/developers/server/http-api#key-format) + +[JSON Web Key Format (RFC 7517)](https://www.rfc-editor.org/rfc/rfc7517) diff --git a/docs/src/ja/concepts/manifests.md b/docs/src/ja/concepts/manifests.md new file mode 100644 index 00000000..db69a7ca --- /dev/null +++ b/docs/src/ja/concepts/manifests.md @@ -0,0 +1,91 @@ +--- +locale: ja +--- +# Path Manifests + +## Overview + +When uploading files to Arweave each file is assigned its own unique transaction ID. By default these ID's aren't grouped or organized in any particular manner. + +One picture of your cat might be stored with a transaction ID of [bVLEkL1SOPFCzIYi8T_QNnh17VlDp4RylU6YTwCMVRw](https://arweave.net/bVLEkL1SOPFCzIYi8T_QNnh17VlDp4RylU6YTwCMVRw), while another with [FguFk5eSth0wO8SKfziYshkSxeIYe7oK9zoPN2PhSc0](https://arweave.net/FguFk5eSth0wO8SKfziYshkSxeIYe7oK9zoPN2PhSc0) as its transaction ID. + +| Cat1 | Cat2 | +|------|------| +| | | +| bVLEkL1SOPFCzIYi8T_QNnh17VlDp4... | FguFk5eSth0wO8SKfziYshkSxeIYe7oK9zoPN2PhSc0 | + +These transaction ID's are a bit unwieldy and make it difficult to find all of your relevant files. Without a path manifest, if you uploaded 100 pictures of your cat you would need to keep track of **100 different IDs and links**! + +Path Manifests are a way to link multiple transactions together under a single base transaction ID and give them human readable file names. In relation to the cat example, you could have one base transaction ID to remember and use it like a folder - accessing your cat pictures with more memorable filenames like [{base id}/cat1.jpg](https://arweave.net/6dRh-TaiA5qtd0NWqrghpvC4_l3EtA3AwCluwPtfWVw/cat1.jpg), [{base id}/cat2.jpg](https://arweave.net/6dRh-TaiA5qtd0NWqrghpvC4_l3EtA3AwCluwPtfWVw/cat2.jpg), etc. + +Creating grouped sets of readable file names is essential for creating practical applications on Arweave, and unlocks the ability to host websites or other file collections as explored in the examples below. + +### What Can You Use Manifests For? + +--- + +Any time you need to group files in a hierarchical way, manifests can be useful. For example: + +- **Storing NFT collections:** + - [https://arweave.net/X8Qm…AOhA/0.png](https://arweave.net/X8Qm4X2MD4TJoY7OqUSMM3v8H1lvFr-xHby0YbKAOhA/0.png) + - [https://arweave.net/X8Qm…AOhA/1.png](https://arweave.net/X8Qm4X2MD4TJoY7OqUSMM3v8H1lvFr-xHby0YbKAOhA/1.png) + +This mirrors the common base path approach used by NFT collections when linking to NFT images and metadata on a storage API or IPFS. + + +- **Hosting websites:** + - https://arweave.net/X8Qm…AOhA/index.html + - https://arweave.net/X8Qm…AOhA/styles.css + - https://arweave.net/X8Qm…AOhA/public/favicon.png + + +### Manifest Structure + +--- + +Path Manifests are a special format of transaction created and posted to Arweave using the Tags: + + `{ name: "Content-type", value: "application/x.arweave-manifest+json" }` + +and having JSON formatted transaction data that matches the example below. + +```json +{ + "manifest": "arweave/paths", + "version": "0.2.0", + "index": { + "path": "index.html" + }, + "fallback": { + "id": "cG7Hdi_iTQPoEYgQJFqJ8NMpN4KoZ-vH_j7pG4iP7NI" + }, + "paths": { + "index.html": { + "id": "cG7Hdi_iTQPoEYgQJFqJ8NMpN4KoZ-vH_j7pG4iP7NI" + }, + "js/style.css": { + "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" + } + } +} +``` + +- **fallback:** + +Manifest version 0.2.0 introduced the `fallback` attribute. `fallback` is an object that accepts the sub attribute `id`, which defines an Arweave data item transaction id for the resolver to fall back to if it fails to correctly resolve a requested path. + +Source and Further Reading in the official Arweave Path Manifest docs: [Arweave Docs](https://github.com/ArweaveTeam/arweave/blob/master/doc/path-manifest-schema.md) + + diff --git a/docs/src/ja/concepts/permaweb.md b/docs/src/ja/concepts/permaweb.md new file mode 100644 index 00000000..9f46f419 --- /dev/null +++ b/docs/src/ja/concepts/permaweb.md @@ -0,0 +1,22 @@ +--- +locale: ja +--- +# Welcome to the Permaweb + +The permaweb is like the web, but permanent. Developers build on top of permaweb services to create apps and sites that will exist forever on Arweave. + +![Permaweb](https://arweave.net/lK3mptAgC2cijnPvogKaLCOsKSuPlvLu_6opnEOrpT0) + +Benefits of the permaweb. + +1. Sites and apps are permanent, you never have to worry about them going away (even if the team supporting them moves on) +1. App developers have to make sure every new version of the app actually adds value, otherwise, why would you switch off the old one. +1. Because all Permaweb apps share a common storage layer, Arweave, they can all compose with one anther's data. +1. Your data is owned by your wallet and can follow you from app to app. + +## Compare Traditional Web vs Permaweb + +![Permaweb vs Traditional](https://arweave.net/5EP6mhpHsfnTsmFk7aVyK8jF6zqavxJT4kgx70mUc5I) + +For more information about the permaweb check out the [medium post](https://arweave.medium.com/welcome-to-the-permaweb-ce0e6c73ddfb). + diff --git a/docs/src/ja/concepts/permawebApplications.md b/docs/src/ja/concepts/permawebApplications.md new file mode 100644 index 00000000..d344c7d0 --- /dev/null +++ b/docs/src/ja/concepts/permawebApplications.md @@ -0,0 +1,58 @@ +--- +locale: ja +--- +# Permaweb Applications + +A permaweb application is a type of web page or web app that runs in your browser. What makes it a permaweb app is that it is deployed to Arweave and saved forever. Even if the team that developed it moves on users can rest assured the permaweb app will stay online and available. A huge advantage to permaweb apps is that they save their data on Arweave which means it can easily be imported into other apps that might improve on the one your currently using. + +## What is the permaweb? + +::: info INFORMATION +For a deeper dive into the permaweb check out this article on [The Permaweb](./permaweb.md) +::: + +The permaweb is a collection of sites, apps, and SmartContracts built on top of the [Arweave's Permaweb Services](./permaweb.md). The core parts of the Permaweb are the following: + +- Gateway Service (ex. arweave.net, arweave.live, ar.io) +- Bundling Service (ex. ardrive turbo) +- Sequencer Service (ex. warp.cc) +- Index Service (ex goldsky) + + + +### Gateway Services + +Gateway services are the bridge between data on Arweave and displaying data in the browser. Gateways often provide indexing service along side serving transaction data, exposing graphQL endpoints for querying Arewave transactions. + +### Bundling Services + +Bundling services aggregate transactions into transaction bundles and make sure those bundles are posted directly to Arweave. By using a bundling service like Irys.network you can post hundreds of thousands of transactions in a single Arweave block. + +### Sequencing Services + +Sequencers enables high performance for SmartWeave Contracts to calculate business logic stored on the Arweave network. + +### Indexing Services + +Indexing services listen to all the transactions on Arweave and import them into an indexed database suitable for fast querying. They then expose +a graphQL endpoint so permaweb apps can make optimized queries for Arweave data. + +These services work together to form the Permaweb Services Layer and gives developers the power to build fully decentralized applications on the permaweb. + +## Application Development + +Approaching application development with the permaweb is similar to `Single Page Application` development, the application consists of frontend functionality that is executed in a web browser, and uses GraphQL (Read/Query), Irys (Write), and SmartWeave (Decentralized computation) to make up the business logic and persistance layer of the application. + +![common permaweb app](https://arweave.net/UjbgAk8duudDc97lOYIt7rBVtRHp2Z9F6Ua5OcvwNCk/) + +By leveraging modern web application frameworks and the [Path Manifest](./manifests.md) specification, developers can deploy web sites and applications to the permaweb. + +To learn more about creating and deploying Permaweb Apps, check out our starter kits in your favorite framework: + +- [React](../kits/react/index.md) +- [Svelte](../kits/svelte/index.md) +- [Vue](../kits/vue/index.md) + +::: tip Missing my framework? +Can't find your framework, why don't you contribute? [How to contribute to the cookbook](../getting-started/contributing.md) +::: diff --git a/docs/src/ja/concepts/post-transactions.md b/docs/src/ja/concepts/post-transactions.md new file mode 100644 index 00000000..55a9bab6 --- /dev/null +++ b/docs/src/ja/concepts/post-transactions.md @@ -0,0 +1,53 @@ +--- +locale: ja +--- +# Posting Transactions + +There are several ways to post transactions to Arweave. Each has its own unique affordances and constraints. The diagram below illustrates the four main approaches to posting transactions. + +`Direct to Peer`,`Direct to Gateway`, `Bundled`, and `Dispatched`. + + + +::: tip Guaranteed Transactions +When posting a large quantity of transactions or when fast settlement time is desireable consider using a bundling service. Bundlers settle large volumes of transactions immediately and make the transaction data available within milliseconds. The bundling service holds onto posted transactions until they are confirmed on-chain. If the transactions are not included in the most recent block the bundling service re-posts them with each new block until they are recorded on chain with a sufficient number of confirmations. +::: + +## Direct Transactions + +Transactions posted directly to Arweave come in two varieties **wallet-to-wallet** transactions and **data** transactions. The first transfers **AR** tokens between wallet addresses. The second posts data to Arweave and pays the associated storage costs. + +Interestingly, **data** transactions may also transfer **AR** tokens to a wallet address while paying storage costs at the same time. + +All transactions allow the user to specify up to 2KB worth of metadata in the form of [custom tags](./tags.md). + +### Direct to Peer + +Transactions may be posted directly to an Arweave peer (mining node). This is perhaps the most decentralized means of posting a transaction as clients can choose what peer they wish to post to. + +This approach is not without drawbacks. Peers may come and go making it difficult to reliably post transactions from an app. While it's possible to query a list of active peers and choose one before posting it adds overhead and friction to the process. Additionally, transactions posted to peers are only queryable at the gateway after being mined in a block. This introduces a 1-2 minute delay between posting the transaction to a peer and it being available to read in a browser from a gateway. + +For the above reasons, developers tend to configure `arweave-js` to point to a gateway when posting direct transactions as the optimistic cache at the gateway makes the transaction available almost immediately. + +### Direct to Gateway + +Gateways sit between clients and Arweave's network of peers. One of the primary functions of the gateway is to index transactions and optimistically cache the data posted to the network while waiting for it to be included in a block. This makes the transaction queryable in a "Pending" state almost instantly which allows applications built on top of a gateway to be more responsive. There is still a risk of transactions dropping out of the optimistic cache if they are not mined in a block by the peers. + +An example of how to post a direct transaction using `arweave-js` can be found [in this guide](../guides/posting-transactions/arweave-js.md). + +## Bundled Transactions + +Services built on top of Arweave that provide additional utility for Permaweb builders are sometimes called Permaweb Services. A bundler is one such service. Bundlers take multiple individual transactions and bundle them together into a single transaction that is posted directly to Arweave. In this way a single transaction at the protocol level can contain tens of thousands of bundled transactions. There is one restriction, however, only **data** transactions can be included in a bundle. **Wallet-to-wallet** transactions (that transfer **AR** tokens between wallet addresses) must be done as individual transactions posted directly to Arweave. + +## Dispatched Transactions + +Another way to post bundled transactions is from the browser. While browsers enforce some constraints around the size of data that can be uploaded, browser based wallets are able to post transactions to bundlers. Arweave browser wallets implement a `dispatch()` API method. If you are posting small transactions (100KB or less) you can use the wallets `dispatch()` method to take advantage of bundled transactions. + +An example of how to post a 100KB or less bundled transaction with an Arweave wallets `dispatch()` method can be found [in this guide](../guides/posting-transactions/dispatch.md). + +## Resources + +- [arweave-js](../guides/posting-transactions/arweave-js.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/ja/concepts/psts.md b/docs/src/ja/concepts/psts.md new file mode 100644 index 00000000..e14c5aa0 --- /dev/null +++ b/docs/src/ja/concepts/psts.md @@ -0,0 +1,71 @@ +--- +locale: ja +--- +# Overview + +--- +> **⚠️ Deprecation Notice** +> +> This document is deprecated and may contain outdated information. + +Profit Sharing Tokens (PSTs) are a type of SmartWeaveToken which include the following structure: + +| property | type | +| ----------- | ----------- | +| balances | object | +| name | string | +| ticker | string | +| transfer | method | +| balance | method | + +PSTs are typically used to govern a protocol or "Profit Sharing Community" (PSC) - similar to a DAO. + +### How are PSTs Distributed? + +--- + +Founders of an application can create a set number of PSTs and distribute them as they see fit - to keep, or sell to investors to raise capital. + +Protocols can offer PSTs as a reward for contributing work, or completing tasks for the community to incentivize growth. + +PSTs can also be exchanged between each other on [Permaswap](https://permaswap.network/#/) (currently in testnet), and developers can set up token trading permissions using [Verto Flex](https://github.com/useverto/flex). + +### Features + +--- + +PSTs work as ‘**micro-dividends**’. When a protocol is used, a tipping amount is set aside to be distributed amongst holders. The tip is paid out in $AR - **not** in the currency of the PST. This creates quite a special relationship between the app being developed, and Arweave itself. + +### Benefits + +--- + +- Provides a flexible way for developers to run a protocol and distribute as much ‘ownership’ as they see fit +- PSTs can be used as payment for protocol work or for community tasks +- Founders are incentivized to increase network usage, as it is directly tied to revenue +- Holders get **intrinsic** value (rewards $AR, not more ‘stock’) + +### Example PST: ARDRIVE Token + +--- + +ArDrive is a permaweb application utilitizing their aptly named PST, ARDRIVE. + +When someone pays $AR to upload data through ArDrive, a 15% community fee is distributed to a single token holder using a random, weighted method. + +![ArDrive PST Cycle](~@source/images/ardrive-pst.png) + +A user uploads data -> An ARDRIVE token holder receives $AR -> ARDRIVE token holder can use this $AR to upload files -> cycle repeats. Hopefully this gives you a good idea of one way you could implement your own PST! + +### Exploring PSTs + +--- + +Going straight to viewblock and Sonar by Redstone is most appropriate most likely. Just use links that specifically show PSTs so someone doesn’t have to navigate to find them. + +You can use [ViewBlock](https://viewblock.io/arweave) for an etherscan-like experience to view PST contracts, like this one [here](https://viewblock.io/arweave/contract/-8A6RexFkpfWwuyVO98wzSFZh0d6VJuI-buTJvlwOJQ). + +Another option is Sonar, an Arweave smart contract explorer built by [RedStone Finance](https://sonar.redstone.tools/#/app/contracts). View the same contract [here](https://sonar.warp.cc/?#/app/contract/-8A6RexFkpfWwuyVO98wzSFZh0d6VJuI-buTJvlwOJQ). + + +> Some community members have been discussing calling PSTs “Permaweb Service Tokens”. There is still much to explore with PSTs → join the discussion [here](https://discord.com/channels/999377270701564065/999377270701564068/1055569446481178734) (Discord). \ No newline at end of file diff --git a/docs/src/ja/concepts/queryTransactions.md b/docs/src/ja/concepts/queryTransactions.md new file mode 100644 index 00000000..a2f503ee --- /dev/null +++ b/docs/src/ja/concepts/queryTransactions.md @@ -0,0 +1,87 @@ +--- +locale: ja +--- +# Querying Transactions + +It isn't enough to store data permanently, for Arweave to be useful the data also needs to be discoverable and retrievable. This guide summarizes the different approaches to querying data on Arweave. + +## GraphQL + +Over time, indexing services that implement a GraphQL interface have became the preferred method for querying transaction data on Arweave. An indexing service reads transaction and block headers as they are added to the network (usually from a full Arweave node which the service operates). Once read, the header info is inserted into a database where it can be indexed and efficiently queried. The indexing service uses this database to provide a GraphQL endpoint for clients to query. + +GraphQL has a few advantages that make it ideal for retrieving query data sets. It enables indexing services to create a single endpoint that can then be used to query all types data. The service is able to return multiple resources in a single request as opposed to making an HTTP request for each resource (like one would with a REST API). With GraphQL, clients can batch multiple requests in a single round-trip and specify exactly what data is needed which increases performance. + +The following GraphQL example queries all the transaction ids from a given owners wallet address that have a "Type" tag with a value of "manifest". For more information about tags, read the guide on [Transaction Tags](tags.md). + +```js:no-line-numbers +const queryObject = { + query: + `{ + transactions ( + owners:["${address}"], + tags: [ + { + name: "Type", + values: ["manifest"] + } + ] + ) { + edges { + node { + id + } + } + } + }` +}; +const results = await arweave.api.post('/graphql', queryObject); +``` + +### Public Indexing Services + +[https://arweave.net/graphql](https://arweave.net/graphql) + +[https://arweave-search.goldsky.com/graphql](https://arweave-search.goldsky.com/graphql) + +[https://knn3-gateway.knn3.xyz/arseeding/graphql](https://knn3-gateway.knn3.xyz/arseeding/graphql) + +## Inspecting the Blocks + +Each piece of data uploaded to Arweave has its own unique transaction id and is included in a unique block which is then added to the blockchain. The data associated with each transaction is split up into 256KB chunks and appended sequentially to Arweave's dataset. It is possible to walk back, block by block, from the [current block](https://arweave.net/block/current) and inspect each one for the transaction id in question. Once found, the chunks offsets can be retrieved from the block and used to request chunks directly from an Arweave peer. This is the lowest level way to locate and read data on the network. Thankfully, less labor intensive approaches [like GraphQL](#graphql) are available. + +## ARQL + +::: warning +ARQL is deprecated and replaced by GraphQL queries at a gateway or indexing service. Some peers may still honor ARQL requests but the availability and accuracy of results are not guaranteed. +::: +Arweave Query Language (ARQL) was used early on in Arweave's development. Along side blocks and chunks, peers also maintained a SQL database which indexed individual transactions. Clients could query a peer using ARQL and get back transaction data. The following is an example ARQL query syntax. + +```js:no-line-numbers +let get_mail_query = + { + op: 'and', + expr1: { + op: 'equals', + expr1: 'to', + expr2: address + }, + expr2: { + op: 'equals', + expr1: 'App-Name', + expr2: 'permamail' + } + } + +const res = await this.arweave.api.post(`arql`, get_mail_query) +``` + +This approach to querying was sufficient the weave dataset was small and easy to index. As Arweave adoption accelerated, indexing the data set and responding to ARQL queries resulted in increasing computational costs. Over time as mining became more and more competitive, peers became less and less likely to be able to afford to offer the ARQL service. This ultimately became the impetus for indexing services and the [GraphQL querying](#graphql) common on Arweave today. + +There is a pathway back to being able to query data directly from peers however. The [Permaweb Payments Protocol (P3)](https://arweave.net/UoDCeYYmamvnc0mrElUxr5rMKUYRaujo9nmci206WjQ) is a specification developed by the community to enable clients to pay for service. Using P3, peers wishing to offer indexing service could afford to operate it profitably it by charging for the service. + +## Resources + +- [Querying Arweave Guide](../guides/querying-arweave/queryingArweave.md) +- [ArDB package](../guides/querying-arweave/ardb.md) +- [ar-gql package](../guides/querying-arweave/ar-gql.md) +- [GraphQL Reference](../references/gql.md) diff --git a/docs/src/ja/concepts/smartweave.md b/docs/src/ja/concepts/smartweave.md new file mode 100644 index 00000000..dc35cd99 --- /dev/null +++ b/docs/src/ja/concepts/smartweave.md @@ -0,0 +1,126 @@ +--- +locale: ja +--- +# SmartWeave + +> **⚠️ Deprecation Notice** +> +> This document is deprecated and may contain outdated information. + +## What is SmartWeave? + +SmartWeave is the name given to the dominant SmartContract paradigm on Arweave. A unique property of SmartWeave contracts is that the current state of the contract is provided by a process of "lazy evaluation". This means that instead of Arweave mining nodes constantly evaluating the current state of all contracts, a client reading a contract evaluates the state for themselves. + +## Why is SmartWeave important? + +The state and logic of decentralized applications need to be as censorship-resistant, permanent, and verifiable as the rest of their data. SmartWeave enables developers to write smart contracts that encapsulate their apps state and logic on-chain and execute it in a trustless verifiable way. This is no small feat as the Arweave protocol does not include incentives for nodes to evaluate smart contract state for the network. + +SmartWeave provides an immutable append-only pattern for contract interactions that leverage permanent storage to hold onto their state. The result is a fully decentralized on-chain state machine that can give protocols and applications dynamic functionality in a permissionless and trustless way. By using SmartWeave, developers can create smart contracts that are stored on Arweave and are guaranteed not to change over time. This allows them to build [Permaweb applications](/concepts/permawebApplications.md) with dynamic functionality that can be used in a permissionless and trustless manner. + +There are several reasons why developers might choose to use SmartWeave to implement the logic for their permaweb applications: + +- **Decentralized storage:** SmartWeave is built on Arweave, which means that applications created using SmartWeave will be stored on a distributed network of nodes rather than on a centralized server. This can make them more resistant to censorship, tampering, and other forms of interference. + +- **Lazy evaluation:** The lazy evaluation feature of SmartWeave contracts allows for efficient and scaleable execution. Instead of Arweave nodes constantly evaluating the state of a contract, the client reading the contract is responsible for evaluating the state, leveraging the users processing power instead of the networks nodes. + +- **Language support:** SmartWeave supports a range of programming languages, including JavaScript, TypeScript, Rust, Go, AssemblyScript, and WASM (WebAssembly). This allows developers to use the language they are most familiar with when creating SmartWeave applications. + +- **Data durability:** Arweave is designed to store data in a way that makes it highly durable and long-lasting. This can be useful for applications that need to store data over a long period of time, such as historical records or scientific data. + +- **Economic model:** Arweave uses a unique economic model based on the concept of permanent storage that incentivizes miners to store data indefinitely. This can help ensure the long-term viability and durability of permaweb applications created using SmartWeave. + +## How does SmartWeave Work? + +SmartWeave contracts, at their core, are built from an initial contract state, with edits, additions, and subtractions using transaction tags. + +SmartWeave SDK's such as `Warp` (previously `RedStone`), are used to query for these transactions to build contract state locally, modifying the contract state with each transaction. The Evaluator (`Warp`) uses tags to query for a contracts transactions; It knows a transaction is part of the contract by way of the App-Name tag, and the Contract tag. + +Here is an example of a contract **interaction** . +- The `App-Name` says its a Smartweave **ACTION** . +- The `Contract` tag gives the specific transaction ID of the initial contract state. +- The `Input` tag gives the contract its function to execute and any other data it needs: + +```json +[ + { + name:"App-Name" + value:"SmartWeaveAction" + }, + { + name:"App-Version" + value:"0.3.0" + }, + { + name:"Contract" + value:"pyM5amizQRN2VlcVBVaC7QzlguUB0p3O3xx9JmbNW48" + }, + { + name:"Input" + value:"{ + "function":"setRecord", + "subDomain":"@", + "transactionId":"lfaFgcoBT8auBrFJepLV1hyiUjtlKwVwn5MTjPnTDcs" + }" + } +] +``` +And here is an example of a **contract** . +- The `App-Name` says its a Smartweave **CONTRACT** +- The `Contract-Src` tag points to the source code of the contract: + +```json +[ + { + key:"App-Name" + value:"SmartWeaveContract" + }, + { + key:"App-Version" + value:"0.3.0" + }, + { + key:"Contract-Src" + value:"JIIB01pRbNK2-UyNxwQK-6eknrjENMTpTvQmB8ZDzQg" + }, + { + key:"SDK" + value:"RedStone" + }, + { + key:"Content-Type" + value:"application/json" + } +] +``` + +The resulting state is the current contract state, which the SDK on the client side can use to calculate user balances, contract owners, and other contract specific details. Once the caller has a validated contract state they can build an interaction for the user to deploy to the chain, which upon mining or indexing on a [Gateway](/concepts/gateways.md) will be included the next time someone builds the contract state. + +For a comprehensive overview of the SmartWeave Protocol, its leading implementation Warp Contracts, and more, head to [Warp Academy](https://academy.warp.cc/). Dive into step-by-step tutorials, explore advanced concepts, and uncover how SmartWeave power up the permaweb! + +## Smartweave ecosystem projects + +There's quite a few ecosystem projects leveraging SmartWeave SmartContracts, but here are some of notes: + +### Implementations +- [Warp](https://warp.cc/) | Main provider of SmartWeave SDK's, tutorials, and helps maintain the SmartWeave protocol. +- [MEM](https://www.mem.tech/) | Molecular Execution Machine (MEM) is a developer platform that powers the creation and usage of highly available and highly performant applications within a decentralized environment. + +### Tools +- [SonAr](https://sonar.warp.cc/#/app/contracts)| SmartWeave contract explorer, created and hosted by Warp. + +### Resources +- [Warp Academy](https://academy.warp.cc/) | A one-stop shop for all things SmartWeave + +### Apps +- [Permapages](https://permapages.app/) | Permanent webpage creation tool, ArNS purchase portal, and ANT creation portal. Your profile on the permaweb. +- [ArNS](arns.md) | Arweave Name System +- [WeaveDB](https://weavedb.dev/) | NoSQL Database as a Smart Contract. +- [KwilDB](https://docs.kwil.com/)| SQL Database as a Smart Contract. +- [ArDrive Inferno](https://ardrive.io/inferno/) | Get PST's for uploading thru Ardrive. +- [Akord](https://akord.com/) | A protocol offering secure storage on Arweave with a seamless UX. +- [FirstBatch](https://www.firstbatch.xyz/) | FirstBatch aids developers and enterprises in creating personalized, private, and distortion-free AI applications. +- [Othent](https://othent.io/) | Web3 transactions with existing traditional social logins. +- [BazAR](https://bazar.arweave.dev/) | Digital content marketplace with real-world rights. +- [Alex the Archieve](https://alex.arweave.dev/) | A decentralized archival platform utilizing Arweave's immutable storage. + +and so much more. diff --git a/docs/src/ja/concepts/tags.md b/docs/src/ja/concepts/tags.md new file mode 100644 index 00000000..5c21daa1 --- /dev/null +++ b/docs/src/ja/concepts/tags.md @@ -0,0 +1,58 @@ +--- +locale: ja +--- +# Transaction Metadata (Tags) + +Arweave can be thought of as a permanent append-only hard drive where each entry on the drive is its own unique transaction. Transactions have a unique ID, signature, and owner address for the address that signed and paid for the transaction to be posted. Along with those header values, the Arweave protocol allows users to tag transactions with custom tags. These are specified as a collection name value pairs appended to the transaction. These tags make it possible to query Arweave and find all the Transactions that include a particular tag or tags. The ability to query and filter transactions is critical to supporting apps built on Arweave. + +## What are Transaction Tags? + +Transaction tags are key-value pairs, where the combination of base64URL keys and values must be less than the maximum of 2048 bytes for an arweave native transaction. + +Some common examples of transaction tags include: + +- `Content-Type`: Used to specify the MIME type of content for render on the permaweb. +- `App-Name`: This tag describes the app that is writing the data +- `App-Version`: This tag is the version of the app, paired with App-Name +- `Unix-Time`: This tag is the a unix timestamp, **seconds** since epoch. +- `Title`: Used to give a name or brief description of the content stored in the transaction. +- `Description`: Used to provide a longer description of the content. + +Transaction tags can be used for a variety of purposes, such as indexing transactions for search, organizing transactions into categories, or providing metadata about the content stored in a transaction. + +## Some good things to know about Transaction Tags + +Transaction tags are encoded as Base64URL encoded strings for both the key and value. This makes it possible to post arrays of bytes as keys or values and transfer them safely over http. While it's not human readable without decoding, it shouldn't be considered encryption. + +The max total size of Transaction tags for transaction posted directly to Arweave is 2048 bytes. This size is determined by the concatenation of all keys and all values of the transaction tags. + +Transaction tags can be used in GraphQL queries to return a filtered set of transaction items. + +## Common Tags used in the community + +|
Tag Name
| Description | Use Cases | +| --------------------------------------- | ----------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | +| App-Name | Most commonly used for SmartWeave Identifiers | Common values are SmartWeaveContract, SmartWeaveAction, and SmartWeaveContractSource | +| App-Version | The version of this data, it may represent the app consuming this information | 0.3.0 is the current SmartWeave Version | +| Content-Type | MIME Type to identify the data contained in the transaction | text/html, application/json, image/png | +| Unix-Time | This tag is the a unix timestamp, **seconds** since epoch | The time the transaction is submitted | +| Title | ANS-110 Standard for describing content | Providing a name for an Atomic Asset | +| Type | ANS-110 Standard for categorization of data | a type can classify a permaweb asset | + +## Examples + +```ts +const tx = await arweave.createTransaction({ data: mydata }); +tx.addTag("Content-Type", "text/html"); +tx.addTag("Title", "My incredible post about Transaction Tags"); +tx.addTag("Description", "This is one post you do not want to miss!"); +tx.addTag("Topic:Amazing", "Amazing"); +tx.addTag("Type", "blog-post"); + +await arweave.transactions.sign(tx, jwk); +await arweave.transactions.post(tx); +``` + +## Summary + +Understanding how Transaction Tags factor into the Arweave tech stack can provide context on how to solve problems using the Permaweb as an application platform. Tags provide a tool to consume and create common data standards and patterns to encourage a non-rivalous data experience on the Permaweb. The result gives users of the ecosystem the choice of applications to consume and create content as their data is always with the user not the application. diff --git a/docs/src/ja/concepts/transaction-data.md b/docs/src/ja/concepts/transaction-data.md new file mode 100644 index 00000000..1618fede --- /dev/null +++ b/docs/src/ja/concepts/transaction-data.md @@ -0,0 +1,131 @@ +--- +locale: ja +--- +# Fetching Transaction Data +While indexing services allow querying of transaction metadata they don't provide access to the transaction data itself. This is because caching transaction data and indexing metadata have different resource requirements. Indexing services primarily rely on compute resources to perform queries on a database while transaction data is better suited to deployment on a Content Delivery Network (CDN) to optimize storage and bandwidth. + +A Transaction data caching service is offered by most gateways though a set of HTTP endpoints. Any HTTP client/package can be used to request transaction data from these endpoints. For example Axios or Fetch for JavaScript, Guzzle for PHP, etc. + + + +If you wanted to bypass a transaction data caching service and get data directly from the Arweave peers/nodes you could, but it's a lot of work! + +Transaction data is stored on Arweave as a contiguous sequence of 256KB chunks, from the very beginning of the network until the current block. This format is optimized to support the SPoRA mining mechanism miners participate in to prove they are storing Arweave data. + +::: info +1. Retrieve a list of peers from a well known peer. +1. Ask the peer for the chunk offsets which contain your transactions data. +1. Ask the peer to for the chunks. + 1. If the peer provides the chunks, combine them back into their original format. +1. (If the peer does not have the chunks) walk the peer list asking for the chunks. +1. For each peer you visit, check their peer list and add peers not already in your list. +1. Repeat from step 3 until you have all of the chunks. +::: + +This is a fairly large amount of work to perform each time you want to retrieve data from the Arweave network. Imagine if you were trying to display a timeline of tweets like [https://public-square.g8way.io](https://public-square.g8way.io) does. The user experience would be terrible with long load times and spinners. Because data on Arweave is permanent, it's safe to cache in its original form to make retrieval of transaction data much quicker and easier. + +The following HTTP endpoints are how how to access cached transaction data in the arweave.net Transaction data caching service. + +
+ +### Get cached TX data +This method retrieves the transaction data associated with the specified transaction id (TX_ID) from the cache. + +`https://arweave.net/TX_ID` + +```js +const res = await axios.get(`https://arweave.net/sHqUBKFeS42-CMCvNqPR31yEP63qSJG3ImshfwzJJF8`) +console.log(res) +``` + +
+Click to view example result + +```json +{ + "data": { + "ticker": "ANT-PENDING", + "name": "pending", + "owner": "NlNd_PcajvxAkOweo7rZHJKiIJ7vW1WXt9vb6CzGmC0", + "controller": "NlNd_PcajvxAkOweo7rZHJKiIJ7vW1WXt9vb6CzGmC0", + "evolve": null, + "records": { + "@": "As-g0fqvO_ALZpSI8yKfCZaFtnmuwWasY83BQ520Duw" + }, + "balances": { + "NlNd_PcajvxAkOweo7rZHJKiIJ7vW1WXt9vb6CzGmC0": 1 + } + }, + "status": 200, + "statusText": "", + "headers": { + "cache-control": "public,must-revalidate,max-age=2592000", + "content-length": "291", + "content-type": "application/json; charset=utf-8" + }, + "config": { + "transitional": { + "silentJSONParsing": true, + "forcedJSONParsing": true, + "clarifyTimeoutError": false + }, + "adapter": [ + "xhr", + "http" + ], + "transformRequest": [ + null + ], + "transformResponse": [ + null + ], + "timeout": 0, + "xsrfCookieName": "XSRF-TOKEN", + "xsrfHeaderName": "X-XSRF-TOKEN", + "maxContentLength": -1, + "maxBodyLength": -1, + "env": {}, + "headers": { + "Accept": "application/json, text/plain, */*" + }, + "method": "get", + "url": "https://arweave.net/sHqUBKFeS42-CMCvNqPR31yEP63qSJG3ImshfwzJJF8" + }, + "request": {} +} + +``` +
+
+ +### Get raw transaction +The data for some [transaction types](manifests.md) follows different rules for rendering, this endpoint will return the raw untransformed data. +`https://arweave.net/raw/TX_ID` +```js +const result = await fetch('https://arweave.net/raw/rLyni34aYMmliemI8OjqtkE_JHHbFMb24YTQHGe9geo') + .then(res => res.json()) + console.log(JSON.stringify(result)) +``` + +
+Click to view example result + +```json +{ + "manifest": "arweave/paths", + "version": "0.1.0", + "index": { + "path": "index.html" + }, + "paths": { + "index.html": { + "id": "FOPrEoqqk184Bnk9KrnQ0MTZFOM1oXb0JZjJqhluv78" + } + } +} +``` + +
+
+ +Each Arweave peer/node also exposes some HTTP endpoints which are often replicated gateways. You can read more about Arweave peer's HTTP endpoints [here](/references/http-api.md). \ No newline at end of file diff --git a/docs/src/ja/concepts/vouch.md b/docs/src/ja/concepts/vouch.md new file mode 100644 index 00000000..0c0a8101 --- /dev/null +++ b/docs/src/ja/concepts/vouch.md @@ -0,0 +1,53 @@ +--- +locale: ja +--- +# Vouch + +## Overview + +#### Motivation + +Vouching provides a decentralized approach to Sybil resistance. A Sybil attack is when an attacker subverts the network by creating a large number of pseudonymous identities to gain a disproportionately large influence. + +#### Vouch Protocol + +Arweave introduced the concept of the ANS-109 Vouch (Assertion of Identity). It is a standard that uses a specific transaction format along with some tags to allows anyone on the permaweb to "vouch" for the identity and humanity of any Arweave address. + +Adding a standard such as the ANS-109 to the permaweb will help minimize Sybil attacks and bad actors, making it a safer experience for permaweb users. + +#### VouchDAO +VouchDAO is a community led, decentralized verification layer built on top of the Vouch standard. Developers create vouch services and members of the VouchDAO community vote on which of these verification services are deemed trustworthy. + + + +## How It Works +Developers have the ability to create different Vouch services to attest to a user's Arweave wallet based on a given set of requirements. A current example of this is the Twitter service which is the first vouch service, which has vouched over 180 Arweave addresses so far. + +The VouchDAO smart contract state has an attribute `vouched`. This state gets updated whenever a user gets verified. The `vouched` object stores a list of vouched addresses in the following format: +``` +VOUCH_USER_ADDRESS:[ + { + service:"SERVICE_ADDRESS_1" + transaction:"TX_ID" + }, + { + service:"SERVICE_ADDRESS_2" + transaction:"TX_ID" + } +] +``` + +Users that get verified will have the ANS-109 token sent to their wallet to indicate that wallet has been vouched for by that service. + +## ANS-109 Transaction Format +| Tag Name | _Optional?_ | Tag Value | +|---|---|---| +|App-Name|False|`Vouch`| +|Vouch-For|False|Arweave `address` that is being vouched for in this transaction| +|App-Version|True|`0.1`| +|Verification-Method|True| Method of verification of identity for the person. Example - `Twitter`/`In-Person`/`Gmail`/`Facebook`| +|User-Identifier|True|An identifier for the user based on the Verification Method. Example - `abhav@arweave.org`| + +## Resources +* [VouchDAO](https://vouch-dao.arweave.dev) +* [VouchDAO Contract](https://sonar.warp.cc/?#/app/contract/_z0ch80z_daDUFqC9jHjfOL8nekJcok4ZRkE_UesYsk) \ No newline at end of file diff --git a/docs/src/ja/index.md b/docs/src/ja/index.md new file mode 100644 index 00000000..6d74f421 --- /dev/null +++ b/docs/src/ja/index.md @@ -0,0 +1,39 @@ +--- +locale: ja +onboarding: true +--- + +# Cooking with the Permaweb + +The Permaweb Cookbook is a developer resource that provides the essential concepts and references for buiding applications on the Permaweb. Each concept and reference will focus on specific aspects of the Permaweb development ecosystem while providing additional details and usage examples. + +## Developers + +Welcome to the Arweave development community, where the past is forever etched in the blockchain and the future is full of endless possibilities. Let's build the decentralized web together! + +[Read More](getting-started/welcome.md) + +## Contributing + +The Cookbook is designed in a way that makes it easy for new Permaweb developers to contribute. Even if you don't know how to do something, contributing to the cookbook is a great way to learn! + +Check out all open issues here. Contribution guidelines here. if you find the cookbook is missing a concept, guide or reference, please add an issue. + +[Read More](getting-started/contributing.md) + +## How to Read the Cookbook + +The Permaweb Cookbook is split into different sections, each aimed at a different goal. + +| Section | Description | +| ------------- | ----------------------------------------------------------------------------------- | +| Core Concepts | Building blocks of the Permaweb that are good to know for development | +| Guides | Snack-sized guides about different tools for development | +| References | References to commonly needed code snippets | +| Starter Kits | Front-end Framework Starters to get you started building on the Permaweb in no time | + +## Quick Starts + +These are small guides to help developers from every experience level to ship code the the permaweb. + +- [Hello World (No Code)](getting-started/quick-starts/hw-no-code.md) From 0f66d761b9a227d20626948a4e4d26e92428f417 Mon Sep 17 00:00:00 2001 From: kaz <87490841+0xkaz@users.noreply.github.com> Date: Tue, 8 Oct 2024 12:41:20 +0800 Subject: [PATCH 03/18] add src/ja/getting-started without translate --- docs/src/ja/getting-started/README.md | 39 ++++++ docs/src/ja/getting-started/contributing.md | 63 ++++++++++ .../ja/getting-started/quick-starts/hw-cli.md | 47 ++++++++ .../getting-started/quick-starts/hw-code.md | 113 ++++++++++++++++++ .../quick-starts/hw-no-code.md | 28 +++++ .../getting-started/quick-starts/hw-nodejs.md | 95 +++++++++++++++ docs/src/ja/getting-started/welcome.md | 21 ++++ 7 files changed, 406 insertions(+) create mode 100644 docs/src/ja/getting-started/README.md create mode 100644 docs/src/ja/getting-started/contributing.md create mode 100644 docs/src/ja/getting-started/quick-starts/hw-cli.md create mode 100644 docs/src/ja/getting-started/quick-starts/hw-code.md create mode 100644 docs/src/ja/getting-started/quick-starts/hw-no-code.md create mode 100644 docs/src/ja/getting-started/quick-starts/hw-nodejs.md create mode 100644 docs/src/ja/getting-started/welcome.md diff --git a/docs/src/ja/getting-started/README.md b/docs/src/ja/getting-started/README.md new file mode 100644 index 00000000..7aa3e0db --- /dev/null +++ b/docs/src/ja/getting-started/README.md @@ -0,0 +1,39 @@ +--- +locale: ja +--- + +# Cooking with the Permaweb + +The Permaweb Cookbook is a developer resource that provides the essential concepts and references for buiding applications on the Permaweb. Each concept and reference will focus on specific aspects of the Permaweb development ecosystem while providing additional details and usage examples. + +## Developers + +Welcome to the Arweave development community, where the past is forever etched in the blockchain and the future is full of endless possibilities. Let's build the decentralized web together! + +[Read More](welcome.md) + +## Contributing + +The Cookbook is designed in a way that makes it easy for new Permaweb developers to contribute. Even if you don't know how to do something, contributing to the cookbook is a great way to learn! + +Check out all open issues here. Contribution guidelines here. if you find the cookbook is missing a concept, guide or reference, please add an issue. + +[Read More](contributing.md) + + +## How to Read the Cookbook + +The Permaweb Cookbook is split into different sections, each aimed at a different goal. + +| Section | Description | +| ------- | ----------- | +| Core Concepts | Building blocks of the Permaweb that are good to know for development | +| Guides | Snack-sized guides about different tools for development | +| References | References to commonly needed code snippets | +| Starter Kits | Front-end Framework Starters to get you started building on the Permaweb in no time | + +## Quick Starts + +These are small guides to help developers from every experience level to ship code the the permaweb. + +- [Hello World (NodeJS)](quick-starts/hw-nodejs.md) diff --git a/docs/src/ja/getting-started/contributing.md b/docs/src/ja/getting-started/contributing.md new file mode 100644 index 00000000..d3e29aaf --- /dev/null +++ b/docs/src/ja/getting-started/contributing.md @@ -0,0 +1,63 @@ +--- +locale: ja +--- +# Contributing Workflow + +Anyone in the community is welcome to contribute to the Permaweb Cookbook, as community members we want a high quality reference guide of little snack bite sized nuggets of information. Below is a step by step workflow of how anyone can contribute to this project. + +## What do you need to know? + +* Git and Github - publishes content to github.com. +* Markdown - Markdown is a text based markup language that can be transformed into HTML +* Arweave and the Permaweb - Have some knowledge about the Permaweb that should be shared + +## Steps to Contribute + + +![diagram](https://www.websequencediagrams.com/cgi-bin/cdraw?lz=dGl0bGUgQ29udHJpYnV0aW5nIHRvIFBlcm1hd2ViIENvb2tib29rCgoAGglvciAtPiBSZXBvIDogQ2hlY2sgT3V0IG9mIEZvcmsAFAVzaXRvcnkKbm90ZSBvdmVyAFYKb3IgOiBDcmVhdGUgTWFya2Rvd24gRG9jdW1lbnQAFxpvbW1pdCBDaGFuZ2VzAHQXUHVzaCBCcmFuY2gAYRljAHQGUHVsbCBSZXF1ZXMAWxphc3NpZ24gcmV2aWV3ZXIocykKUgAFBwCBdgsADQYAOhgAKAk6IEFwcHJvdmUgUFIAgjQXbWVyZ2UgdG8gbWFpbg&s=mscgen) + +## Need Help? + +Join our [discord channel](https://discord.gg/haCAX3shxF) and post a note. + +## Commiting work + +We are using [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) +for this repository. + +General flow for making a contribution: + +1. Fork the repo on GitHub +2. Clone the project to your own machine +3. Commit changes to your own branch +4. Push your work back up to your fork +5. Submit a Pull request so that we can review your changes + +**NOTE**: Be sure to merge the latest from "upstream" before making a +pull request! + +## Style + +Here are some suggestions on tone and style from some contributors: + +::: tip +In writing them, I'm getting a feeling for the tone that's appropriate for each. +CoreConcepts should be rather textbook like, neutral voice, objective. "This is how Arweave works" +For Guides, I think it's ok to have a more personal voice. Refer to the reader as "you" and speak in the collaborative voice "next we'll take a look at..." +This may just be personal preference, but in general I feel this tone much more supportive and accessible when following a longer form guide. +Indeed, its the voice that most popular tutorials from other ecosystems are written in. +For Resources, I think it shares the same voice as core concepts, with a preference for brevity. + +dmac +::: + + +::: tip +Conceptual and referencial data should have a more cold scientific tone and guides should be a supportive or even humorous tone. Longer form content needs to pull readers in without them zoning out. + +Arch_Druid +::: + +## More information about contributing check out the repo style guide + +[CONTRIBUTING](https://github.com/twilson63/permaweb-cookbook/blob/main/CONTRIBUTING.md) \ No newline at end of file diff --git a/docs/src/ja/getting-started/quick-starts/hw-cli.md b/docs/src/ja/getting-started/quick-starts/hw-cli.md new file mode 100644 index 00000000..cece0668 --- /dev/null +++ b/docs/src/ja/getting-started/quick-starts/hw-cli.md @@ -0,0 +1,47 @@ +--- +locale: ja +--- +# Hello World (CLI) + +This guide walks you through the most simple way to get data on to the permaweb using a command-line interface (CLI). + +## Requirements + +- [NodeJS](https://nodejs.org) LTS or greater + +## Description + +Using a terminal/console window create a new folder called `hw-permaweb-1`. + +## Setup + +```sh +cd hw-permaweb-1 +npm init -y +npm install arweave ardrive-cli +``` + +## Generate a wallet + +```sh +npx -y @permaweb/wallet > ~/.demo-arweave-wallet.json +``` + +## Create a web page + +```sh +echo "

Hello Permaweb

" > index.html +``` + +## Upload using Ardrive CLI + +```sh +# Create a Drive +FOLDER_ID=$(npx ardrive create-drive -n public -w ~/.demo-arweave-wallet.json --turbo | jq -r '.created[] | select(.type == "folder") | .entityId') +# Upload file +TX_ID=$(npx ardrive upload-file -l index.html --content-type text/html -w ~/.demo-arweave-wallet.json --turbo -F ${FOLDER_ID} | jq -r '.created[] | select(.type == "file +") | .dataTxId') +# open file from ar.io gateway +open https://g8way.io/${TX_ID} +``` + diff --git a/docs/src/ja/getting-started/quick-starts/hw-code.md b/docs/src/ja/getting-started/quick-starts/hw-code.md new file mode 100644 index 00000000..7bde7462 --- /dev/null +++ b/docs/src/ja/getting-started/quick-starts/hw-code.md @@ -0,0 +1,113 @@ +--- +locale: ja +--- +# Hello World (Code) + +This guide walks you through a quick way to get a static HTML, CSS and JavaScript webpage on to the permaweb using a few lines of code and a [command-line interface (CLI)](./hw-cli.md). + +## Requirements + +- [NodeJS](https://nodejs.org) LTS or greater +- Basic knowledge of HTML, CSS and JavaScript +- A text editor (VS Code, Sublime, or similar) + +## Description + +Using a terminal/console window create a new folder called `hello-world`. + +## Setup + +```sh +cd hello-world +npm init -y +mkdir src && cd src +touch index.js index.html style.css +``` + +Next open your text editor and import the `hello-world` directory. + +## Generate a wallet + +```sh +node -e "require('arweave').init({}).wallets.generate().then(JSON.stringify).then(console.log.bind(console))" > wallet.json +``` + +:::info +The wallet.json file must be in the root of the `hello-world` folder and not inside of your `src` folder. +::: + +## Create a webpage + +This webpage is using basic HTML, CSS and JavaScript to create a styled button that when you click it the header text changes color. Once finished, we will be using Irys and our previously generated wallet to deploy a fully functioning, static and permanent webpage to Arweave. + +Paste the code from the following code blocks into their files: + +**index.html** + +
+Click to view HTML + +```html + + + + + + + + + Cookbook Hello World! + + + + +

Hello World!

+ + +``` + +
+
+ +**style.css** + +
+Click to view CSS + +```css +.button { + padding: "10px"; + background-color: #4caf50; +} +``` + +
+
+ +**index.js** + +
+Click to view JS + +```javascript +function changeColor() { + const header = document.getElementById("main"); + header.style.color === "" + ? (header.style.color = "red") + : (header.style.color = ""); +} +``` + +
+ +
+ +Now that there is a static site to deploy, it can be checked to ensure it all functions properly by typing `open src/index.html` in your console/terminal. If everything is working as expected it is time to deploy to Arweave! + +## Upload using permaweb-deploy + +See: https://github.com/permaweb/permaweb-deploy + +## Congrats!! + +You just published a static site on Arweave using a few commands and a few lines of code! diff --git a/docs/src/ja/getting-started/quick-starts/hw-no-code.md b/docs/src/ja/getting-started/quick-starts/hw-no-code.md new file mode 100644 index 00000000..9ad6eba9 --- /dev/null +++ b/docs/src/ja/getting-started/quick-starts/hw-no-code.md @@ -0,0 +1,28 @@ +--- +locale: ja +--- +# Hello World (No Code) + +In this quick start we are going to upload an image to the permaweb with no code! + +## Requirements + +* Computer +* Internet +* Modern web browser + +## Create a wallet + +[https://arweave.app/add](https://arweave.app/add) or [https://arconnect.io](https://arconnect.io) + +## Send some data to arweave + +Go to [https://hello_cookbook.arweave.dev](https://hello_cookbook.arweave.dev) + +Enter some data and click publish, connect your wallet and "BAM" + +## Congrats!! + +You just published some data on Arweave using zero code. + +> To check out the project -> https://github.com/twilson63/pw-no-code-hello diff --git a/docs/src/ja/getting-started/quick-starts/hw-nodejs.md b/docs/src/ja/getting-started/quick-starts/hw-nodejs.md new file mode 100644 index 00000000..3a8b8c92 --- /dev/null +++ b/docs/src/ja/getting-started/quick-starts/hw-nodejs.md @@ -0,0 +1,95 @@ +--- +locale: ja +--- +# Hello World (NodeJS) + +This guide walks you through the most simple way to get data on to the permaweb using `arweave-js` and `irys`. + +With Arweave 2.6 only allowing 1000 items per block, directly posting to the gateway (eg. using `arweave-js`) will likely be uncommon. + +## Requirements + +- [NodeJS](https://nodejs.org) LTS or greater + +## Description + +Using a terminal/console window create a new folder called `hw-nodejs`. + +## Setup + +```sh +cd hw-nodejs +npm init -y +npm install arweave ardrive-cli +``` + +## Generate a wallet + +```sh +npx -y @permaweb/wallet > ~/.demo-arweave-wallet.json +``` + +## Upload using Ardrive Turbo + +Uploads of less than 100 KiB are currently free on Irys' Node 2. + +```js:no-line-numbers +import Irys from "@irys/sdk"; +import fs from "fs"; + +const jwk = JSON.parse(fs.readFileSync("wallet.json").toString()); +const url = "https://node2.irys.xyz"; +const token = "arweave"; + +const irys = new Irys({ + url, // URL of the node you want to connect to + token, // Token used for payment and signing + jwk, // Arweave wallet +}); + +const dataToUpload = "GM world."; + +try { + const receipt = await irys.upload(dataToUpload); + console.log(`Data uploaded ==> https://arweave.net/${receipt.id}`); +} catch (e) { + console.log("Error uploading data ", e); +} +``` + +## Upload using ArweaveJS + +If you are running the latest version of `nodejs` this `arweavejs` script will work as is. For other versions you may need to use the `--experimental-fetch` flag. + +```js:no-line-numbers +import Arweave from "arweave"; +import fs from "fs"; + +// load the JWK wallet key file from disk +const jwk = JSON.parse(fs.readFileSync('./wallet.json').toString()); + +// initialize arweave +const arweave = Arweave.init({ + host: "arweave.net", + port: 443, + protocol: "https", +}); + +const tx = await arweave.createTransaction( + { + data: "Hello world!", + }, + jwk +); + +await arweave.transactions.sign(tx, jwk); + +arweave.transactions.post(tx).then(console.log).catch(console.log); +console.log(`https://arweave.net/${tx.id}`); +``` + +## Resources + +- [Irys SDK](https://github.com/irys-xyz/js-sdk) +- [Arweave JS SDK](https://github.com/ArweaveTeam/arweave-js) +- [Irys Docs: Free Uploads](http://docs.irys.xyz/faqs/dev-faq#does-irys-offer-free-uploads) diff --git a/docs/src/ja/getting-started/welcome.md b/docs/src/ja/getting-started/welcome.md new file mode 100644 index 00000000..c17b624a --- /dev/null +++ b/docs/src/ja/getting-started/welcome.md @@ -0,0 +1,21 @@ +--- +locale: ja +--- +# Developing on the Permaweb + +## Welcome to the Permaweb + +Creating applications on the permaweb, which is built on the Arweave protocol, is similar to building traditional web applications but with some key differences. + +One major difference is that data is stored on the permaweb permanently, as the name suggests, rather than on a centralized server. This means that once data is uploaded to the permaweb, it cannot be deleted or altered. This can be beneficial for applications that require tamper-proof data storage, such as supply chain management or voting systems. + +Another difference is that the permaweb is decentralized, meaning there is no central point of control or failure. This can provide increased security and reliability for applications. + +Additionally, the permaweb uses a unique token, called AR, to pay for the storage of data on the network. This can add a new layer of complexity to application development, as developers need to consider how to integrate AR into their applications and handle payments. + +Overall, the experience of creating applications on the permaweb can be challenging, but it can also be rewarding as it offers unique benefits over traditional web development. + +## Hello Worlds + +* [Hello World (No Code)](./quick-starts/hw-no-code.md) +* [Hello World (CLI)](./quick-starts/hw-cli.md) \ No newline at end of file From bab63657448610adbf9617853581362dbc88b839 Mon Sep 17 00:00:00 2001 From: kaz <87490841+0xkaz@users.noreply.github.com> Date: Tue, 8 Oct 2024 12:44:01 +0800 Subject: [PATCH 04/18] add src/ja/guides --- docs/src/ja/guides/README.md | 28 +++ docs/src/ja/guides/arprofile.md | 180 ++++++++++++++ docs/src/ja/guides/atomic-tokens/intro.md | 84 +++++++ .../ja/guides/deploying-manifests/akord.md | 174 +++++++++++++ .../ja/guides/deploying-manifests/ardrive.md | 16 ++ .../deploying-manifests/arseeding-js.md | 81 ++++++ .../guides/deploying-manifests/arweave-app.md | 14 ++ .../deploying-manifests/deployingManifests.md | 12 + .../ja/guides/deploying-manifests/turbo.md | 125 ++++++++++ docs/src/ja/guides/deploying-psts.md | 234 ++++++++++++++++++ docs/src/ja/guides/deployment/arkb.md | 99 ++++++++ .../src/ja/guides/deployment/github-action.md | 124 ++++++++++ docs/src/ja/guides/deployment/index.md | 7 + .../ja/guides/dns-integration/server-side.md | 83 +++++++ docs/src/ja/guides/dns-integration/spheron.md | 47 ++++ docs/src/ja/guides/exm/api.md | 55 ++++ docs/src/ja/guides/exm/intro.md | 66 +++++ docs/src/ja/guides/exm/js-sdk/sdk-deploy.md | 77 ++++++ docs/src/ja/guides/exm/js-sdk/sdk-intro.md | 57 +++++ docs/src/ja/guides/exm/js-sdk/sdk-read.md | 55 ++++ docs/src/ja/guides/exm/js-sdk/sdk-write.md | 119 +++++++++ docs/src/ja/guides/http-api.md | 219 ++++++++++++++++ .../ja/guides/posting-transactions/README.md | 10 + .../ja/guides/posting-transactions/akord.md | 107 ++++++++ .../posting-transactions/arseeding-js.md | 52 ++++ .../guides/posting-transactions/arweave-js.md | 101 ++++++++ .../guides/posting-transactions/dispatch.md | 27 ++ .../ja/guides/posting-transactions/turbo.md | 192 ++++++++++++++ docs/src/ja/guides/querying-arweave/ar-gql.md | 72 ++++++ docs/src/ja/guides/querying-arweave/ardb.md | 55 ++++ .../querying-arweave/queryingArweave.md | 184 ++++++++++++++ .../search-indexing-service.md | 229 +++++++++++++++++ .../guides/smartweave/atomic-assets/akord.md | 95 +++++++ .../smartweave/atomic-assets/ardrive-cli.md | 104 ++++++++ .../guides/smartweave/atomic-assets/index.md | 16 ++ .../smartweave/warp/deploying-contracts.md | 137 ++++++++++ docs/src/ja/guides/smartweave/warp/evolve.md | 90 +++++++ docs/src/ja/guides/smartweave/warp/intro.md | 116 +++++++++ .../ja/guides/smartweave/warp/readstate.md | 61 +++++ .../smartweave/warp/write-interactions.md | 82 ++++++ docs/src/ja/guides/testing/arlocal.md | 100 ++++++++ docs/src/ja/guides/using-vue.md | 12 + docs/src/ja/guides/vouch.md | 94 +++++++ 43 files changed, 3892 insertions(+) create mode 100755 docs/src/ja/guides/README.md create mode 100644 docs/src/ja/guides/arprofile.md create mode 100644 docs/src/ja/guides/atomic-tokens/intro.md create mode 100644 docs/src/ja/guides/deploying-manifests/akord.md create mode 100644 docs/src/ja/guides/deploying-manifests/ardrive.md create mode 100644 docs/src/ja/guides/deploying-manifests/arseeding-js.md create mode 100644 docs/src/ja/guides/deploying-manifests/arweave-app.md create mode 100644 docs/src/ja/guides/deploying-manifests/deployingManifests.md create mode 100644 docs/src/ja/guides/deploying-manifests/turbo.md create mode 100644 docs/src/ja/guides/deploying-psts.md create mode 100644 docs/src/ja/guides/deployment/arkb.md create mode 100644 docs/src/ja/guides/deployment/github-action.md create mode 100644 docs/src/ja/guides/deployment/index.md create mode 100644 docs/src/ja/guides/dns-integration/server-side.md create mode 100644 docs/src/ja/guides/dns-integration/spheron.md create mode 100644 docs/src/ja/guides/exm/api.md create mode 100644 docs/src/ja/guides/exm/intro.md create mode 100644 docs/src/ja/guides/exm/js-sdk/sdk-deploy.md create mode 100644 docs/src/ja/guides/exm/js-sdk/sdk-intro.md create mode 100644 docs/src/ja/guides/exm/js-sdk/sdk-read.md create mode 100644 docs/src/ja/guides/exm/js-sdk/sdk-write.md create mode 100644 docs/src/ja/guides/http-api.md create mode 100644 docs/src/ja/guides/posting-transactions/README.md create mode 100644 docs/src/ja/guides/posting-transactions/akord.md create mode 100644 docs/src/ja/guides/posting-transactions/arseeding-js.md create mode 100644 docs/src/ja/guides/posting-transactions/arweave-js.md create mode 100644 docs/src/ja/guides/posting-transactions/dispatch.md create mode 100644 docs/src/ja/guides/posting-transactions/turbo.md create mode 100644 docs/src/ja/guides/querying-arweave/ar-gql.md create mode 100644 docs/src/ja/guides/querying-arweave/ardb.md create mode 100644 docs/src/ja/guides/querying-arweave/queryingArweave.md create mode 100644 docs/src/ja/guides/querying-arweave/search-indexing-service.md create mode 100644 docs/src/ja/guides/smartweave/atomic-assets/akord.md create mode 100644 docs/src/ja/guides/smartweave/atomic-assets/ardrive-cli.md create mode 100644 docs/src/ja/guides/smartweave/atomic-assets/index.md create mode 100644 docs/src/ja/guides/smartweave/warp/deploying-contracts.md create mode 100644 docs/src/ja/guides/smartweave/warp/evolve.md create mode 100644 docs/src/ja/guides/smartweave/warp/intro.md create mode 100644 docs/src/ja/guides/smartweave/warp/readstate.md create mode 100644 docs/src/ja/guides/smartweave/warp/write-interactions.md create mode 100644 docs/src/ja/guides/testing/arlocal.md create mode 100755 docs/src/ja/guides/using-vue.md create mode 100644 docs/src/ja/guides/vouch.md diff --git a/docs/src/ja/guides/README.md b/docs/src/ja/guides/README.md new file mode 100755 index 00000000..a02f32e0 --- /dev/null +++ b/docs/src/ja/guides/README.md @@ -0,0 +1,28 @@ +--- +locale: ja +title: Permaweb Cookbook - Guides +--- + +# Guides + +Snack-sized guides for the building blocks of the Permaweb + +- [ArProfile](arprofile.md) +- [DNS Integration](dns-integration/server-side.md) + - [Server Side](dns-integration/server-side.md) + - [Spheron](dns-integration/spheron.md) +- [Deploying Apps](deployment/index.md) + - [arkb](deployment/arkb.md) + - [github-action](deployment/github-action.md) +- [Deploying PathManifests](deploying-manifests/deployingManifests.md) + - [arweave.app](deploying-manifests/arweave-app.md) + - [ardrive](deploying-manifests/ardrive.md) + - [Akord](deploying-manifests/akord.md) +- [Deploying PSTs](deploying-psts.md) +- [GraphQL](querying-arweave/queryingArweave.md) + - [ArDB](querying-arweave/ardb.md) + - [ar-gql](querying-arweave/ar-gql.md) + - [Search Service](querying-arweave/search-indexing-service.md) +- [Testing](testing/arlocal.md) + +> Do you think a permaweb guide is missing? Create a issue at [Github](https://github.com/twilson63/permaweb-cookbook/issues) or consider [contributing](../getting-started/contributing.md) diff --git a/docs/src/ja/guides/arprofile.md b/docs/src/ja/guides/arprofile.md new file mode 100644 index 00000000..20c68bc0 --- /dev/null +++ b/docs/src/ja/guides/arprofile.md @@ -0,0 +1,180 @@ +--- +locale: ja +--- +# ArProfile + +[ArProfile](https://arprofile.arweave.dev) is an Arweave native DID which relies on the open data protocol [`Account`](https://docs.arprofile.org/#/?id=data-protocol). + +[`arweave-account`](https://www.npmjs.com/package/arweave-account) is a npm package that allows you to easily integrate ArProfile in your codebase, wether it is a web app or a backend (nodejs). + +[See complete documentation here](https://docs.arprofile.org) + +## Purpose + +The underlying account protocol aims to satisfy essential needs for social interactions between users: an avatar, a unique handle, a name and a bio. It also includes the possibility to add accounts from the well known social networks such as Twitter, Discord, Github, Instagram and Facebook. + +## Quick integration + +A [permadapp](/concepts/permawebApplications.html) profile viewer is available at the tx [`5OHoPfYucLPTgOvJGgnL0Cg0Ktl-ZDaiTjQo_2B3tBg`](https://viewblock.io/arweave/tx/5OHoPfYucLPTgOvJGgnL0Cg0Ktl-ZDaiTjQo_2B3tBg) + +You can embed any ArProfile with a ` +``` + +Result: + + + +# Integration in your codebase + +[`arweave-account`](https://www.npmjs.com/package/arweave-account) is a npm package that allows you to easily integrate ArProfile in your codebase, wether it is a web app or a backend (nodejs). + +## Installation + +Add the package using npm: + + + +```console +npm install arweave-account +``` + + + + +```console +yarn add arweave-account +``` + + + + +## Using ArProfile +```js:no-line-numbers +import Account from 'arweave-account' +const account = new Account(opts); +``` + +Optional argument options can be passed into the constructor. Here is the default options: +```js:no-line-numbers +const opts = { + cacheIsActivated: true, + cacheSize: 100, + cacheTime: 60 +}; +``` + +::: tip +Caching will store the relevant profile information in your local storage so that future requests for such data can be fulfilled much faster. The duration that is stored is specified in the options passed in +::: + +#### Get Profile by Address +To retrieve account information using an Arweave address, inside an async function pass the user address to the `get` function + +```js:no-line-numbers +await account.get("aIUmY9Iy4qoW3HOikTy6aJww-mM4Y-CUJ7mXoPdzdog") + +{ + "txid": "NPJJoq-9EwUeAce_bSbSyqICaGs4_7Hg6VxCyoCY8UQ", + "addr": "aIUmY9Iy4qoW3HOikTy6aJww-mM4Y-CUJ7mXoPdzdog", + "handle": "@cromatikap#aIUdog", + "profile": { + "handleName": "cromatikap", + "avatar": "xqjVvn9b8hmtDJhfVw80OZzAsn-ErpWbaFCPZWG5vKI", + "avatarURL": "https://arweave.net/xqjVvn9b8hmtDJhfVw80OZzAsn-ErpWbaFCPZWG5vKI", + "banner": "ar://a0ieiziq2JkYhWamlrUCHxrGYnHWUAMcONxRmfkWt-k", + "bannerURL": "https://arweave.net/a0ieiziq2JkYhWamlrUCHxrGYnHWUAMcONxRmfkWt-k", + "name": "Axel", + "bio": "Founder of Metaweave.xyz\nI love dogs", + "email": "", + "links": { + "twitter": "cromatikap", + "github": "cromatikap", + "instagram": "cromatikap", + "discord": "cromatikap#6039" + }, + "wallets": {} + } +} +``` + +#### Get Profile by Handle +An Arweave address can be linked to multiple ArProfile's. To retrieve account information using an existing ArProfile handle, inside an async function pass the user handle to the `search` function + +```js:no-line-numbers +await account.search("cromatikap") + +[ + { + "txid": "H0qHXb2mC3Y1zRZcSczZ-fp4UytCxSJDhO7j9DP2wQE", + "addr": "Y4P1UzeAgQNU169vhYo3Cdx4-gevKvaBWCfkoG-ajU8", + "handle": "@cromatikap#Y4PjU8", + "profile": { + "handleName": "cromatikap", + "avatar": "ar://xpuHFNujK8K6_1SHRn4KPLxkHZKfIryEjXIDYkKwRtE", + "avatarURL": "https://arweave.net/xpuHFNujK8K6_1SHRn4KPLxkHZKfIryEjXIDYkKwRtE", + "banner": "ar://a0ieiziq2JkYhWamlrUCHxrGYnHWUAMcONxRmfkWt-k", + "bannerURL": "https://arweave.net/a0ieiziq2JkYhWamlrUCHxrGYnHWUAMcONxRmfkWt-k", + "name": "cromatikap on the go", + "bio": "mobile account", + "email": "", + "links": {}, + "wallets": {} + } + }, + {...}, // more profiles + {...} +] +``` + +#### Get Profile by Unique Handle +To retrieve account information using an Arweave address, inside an async function pass the user handle and unique handle to the `search` function + +```js:no-line-numbers +await account.search("cromatikap#aIUdog") + +{ + "txid": "_DGURgOAih5p2vTyaEu9_bBDpZv81rctPO2q9cpOFS0", + "addr": "HDCwh7xJcIK23vx1blxysTnUpqy1PEzAb5Am84ZdERA", + "handle": "@cromatikap#HDCERA", + "profile": { + "handleName": "cromatikap", + "avatar": "ar://OrG-ZG2WN3wdcwvpjz1ihPe4MI24QBJUpsJGIdL85wA", + "avatarURL": "https://arweave.net/OrG-ZG2WN3wdcwvpjz1ihPe4MI24QBJUpsJGIdL85wA", + "banner": "ar://a0ieiziq2JkYhWamlrUCHxrGYnHWUAMcONxRmfkWt-k", + "bannerURL": "https://arweave.net/a0ieiziq2JkYhWamlrUCHxrGYnHWUAMcONxRmfkWt-k", + "name": "Axel", + "bio": "test account by cromatikap\nUPDATE", + "email": "", + "links": { + "github": "cromatikap", + "twitter": "cromatikap" + }, + "wallets": {} + } +} +``` + +## Summary +With just 3 lines of code needed to implement, ArProfile is a straight-forward way for adding additional Arweave user information such as avatars, bio's and social links to your applications. diff --git a/docs/src/ja/guides/atomic-tokens/intro.md b/docs/src/ja/guides/atomic-tokens/intro.md new file mode 100644 index 00000000..90424984 --- /dev/null +++ b/docs/src/ja/guides/atomic-tokens/intro.md @@ -0,0 +1,84 @@ +# Atomic Tokens + +> **⚠️ Deprecation Notice** +> +> This document is deprecated and may contain outdated information. + +## What is an Atomic Token? + +[Check out the concept](../../concepts/atomic-tokens.md) + +## Creating an Atomic Token + +::: info INFORMATION +For this example, we are using a SWT Contract Source that is already published on the network. [x0ojRwrcHBmZP20Y4SY0mgusMRx-IYTjg5W8c3UFoNs](https://sonar.warp.cc/#/app/source/x0ojRwrcHBmZP20Y4SY0mgusMRx-IYTjg5W8c3UFoNs#) - +::: + +example.ts + +```ts +import Irys from '@irys/sdk' +import { WarpFactory } from 'warp-contracts' + +async function main() { + const wallet = JSON.parse(await import('fs') + .then(fs => fs.readFileSync('./wallet.json', 'utf-8'))) + + const irys = new Irys({ 'https://node2.irys.xyz', 'arweave', wallet }) + const warp = WarpFactory.forMainnet() + + const data = `

Hello Permaweb!

` + const tags = [ + { name: 'Content-Type', value: 'text/html' }, + // ANS-110 Tags + { name: 'Type', value: 'web-page' }, + { name: 'Title', value: 'My first permaweb page' }, + { name: 'Description', value: 'First permaweb page by Anon' }, + { name: 'Topic:Noob', value: 'Noob' }, + // SmartWeave Contract + { name: 'App-Name', value: 'SmartWeaveContract' }, + { name: 'App-Version', value: '0.3.0' }, + { name: 'Contract-Src', value: 'x0ojRwrcHBmZP20Y4SY0mgusMRx-IYTjg5W8c3UFoNs' }, + { + name: 'Init-State', value: JSON.stringify({ + balances: { + 'cHB6D8oNeXxbQCsKcmOyjUX3UkL8cc3FbJmzbaj3-Nc': 1000000 + }, + name: 'AtomicToken', + ticker: 'ATOMIC-TOKEN', + pairs: [], + creator: 'cHB6D8oNeXxbQCsKcmOyjUX3UkL8cc3FbJmzbaj3-Nc', + settings: [['isTradeable', true]] + }) + } + ] + + const { id } = await irys.upload(data, { tags }) + await warp.createContract.register(id, 'node2') + console.log('Atomic Token: ', id) +} + +main() +``` + +In this example, we are creating a data-item and uploading the item to the bundler network service. Then we are registering our contract with the Warp sequencer. By using bundler to publish our data-item and registering with the Warp sequencer, our data is immediately available on the gateway service and our contract is immediately able to accept interactions. + +Run Example + +```sh +npm install @irys/sdk warp-contracts +npm install typescript ts-node +npx ts-node example.ts +``` + +::: info INFORMATION +[ANS-110](https://github.com/ArweaveTeam/arweave-standards/blob/master/ans/ANS-110.md) is an Asset Discovery Specification to allow for composability with the Permaweb Application ecosystem. +::: + +## Summary + +This is a simple example of deploying an Atomic Asset, for more detailed examples check out: [https://atomic-assets.arweave.dev](https://atomic-assets.arweave.dev) + +## Working with Tokens + +SmartWeave Contracts can not hold AR the native coin of the Arweave Network. AR is used to purchase storage for data on the Arweave Network and it can be transferred from a source wallet to a target wallet on the Arweave network, but it can not be held in a SmartWeave contract. diff --git a/docs/src/ja/guides/deploying-manifests/akord.md b/docs/src/ja/guides/deploying-manifests/akord.md new file mode 100644 index 00000000..458a3c35 --- /dev/null +++ b/docs/src/ja/guides/deploying-manifests/akord.md @@ -0,0 +1,174 @@ +--- +locale: ja +--- +## 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.2.0", + "index": { + "path": "index.html" + }, + "fallback": { + "id": "cG7Hdi_iTQPoEYgQJFqJ8NMpN4KoZ-vH_j7pG4iP7NI" + } + "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 diff --git a/docs/src/ja/guides/deploying-manifests/ardrive.md b/docs/src/ja/guides/deploying-manifests/ardrive.md new file mode 100644 index 00000000..de0e4b2d --- /dev/null +++ b/docs/src/ja/guides/deploying-manifests/ardrive.md @@ -0,0 +1,16 @@ +--- +locale: ja +--- +### ArDrive + +--- + +You can create a manifest for a folder or group of folders with `ardrive create-manifest` using the [ArDrive CLI](https://github.com/ardriveapp/ardrive-cli). + +Further Reading: [ArDrive CLI Docs](https://github.com/ardriveapp/ardrive-cli) + +--- + +Alternatively, you can create a manifest using the [ArDrive](https://ardrive.io) web app by selecting New → Create manifest while inside of a drive. + +![ArDrive Web App Manifest](~@source/images/ardrive-manifests.png) \ No newline at end of file diff --git a/docs/src/ja/guides/deploying-manifests/arseeding-js.md b/docs/src/ja/guides/deploying-manifests/arseeding-js.md new file mode 100644 index 00000000..5ed270d7 --- /dev/null +++ b/docs/src/ja/guides/deploying-manifests/arseeding-js.md @@ -0,0 +1,81 @@ +--- +locale: ja +--- +### Arseeding JS SDK + +--- + +*The guide of how to easily use the Manifest feature in Arseeding.* +## Getting Started + +### Installing the SDK +```bash +npm i arseeding-js +``` + +Create a `demo.js`, and copy the following code into it. + +```jsx +import {uploadFolderAndPay} from "arseeding-js/cjs/uploadFolder"; + +const run = async () => { + const path = 'Your Folder path' + const priv = 'YOUR PRIVATE KEY' + const arseedUrl = 'https://arseed.web3infra.dev' + const tag = '' // everpay supported all token tag (chainType-symbol-id) + const indexFile = '' + + const res = await uploadFolderAndPay(path,priv,arseedUrl,tag, indexFile) + console.log(res) +} + +// review manifest Data +curl --location --request GET 'https://arseed.web3infra.dev/{res.maniId}' +``` + + +Configuration Notes: + +- Populate your ECC key with `YOUR PRIVATE KEY`. Make sure that the wallet corresponding to the private key has assets in everPay. +- `arseedUrl` is the URL of the Arseeding backend service, here we use the public Arseeding service provided by permadao: https://arseed.web3infra.dev. +- `payUrl` is the URL of the everPay service that needs to be configured: [https://api.everpay.io](https://api.everpay.io/) +- `path` is the path to the folder you want to upload, for example, to deploy a static website, the front-end project will generate a build or dist folder after the project is compiled, just choose the path to that folder. +- `tag` is the payment `token tag` you need to select, if your MetaMask address held in everPay is usdc, you can get the usdc tag via [getTokenTagByEver('usdc')](https://web3infra.dev/docs/arseeding/sdk/arseeding-js/getTokenTag),If you want to pay with another token, just fill in the token name to get the specified tag. +- `indexFile` is optional,if you don't pass it, `index.html`(if exist) or null will be default value, if the folder is a front-end project build folder you don't need pass indexFile. + +After preparing the configuration, call `uploadFolderAndPay`(path,priv,url,payCurrency) to upload all the files under your folder to web3infra's Arseeding node by means of manifest. + +```bash +node demo.js +``` + +return: + +```tsx +{ + fee: '0.004218', + maniId: 'EHeDa8b428L38b972qyHI87YELuZKue1jDI_JWC-aGE', + everHash:[ + '0x46744320be6529c48bf18c348fa181facef3d9d6d920a24687dc9964ba3ead0a' + ] +} +``` + +## Download data-Access page + +The `maniId` can be found in the returned result, the maniId above is EHeDa8b428L38b972qyHI87YELuZKue1jDI_JWC-aGE + +In this tutorial, we are uploading a Docusaurus front-end project, and running `yarn build` under that project will generate a build folder, which is the one we uploaded. Now, we can access the site via `maniId`! + +In your browser, enter: + +```bash +https://arseed.web3infra.dev/EHeDa8b428L38b972qyHI87YELuZKue1jDI_JWC-aGE +``` +You can now access this website, and it will be permanently available! + +--- + +References and Further Reading: +* [Arseeding Documentation](https://web3infra.dev/docs/arseeding/introduction/lightNode) +* Follow the Arseeding Upload Manifest tutorial [here](https://web3infra.dev/docs/arseeding/sdk/arseeding-js/manifest/)。 \ No newline at end of file diff --git a/docs/src/ja/guides/deploying-manifests/arweave-app.md b/docs/src/ja/guides/deploying-manifests/arweave-app.md new file mode 100644 index 00000000..d815b074 --- /dev/null +++ b/docs/src/ja/guides/deploying-manifests/arweave-app.md @@ -0,0 +1,14 @@ +--- +locale: ja +--- +### Arweave.app + +--- + +Uploading a directory through [Arweave.app](http://Arweave.app) will automatically create a manifest for all of the files in the directory. + +![ArweaveApp Manifest Upload](~@source/images/arweaveapp-manifest.png) + +Alternatively, you can upload your own manifest file manually, add the following tag, and submit the transaction. + +![ArweaveApp Manifest Tags](~@source/images/arweaveapp-tags.png) \ No newline at end of file diff --git a/docs/src/ja/guides/deploying-manifests/deployingManifests.md b/docs/src/ja/guides/deploying-manifests/deployingManifests.md new file mode 100644 index 00000000..0cbe58cc --- /dev/null +++ b/docs/src/ja/guides/deploying-manifests/deployingManifests.md @@ -0,0 +1,12 @@ +--- +locale: ja +--- +# Creating and Deploying Manifests + +--- + +This guide lays out how to create and deploy a path manifest manually. + +The path manifests core concepts page has more information on what manifests are, and why they might be useful for your project. + +If you follow this guide to deploy a path manifest, it will need to follow the manifest structure laid out in the [core concepts](https://cookbook.arweave.dev/concepts/manifests.html) page. \ No newline at end of file diff --git a/docs/src/ja/guides/deploying-manifests/turbo.md b/docs/src/ja/guides/deploying-manifests/turbo.md new file mode 100644 index 00000000..ca0f9636 --- /dev/null +++ b/docs/src/ja/guides/deploying-manifests/turbo.md @@ -0,0 +1,125 @@ +--- +locale: ja +--- +# Deploying Manifests with Turbo + +## Installing Turbo + +> Requires NodeJS - https://nodejs.org + + + + +```console +npm install @ardrive/turbo-sdk +``` + + + + +```console +yarn add @ardrive/turbo-sdk +``` + + + + +## Upload Folder + +By default, the `uploadFolder` method in the Turbo SDK will generate and deploy a manifest for the folder. The `index` and `fallback` attributes will be set to the `index.html` and `404.html` files, respectively, in the uploaded folder unless other files are specified. + +The `uploadFolder` method will return both the full json for the manifest, and the transaction id for the manifest upload. + +```javascript +import { TurboFactory } from "@ardrive/turbo-sdk"; +import fs from "fs"; + +const jwk = fs.readFileSync("./KeyFile.json"); +const turbo = TurboFactory.authenticated({ privateKey: JSON.parse(jwk) }); + +const { manifest, fileResponses, manifestResponse } = await turbo.uploadFolder({ + folderPath, + dataItemOpts: { + // optional + tags: [ + { + // User defined content type will overwrite file content type + name: "Content-Type", + value: "text/plain", + }, + { + name: "My-Custom-Tag", + value: "my-custom-value", + }, + ], + // no timeout or AbortSignal provided + }, + manifestOptions: { + // optional + indexFile: "custom-index.html", + fallbackFile: "custom-fallback.html", + disableManifests: false, + }, +}); +``` + +## Manually Create and Upload a Manifest + +Manifests can also be manually created and uploaded. A manifest is a json object with specific schema and uploaded with the `Content-Type` tag `application/x.arweave-manifest+json`. + +```js +import { TurboFactory } from "@ardrive/turbo-sdk"; +import { Readable } from 'stream'; + + +const jwk = fs.readFileSync('./KeyFile.json'); +const turbo = TurboFactory.authenticated({ privateKey: JSON.parse(jwk) }); + +// define the manifest +const manifest = { + "manifest": "arweave/paths", + "version": "0.2.0", + "index": { + "path": "index.html" + }, + "fallback": { + "id": "-u47dfkUE2k9vETNXTqCdFRVLS5NfpZfODZ5ZKItiRY" + } + "paths": { + "404.html": { + "id": "-u47dfkUE2k9vETNXTqCdFRVLS5NfpZfODZ5ZKItiRY" + }, + "index.html": { + "id": "dYD2PqQyFpKj40bhyTkBCEtYnxf-GfQpRMFClbCiHF4" + }, + "last.html": { + "id": "YjpkqFPUamchyDYpJsGUmge8sKczqTKkX2hWbIL9qBw" + }, + "stuff.html": { + "id": "pqnejz6_iHB-KYdTB4zC_ALEX5Ox-Rpt4X_Yr3JZywk" + }, + "test.html": { + "id": "hfc763dACTF9VvxDAX4YkF9QNzh5eO1NZpSCAetsrXE" + } + } +}; + +// upload the manifest +const manifestString = JSON.stringify(manifest); + +const uploadResult = await turbo.uploadFile({ + fileStreamFactory: () => Readable.from(Buffer.from(manifestString)), + fileSizeFactory: () => Buffer.byteLength(manifestString), + signal: AbortSignal.timeout(10_000), //10 second timeout + dataItemOpts: { + tags: [ + { + name: 'Content-Type', + value: 'application/x.arweave-manifest+json', + } + ], + }, +}); + +console.log(uploadResult.id) // log the manifest transaction id to the console +``` \ No newline at end of file diff --git a/docs/src/ja/guides/deploying-psts.md b/docs/src/ja/guides/deploying-psts.md new file mode 100644 index 00000000..b0ebd0cf --- /dev/null +++ b/docs/src/ja/guides/deploying-psts.md @@ -0,0 +1,234 @@ +--- +locale: ja +--- +# Creating and Deploying a PST + +### **Prerequisites** + +--- + +Before you begin creating your PST, you will need **NodeJS/NPM** installed. + +### **Getting Started** + +--- + +SmartWeave contracts can be broken down into two parts: + +- **The Contract** (the actual logic behind the token) +- **Initial State** (some settings or configuration we want our token to have) + +In this guide we will create both. + +**Setting Up a Local Environment** + +Run `npm install arweave arlocal warp-contracts`. + +This will provide functions to create and deploy a PST. + +### **Configuring The Contract** + +--- + +The PST requires some initial state setup before deployment, e.g. the token name, and token quantity. + +Create a configuration file that looks something like this: + +```json +// initial-state.json +{ + "ticker": "TEST_PST", + "name": "Test PST", + "owner": "G1mQ4_jjcca46JqR1kEt0yKvhaw6EUrXLiEwebMvSwo", + "balances": { + "G1mQ4_jjcca46JqR1kEt0yKvhaw6EUrXLiEwebMvSwo": 1000, + "Jo9BZOaIVBDIhyKDiSnJ1bIU4usT1ZZJ5Kl6M-rBFdI": 1000, + } +} + +``` + +Which sets some initial options for the PST. Save it as `initial-state.json`. + +- **`ticker`** - symbol of the token (e.g. BTC, ETH) +- **`name`** - name of the token +- **`owner`** - address of the contract owner +- **`balances`** - addresses to distribute the initial tokens to + +### Writing The Contract + +The PST contract should have a single function, `handle`, which takes two arguments: + +`state`, which is the current state of the contract, and `action`, which is the action you want to perform (e.g. transferring tokens). + +When making a call to the PST contract, it should return one of two things: +- **`state`** - if the call to the contract changes the state (e.g. making a transfer). +- **`result`** - if the call does **not** change the state (e.g. viewing a balance). + +Otherwise it should throw **`error`** if the call is invalid or fails. + +First, let's define the main `handle` function. +```js +//contract.js +export function handle(state, action) { + let balances = state.balances; + let input = action.input; + let caller = action.caller; +} +``` +This sets up some variables for common interactions the smart contract uses. + +Now let's add the first type of input which will change the state. This allows the owner of the contract to mint new PSTs to their wallet address. + +```js + if (input.function == 'mint') { + let qty = input.qty; + + if (qty <= 0) { + throw new ContractError('Invalid token mint'); + } + + if (!Number.isInteger(qty)) { + throw new ContractError('Invalid value for "qty". Must be an integer'); + } + + if(caller != state.owner) { + throw new ContractError('Only the owner of the contract can mint new tokens.'); + } + + balances[caller] ? (balances[caller] += qty) : (balances[caller] = qty); + return { state }; + } +``` +The next function will handle transfers of PSTs between wallets. + +```js +if (input.function == 'transfer') { + + let target = input.target; + let qty = input.qty; + + if (!Number.isInteger(qty)) { + throw new ContractError(`Invalid value for "qty". Must be an integer`); + } + + if (!target) { + throw new ContractError(`No target specified`); + } + + if (qty <= 0 || caller == target) { + throw new ContractError('Invalid token transfer'); + } + + if (balances[caller] < qty) { + throw new ContractError(`Caller balance not high enough to send ${qty} token(s)!`); + } + + // Lower the token balance of the caller + balances[caller] -= qty; + if (target in balances) { + // Wallet already exists in state, add new tokens + balances[target] += qty; + } else { + // Wallet is new, set starting balance + balances[target] = qty; + } + + return { state }; + } +``` +Let's also add a way to view the PST balance of a target wallet. + +```js +if (input.function == 'balance') { + + let target = input.target; + let ticker = state.ticker; + + if (typeof target !== 'string') { + throw new ContractError(`Must specificy target to get balance for`); + } + + if (typeof balances[target] !== 'number') { + throw new ContractError(`Cannnot get balance, target does not exist`); + } + + return { result: { target, ticker, balance: balances[target] } }; + } +``` +And finally, let's throw an error if the input given is not the `mint`, `transfer`, or `balance` function. + +```js +throw new ContractError(`No function supplied or function not recognised: "${input.function}"`); +``` + +### **Deploying The Contract** + +To deploy a contract, we need to write a NodeJS script which will work with Warp to deploy our contract. + +Create a file called `deploy-contract.js`, and begin by importing `WarpFactory`. + +```js +import { WarpFactory } from 'warp-contracts/mjs' +``` +Next, initialize an instance of Warp. + +You can replace `forMainnet()` with `forLocal()`, or `forTestnet()`, depending on where you want to deploy your contract. +```js +const warp = WarpFactory.forMainnet(); +``` + +Now we have Warp setup, you'll need a wallet to deploy the contract from. You can either use your own local keyfile: + +```js +const walletAddress = "path/to/wallet.json" +``` + or, generate a new wallet through Warp using the following code: + +```js +const jwk = await warp.arweave.wallets.generate(); +const walletAddress = await warp.arweave.wallets.jwkToAddress(jwk); +``` +Transactions under 100KB are free, so you don't even have to fund the wallet! + +--- + +Before deploying the contract, we need to read in the initial state file and the contract file. + +```js +const contract = fs.readFileSync(path.join(__dirname, 'contract.js'), 'utf8'); +const state = JSON.parse( + fs.readFileSync(path.join(__dirname, 'initial-state.json'), 'utf8') +); +``` +If you generated a new wallet to deploy from, you'll need to override the `owner` in the initial state. You can do this with the following code: +```js +const initialState = { + ...stateFromFile, + ...{ + owner: walletAddress, + }, +}; +``` +If you're using wallet, you can instead edit the `initial-state.json` file directly to use your wallet address. + +The following code handles the deployment of the contract: + +```js +const contractTxId = await warp.createContract.deploy({ + wallet, + initState: JSON.stringify(initialState), + src: contractSrc, +}); + +console.log('Deployment completed: ', { + ...result, + sonar: `https://sonar.warp.cc/#/app/contract/${result.contractTxId}` +}); +``` + +Run the script with `node deploy-contract.js` which will deoply your contract and log the contract transaction ID in the terminal for you to use. + +--- + +**Source and Further Reading**: [Warp Docs](https://academy.warp.cc/tutorials/pst/introduction/intro) \ No newline at end of file diff --git a/docs/src/ja/guides/deployment/arkb.md b/docs/src/ja/guides/deployment/arkb.md new file mode 100644 index 00000000..3ff4d50b --- /dev/null +++ b/docs/src/ja/guides/deployment/arkb.md @@ -0,0 +1,99 @@ +--- +locale: ja +--- +# arkb + +## Requirements + +An Arweave wallet is required to deploy using `arkb` for covering the data transaction costs. + +## Installation + +To install `arkb` run + + + +```console:no-line-numbers +npm install -g arkb +``` + + + + +```console:no-line-numbers +yarn add ar-gql +``` + + + + +## Deploying + +When uploading a directory of files or a Permaweb application, by default `arkb` deploys each file separately as an L1 transaction, with the option to bundle the transactions using Bundlr. + +## Static Build + +Permaweb applications are statically generated, meaning that the code and content are generated ahead of time and stored on the network. + +Below is an example of a static site. To deploy this to the Permaweb, the `build` directory will be passed in as the argument for the `deploy` flag. + +```js +|- build + |- index.html + |- styles.css + |- index.js +``` + +#### Default Deployment + +Deploying as an L1 transaction can take longer to confirm as it is directly uploaded to the Arweave network. + +```console +arkb deploy [folder] --wallet [path to wallet] +``` + +
+ + +#### Bundled Deployment + +To deploy using Bundlr you will need to fund a Bundlr node. + +Bundlr node2 allows free transactions under 100kb. + +You can add custom identifiable tags to the deployment using `tag-name/tag-value` syntax. + +```console +arkb deploy [folder] --use-bundler [bundlr node] --wallet [path to wallet] --tag-name [tag name] --tag-value [tag value] +``` + +
+ + +## Other Commands + +#### Fund Bundlr + +```console +arkb fund-bundler [amount] --use-bundler [bundlr node] +``` + +\* Funding a Bundlr instance can take up to 30 minutes to process + +#### Saving Keyfile + +```console +arkb wallet-save [path to wallet] +``` + +After saving your key you can now run commands without the --wallet-file option, like this + +```console +arkb deploy [path to directory] +``` + +#### Check Wallet Balance + +```console +arkb balance +``` diff --git a/docs/src/ja/guides/deployment/github-action.md b/docs/src/ja/guides/deployment/github-action.md new file mode 100644 index 00000000..a775188d --- /dev/null +++ b/docs/src/ja/guides/deployment/github-action.md @@ -0,0 +1,124 @@ +--- +locale: ja +--- +# Github Action + +::: warning +This guide is for educational purposes only, and you should use to learn options of how you might want to deploy your application. In this guide, we are trusting a 3rd party resource `github` owned by `microsoft` to protect our secret information, in their documentation they encrypt secrets in their store using `libsodium sealed box`, you can find more information about their security practices here. https://docs.github.com/en/actions/security-guides/encrypted-secrets +::: + +Github Actions are CI/CD pipelines that allows developers to trigger automated tasks via events generated from the github workflow system. These tasks can be just about anything, in this guide we will show how you can use github actions to deploy your permaweb application to the permaweb using Irys and ArNS. + +::: tip +This guide requires understanding of github actions, and you must have some ArNS Test Tokens, go to https://ar.io/arns/ for more details. +::: + +::: warning +This guide does not include testing or any other checks you may want to add to your production workflow. +::: + +## Create deploy script + +A deploy script is a script that does the heavy lifting of deploying your application, we will use `@irys/sdk` and `warp-contracts` to publish our application and register the newly published application on ArNS. + +Install deploy dependencies + +```console +npm install --save-dev @permaweb/arx +npm install --save-dev warp-contracts +npm install --save-dev arweave +``` + +Create `deploy.mjs` file + +```js +import Arx from "@permaweb/arx"; +import { WarpFactory, defaultCacheOptions } from "warp-contracts"; +import Arweave from "arweave"; + +const ANT = "[YOUR ANT CONTRACT]"; +const DEPLOY_FOLDER = "./dist"; +const TURBO_NODE = "https://turbo.ardrive.io"; + +const jwk = JSON.parse(Buffer.from(process.env.PERMAWEB_KEY, "base64").toString("utf-8")); +const arweave = Arweave.init({ host: "arweave.net", port: 443, protocol: "https" }); +const arx = new Arx({ url: TURBO_NODE, token: "arweave", key: jwk }); +const warp = WarpFactory.custom(arweave, defaultCacheOptions, "mainnet").useArweaveGateway().build(); + +const contract = warp.contract(ANT).connect(jwk); +// upload folder +const result = await arx.uploadFolder(DEPLOY_FOLDER, { + indexFile: "index.html", +}); + +// update ANT +await contract.writeInteraction({ + function: "setRecord", + subDomain: "@", + transactionId: result.id, +}); + +console.log("Deployed Cookbook, please wait 20 - 30 minutes for ArNS to update!"); +``` + +## Add script to package.json + +Create a new script property called `deploy`, call the build script, then call `node deploy.mjs` in the value of the scripts deploy property. + +package.json + +```json + ... + "scripts": { + "dev": "vuepress dev src", + "build": "vuepress build src", + "deploy": "yarn build && node deploy.mjs" + }, + ... +``` + +## Create github action + +Create a `deploy.yml` file in the `.github/workflows` folder, this file instructs github actions to deploy when a push event is triggered on the `main` branch. + +```yml +name: publish + +on: + push: + branches: + - "main" + +jobs: + publish: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2 + - uses: actions/setup-node@v1 + with: + node-version: 18.x + - run: yarn + - run: yarn deploy + env: + KEY: ${{ secrets.PERMAWEB_KEY }} +``` + +## Summary + +In the project repo, go to the settings and secrets, add a new secret to the repostiory, this secret will be called PERMAWEB_KEY for this project. The value of the secret should be the base64 encode string of the deployment wallet. + +```console +base64 -i wallet.json | pbcopy +``` + +In order for this deployment to work, you will need to fund this wallets Irys account, make sure there is some $AR in the wallet you will be using, not much, maybe .5 AR, then use the Irys cli to fund. + +```console +arx fund 250000000000 -w wallet.json -t arweave +``` + +::: warning +Keep this wallet low on funds and only use it for this project. +::: + +:tada: You have setup a github action to completely automate your deploy to permaweb! diff --git a/docs/src/ja/guides/deployment/index.md b/docs/src/ja/guides/deployment/index.md new file mode 100644 index 00000000..2192dae0 --- /dev/null +++ b/docs/src/ja/guides/deployment/index.md @@ -0,0 +1,7 @@ +--- +locale: ja +--- +# Deployment + +- [arkb](arkb.md) +- [github-action](github-action.md) \ No newline at end of file diff --git a/docs/src/ja/guides/dns-integration/server-side.md b/docs/src/ja/guides/dns-integration/server-side.md new file mode 100644 index 00000000..51b818a3 --- /dev/null +++ b/docs/src/ja/guides/dns-integration/server-side.md @@ -0,0 +1,83 @@ +--- +locale: ja +--- +# ServerSide DNS Integration + +So you have a permaweb application and it is on the permaweb, but you also have a specific domain that you want users to use to access this app. mydomain.com, to connect your domain to a permaweb app, you have several options, this option we will show here is a called a server-side redirect. The redirect occurs as a reverse proxy so that the user remains on mydomain.com in their browser, while behind the scenes the application is being served from the permaweb. + +::: tip +You can use any reverse proxy to setup a server-side redirect, in this guide we will be using deno and deno.com a lightweight edge hosting service. +::: + +## What you will need to setup a reverse proxy using deno.com + +* A deno.com account, which at the time of this writting is free. +* A domain with access to the DNS Settings +* A permaweb application identifier and is deployed on the permaweb + +## Create proxy on Deno.com + +Deno Deploy is a distributed system that runs at the edge. 35 regions worldwide. Open your browser to [https://deno.com](https://deno.com) and click sign in or sign up if you do not have an account. + +Click on `New Project` and Click `Play` + +The deno playground will allow us to create a proxy without having to leave the browser. + +Copy the following code: + +```ts +import { serve } from "https://deno.land/std/http/mod.ts"; + +const APP_ID = "YOUR AREWEAVE IDENTIFIER" + +const fileService = `https://arweave.net/${APP_ID}`; + +// handle requests +async function reqHandler(req: Request) { + const path = new URL(req.url).pathname; + // proxy to arweave.net + return await fetch(fileService + path).then(res => { + const headers = new Headers(res.headers) + // instruct server to leverage the edge cache + headers.set('cache-control', 's-max-age=600, stale-while-revalidate=6000') + + // return response from arweave.net + return new Response(res.body, { + status: res.status, + headers + }) + }); +} + +// listen for requests +serve(reqHandler, { port: 8100 }); +``` + +This proxy server will receive requests from mydomain.com and proxy the request to arweave.net/APP_ID and then return the response as mydomain.com. Your APP_ID is the TX_ID identifier for you permaweb application. + +Click `Save and Deploy` + +## Connecting to DNS + +In Project Settings go to the domains section and click to add a domain. + +Enter `mydomain.com` domain and follow the instructions to modify your DNS settings to point to the deno deploy edge network. + +It may take a few minutes to resolve to the dns, but once resolved your app will now be rendering from mydomain.com. + +:tada: Congrats you have published a server-side redirect to your permaweb application. + +::: warning +Note that any changes to your application will generate a new TX_ID and you will need to modify that TX_ID to publish the new changes to your domain. +::: + +## Automating the Deploy + +If you would like to automate new deploys of your permaweb app, look into github actions and using the deno deploy github action: [https://github.com/denoland/deployctl/blob/main/action/README.md](https://github.com/denoland/deployctl/blob/main/action/README.md) + + +## Summary + +Server Side redirects are great for providing your users a Domain Name System URL to access your permaweb application. We hope you found this guide useful in your permaweb development journey! + + diff --git a/docs/src/ja/guides/dns-integration/spheron.md b/docs/src/ja/guides/dns-integration/spheron.md new file mode 100644 index 00000000..aad00f90 --- /dev/null +++ b/docs/src/ja/guides/dns-integration/spheron.md @@ -0,0 +1,47 @@ +--- +locale: ja +--- +# Spheron + +The Spheron Protocol is a decentralized platform designed to streamline the creation of modern dapps. It offers a seamless experience for developers, allowing for quick deployment, automatic scaling, and personalized content delivery on decentralized networks. + +Spheron uses a GitHub integration to handle continuous deployments and gives us the ability to integrate custom DNS to any given deployment. + +## What you will need to set up a Spheron account + +* A GitHub account +* A permaweb application identifier and is deployed on the permaweb + +::: tip +To deploy Arweave applications using Spheron, you will need the Pro Plan which is $20/month +::: + +## Authentication/Log in + +Spheron relies on GitHub, GitLab or BitBucket repo's for their deployments, similar to Vercel. + +To log in to Spheron, head to the [Spheron Aqua dashboard](https://app.spheron.network/) and select your preferred authentication. + +## Import repo + +Once logged in, you will be presented with the user dashboard. Click the "New Project" button in the top right of the dashboard to import a repo. Select the repo you want and choose the option to deploy to Arweave. + +## Connecting to DNS + +Now that you've imported your project and deployed, go to the "Domains" tab. Enter the domain name, environment and select a domain to point the deployment to. + +Before continuing, you will be asked to verify your configured records. Update the record in your domain manager. Updating a DNS can take up to 72 hours. You will see something similar to the image below: + + + +Once updated, you will need to verify in Spheron. Click the `Verify` button and you should be all set and ready to go. Now whenever you deploy a new version to GitHub, your domain will be updated with the newest version!🎉 + + +::: tip +To create a fully decentralized application, be sure to use [ArNS](https://ar.io/arns) or any decentralized DNS server +::: +## Summary + +Spheron is a straight-forward way for deploying Permaweb applications to Arweave, and redirecting them to custom domains. Combining continuous integration and continuous deployment, ensuring a smooth developer experience all round! + + diff --git a/docs/src/ja/guides/exm/api.md b/docs/src/ja/guides/exm/api.md new file mode 100644 index 00000000..bdd4bfb8 --- /dev/null +++ b/docs/src/ja/guides/exm/api.md @@ -0,0 +1,55 @@ +--- +locale: ja +--- +# Execution Machine API Token + +EXM seeks to be crypto agnostic and requires only a single API token (also known as key) to interact with. This API key is required for most actions in EXM like deployments and write operations. + +## Creating an API Token + +For creating an API token, the following steps must be performed: + +- Go to the [main page](https://exm.dev/). +- Choose the preferred method to Sign-Up/ Sign-In. + +![EXM Sign In Options](~@source/images/exm-sign-in-options.png) + +- After being redirected to the dashboard, click on "New Token". + +![Create New API Token](~@source/images/exm-create-token.png) + +- Copy the token that has been generated and use it with the SDK or CLI. + +## Handling API Token safely + +The token is an identifier to our account and lets us access functions associated with it. Hence, it is vital to ensure this token is kept secret to prevent any spams and attacks to our functions. The best way to do so is using environment variables. + +There are two ways to store environment variables: + +1. Through the command line: + +In the directory of the project, pass the following command: + +```bash +export EXM_PK= +``` + +2. Through the `dotenv` sdk: + +- Run the following in the command line: + + ```bash + npm install dotenv + + #OR + + yarn add dotenv + ``` +- Import the library in file using the variables: + + ```jsx + import dotenv from "dotenv"; + dotenv.config(); + ``` + +Then this key can be refered inside files as `process.env.EXM_PK` without exposing it or pushing it to version control systems like GitHub. \ No newline at end of file diff --git a/docs/src/ja/guides/exm/intro.md b/docs/src/ja/guides/exm/intro.md new file mode 100644 index 00000000..c4d2b4ab --- /dev/null +++ b/docs/src/ja/guides/exm/intro.md @@ -0,0 +1,66 @@ +--- +locale: ja +--- +# Execution Machine (EXM) + +**Execution Machine (EXM)** is a developer platform that provides the ability to create and leverage **blockchain-based (permanent) serverless functions** without the need for knowledge of or access to blockchain technologies like wallets and tokens. + +This further enables the creation of **composable**, **immutable** and **trustless** applications in a frictionless manner. + +## Serverless Functions on Arweave + +Serverless functions are stored on Arweave through the intermediary EXM that also stores a copy as cache to rapidly serve applications at any time. The functions are stateful (store data) and hence, a single function id points to some data as well as the logic for interacting and updating this data. + +EXM handles the storage and execution, eliminating the need for maintaining a dedicated server, reducing upkeep costs and adding a layer of modularity. + +The modularity also brings in composability to select and assemble functions in various combinations to create custom applications suited to our requirements. These functions, and interactions with them, are **permanently stored on chain**, they cannot be tampered with and are available for anyone to view, making them **immutable** and **trustless**. + +Additionally, EXM covers the cost for uploading the data to Arweave and making the process crypto agnostic for devs. + +![Functions on dedicated servers vs serverless functions on blockchains](~@source/images/exm-serverless-functions.png) + +## How does it work in the background? + +A user sends a transaction request to a dedicated EXM server. With the help of Verifiable Computing, Execution Machine is able to process user requests in a quick and performant manner, eliminating the need for blockchain technology like tokens and wallets, while still maintaining a decentralised result. EXM then updates its cache layer with the updated state while also uploading the data to Arweave. The cache layer is used as an aid to rapidly serve applications at any time. + +Additionally, EXM is able to maintain a trust minimised environment as users can verify the transactions and current state of the contract/ functions using Lazy Evaluation. + +
+Verifiable Computing Explained + +Verifiable computing is a form of computing that takes advantage of the benefits of centralised system while still guaranteeing a decentralised result. + +Every serverless function either has the ability to read or update the state of some information. Using verifiable computing, this state is cached in a centralised server which allows for greater performance as consensus is not needed at the time of processing, but the information is always available for verification by the users. This allows users to “lazily evaluate” even when it is stored on the cache layer before eventually being moved on chain. + +![Verifiable Computing Explained](~@source/images/exm-verifiable-computing.png) + +For verifiable computing to work seamlessly, some core parts must be implemented. + +- Executor: A software that processes user transaction requests and caches them. +- Processor: A centralised pipeline (system) responsible for receiving transactions by a single or multiple users. After receiving the different bulks of transactions sent, processor must re-evaluate the smart contract with the new data. As transactions are received, the latest state of the smart contract must be upgraded and saved with accessibility to the user. The processor is responsible for ordering the transactions, usually by timestamp. +- Conveyor: A centralised system that establishes a bridge between a data-based blockchain. All the transactions received by the processor must be sent to the conveyor, the conveyor will guarantee the success of storing these operations in a data-based blockchain like Arweave. +
+
+ +
+Lazy Evaluation Explained + +![Lazy Evaluation Explained](~@source/images/exm-lazy-evaluation.png) + +Lazy evaluation, as the name suggests, is a method for lazily evaluating smart contracts and their current state on the blockchain. The smart contract itself and any interactions (write operations) with them are stored on chain and can be accessed by any user. + +It aims to shift the burden of processing from the nodes to the users. The user can opt to evaluate and interpret the smart contract code and interactions with it locally to verify the current state of the contract. + +This eliminates the need for nodes to store the full copy of the current state of a chain and arrive at a consensus on it. Thus, reducing the cost and improving performance, respectively. + +As everyone has access to the same data, everyone will interpret the it in the same way ensuring everyone has access to the same current state of information. +
+
+ +## Advantages of using Serverless Functions + +- Serverless functions add a layer of modularity and can be composed as per various application requirements. +- Bug fixes and new feature integrations are easier to implement by targeting. +- Execution Machine has a cached layer for rapidly serving applications. +- Execution Machine leverages a centralised system while guaranteeing a decentralised result. +- Execution Machine seeks to be crypto agnostic. \ No newline at end of file diff --git a/docs/src/ja/guides/exm/js-sdk/sdk-deploy.md b/docs/src/ja/guides/exm/js-sdk/sdk-deploy.md new file mode 100644 index 00000000..cebf7bc0 --- /dev/null +++ b/docs/src/ja/guides/exm/js-sdk/sdk-deploy.md @@ -0,0 +1,77 @@ +--- +locale: ja +--- +# Deploying Serverless Functions with Execution Machine SDK + +For deploying serverless functions with the SDK in JavaScript, we create a script here that tells our computer how to deploy our function to the network. + +
+Function Logic Example + +After installing the package we need a file defining the logic of the function within the project. + + + + +```js +export async function handle(state, action) { + state.counter++; + return { state }; +} +``` + + + + +The syntax for defining functions is based off of the standard implemented by SmartWeave for smart contracts in JavaScript. Every function has a `state` which is a JSON object of values stored in it and `actions` to interact with these values. + +The function above adds names to a users array which is done using the following line: + +```js +state.users.push(action.input.name); +``` + +When deploying our function we initialise an empty array named `users` that later helps our function to identify this state variable (variable stored in state of the function) during read and write calls. Upon initialisation the `state` looks like this: + +```js +{ users: [] } +``` + +Additionally, while writing to the function, we use a key named `name` to help the function identify what value we are feeding into the write operation. Both these definitions gain further significance when dealing with multiple values. +
+
+ +Once the function logic is defined and API Token is setup properly as shown [here](../api.md), create the deploy file as follows: + + + + +```js +import { Exm, ContractType } from '@execution-machine/sdk'; +import { readFileSync, writeFileSync } from 'fs'; + +// init new EXM instance +const exm = new Exm({ token: process.env.EXM_API_TOKEN }); + +// fetch function source +const functionSource = readFileSync('function.js'); + +// .deploy(source, initState, contractType) +const data = await exm.functions.deploy(functionSource, { users: [] }, ContractType.JS); + +// write the function id to a local file +writeFileSync('./functionId.js', `export const functionId = "${data.id}"`) +``` + + + + +While deploying, we need to pass in the function logic, function's initial state and programming language of function definition as arguments. To deploy, run the following command in the command line inside the appropriate directory of the project: + +```bash +node deploy.js +``` + +Upon deploying we receive some data from which we store the `functionId` in a local file. The `functionId` as the name states is a unique identifier that helps in further interactions with the serverless function such as read and write operations. + +The following sections walk through the process of reading and writing with EXM functions. \ No newline at end of file diff --git a/docs/src/ja/guides/exm/js-sdk/sdk-intro.md b/docs/src/ja/guides/exm/js-sdk/sdk-intro.md new file mode 100644 index 00000000..55257dc2 --- /dev/null +++ b/docs/src/ja/guides/exm/js-sdk/sdk-intro.md @@ -0,0 +1,57 @@ +--- +locale: ja +--- +# Execution Machine SDK + +The JavaScript SDK enables the usage of Execution Machine (EXM) in JavaScript and TypeScript applications. To use the SDK the following setup steps are needed. + +## Install + +To install EXM in your project you can use `npm` or `yarn`. + + + + +```bash +npm install @execution-machine/sdk +``` + + + + +```bash +yarn add @execution-machine/sdk +``` + + + + +## Import + +When using EXM with your project the package must be imported as follows. + + + + +```js +import { Exm } from '@execution-machine/sdk'; +``` + + + +## Creating an instance + +To interact with EXM after installation and importing, an instance must be created. + + + + +```js +const exmInstance = new Exm({ token: 'MY_EXM_TOKEN' }); +``` + + + +## Summary + +The following guides will show how to deploy serverless functions using the EXM JS SDK, and how to interact with them. \ No newline at end of file diff --git a/docs/src/ja/guides/exm/js-sdk/sdk-read.md b/docs/src/ja/guides/exm/js-sdk/sdk-read.md new file mode 100644 index 00000000..e91eadc6 --- /dev/null +++ b/docs/src/ja/guides/exm/js-sdk/sdk-read.md @@ -0,0 +1,55 @@ +--- +locale: ja +--- +# Read from Serverless Functions with Execution Machine SDK + +There are two ways of reading state from an EXM serverless functions. As explained in the [introduction](../intro.md#serverless-functions-on-arweave), EXM stores a copy of the function on a cache layer for rapidly serving applications but also uploads the function on Arweave to maintain decentralisation and its associated benefits. As a result of this, the function state can be read either from EXM's cache layer or directly from Arweave. + +1. Reading from EXM's cache layer: + +The read call reads the latest state as stored on EXM's cached layer. This layer is specifically designed for rapily serving applications. It takes an optimistic approach and updates the function state immediately upoon receiving a transaction request. + + + + +```js +import { Exm } from '@execution-machine/sdk'; +import { functionId } from './functionId.js'; + +// init new EXM instance +const exm = new Exm({ token: process.env.EXM_API_TOKEN }); + +// read from cached layer +const readResult = await exm.functions.read(functionId); +console.log(readResult); +``` + + + + +2. Reading directly from Arweave (Evaluate): + +The evaluate call returns the latest state as successfully processed on Arweave. This latest state is calculated by [lazy evaluation](../intro.md#how-does-it-work-in-the-background), which evaluates the initial state and the interactions with the function in order of ocurrence to arrive at the latest state. + + + + +```js +import { Exm } from '@execution-machine/sdk'; +import { functionId } from './functionId.js'; + +// init new EXM instance +const exm = new Exm({ token: process.env.EXM_API_TOKEN }); + +// evaluate from arweave +const evalResult = await exm.functions.evaluate(functionId); +console.log(evalResult); +``` + + + + +::: tip +Reading from Arweave is recommended for verification purposes only. The function state returned from the evaluate call can be checked against the information returned by the cache layer to ensure its authenticity. There may be a slight lag in posting the transaction request and it updating on the network. +::: + diff --git a/docs/src/ja/guides/exm/js-sdk/sdk-write.md b/docs/src/ja/guides/exm/js-sdk/sdk-write.md new file mode 100644 index 00000000..936e7bf8 --- /dev/null +++ b/docs/src/ja/guides/exm/js-sdk/sdk-write.md @@ -0,0 +1,119 @@ +--- +locale: ja +--- +# Write to Serverless Functions with Execution Machine SDK + +Once a function is deployed, it's state can be updated with the help of write interactions. Due to the unique architecture of EXM's serverless functions, the logic for updating state is stored along with the state itself and both of these can be referred to using the same `functionId`. Functions can have a single operation or multiple operations for updating state as per the application requirements and the arguments for the write call vary accordingly. + +
+Function Logic and Corresponding Write Example + +- Function example with single operations for updating state: + +The following function adds names to a users array: + +```js +export async function handle(state, action) { + state.users.push(action.input.name); + return { state }; +} +``` + +The state is updated by the following line: + +```js +state.users.push(action.input.name); +``` + +In this case, the write call only needs a key-value pair of `name` as an input: + +```js +const inputs = [{ name: 'Open Sourcerer' }]; +``` + +- Function example with multiple operations for updating state: + +The following function creates posts but also has the ability to update or delete these posts: + +```js +export async function handle(state, action) { + const { input } = action + if (input.type === 'createPost' || input.type === 'updatePost') { + state.posts[input.post.id] = input.post + } + if (input.type === 'deletePost') { + delete state.posts[input.postId] + } + return { state } +} +``` + +The posts are objects with the following format: + +```js +post: { + id: string + title: string + content: string + author: string +} +``` + +We give each post a unique `id` so that we can refer to it for updating or deleting. If no corresponding `id` exists, then a new post is created instead. + +However, as can be seen in the function above, this function logic has the abilitiy to perform multiple operations and hence the `type` for each has been given a name. This name must be passed in as an input along with the post or id for performing the appropriate write call. To update a post, the inputs for the write call would look as follows: + +```js +const inputs = [{ + type: 'updatePost', + post: { + id, + title: "My Post", + content: "My updated post", + author: "Open Sourcerer" + } +}]; +``` +
+
+ +The write transaction takes in two arguments. The `functionId` of the function to interact with and any `inputs` the function needs to process the write request and update state. + + + + +```js +import { Exm } from '@execution-machine/sdk'; +import { functionId } from './functionId.js'; + +// init new EXM instance +const exm = new Exm({ token: process.env.EXM_API_TOKEN }); + +// inputs is an array of objects +const inputs = [{ name: 'Open Sourcerer' }]; + +// read from cached layer +const writeResult = await exm.functions.write(functionId, inputs); +console.log(writeResult); +``` + + + + +A successful write request returns an object with the status as SUCCESS. + +```bash +{ + status: 'SUCCESS', + data: { + pseudoId: 'txnId', + execution: { + state: [Object], + result: null, + validity: [Object], + exmContext: [Object], + updated: false + } + } +} +``` \ No newline at end of file diff --git a/docs/src/ja/guides/http-api.md b/docs/src/ja/guides/http-api.md new file mode 100644 index 00000000..21ce05cc --- /dev/null +++ b/docs/src/ja/guides/http-api.md @@ -0,0 +1,219 @@ +--- +locale: ja +--- +# Fetching Transaction Data +While indexing services allow querying of transaction metadata they don't provide access to the transaction data itself. This is because caching transaction data and indexing metadata have different resource requirements. Indexing services primarily rely on compute resources to perform queries on a database while transaction data is better suited to deployment on a Content Delivery Network (CDN) to optimize storage and bandwidth. + +A Transaction data caching service is offered by most gateways though a set of HTTP endpoints. Any HTTP client/package can be used to request transaction data from these endpoints. For example Axios or Fetch for JavaScript, Guzzle for PHP, etc. + +If you wanted to bypass a transaction data caching service and get data directly from the Arweave peers/nodes you could, but it's a lot of work! + +Transaction data is stored on Arweave as a contiguous sequence of 256KB chunks, from the very beginning of the network until the current block. This format is optimized to support the SPoRA mining mechanism miners participate in to prove they are storing Arweave data. + +::: info +1. Retrieve a list of peers from a well known peer. +1. Ask the peer for the chunk offsets which contain your transactions data. +1. Ask the peer to for the chunks. + 1. If the peer provides the chunks, combine them back into their original format. +1. (If the peer does not have the chunks) walk the peer list asking for the chunks. +1. For each peer you visit, check their peer list and add peers not already in your list. +1. Repeat from step 3 until you have all of the chunks. +::: + +This is a fairly large amount of work to perform each time you want to retrieve data from the Arweave network. Imagine if you were trying to display a timeline of tweets like [https://public-square.g8way.io](https://public-square.g8way.io) does. The user experience would be terrible with long load times and spinners. Because data on Arweave is permanent, it's safe to cache in its original form to make retrieval of transaction data much quicker and easier. + +The following is how to access cached transaction data in the arweave.net Transaction data caching service. + +### Get cached TX data + +`https://arweave.net/TX_ID` + +```js +const res = await axios.get(`https://arweave.net/sHqUBKFeS42-CMCvNqPR31yEP63qSJG3ImshfwzJJF8`) +console.log(res) +``` + +
+Click to view example result + +```json +{ + "data": { + "ticker": "ANT-PENDING", + "name": "pending", + "owner": "NlNd_PcajvxAkOweo7rZHJKiIJ7vW1WXt9vb6CzGmC0", + "controller": "NlNd_PcajvxAkOweo7rZHJKiIJ7vW1WXt9vb6CzGmC0", + "evolve": null, + "records": { + "@": "As-g0fqvO_ALZpSI8yKfCZaFtnmuwWasY83BQ520Duw" + }, + "balances": { + "NlNd_PcajvxAkOweo7rZHJKiIJ7vW1WXt9vb6CzGmC0": 1 + } + }, + "status": 200, + "statusText": "", + "headers": { + "cache-control": "public,must-revalidate,max-age=2592000", + "content-length": "291", + "content-type": "application/json; charset=utf-8" + }, + "config": { + "transitional": { + "silentJSONParsing": true, + "forcedJSONParsing": true, + "clarifyTimeoutError": false + }, + "adapter": [ + "xhr", + "http" + ], + "transformRequest": [ + null + ], + "transformResponse": [ + null + ], + "timeout": 0, + "xsrfCookieName": "XSRF-TOKEN", + "xsrfHeaderName": "X-XSRF-TOKEN", + "maxContentLength": -1, + "maxBodyLength": -1, + "env": {}, + "headers": { + "Accept": "application/json, text/plain, */*" + }, + "method": "get", + "url": "https://arweave.net/sHqUBKFeS42-CMCvNqPR31yEP63qSJG3ImshfwzJJF8" + }, + "request": {} +} + +``` +
+
+ +Each Arweave peer/node also exposes some HTTP endpoints which are often replicated gateways. You can read more about Arweave peer's HTTP endpoints here. + +### Get raw transaction +`https://arweave.net/raw/TX_ID` +```js +const result = await fetch('https://arweave.net/raw/rLyni34aYMmliemI8OjqtkE_JHHbFMb24YTQHGe9geo') + .then(res => res.json()) + console.log(JSON.stringify(result)) +``` + +
+Click to view example result + +```json +{ + "manifest": "arweave/paths", + "version": "0.1.0", + "index": { + "path": "index.html" + }, + "paths": { + "index.html": { + "id": "FOPrEoqqk184Bnk9KrnQ0MTZFOM1oXb0JZjJqhluv78" + } + } +} +``` + +
+
+ +### Get by field +`https://arweave.net/tx/TX_ID/FIELD` + +Available fields: id | last_tx | owner | target | quantity | data | reward | signature +```js +const result = await fetch('https://arweave.net/sHqUBKFeS42-CMCvNqPR31yEP63qSJG3ImshfwzJJF8/data') + .then(res => res.json()) + console.log(JSON.stringify(result)) +``` + +
+Click to view example result + +```json +{ + "ticker":"ANT-PENDING", + "name":"pending", + "owner":"NlNd_PcajvxAkOweo7rZHJKiIJ7vW1WXt9vb6CzGmC0", + "controller":"NlNd_PcajvxAkOweo7rZHJKiIJ7vW1WXt9vb6CzGmC0", + "evolve":null, + "records": { + "@":"As-g0fqvO_ALZpSI8yKfCZaFtnmuwWasY83BQ520Duw" + }, + "balances":{"NlNd_PcajvxAkOweo7rZHJKiIJ7vW1WXt9vb6CzGmC0":1} +} +``` +
+
+ +### Get Wallet Balance +The returned balance is in Winston. To get balance in $AR, divide the balance by 1000000000000 +`https://arweave.net/wallet/ADDRESS/balance` +```js +const res = await axios.get(`https://arweave.net/wallet/NlNd_PcajvxAkOweo7rZHJKiIJ7vW1WXt9vb6CzGmC0/balance`) +console.log(res) +console.log(res.data / 1000000000000) + +6638463438702 // Winston +6.638463438702 // $AR +``` + +### Get transaction status +`https://arweave.net/tx/TX_ID/status` +::: tip +This endpoint only supports native Arweave transactions. Transactions must be confirmed before getting a successful response. +::: + +```js + const result = await fetch('https://arweave.net/tx/EiRSQExb5HvSynpn0S7_dDnwcws1AJMxoYx4x7nWoho/status').then(res => res.json()) + console.log(JSON.stringify(result)) +``` +
+Click to view example result + +```json +{ + "block_height":1095552,"block_indep_hash":"hyhLEyOw5WcIhZxq-tlnxhnEFgKChKHFrMoUdgIg2Sw0WoBMbdx6uSJKjxnQWon3","number_of_confirmations":10669 +} + +``` +
+
+ + + +### Get network information + +```js +const res = await axios.get('https://arweave.net/info') +console.log(res.data) +``` + +
+Click to view example result + +```json +{ + "network": "arweave.N.1", + "version": 5, + "release": 53, + "height": 1106211, + "current": "bqPU_7t-TdRIxgsja0ftgEMNnlGL6OX621LPJJzYP12w-uB_PN4F7qRYD-DpIuRu", + "blocks": 1092577, + "peers": 13922, + "queue_length": 0, + "node_state_latency": 0 +} + +``` +
+
+ + diff --git a/docs/src/ja/guides/posting-transactions/README.md b/docs/src/ja/guides/posting-transactions/README.md new file mode 100644 index 00000000..e975ec35 --- /dev/null +++ b/docs/src/ja/guides/posting-transactions/README.md @@ -0,0 +1,10 @@ +--- +locale: ja +--- +Please the the examples attached to Posting Transactions Core Concept. + +- [arweave-js](/guides/posting-transactions/arweave-js.md) example +- [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/ja/guides/posting-transactions/akord.md b/docs/src/ja/guides/posting-transactions/akord.md new file mode 100644 index 00000000..4a0609e7 --- /dev/null +++ b/docs/src/ja/guides/posting-transactions/akord.md @@ -0,0 +1,107 @@ +--- +locale: ja +--- +# 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 diff --git a/docs/src/ja/guides/posting-transactions/arseeding-js.md b/docs/src/ja/guides/posting-transactions/arseeding-js.md new file mode 100644 index 00000000..3b39fb07 --- /dev/null +++ b/docs/src/ja/guides/posting-transactions/arseeding-js.md @@ -0,0 +1,52 @@ +--- +locale: ja +--- +# Posting Transactions using arseeding.js +You can use the `arseeding-js` JavaScript SDK package to publish transactions on the Arweave network. Arseeding automatically broadcasts the transaction to all Arweave nodes in the network, ensuring that the transaction is promptly received in the pending pool of all Arweave nodes, thus increasing the transaction's packaging speed. +## Installing arseeding.js +To install `arseeding.js` run: + + + + +```console:no-line-numbers +npm install arseeding-js +``` + + + + +```console:no-line-numbers +yarn add arseeding-js +``` + + + + +## Transaction for Uploading Data +When using Arseeding, you must pre-fund your account on [everpay](https://app.everpay.io/). This balance can be funded with $AR tokens or other cryptocurrencies. Another distinction is that the Arseeding service ensures that your data will make it onto the blockchain. + +```js:no-line-numbers +const { genNodeAPI } = require('arseeding-js') + +const run = async () => { + const instance = genNodeAPI('YOUR PRIVATE KEY') + const arseedUrl = 'https://arseed.web3infra.dev' + const data = Buffer.from('........') + const payCurrencyTag = 'ethereum-usdc-0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48' // everPay supported token tag (chainType-symbol-id) + const options = { + tags: [{ name: 'Content-Type', value: 'image/png' }] + } + const res = await instance.sendAndPay(arseedUrl, data, payCurrencyTag, options) + console.log('res', res) +} +run() +``` + + +## Resources +* For an overview of all methods for publishing transactions, please refer to the [Publishing Transactions](../../concepts/post-transactions.md) section in the operation manual. + +* You can find the complete Arseeding documentation on the [Arseeding website](https://web3infra.dev/docs/arseeding/introduction/lightNode/). + +* Follow the Arseeding Upload Manifest tutorial [here](https://web3infra.dev/docs/arseeding/sdk/arseeding-js/manifest/). \ No newline at end of file diff --git a/docs/src/ja/guides/posting-transactions/arweave-js.md b/docs/src/ja/guides/posting-transactions/arweave-js.md new file mode 100644 index 00000000..50cdeca2 --- /dev/null +++ b/docs/src/ja/guides/posting-transactions/arweave-js.md @@ -0,0 +1,101 @@ +--- +locale: ja +--- +# Posting Transactions using arweave-js + +Arweave native transactions can be posted directly to a node or gateway using the `arweave-js` package. + +::: info +Arweave scales though the use of transaction bundles. These bundles make it possible for each block to contain a nearly unlimited number of transactions. Without the use of bundles, Arweave blocks are limited 1000 transactions per block (with new blocks produced every ~2 minutes). If your use case exceeds this capacity you may experience dropped transactions. Under these circumstances please consider using [irys.xyz](./irys.md) or similar services to bundle your transactions. +::: + +## Installing the arweave-js Package + +To install `arweave-js` run + + + +```console:no-line-numbers +npm install --save arweave +``` + + + + +```console:no-line-numbers +yarn add arweave +``` + + + + +::: info +When working with NodeJS a minimum version of NodeJS 18 or higher is required. +::: + +## Initializing arweave-js + +Direct Layer 1 transactions are posted using the `arweave-js` library. + +```js:no-line-numbers +import Arweave from 'arweave'; +import fs from "fs"; + +// load the JWK wallet key file from disk +let key = JSON.parse(fs.readFileSync("walletFile.txt").toString()); + +// initialize an arweave instance +const arweave = Arweave.init({}); +``` + +## Posting a wallet-to-wallet Transaction + +A basic transaction to move AR tokens from one wallet address to another. + +```js:no-line-numbers +// create a wallet-to-wallet transaction sending 10.5AR to the target address +let transaction = await arweave.createTransaction({ + target: '1seRanklLU_1VTGkEk7P0xAwMJfA7owA1JHW5KyZKlY', + quantity: arweave.ar.arToWinston('10.5') +}, key); + +// you must sign the transaction with your key before posting +await arweave.transactions.sign(transaction, key); + +// post the transaction +const response = await arweave.transactions.post(transaction); +``` + +## Posting a Data Transaction + +This example illustrates how load a file from disk and create a transaction to store its data on the network. You can find the current price the network is charging at [https://ar-fees.arweave.dev](https://ar-fees.arweave.dev) + +```js:no-line-numbers +// load the data from disk +const imageData = fs.readFileSync(`iamges/myImage.png`); + +// create a data transaction +let transaction = await arweave.createTransaction({ + data: imageData +}, key); + +// add a custom tag that tells the gateway how to serve this data to a browser +transaction.addTag('Content-Type', 'image/png'); + +// you must sign the transaction with your key before posting +await arweave.transactions.sign(transaction, key); + +// create an uploader that will seed your data to the network +let uploader = await arweave.transactions.getUploader(transaction); + +// run the uploader until it completes the upload. +while (!uploader.isComplete) { + await uploader.uploadChunk(); +} +``` + +## Resources + +- For an overview of all the ways you can post transactions, see the [Posting Transactions](../../concepts/post-transactions.md) section of the cookbook. + +- For a more detailed description of all `arweave-js`'s features see the documentation [on github](https://github.com/ArweaveTeam/arweave-js) diff --git a/docs/src/ja/guides/posting-transactions/dispatch.md b/docs/src/ja/guides/posting-transactions/dispatch.md new file mode 100644 index 00000000..e5da5e45 --- /dev/null +++ b/docs/src/ja/guides/posting-transactions/dispatch.md @@ -0,0 +1,27 @@ +--- +locale: ja +--- +# Posting a Transaction using Dispatch +Arweave Browser wallets have the concept of dispatching transactions. If the transaction is under 100KB in size it can be posted for free! +## Dispatching a Transaction +This can be done without any package dependencies for the client app. As long as the user has a browser wallet active and the data is less than 100KB, dispatched transactions are free and guaranteed to be confirmed on the network. + +```js:no-line-numbers +// use arweave-js to create a transaction +let tx = await arweave.createTransaction({ data:"Hello World!" }) + +// add some custom tags to the transaction +tx.addTag('App-Name', 'PublicSquare') +tx.addTag('Content-Type', 'text/plain') +tx.addTag('Version', '1.0.1') +tx.addTag('Type', 'post') + +// use the browser wallet to dispatch() the transaction +let result = await window.arweaveWallet.dispatch(tx); + +// log out the transactino id +console.log(result.id); +``` + +## Resources +* For an overview of all the ways you can post transactions, see the [Posting Transactions](../../concepts/post-transactions.md) section of the cookbook. \ No newline at end of file diff --git a/docs/src/ja/guides/posting-transactions/turbo.md b/docs/src/ja/guides/posting-transactions/turbo.md new file mode 100644 index 00000000..6d7a86a3 --- /dev/null +++ b/docs/src/ja/guides/posting-transactions/turbo.md @@ -0,0 +1,192 @@ +--- +locale: ja +--- +# Posting Transactions using Ardrive Turbo + +Posting transactions using Turbo can be accomplished using the `@ardrive/turbo-sdk` JavaScript package. + +## Installing the @ardrive/turbo-sdk + +To install `@ardrive/turbo-sdk` run + + + + +```console:no-line-numbers +npm install @ardrive/turbo-sdk +``` + + + + +```console:no-line-numbers +yarn add @ardrive/turbo-sdk +``` + + + + +## Initializing Turbo Client + +There are multiple ways to upload data using the `turbo` sdk. You can: + +- upload a `file` +- upload a `data-item` + +When uploading a `data-item` with the `turbo` sdk, you will use `ar-bundles` to create the `data-item` and add `tags`. + +### Data-Item (recommended) + +```js +import fs from 'node:fs' +import { TurboFactory } from '@ardrive/turbo-sdk/node'; +import { ArweaveSigner, createData } from 'arbundles'; + + +if (!process.env.PATH_TO_WALLET) { + console.error("Please set PATH_TO_WALLET in your env.") + process.exit() +} + +const JWK = JSON.parse(fs.readFileSync(process.env.PATH_TO_WALLET).toString()); + +const turbo = TurboFactory.authenticated({ privateKey: JWK, }); + +const signer = new ArweaveSigner(JWK); +``` + +### File +```js +import { TurboFactory } from '@ardrive/turbo-sdk/node'; +import fs from 'fs'; + +if (!process.env.PATH_TO_WALLET) { + console.error("Please set PATH_TO_WALLET in your env.") + process.exit() +} + +const JWK = JSON.parse(fs.readFileSync(process.env.PATH_TO_WALLET).toString()); + +const turbo = TurboFactory.authenticated({ privateKey: JWK }); + +const filePath = new URL('path/to/file', import.meta.url).pathname; +const fileSize = fs.statSync(filePath).size; +const dataItemOpts = { + //target: , + // anchor: , + tags: [{name: 'test', value: 'test'}] // add tags + } + const uploadResult = await turbo.uploadFile({ + fileStreamFactory: () => fs.createReadStream(filePath), + fileSizeFactory: () => fileSize, + signal: AbortSignal.timeout(10_000), // Optional: cancel the upload after 10 seconds + dataItemOpts // Optional + }); + console.log(JSON.stringify(uploadResult, null, 2)); +``` + +Example Output: + +```console +{ + "id": "1mPoz28tMAnYecZTya4g6cHSIQz37zAAwr_uC0IUcxU", + "timestamp": 1704990130970, + "winc": "0", + "version": "0.2.0", + "deadlineHeight": 1341385, + "dataCaches": [ + "arweave.net" + ], + "fastFinalityIndexes": [ + "arweave.net" + ], + "public": "j0Ki2cJHca6HoC4B3y0ZxFKEe9c539AO5KlfDj76KpWOSx5xtbiDUndEWmJxE-p9ayAI8nF5sSJeRfNpuD4g831fmUbTFvUXKNKcfLJ4knDewyY7YNtVGcjBrNRDbsMPhC6UKiquyewRhBlu3YNyEvC9hV4otuwgGI1QcPQmqL9lztpSbwtV00qQIhYAyDbUCmPU6GMPjgk3o-YTDam0rny80tJnxQu5xvLAH3x-nnaAYVsc4-oDvpKKDzq-i5GzSZAFfiWXlYs80fts0Y-T2w3649IgHIjvPy72jYS6y02HKaL9guTczSQfa5ILhE0XotIFgjTkP0LEhHNVmrG7XA5XyKdgV3tyWi1qPrHs-Se5miuZsD0Mz_tBiVZ_AmqQbUYAmyYmEnuB_NpWJoBj18ItZfP1Bq7BvjriJJmpsOab95hEkQCEJHSHRAkH72aS_oz-bM6lymNtOj68NGzTZ0y0hq9b2FSKFhQbrxQpGSbQQ4p6tnoKF_B2n1xTE1xAU3R5Ju-2CZsGCW6kf2JBVTvyQrU5njVHeAS5niOkaJEzlEoaHvaSZF48AvMKB1nZCKG3xbHdQA8EGWNJ_7D-L5BbH2-7Y6CY-9KNS7HMIFTp39lqWzMJ4gyQzDzOh1vaG8bckm0CSqB9WXJxKNALgOpQmvGKDHZIODDSyZ1b8GE", + "signature": "D58BO0hRPeqkQ_m9SFRiZze1CHZzxek-grsAs0xSsfzi6FNUQDDZyzadX4cd4aWxJaw4APti-lFHjh8_eUfwO2Qblo5wY-WDi3DU9LPasdzu4P0QFhsWk_hZwQslunAtH8NnPdbD8cnfeHKabvVcpXRDwndQX-7TJwjndAHDEFuN1fB-t445i8_z6GK4XYSgM253gFcL_KC0gD5UUcxLk5OGNPuDXPKIAVPsHGzzx4861t4BvB8EYo2YRpveu3LA6bRdXbG4q312JdUZMTBoZP1-QqwcHiFtQg2YLMZAM07YbyTMaTwMa6l3EhffpDuZ_llAWtQjlDw5egu4rnWxPZos17bSN-ReiH_NTBKjlHz54gBa-Q2YT58qXEj2XzfpIENdlhVxjmmWmIiMtrr58oOws9mB5yyIFHeXUbk1U4EZc7mbNDEEmDjTpHnAIVM83aGDOux7H2UpDV9UMBPYS1CX_huW4ACXJ6XqLH5E6Kc6_WXWUwEsoGKarK0A1WiDpKhGkA41KgKHLZ5CbACJ0bWoaa4YBLQgFjowZXwDsn3s6t78aAqpx_meVI67Eg4P7ELDish8CY9NcMHMXeEBHsctNHtCdJXQLRWf6CyYkmf2T7ym1DP4R58FkpBpkVXEUadFyshJe0nfB9ie17f_njuPpKWN3d2OODZVarxtRsI", + "owner": "GtDQcrr2QRdoZ-lKto_S_SpzEwiZiHVaj3x4jAgRh4o" +} +``` + +## Posting a `Data-Item` (recommended) + +```js +const signer = new ArweaveSigner(JWK); +const signedDataItem = createData(JSON.stringify({ "some": "data" }), signer, { + tags: [{ name: 'test', value: 'test' }] // add tags +}); +await signedDataItem.sign(signer); + +const uploadResult = await turbo.uploadSignedDataItem({ + dataItemStreamFactory: () => signedDataItem.getRaw(), + dataItemSizeFactory: () => signedDataItem.getRaw().length, + signal: AbortSignal.timeout(10_000), // Optional: cancel the upload after 10 seconds + +}); + +console.log(JSON.stringify(uploadResult, null, 2)); +``` + +Example Output: + +```console +{ + "id": "agcPXVfw92w_JI5v8o6C_Gsixd_BDMaHqNSStX4Eed8", + "timestamp": 1704990453564, + "winc": "0", + "version": "0.2.0", + "deadlineHeight": 1341387, + "dataCaches": [ + "arweave.net" + ], + "fastFinalityIndexes": [ + "arweave.net" + ], + "public": "j0Ki2cJHca6HoC4B3y0ZxFKEe9c539AO5KlfDj76KpWOSx5xtbiDUndEWmJxE-p9ayAI8nF5sSJeRfNpuD4g831fmUbTFvUXKNKcfLJ4knDewyY7YNtVGcjBrNRDbsMPhC6UKiquyewRhBlu3YNyEvC9hV4otuwgGI1QcPQmqL9lztpSbwtV00qQIhYAyDbUCmPU6GMPjgk3o-YTDam0rny80tJnxQu5xvLAH3x-nnaAYVsc4-oDvpKKDzq-i5GzSZAFfiWXlYs80fts0Y-T2w3649IgHIjvPy72jYS6y02HKaL9guTczSQfa5ILhE0XotIFgjTkP0LEhHNVmrG7XA5XyKdgV3tyWi1qPrHs-Se5miuZsD0Mz_tBiVZ_AmqQbUYAmyYmEnuB_NpWJoBj18ItZfP1Bq7BvjriJJmpsOab95hEkQCEJHSHRAkH72aS_oz-bM6lymNtOj68NGzTZ0y0hq9b2FSKFhQbrxQpGSbQQ4p6tnoKF_B2n1xTE1xAU3R5Ju-2CZsGCW6kf2JBVTvyQrU5njVHeAS5niOkaJEzlEoaHvaSZF48AvMKB1nZCKG3xbHdQA8EGWNJ_7D-L5BbH2-7Y6CY-9KNS7HMIFTp39lqWzMJ4gyQzDzOh1vaG8bckm0CSqB9WXJxKNALgOpQmvGKDHZIODDSyZ1b8GE", + "signature": "QNgpeIZrgJ3mu3NB9iZeyXGeKJaZ_Efp-QQd7_gbAp2Z1WhqWnQHtf_uKjLOf7sfNZLyo1igMwXv0LMmILr0QRsx1bVQ1WSAHnJb11F7YEoyfiD7veSEJ-0284NIO7Ixy_AQqf5X41kmL5025Oy1NY6jy7ftQ-hBSs3jyQ0_Af1-6SZ8VAnsIQW-G2vXIralVyTkYm49USKYL8vok4Twh1ICCDj-NMqBSBtDA5lL4pmZ06OXi7jZ1dR3QDBKtD6YdomdM5ccmfyNDb95c7A-uqwVp87R5kZnMIVfQ7JhZdCrTly2dwhW6yIA6tyHSRHmP_n2esALj2_R2uYxJnU-uCE2934YFFQX-jxOchUB3vWBIYzL-v-iY0eWRQZqg5lCYMhZ8jnwrBun_e1N_9-ODsD1nnHs0fEqqrTqnEoKQRJTbIN8qmBJbPlulRmPI_x0O-601UuUQ-6BmghzXZLaQvklMwMrzEI0A3FShM7ZY0zfXj8PUB-4BSUSHXQlyT697DGYTAOuClUXs39SFp2mPP7voeMOKFUr8r0xi52pJcesAhKQOmIqMVjywqwS9089t5-JPKbA6JZKLygMZdxJ3evq7Dq9Y6K6scM2TXT6Tr7w2cP1_jNc0fomo6WjUt3y1KY1WYphmgVG_6_oMZigAK1itwtLAOQ_43PMefla7OE", + "owner": "GtDQcrr2QRdoZ-lKto_S_SpzEwiZiHVaj3x4jAgRh4o" +} +``` + +## Posting a `File` + +```js +const filePath = new URL('path/to/file', import.meta.url).pathname; +const fileSize = fs.statSync(filePath).size; +const dataItemOpts = { + //target: 'string', + // anchor: 'string', + tags: [{name: 'test', value: 'test'}] // add tags + } +const uploadResult = await turbo.uploadFile({ + fileStreamFactory: () => fs.createReadStream(filePath), + fileSizeFactory: () => fileSize, + signal: AbortSignal.timeout(10_000), // Optional: cancel the upload after 10 seconds + dataItemOpts // Optional +}); +console.log(JSON.stringify(uploadResult, null, 2)); +``` + +Example Output: + +```console +{ + "id": "68h8-kGbKGJMQD8nOCsRl_0mJKpxQSpmL42OJq5nCxQ", + "timestamp": 1704990009421, + "winc": "0", + "version": "0.2.0", + "deadlineHeight": 1341384, + "dataCaches": [ + "arweave.net" + ], + "fastFinalityIndexes": [ + "arweave.net" + ], + "public": "j0Ki2cJHca6HoC4B3y0ZxFKEe9c539AO5KlfDj76KpWOSx5xtbiDUndEWmJxE-p9ayAI8nF5sSJeRfNpuD4g831fmUbTFvUXKNKcfLJ4knDewyY7YNtVGcjBrNRDbsMPhC6UKiquyewRhBlu3YNyEvC9hV4otuwgGI1QcPQmqL9lztpSbwtV00qQIhYAyDbUCmPU6GMPjgk3o-YTDam0rny80tJnxQu5xvLAH3x-nnaAYVsc4-oDvpKKDzq-i5GzSZAFfiWXlYs80fts0Y-T2w3649IgHIjvPy72jYS6y02HKaL9guTczSQfa5ILhE0XotIFgjTkP0LEhHNVmrG7XA5XyKdgV3tyWi1qPrHs-Se5miuZsD0Mz_tBiVZ_AmqQbUYAmyYmEnuB_NpWJoBj18ItZfP1Bq7BvjriJJmpsOab95hEkQCEJHSHRAkH72aS_oz-bM6lymNtOj68NGzTZ0y0hq9b2FSKFhQbrxQpGSbQQ4p6tnoKF_B2n1xTE1xAU3R5Ju-2CZsGCW6kf2JBVTvyQrU5njVHeAS5niOkaJEzlEoaHvaSZF48AvMKB1nZCKG3xbHdQA8EGWNJ_7D-L5BbH2-7Y6CY-9KNS7HMIFTp39lqWzMJ4gyQzDzOh1vaG8bckm0CSqB9WXJxKNALgOpQmvGKDHZIODDSyZ1b8GE", + "signature": "fSuRHFXbuWAuIIEAquGD5hwOLU8uy0sVAu3mCwyitRlxI2wDgB8F_8mrF4dsv8-Jab3jb8vjVB0LrRWlStCGTnL3JStr0C8d-UdTHyQk3EfWPmikrZuE1cHdBjTyys9Y-8lmGR0bY5fT8GA_xj48coQhNNKSU4MYvo9m0stAY7Vy5dnzp0xOvyvZuWzlLzQqwsI-1nNMCh9LvVUenGO-yOArUNNeCGL2y55qnNcFpCs8TDla3plRiddND5CkR3vkLWpMAa_irBYXB2m3ekIqGmBTBbww0YjAR9AUt9PXKibysrbADvDEa5siWEPEa48dVwLes5PtSw9s6e8X6ief8Y3cUX5QPqnPTv5Bb4T51HutMuSb2Dj78_G4tBjrkfZKUNu3U9uOBWp8fZ-N4E1buvkuM9-yAtsfRfrUfxmwdNZ9KFGuog-ffJ0lor6sdq_CjUTUo4RkwvQcOI5nZi2_AGEsfoDTusqio2pbps7E8zgU4op2vQSxZXGoYaMPrKxA6HIptPP3rZVbXJMLfSccesjylkGozdQZaWtXdhbQKRmCYouSUWMuxngCRaHVA-W1ImU-4fyX3aRi4XNZBT3b63D_QwU-cI7zlUWnEkX6E79MFlWJoVXNm94fP92wGZUsesogsiifqMBIelkHW9Otr76XFr140AsTpyZj3wqPDEc", + "owner": "GtDQcrr2QRdoZ-lKto_S_SpzEwiZiHVaj3x4jAgRh4o" +} +``` + +## Resources + +- Dive into the [Code](https://github.com/ardriveapp/turbo-sdk) +- Join the discussion in the [ArDrive Discord](https://discord.com/invite/ya4hf2H) diff --git a/docs/src/ja/guides/querying-arweave/ar-gql.md b/docs/src/ja/guides/querying-arweave/ar-gql.md new file mode 100644 index 00000000..e5bd9cbb --- /dev/null +++ b/docs/src/ja/guides/querying-arweave/ar-gql.md @@ -0,0 +1,72 @@ +--- +locale: ja +--- +# ar-gql +This package is a minimal layer on top of GraphQL, it supports parameterized queries with query variables. It also implements management of paged results. + +## Installation + +To install `ar-gql run + + + +```console:no-line-numbers +npm i ar-gql +``` + + + +```console:no-line-numbers +yarn add ar-gql +``` + + + +## Example +```js:no-line-numbers +import { arGql } from "ar-gql" + +const argql = arGql() + +(async () => { + let results = await argql.run(`query( $count: Int ){ + transactions( + first: $count, + tags: [ + { + name: "App-Name", + values: ["PublicSquare"] + }, + { + name: "Content-Type", + values: ["text/plain"] + }, + ] + ) { + edges { + node { + id + owner { + address + } + data { + size + } + block { + height + timestamp + } + tags { + name, + value + } + } + } + } + }`, {count: 1}); + console.log(results); +})(); +``` + +## Resources +* [ar-gql github page](https://github.com/johnletey/arGql) diff --git a/docs/src/ja/guides/querying-arweave/ardb.md b/docs/src/ja/guides/querying-arweave/ardb.md new file mode 100644 index 00000000..ac87042c --- /dev/null +++ b/docs/src/ja/guides/querying-arweave/ardb.md @@ -0,0 +1,55 @@ +--- +locale: ja +--- +# ArDB +A library built on top of GraphQL that makes it possible to query transaction and block data from arweave without having to memorize GraphQL parameter names. Just build queries using autocomplete in your favorite code editor. + +## Installation +```console:no-line-numbers +yarn add ardb +``` + +## Example +```js:no-line-numbers +import Arweave from 'arweave'; +import ArDB from 'ardb'; + +// initialize an arweave instance +const arweave = Arweave.init({}); + +// arweave is Arweave Client instance +const ardb = new ArDB(arweave); + +// Get a single transaction by its id +const tx = await ardb.search('transaction') + .id('A235HBk5p4nEWfjBEGsAo56kYsmq7mCCyc5UZq5sgjY') + .findOne(); + +// Get an array of transactions and include only the first result +const txs = await ardb.search('transactions') + .appName('SmartWeaveAction') + .findOne(); + +// This is the same as doing: +const txs = await ardb.search('transactions') + .tag('App-Name', 'SmartWeaveAction') + .limit(1) + .find(); + +// Search for multiple transactions from a specific owner/wallet address +const txs = await ardb.search('transactions') + .from('BPr7vrFduuQqqVMu_tftxsScTKUq9ke0rx4q5C9ieQU') + .find(); + +// Continue paging though the results with... +const newTxs = await ardb.next(); + +// Or you could get all results at once by doing: +const txs = await ardb.search('blocks') + .id('BkJ_h-GGIwfek-cJd-RaJrOXezAc0PmklItzzCLIF_aSk36FEjpOBuBDS27D2K_T') + .findAll(); + +``` + +## Resources +* [ArDB NPM package](https://www.npmjs.com/package/ardb) \ No newline at end of file diff --git a/docs/src/ja/guides/querying-arweave/queryingArweave.md b/docs/src/ja/guides/querying-arweave/queryingArweave.md new file mode 100644 index 00000000..3709a938 --- /dev/null +++ b/docs/src/ja/guides/querying-arweave/queryingArweave.md @@ -0,0 +1,184 @@ +--- +locale: ja +--- +# Querying Arweave with GraphQL +Arweave provides a simple way of querying for transactions and filtering them by [tags](../concepts/tags.md). Arweave GraphQL-compatible indexing services provide endpoints users can post GraphQL queries to, and also provide a playground for trying queries. + +[GraphQL](https://graphql.org) is a flexible query language that services can use to build a customized data schema for clients to query. GraphQL also allows clients to specify which elements of the available data structure they would like to see in the results. + +## Public Indexing Services + +- [arweave.net graphql](https://arweave.net/graphql) the original graphql endpoint, managed by [ar.io](https://ar.io) +- [goldsky search service](https://arweave-search.goldsky.com/graphql) a public service specifically optimized for search using a superset of the graphql syntax, managed by [goldsky](https://goldsky.com) +- [ar.io decentralized indexing](https://ar-io.dev/graphql) A decentralized network for indexing services. Currently in testing with L1 transactions available. +- [knn3 arseeding indexing](https://knn3-gateway.knn3.xyz/arseeding/graphql), one for arseeding trading can real-time query service. + +## Executing a GraphQL Query +To query arweave we’ll need to access it through an indexing service that supports GraphQL. Use one of the GraphQL playgrounds listed above to get started! + +Copy and paste in the following query +```graphql:no-line-numbers +query { + transactions(tags: [{ + name: "App-Name", + values: ["PublicSquare"] + }]) + { + edges { + node { + id + tags { + name + value + } + } + } + } +} +``` + +If you’re not familiar with GraphQL it can seem a little overwhelming at first but once you know the structure, it’s fairly easy to read and understand. + +```text:no-line-numbers +query { ( ) { } } +``` +In the example query we pasted our `` is `transactions` but we could also query for `blocks`. A full description of Arweave's GraphQL schema is written up in the [Arweave GraphQL Guide](https://gql-guide.arweave.dev). The guide refers to the `filter criteria` as “Query Structures” and the complete data structure definition of `transactions` and `blocks` as “Data Structures”. + +When it comes to the ``, the thing to note is that you can specify a subset of the complete data structure you’re interested in. For example, the complete data structure for a transactions schema is [listed here](https://gql-guide.arweave.dev/#full-data). + +In our case we’re interested in the `id` and complete list of `tags` for any transaction matching our filter criteria. + +Hit the big “Play” button in the middle of the playground to run the query. + +![image](https://arweave.net/rYfVvFVKLFmmtXmf8KeTvsG8avUXMQ4qOBBTZRHqVU0) + +You’ll notice we get back a list of transactions in the results data structure we specified in our original query. + +If you’re new to blockchains this is unexpected, we haven’t built anything, why do these results exist? It turns out, the `“PublicSquare”: “App-Name”` tag we’ve filtered for has been in use for a while. + +Arweave protocol's founder, Sam Williams, proposed the transaction format a few years ago in a [github code snippet](https://gist.github.com/samcamwilliams/811537f0a52b39057af1def9e61756b2). Since then builders in the ecosystem have been building on and around it, experimenting, posting transactions with those tags. + +Back to querying Arweave. You’ll notice in the GraphQL results that there are no readable post messages, just tags and information about posts. + +This is because the GraphQL indexing service is concerned with indexing and retrieving header data for transactions and blocks but not their associated data. + +To get the data of a transaction we need to look it up using another HTTP endpoint. +```text:no-line-numbers +https://arweave.net/ +``` + +Copy and paste one of the id’s in your query results and modify the above link, appending the `id`. It should look something like this… + +https://arweave.net/eaUAvulzZPrdh6_cHwUYV473OhvCumqT3K7eWI8tArk + +The result of navigating to that URL in the browser (HTTP GET) would be retrieving the content of the post (stored in the transactions data). In this example it’s… +```text:no-line-numbers +Woah that's pretty cool 😎 +``` +(For a complete listing arweave HTTP endpoints visit the [HTTP API](https://docs.arweave.org/developers/server/http-api) documentation.) + +## Posting a Query From JavasScript +Posting a GraphQL query from javascript isn't much different than posting it in the playground. + +First install the `arweave-js` package for easy access to a GraphQL endpoint. +```console:no-line-numbers +npm install --save arweave +``` + +Then enter a slightly more advanced version of the example query from above and `await` the results of posting it. + +```js:no-line-numbers +import Arweave from 'arweave'; + +// initialize an arweave instance +const arweave = Arweave.init({}); + +// create a query that selects tx data the first 100 tx with specific tags +const queryObject = { + query: + `{ + transactions( + first:100, + tags: [ + { + name: "App-Name", + values: ["PublicSquare"] + }, + { + name: "Content-Type", + values: ["text/plain"] + } + ] + ) + { + edges { + node { + id + tags { + name + value + } + } + } + } + }` +}; +const results = await arweave.api.post('/graphql', queryObject); +``` + +## Multiple Queries +It is possible to post multiple queries in a single round-trip to the GraphQL endpoint. This example queries the `name` transaction (each as a separate query) for two wallet addresses using the now obsolete (replaced by `ar-profile`) but still permanent `arweave-id` protocol. +```graphql:no-line-numbers +query { + account1: transactions(first: 1, owners:["89tR0-C1m3_sCWCoVCChg4gFYKdiH5_ZDyZpdJ2DDRw"], + tags: [ + { + name: "App-Name", + values: ["arweave-id"] + }, + { + name: "Type", + values: ["name"] + } + ] + ) { + edges { + node { + id + owner { + address + } + } + } + } + account2: transactions(first: 1, owners:["kLx41ALBpTVpCAgymxPaooBgMyk9hsdijSF2T-lZ_Bg"], + tags: [ + { + name: "App-Name", + values: ["arweave-id"] + }, + { + name: "Type", + values: ["name"] + } + ] + ) { + edges { + node { + id + owner { + address + } + } + } + } +} +``` + + +## Resources +* [Arweave GQL Reference](../../references/gql.md) +* [ArDB package](./ardb.md) +* [ar-gql package](./ar-gql.md) +* [Search Indexing Service](./search-indexing-service.md) + diff --git a/docs/src/ja/guides/querying-arweave/search-indexing-service.md b/docs/src/ja/guides/querying-arweave/search-indexing-service.md new file mode 100644 index 00000000..57c7d443 --- /dev/null +++ b/docs/src/ja/guides/querying-arweave/search-indexing-service.md @@ -0,0 +1,229 @@ +--- +locale: ja +--- +# Search Indexing Service + +tl;dr + +- Backwards compatible syntax with Arweave GraphQL +- Faster response times for complex queries (ie multi-tag search) +- More query options +--- + +[Goldsky](https://goldsky.com)'s free search service uses an optimized backend that allows for faster searches for complex queries across arweave blocks and transactions, and also introduces additional querying syntax for fuzzy and wildcard search use-cases. + +The Search GraphQL syntax is a superset of the [Arweave GraphQL syntax](./queryingArweave.md). It's fully backwards compatible and will return the same results for the same queries, but has some additional modifiers that can be useful. + +- Flexible tag filters + - Search for just a tag name or value +- Advanced tag filters + - Fuzzy search + - Wildcard search +- Filter for L1 transactions only +- Result set total counts + +For any custom needs or feature ideas, feel free to contact the Goldsky team through email or on discord! + + +## Search Gateway Endpoints + +Currently, the only service with this syntax is hosted Goldsky. If anybody is interested in hosting their own gateway with the same syntax, feel free to contact the [Goldsky](https://goldsky.com) for help. + +- [Goldsky Search Service](https://arweave-search.goldsky.com/graphql) + +## Features + +### Flexible Tag Filters + +The Search Gateway Syntax is less strict, and allows for searching just for the Tag name or value + +#### Examples +Search for transactions with the tag value 'cat' + +```graphql:no-line-numbers +query just_values { + transactions( + first: 10, + tags: [ + { + values: ["cat"] + } + ] + ) + { + edges { + node { + id + tags { + name + value + } + } + } + } +} +``` + +Search for transactions that have an `In-Response-To-ID` + +```graphql:no-line-numbers +query just_name { + transactions( + first: 10, + tags: [ + { + name: "In-Response-To-ID" + } + ] + ) + { + edges { + node { + id + tags { + name + value + } + } + } + } +} +``` + + +### Advanced tag filters + +The Search Gateway Syntax offers an additional parameter to the tag filter, `match`. + +| Match value | Description | +|-------------|-------------| +| EXACT | (default) exact matches only. | +| WILDCARD | Enables * to match any amount of characters, ie. `text/*` | +| FUZZY_AND | Fuzzy match containing all search terms | +| FUZZY_OR | Fuzzy match containing at least one search term | + + +Open up the playground and try some of the following queries! + +Searching all transactions with an image content type using a wildcard +```graphql:no-line-numbers +{ + transactions( + tags: [ + { name: "Content-Type", values: "image/*", match: WILDCARD} + ] + first: 10 + ) { + edges { + cursor + node { + id + tags { + name + value + } + block { height } + bundledIn {id} + } + } + } +} +``` + +### Fuzzy Search + +Fuzzy search is very powerful, and can search for 'similar' text with many variations. + +Searching all transactions with 'cat' OR 'dog' (or CAT or doG or cAts or CAAts etcs). So the tag could contain at least of cat-like or dog-like term. + +```graphql:no-line-numbers +{ + transactions( + tags: [ + { name: "Content-Type", values: ["cat", "dog"], match: "FUZZY_OR"} + ] + first: 10 + ) { + edges { + cursor + node { + id + tags { + name + value + } + block { height } + bundledIn {id} + } + } + } +} +``` + +Search for transactions that have cat-like AND dog-like tag values +```graphql:no-line-numbers +{ + transactions( + tags: [ + { name: "Content-Type", values: ["cat", "dog"], match: "FUZZY_AND"} + ] + first: 10 + ) { + edges { + cursor + node { + id + tags { + name + value + } + block { height } + bundledIn {id} + } + } + } +} +``` + +### Exclude Bundled (L2) Transactions + +Simply set `bundledIn: NULL` + +```graphql:no-line-numbers +query just_l1 { + transactions( + first: 10, + bundledIn: null + ) + { + edges { + node { + id + signature + owner { + address + } + block { + height + } + } + } + } +} +``` + + +### Getting total counts given a query + +If you'd like to understand how many transactions fit a certain set of filters, just use the `count` field. This will trigger an additional optimized count operation. This will likely double the time it would take to return the query, so use only when needed. + +```graphql:no-line-numbers +query count_mirror { + { + transactions(tags:{values:["MirrorXYZ"]}) + { + count + } + } +} +``` diff --git a/docs/src/ja/guides/smartweave/atomic-assets/akord.md b/docs/src/ja/guides/smartweave/atomic-assets/akord.md new file mode 100644 index 00000000..844d08d4 --- /dev/null +++ b/docs/src/ja/guides/smartweave/atomic-assets/akord.md @@ -0,0 +1,95 @@ +--- +locale: ja +--- +# 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/ja/guides/smartweave/atomic-assets/ardrive-cli.md b/docs/src/ja/guides/smartweave/atomic-assets/ardrive-cli.md new file mode 100644 index 00000000..82499564 --- /dev/null +++ b/docs/src/ja/guides/smartweave/atomic-assets/ardrive-cli.md @@ -0,0 +1,104 @@ +--- +locale: ja +--- +# Deploy and Register Atomic Assets using ArDrive CLI + +Atomic Assets need to be registered to be capable of being traded on the Permaweb. You can upload your assets using services like `ardrive-cli` and give the asset the proper data tags, then use this cli to register the asset. + +## Guide to publish an atomic asset using ArDrive-cli and `asset-registar` cli. + +### Setup + +> Requires NodeJS - https://nodejs.org and jq - https://jqlang.github.io/jq/download/ + +``` +npm i -g ardrive-cli +npm i -g asset-registar +``` + +### Create Atomic Assets Tags + +Using a text editor, we want to create a new file called `data.json` and in this new file add the following: + +```json +{ + "dataGqlTags": { + "Type": "ASSET_TYPE_HERE", + "Title": "TITLE_HERE", + "Description": "DESCRIPTION_HERE", + "License": "yRj4a5KMctX_uOmKWCFJIjmY8DeJcusVk6-HzLiM_t8", + "App-Name": "SmartWeaveContract", + "App-Version": "0.3.0", + "Contract-Src": "Of9pi--Gj7hCTawhgxOwbuWnFI1h24TTgO5pw8ENJNQ", + "Indexed-By": "ucm", + "Init-State": "{ \"ticker\": \"ATOMIC\", \"name\": \"ASSET_NAME_HERE\", \"balances\": { \"YOUR_WALLET_ADDRESS\": UNITS_HERE }, \"claimable\": [] }" + } +} +``` + +Now that you have your tags initialized you need to take every uppercase word and replace it with the values that are unique to your asset. + +ASSET_TYPE_HERE: + +This should be a one word description of your asset, "image", "audio", "video". etc. + +TITLE_HERE: + +A title that describes your asset, it should not be longer than 150 characters. + +DESCRIPTION_HERE: + +A description that you want to show up in search results or list results for your asset. + +ASSET_NAME_HERE: + +The name of your asset, in one word or connected with dashes ex. "AA-ALIEN-WITH-BEER". + +YOUR_WALLET_ADDRESS: + +The wallet address you want to give ownership too. + +UNITS_HERE: + +The number of fractional units you want to provide for this asset, if there can only be one owner then the replace with 1, if you want 100 owners replace with 100. + +save the file as `data.json` + +### Copy the asset you want to publish to this directory. + +--- + +### Uploading with new arweave wallet. + +Create a wallet or copy your wallet.json here. + +```sh +ardrive generate-seedphrase +# copy the seed phrase that is in the output and include in the next command where the `...` are. +# generate wallet +ardrive generate-wallet -s "..." > wallet.json +``` + +Using `ardrive-cli` we are going to create a drive and a folder. + +```sh +# create drive and folder +export FOLDER=$(ardrive create-drive -w ./wallet.json -n "My Atomic Assets" --turbo | jq -r '.created[] | select(.type == "folder").entityId') +# upload atomic asset +export ASSET=$(ardrive upload-file -w ./wallet.json -F ${FOLDER} --metadata-file ./data.json -l ASSET_FILE_HERE --turbo | jq -r '.created[] | select(.type == "file").dataTxId') +``` + +> NOTE: if your file is larger than 500k, you will need to add credits to your ardrive wallet, you can do this by going to https://ardrive.io and logging in with your wallet file. + + +### Register asset + +Once the asset is uploaded with the Atomic Asset Tags, now all you have to do is call `asset-register ` + +```sh +asset-registar ${ASSET} +``` + +### CONGRATS! + +You should be able to find your asset on ar://bazar by typing in the contractId in the search bar. \ No newline at end of file diff --git a/docs/src/ja/guides/smartweave/atomic-assets/index.md b/docs/src/ja/guides/smartweave/atomic-assets/index.md new file mode 100644 index 00000000..49a0541e --- /dev/null +++ b/docs/src/ja/guides/smartweave/atomic-assets/index.md @@ -0,0 +1,16 @@ +--- +locale: ja +--- +# Atomic Assets + +An atomic asset is a unique package that includes data, labels (also known as tags), and a specific agreement, all under a single, unchangeable identifier. This allows applications and users to access the data, labels, and agreement by using just this one identifier. + +To enable trading of the Atomic Asset, we must connect it to something called a SmartWeave Token. This connection transforms the asset into what's known as an Atomic Token and allows it to be exchanged or traded. + +The SmartWeave Token has a special feature called a balances object that keeps track of who owns the tokens related to that particular asset. This ensures that ownership and trades are recorded and managed accurately. + +## Deploying Atomic Assets + + +* [using Akord](akord.md) +* [using ArDrive CLI](ardrive-cli) \ No newline at end of file diff --git a/docs/src/ja/guides/smartweave/warp/deploying-contracts.md b/docs/src/ja/guides/smartweave/warp/deploying-contracts.md new file mode 100644 index 00000000..01b746a9 --- /dev/null +++ b/docs/src/ja/guides/smartweave/warp/deploying-contracts.md @@ -0,0 +1,137 @@ +--- +locale: ja +--- +# Warp (SmartWeave) SDK - Deploying Contracts + +> **⚠️ Deprecation Notice** +> +> This document is deprecated and may contain outdated information. + +SmartWeave Contracts are created by posting two transactions to the network, a Source Transaction and a Initial State Transaction, the source transaction contains the source code the contract will use to determine the current state. The initial state transaction provides a contract identifer to reference as well as the initial seed data the contract should use as the starting point to evaluate the current state. The current state is calculated by accessing actions that are transactions written to the network that contain input parameters to execute using the evaluated and instantiated source code. Warp Contracts can be created using many different languages and can be evaluated using the Warp SDK. This guide will show the many different ways you can deploy a Warp Contract. + +::: tip +If you would like to learn more about authoring Warp SmartWeaveContracts, checkout the Warp Academy! [https://academy.warp.cc/](https://academy.warp.cc/) +::: + +As of Warp version 1.3.0 you willl need a plugin to deploy contracts with Warp. This plugin will enable you to add different wallet signatures. + +```js +import { DeployPlugin, InjectedArweaveSigner } from 'warp-contracts-plugin-deploy' +import { WarpFactory } from 'warp-contracts' + +const warp = WarpFactory.forMainnet().use(new DeployPlugin()) + +... + +function deploy(initState, src) { + if (window.arweaveWallet) { + await window.arweaveWallet.connect(['ACCESS_ADDRESS', 'SIGN_TRANSACTION', 'ACCESS_PUBLIC_KEY', 'SIGNATURE']); + } + const userSigner = new InjectedArweaveSigner(window.arweaveWallet); + await userSigner.setPublicKey(); + + return warp.deploy({ + wallet: userSigner, + src, + initState: JSON.stringify(initState) + }) +} +``` + +## The Four ways to deploy a Warp SmartWeave Contract + +There are 4 ways you can deploy a SmartWeaveContract via the Warp SDK, these options handle different use cases that a developer may encounter. + +- Need to deploy the contract with the source at the same time +- Need to deploy a contract where the source is already on the permaweb +- Need to deploy a contract through the sequencer and point it to some data using a path manifest +- Need to deploy a contract via Irys and register that contract on the sequencer + +::: tip +For more information about Warp deployments check out the github Readme for the project. [https://github.com/warp-contracts/warp#deployment](https://github.com/warp-contracts/warp#deployment). +::: + +::: warning +This project is in rapid development, so the documentation here could be out of data quickly, if you discover it is out of date, please let us know on the [Permaweb Cookbook Discord Channel](https://discord.gg/haCAX3shxF). +::: + +## Examples + +::: tip +By default all deploy functions are published to Arweave via Irys, each option has a flag that can be set to not use Irys, but it can take many confirmations for the network to fully confirm the transaction. +::: + +**deploy** + +Deploys contract plus source code to Warp Sequencer, to Irys (L2), to Arweave. + +```ts +const { contractTxId, srcTxId } = await warp.deploy({ + wallet, + initState, + data: { "Content-Type": "text/html", body: "

Hello World

" }, + src: contractSrc, + tags: [{ name: "AppName", value: "HelloWorld" }], +}); +``` + +- wallet - should be Arweave keyfile (wallet.json) parsed as a JSON object implementing the [JWK Interface](https://rfc-editor.org/rfc/rfc7517) or the string 'use_wallet' +- initState - is a stringified JSON object +- data - is optional if you want to write data as part of your deployment +- src - is the string or Uint8Array value of the source code for the contract +- tags - is an array of name/value objects `{name: string, value: string}[]`, [Learn more about tags](../../../concepts/tags.md) + +**deployFromSourceTx** + +Already have the source on the permaweb? Then deployFromSourceTx is your tool of choice! With the permaweb you never have to worry about data changing so re-using source code for contracts is a no brainer. + +```ts +const { contractTxId, srcTxId } = await warp.deployFromSourceTx({ + wallet, + initState, + srcTxId: "SRC_TX_ID", +}); +``` + +**deployBundled** + +Uses Warp Gateway Sequencer's endpoint to upload a raw data item to Irys and index it. + +```ts +import { createData } from "arbundles"; + +const dataItem = createData( + JSON.stringify({ + manifest: "arweave/paths", + version: "0.1.0", + index: { + path: "index.html", + }, + paths: { + "index.html": { + id: "cG7Hdi_iTQPoEYgQJFqJ8NMpN4KoZ-vH_j7pG4iP7NI", + }, + }, + }), + { tags: [{ "Content-Type": "application/x.arweave-manifest+json" }] }, +); +const { contractTxId } = await warp.deployBundled(dataItem.getRaw()); +``` + +**register** + +Uses Warp Gateway Sequencer's endpoint to index a contract that has been uploaded with Irys. + +```ts +import Irys from '@irys/sdk' + +const irys = new Irys({ 'https://node2.irys.xyz', 'arweave', wallet }) +const { id } = await irys.upload('Some Awesome Atomic Asset', { + tags: [{'Content-Type': 'text/plain' }] +}) +const { contractTxId } = await warp.register(id, 'node2') +``` + +## Summary + +Why are there so many options to deploy contracts? These methods exist to reduce duplication, enable advanced contract interactions, and allow for flexibility for testing and usage of the smartweave protocol. The permaweb is very unique in its architecture, it provides a feature where you can deploy both digital data and the contract to manage that data generating the same transaction identifier. The result is dynamic data paired with an immutable set of data. Deploying contracts is just one piece of the Warp SDK, to learn more keep reading this guide! diff --git a/docs/src/ja/guides/smartweave/warp/evolve.md b/docs/src/ja/guides/smartweave/warp/evolve.md new file mode 100644 index 00000000..840084a6 --- /dev/null +++ b/docs/src/ja/guides/smartweave/warp/evolve.md @@ -0,0 +1,90 @@ +--- +locale: ja +--- +# Warp (SmartWeave) SDK - Evolve + +> **⚠️ Deprecation Notice** +> +> This document is deprecated and may contain outdated information. + +Evolve is a feature that allows developers to update the source code of a smart contract without deploying a new contract. To use this feature, you must first submit the new source code using the save function. Once the updated code has been confirmed on the Permaweb, you can use the evolve function to point the contract to the new source code ID. This allows you to update the contract's behavior without creating a new contract instance. + +## Why? + +Writing SmartWeave contracts can be difficult and sometimes requires updates or new features to be added over time. Evolve allows you to make changes to your contract without having to create a new contract instance from scratch. To use this feature, your contract state object must include an evolve property that is set to the new contract source transaction identifier. This enables you to modify and improve your existing contract without starting from scratch. + +```json +{ + ... + "evolve": "YOUR SOURCE CODE TX_ID" +} +``` + +## Post your new source to the permaweb + +Before you can evolve your existing contract, you need to post the new source code to the permaweb, you can do this with the `save` function. + +```ts +import { WarpFactory } from 'warp-contracts' +import fs from 'fs' + +const src = fs.readFileSync('./dist/contract.js', 'utf-8') +const jwk = JSON.parse(fs.readFileSync('./wallet.json', 'utf-8')) +const TX_ID = 'VFr3Bk-uM-motpNNkkFg4lNW1BMmSfzqsVO551Ho4hA' +const warp = WarpFactory.forMainnet() + +async function main() { + const newSrcTxId = await warp.contract(TX_ID).connect(jwk).save({src }) + console.log('NEW SRC ID', newSrcTxId) +} + +main() +``` + +## Evolve your contract + +::: warning +**Verify** your new Source TX_ID is confirmed, go to [Sonar](https://sonar.warp.cc) to make sure the TX_ID is confirmed. +::: + +```ts +import { WarpFactory } from 'warp-contracts' +import fs from 'fs' + +const src = fs.readFileSync('./dist/contract.js', 'utf-8') +const jwk = JSON.parse(fs.readFileSync('./wallet.json', 'utf-8')) +const TX_ID = 'VFr3Bk-uM-motpNNkkFg4lNW1BMmSfzqsVO551Ho4hA' +const warp = WarpFactory.forMainnet() + +async function main() { + const newSrcTxId = await warp.contract(TX_ID).connect(jwk).evolve('SRC TX ID') + console.log(result) +} + +main() + +``` + +::: tip +It's worth noting that the evolve feature is only applicable to future actions, meaning you cannot use it to apply new source code to actions that occurred before the contract was evolved. +::: + + +## Summary + +Evolve is a powerful feature and can provide extensibility for your contracts, it can also be an **attack** vector, so make sure you fully understand what you are doing when using it. Below is a common snippet of what an evolve function may look like in your contract. + +```js + +export async function handle(state, action) { + ... + if (action.input.function === 'evolve') { + if (action.caller === state.creator) { + state.evolve = action.input.value + } + return { state } + } + ... +} +``` + diff --git a/docs/src/ja/guides/smartweave/warp/intro.md b/docs/src/ja/guides/smartweave/warp/intro.md new file mode 100644 index 00000000..89476356 --- /dev/null +++ b/docs/src/ja/guides/smartweave/warp/intro.md @@ -0,0 +1,116 @@ +--- +locale: ja +--- +# Warp (SmartWeave) SDK Intro + +> **⚠️ Deprecation Notice** +> +> This document is deprecated and may contain outdated information. + +Warp is a popular SmartWeave Protocol SDK. With Warp and Irys your SmartWeave deployments and interactions can be extremely fast. + +## Introduction + +This guide is a short introduction to the Warp SDK and some of its API methods, if you want to learn more about SmartWeave Contracts in general visit [Core Concepts: SmartWeave](/concepts/smartweave.html). + +::: tip +You can find the Warp SDK on [github](https://github.com/warp-contracts). For a deeper dive on Warp SmartWeave visit [Warp Website](https://warp.cc) +::: + +To use the SDK on the server, you will need access to a wallet.json file, to use the SDK in the browser you will need to connect to an arweave supported wallet. + +## Install + +To install warp in your project you can use `npm` or `yarn` or other npm clients. + + + + +```console +npm install warp-contracts +``` + + + + +```console +yarn add warp-contracts +``` + + + + +## Import + +When using Warp with your project there are several ways to import the sdk depending on your project setup. + + + + +```ts +import { WarpFactory } from "warp-contracts"; +``` + + + + +```js +import { WarpFactory } from "warp-contracts/mjs"; +``` + + + + +```js +const { WarpFactory } = require("warp-contracts"); +``` + + + + +## Connecting to an environment + +There are several environments that you may want to interact with, you can connect to those environments using the `forXXXX` helpers. + + + + +```ts +const warp = WarpFactory.forMainnet(); +``` + + + + +```js +const warp = WarpFactory.forTestnet(); +``` + + + + +```js +const warp = WarpFactory.forLocal(); +``` + + + + +```js +const warp = WarpFactory.custom( + arweave, // arweave-js + cacheOptions, // { ...defaultCacheOptions, inMemory: true} + environment, // 'local', 'testnet', 'mainnet' +); +``` + + + + +::: warning +When using local environment, you will need to have arLocal running on port 1984. +::: + +## Summary + +This intro guide is to help you get setup with Warp, the following guides will show you how to deploy SmartWeave contracts using the Warp SDK, how to interact with those contracts and finally, how to evolve SmartWeave contracts. diff --git a/docs/src/ja/guides/smartweave/warp/readstate.md b/docs/src/ja/guides/smartweave/warp/readstate.md new file mode 100644 index 00000000..ce1d12a4 --- /dev/null +++ b/docs/src/ja/guides/smartweave/warp/readstate.md @@ -0,0 +1,61 @@ +--- +locale: ja +--- +# Warp (SmartWeave) SDK - ReadState + +> **⚠️ Deprecation Notice** +> +> This document is deprecated and may contain outdated information. + +SmartWeave Contract state is calculated via lazy evaluation, which means, the state evaluation occurs on reads not writes. When reading contracts, the SDK gathers all state interactions, sorts them, and executes them against the source contract using a reduce or fold pattern. + +## Basic Readstate + +```ts +const warp = WarpFactory.forMainnet() +const CONTRACT_ID = '_z0ch80z_daDUFqC9jHjfOL8nekJcok4ZRkE_UesYsk' + +const result = await warp.contract(CONTRACT_ID).readState() + +// log current state +console.log(result.cachedValue.state) +``` + +## Advanced Readstate + +Some contracts either read the state of other contracts, or invoke or write to other contracts, when requesting the state of these contracts it is necessary to set evaluation options. + +```ts +const warp = WarpFactory.forMainnet() +const CONTRACT_ID = 'FMRHYgSijiUNBrFy-XqyNNXenHsCV0ThR4lGAPO4chA' + +const result = await warp.contract(CONTRACT_ID) + .setEvaluationOptions({ + internalWrites: true, + allowBigInt: true + }) + .readState() + +// log current state +console.log(result.cachedValue.state) +``` + +### Common Evaluation Options + +| Name | Description | +| ---- | ----------- | +| internalWrites | Evaluates contracts that contain internal writes to other contracts | +| allowBigInt | Evaluates contracts that use the BigInt primitive you can find out more about bigInt [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt) | +| unsafeClient | This value could be `allow` or `skip` or `throw`. You should avoid using unsafeClient in your contracts it can lead to underministic results. | + +## Readstate from specific BlockHeight or Sortkey + +You may want to look at a previous state, not the current state, by supplying a blockHeight you can read the state of a contract at a specific block height + +```ts +const { sortKey, cachedValue } = await contract.readState(1090111) +``` + +## Summary + +Reading the current state of SmartWeave Contracts performs state evaluation by pulling all interactions and processing each interaction via a fold method. This approach is unique to the permaweb and requires a unique understanding of how your SmartWeave Contract code is executed. \ No newline at end of file diff --git a/docs/src/ja/guides/smartweave/warp/write-interactions.md b/docs/src/ja/guides/smartweave/warp/write-interactions.md new file mode 100644 index 00000000..7fc5d3ef --- /dev/null +++ b/docs/src/ja/guides/smartweave/warp/write-interactions.md @@ -0,0 +1,82 @@ +--- +locale: ja +--- +# Warp WriteInteractions + +> **⚠️ Deprecation Notice** +> +> This document is deprecated and may contain outdated information. + +To call a function on a SmartWeave contract, you can create a transaction known as a SmartWeave action. This action includes the function name and the necessary input parameters for the function on the SmartWeave contract. You can create a SmartWeave action using the contract.writeInteraction function. + +## Code + +```ts +import { WarpFactory } from 'warp-contracts' + +const warp = WarpFactory.forMainnet() +const STAMP_PROTOCOL = 'FMRHYgSijiUNBrFy-XqyNNXenHsCV0ThR4lGAPO4chA' + +async function doStamp() { + const result = await warp.contract(STAMP_PROTOCOL) + .connect('use_wallet') + .writeInteraction({ + function: 'stamp', + timestamp: Date.now(), + transactionId: 'zQhANphTO0DOsaWXhExylUD5cBN3a6xWvfn5ZCpmCVY' + }) + console.log(result) +} +``` + +When calling writeInteraction, you need to pass your input parameters, these are the parameters the contract is expecting to receive. + +::: warning +Since SmartWeave contracts are evaluated in a lazy flow, you do not know if your interaction ran successfully until you evaluate the contract to the current state. Use [Warp readState](./readstate.md) to access the contract and determine if the interaction was applied successfully. +::: + +## Dry Write + +`DryWrite` allows you to test and verify an interaction on the current state without actually executing it on the permaweb. This feature allows you to simulate the interaction locally and ensure that it will be successful before applying it. + +```ts +import { WarpFactory } from 'warp-contracts' + +const warp = WarpFactory.forMainnet() +const STAMP_PROTOCOL = 'FMRHYgSijiUNBrFy-XqyNNXenHsCV0ThR4lGAPO4chA' + +async function doStamp() { + const result = await warp.contract(STAMP_PROTOCOL) + .connect('use_wallet') + .dryWrite({ + function: 'stamp', + timestamp: Date.now(), + transactionId: 'zQhANphTO0DOsaWXhExylUD5cBN3a6xWvfn5ZCpmCVY' + }) + console.log(result) +} +``` + +::: warning +One thing to note when using dry writes, is that the entire state needs to be evaluated locally for contacts that use readState or internalWrites. This can result in a slow performing process. +::: + +## Optimized for speed + +By default, writeInteractions are submitted to the Warp Sequencer and bundled and posted to Arweave. You can post directly to Arweave by disabling bundling. + +```ts +const result = await contract.writeInteraction({ + function: 'NAME_OF_YOUR_FUNCTION', + ... +}, { disableBundling: true }) +``` + +## Summary + +The SmartWeave Protocol allows for the modification of dynamic data on an immutable, append-only storage system using writeInteractions. These interactions enable trustless and permissionless communication with SmartWeave contracts. The Warp SDK provides developers with a user-friendly API for interacting with the SmartWeave Protocol and its writeInteractions feature. + +For additional resources: + +* Warp SDK [https://github.com/warp-contracts/warp](https://github.com/warp-contracts/warp) +* Warp Docs [https://warp.cc](https://warp.cc) diff --git a/docs/src/ja/guides/testing/arlocal.md b/docs/src/ja/guides/testing/arlocal.md new file mode 100644 index 00000000..2dc599c8 --- /dev/null +++ b/docs/src/ja/guides/testing/arlocal.md @@ -0,0 +1,100 @@ +--- +locale: ja +--- +# arlocal +`arlocal` is a tool for quickly setting up and running a local Arweave testing environment. It allows you to test transactions on a Arweave gateway-like server. It allows developers to test their applications in a simulated environment before deploying them to the Arweave network + +No $AR tokens are required to use and transactions are instant. + +## CLI +You must have node and npm installed on your machine to use the arlocal CLI + +To start the local gateway, run `npx arlocal` + +::: tip +You can specify what port to run the slim gateway on by passing your port as an argument +`npx arlocal 8080` +::: + +To hide the logs, add the flag `--hidelogs` when you run your gateway +`npx arlocal --hidelogs` +## Node +Install the package as a dev dependency by running +`yarn add arlocal -D` or `npm install arlocal --save-dev` + +```js +import ArLocal from 'arlocal'; + +(async () => { + const arLocal = new ArLocal(); + + // create local testing environment + await arLocal.start(); + + // your tests here + + // shut down testing environment + await arLocal.stop(); +})(); +``` + +An `ArLocal` instance can be created with options +| Option | Description | +| ---- | ----------- | +| port | Port to use | +| showLogs | Show logs | +| dbPath | Directory for temporary database | +| persist | Persisting data between server restarts + +### Example +For this example to work, the code needs to use a generated test wallet. To achieve this the `arweave` package must be installed to the project along with `arlocal` + +`yarn add arweave arlocal -D` or `npm install --save-dev arweave arlocal` + +Below is a basic JavaScript test for creating a data transaction and posting it to Arweave using arlocal: + +```js +import ArLocal from 'arlocal' +import Arweave from 'arweave' + +test('test transaction', async () => { + // create and start ArLocal instance + const arLocal = new ArLocal() + await arLocal.start() + // create local Arweave gateway + const arweave = Arweave.init({ + host: 'localhost', + port: 1984, + protocol: 'http' + }) + // generate wallet + const wallet = await arweave.wallets.generate() + // airdrop amount of tokens (in winston) to wallet + await arweave.api.get(`mint/${addr}/10000000000000000`) + // create mine function + const mine = () => arweave.api.get('mine') + try { + // create transaction + let transaction = await arweave.createTransaction({ + data: 'Hello world!' + }, wallet); + // sign and post transaction + await arweave.transactions.sign(transaction, wallet); + const response = await arweave.transactions.post(transaction); + // mine transaction + await mine() + // test the response + } catch(err) { + console.error('ERROR: ', err.message) + } + // tear down testing environment + await arLocal.stop() +}) +``` + +::: warning +Test results from L1 transactions may differ from L2 transactions +::: + +## Resources +[arlocal docs](https://github.com/textury/arlocal) \ No newline at end of file diff --git a/docs/src/ja/guides/using-vue.md b/docs/src/ja/guides/using-vue.md new file mode 100755 index 00000000..a67ab998 --- /dev/null +++ b/docs/src/ja/guides/using-vue.md @@ -0,0 +1,12 @@ +--- +locale: ja +--- +# Using Vue in Markdown + +## Browser API Access Restrictions + +Because VuePress applications are server-rendered in Node.js when generating static builds, any Vue usage must conform to the [universal code requirements](https://ssr.vuejs.org/en/universal.html). In short, make sure to only access Browser / DOM APIs in `beforeMount` or `mounted` hooks. + +If you are using or demoing components that are not SSR friendly (for example containing custom directives), you can wrap them inside the built-in `` component: + +## diff --git a/docs/src/ja/guides/vouch.md b/docs/src/ja/guides/vouch.md new file mode 100644 index 00000000..f467d8e0 --- /dev/null +++ b/docs/src/ja/guides/vouch.md @@ -0,0 +1,94 @@ +--- +locale: ja +--- +# Vouch + +There are a few ways to query an Arweave address to verify if it has been vouched by a service. Below is two of those approaches. +## VouchDAO Package +The `isVouched` function is made available to use in your applications in a straight-forward way. + +#### Installation +Add the package: + + + +```console:no-line-numbers +npm i vouchdao +``` + + + + +```console:no-line-numbers +yarn add vouchdao +``` + + + + +#### Usage +Inside of an async function you can use the `isVouched` function which will return true if a user is vouched. + +```js:no-line-numbers +import { isVouched } from 'vouchdao' +(async () => { + const res = await isVouched("ARWEAVE_ADDRESS") // true || undefined + // ... +})(); +``` + +## Using GraphQL +You can query the Arweave network using GraphQL to find out if a given Arweave address has been vouched. + +```graphql +query { + transactions( + tags:{name:"Vouch-For", values:["ARWEAVE_ADDRESS"]} + ) { + edges { + node { + id + tags { + name + value + } + } + } + } +} +``` + +If the address has been vouched, an array of nodes will be returned with tags pertaining to the service that issues the ANS-109. You can cross reference the `owner address` value with the passed community votes to ensure the service has been verified through community vote via VouchDAO. + +```graphql +"owner": { + "address": "Ax_uXyLQBPZSQ15movzv9-O1mDo30khslqN64qD27Z8" +}, +"tags": [ + { + "name": "Content-Type", + "value": "application/json" + }, + { + "name": "App-Name", + "value": "Vouch" + }, + { + "name": "App-Version", + "value": "0.1" + }, + { + "name": "Verification-Method", + "value": "Twitter" + }, + { + "name": "Vouch-For", + "value": "ARWEAVE_ADDRESS" + } +] +``` + +## Resources +* [VouchDAO](https://vouch-dao.arweave.dev) +* [VouchDAO Contract](https://sonar.warp.cc/?#/app/contract/_z0ch80z_daDUFqC9jHjfOL8nekJcok4ZRkE_UesYsk) +* [Arweave/GraphQL Playground](https://arweave.net/graphql) \ No newline at end of file From 5417f8ce505aad35e40d08553d231475fe9a9133 Mon Sep 17 00:00:00 2001 From: kaz <87490841+0xkaz@users.noreply.github.com> Date: Tue, 8 Oct 2024 12:45:19 +0800 Subject: [PATCH 05/18] add src/ja/kits --- docs/src/ja/kits/README.md | 10 + docs/src/ja/kits/react/akord.md | 176 +++++++++++ docs/src/ja/kits/react/create-react-app.md | 318 +++++++++++++++++++ docs/src/ja/kits/react/index.md | 21 ++ docs/src/ja/kits/react/turbo.md | 326 +++++++++++++++++++ docs/src/ja/kits/react/vite.md | 348 +++++++++++++++++++++ docs/src/ja/kits/svelte/index.md | 16 + docs/src/ja/kits/svelte/minimal.md | 329 +++++++++++++++++++ docs/src/ja/kits/svelte/vite.md | 338 ++++++++++++++++++++ docs/src/ja/kits/vue/create-vue.md | 279 +++++++++++++++++ docs/src/ja/kits/vue/index.md | 18 ++ 11 files changed, 2179 insertions(+) create mode 100644 docs/src/ja/kits/README.md create mode 100644 docs/src/ja/kits/react/akord.md create mode 100644 docs/src/ja/kits/react/create-react-app.md create mode 100644 docs/src/ja/kits/react/index.md create mode 100644 docs/src/ja/kits/react/turbo.md create mode 100644 docs/src/ja/kits/react/vite.md create mode 100644 docs/src/ja/kits/svelte/index.md create mode 100644 docs/src/ja/kits/svelte/minimal.md create mode 100644 docs/src/ja/kits/svelte/vite.md create mode 100644 docs/src/ja/kits/vue/create-vue.md create mode 100644 docs/src/ja/kits/vue/index.md diff --git a/docs/src/ja/kits/README.md b/docs/src/ja/kits/README.md new file mode 100644 index 00000000..d4082b90 --- /dev/null +++ b/docs/src/ja/kits/README.md @@ -0,0 +1,10 @@ +--- +locale: ja +--- +# Starter Kits + +Starter kits are boiler plate repositories for specific frameworks configured and ready to go, to build on the permaweb. + +- [React](./react/index.md) +- [Svelte](./svelte/index.md) +- [Vue](./vue/index.md) diff --git a/docs/src/ja/kits/react/akord.md b/docs/src/ja/kits/react/akord.md new file mode 100644 index 00000000..7a4494d4 --- /dev/null +++ b/docs/src/ja/kits/react/akord.md @@ -0,0 +1,176 @@ +--- +locale: ja +--- +# 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/ja/kits/react/create-react-app.md b/docs/src/ja/kits/react/create-react-app.md new file mode 100644 index 00000000..249c5780 --- /dev/null +++ b/docs/src/ja/kits/react/create-react-app.md @@ -0,0 +1,318 @@ +--- +locale: ja +--- +# Create React App Starter Kit + +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 Project + +If you are not familiar with typescript you can exclude the extra check `--template typescript` + + + + +```console:no-line-numbers +npx create-react-app permaweb-create-react-app --template typescript +``` + + + + +```console:no-line-numbers +yarn create react-app permaweb-create-react-app --template typescript +``` + + + + +### Change into the Project Directory + +```sh +cd permaweb-create-react-app +``` + +### Install react-router-dom + +You have to install this package to manage routing between different pages + + + + +```console:no-line-numbers +npm install react-router-dom --save +``` + + + + +```console:no-line-numbers +yarn add react-router-dom -D +``` + + + + +### Run the App + +Now we need to check if everything is working before jumping into next step, run + + + +```console:no-line-numbers +npm start +``` + + + + +```console:no-line-numbers +yarn start +``` + + + +This will start a new development server locally on your machine. By default it uses `PORT 3000`, if this PORT is already in use +it may ask you to switch to another available PORT in Terminal + +### Modify the package.json to contain the following config + +```json +{ + ... + "homepage": ".", +} +``` + +### Setup Routing + +Now modify the application and add a new route such as an about page, first create 2 more .tsx files. (if you have exluceded the extra check `--template typescript`, then your component file extension should be `.jsx or .js`) + +```sh +touch src/HomePage.tsx +touch src/About.tsx +``` + +#### HomePage.tsx + +```ts +import { Link } from "react-router-dom"; + +function HomePage() { + return ( +
+ Welcome to the Permaweb! + +
About
+ +
+ ); +} + +export default HomePage; +``` + +#### About.tsx + +```ts +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 the different pages + +```ts +import { HashRouter } from "react-router-dom"; +import { Routes, Route } from "react-router-dom"; + +import HomePage from "./HomePage"; +import About from "./About"; + +function App() { + return ( + + + } /> + } /> + + + ); +} + +export default App; +``` + +::: info Hash Routing +Note that we are wrapping the routes in a HashRouter and using the react-router-dom Link component to build links. +This is important on the permaweb in its current state, it will ensure the routes work properly because applications +are served on a path like `https://[gateway]/[TX]` +::: + +## Deploy Permanently + +### Generate Wallet + +We need the `arweave` package to generate a wallet + + + + +```console:no-line-numbers +npm install --save arweave +``` + + + + +```console:no-line-numbers +yarn add arweave -D +``` + + + + +then run this command in the terminal + +```sh +node -e "require('arweave').init({}).wallets.generate().then(JSON.stringify).then(console.log.bind(console))" > wallet.json +``` + +### Fund Wallet +You will need to fund your wallet with ArDrive Turbo credits. To do this, enter [ArDrive](https://app.ardrive.io) and import your wallet. +Then, you can purchase turbo credits for your wallet. + +### Setup Permaweb-Deploy + + + + +```console:no-line-numbers +npm install --global permaweb-deploy +``` + + + + +```console:no-line-numbers +yarn global add permaweb-deploy +``` + + + + + + +### Update package.json + +```json +{ + ... + "scripts": { + ... + "deploy": "DEPLOY_KEY=$(base64 -i wallet.json) permaweb-deploy --ant-process << ANT-PROCESS >> --deploy-folder build" + } + ... +} +``` + +::: info +Replace << ANT-PROCESS >> with your ANT process id. +::: + +### Run build + +Now it is time to generate a build, run + + + + +```console:no-line-numbers +npm run build +``` + + + + +```console:no-line-numbers +yarn build +``` + + + + +### Run deploy + +Finally we are good to deploy our first Permaweb Application + + + + +```console:no-line-numbers +npm run deploy +``` + + + + +```console:no-line-numbers +yarn deploy +``` + + + + +::: info ERROR +If you receive an error `Insufficient funds`, make sure you remembered to fund your deployment wallet with ArDrive Turbo credits. +::: + +### Response + +You should see a response similar to the following: + +```shell +Deployed TxId [<>] to ANT [<>] using undername [<>] +``` + +Your React app can be found at `https://arweave.net/<< tx-id >>`. + +::: tip SUCCESS +You should now have a React Application on the Permaweb! Great Job! +::: + +## Repository + +A completed version of this example is available here: [https://github.com/VinceJuliano/permaweb-create-react-app](https://github.com/VinceJuliano/permaweb-create-react-app) + +## Summary + +This is a Create React App version of publishing a React app on the permaweb. You may discover new ways to deploy an app on the permaweb or checkout other starter kits in this guide! diff --git a/docs/src/ja/kits/react/index.md b/docs/src/ja/kits/react/index.md new file mode 100644 index 00000000..a41159af --- /dev/null +++ b/docs/src/ja/kits/react/index.md @@ -0,0 +1,21 @@ +--- +locale: ja +--- +# React Starter Kits + +React is a popular library used for building user interfaces. Alongside other popular +tools such as create-react-app, a React project can be compiled into a bundle. This bundle +can be uploaded as a transaction to the permaweb where it will serve as a single page application. + +React Starter Kit Guides: + +* [Vite](./turbo.md) - React + Vite, publish with permaweb-deploy +* [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 +* 100% Front-end application (No Server-Side Backend) +* Applications are served from a sub-path (https://[gateway]/[TX_ID]) +::: diff --git a/docs/src/ja/kits/react/turbo.md b/docs/src/ja/kits/react/turbo.md new file mode 100644 index 00000000..e76cc32c --- /dev/null +++ b/docs/src/ja/kits/react/turbo.md @@ -0,0 +1,326 @@ +--- +locale: ja +--- +# React Starter Kit w/vite & ArDrive + +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 +npm create vite my-arweave-app --template react-ts +cd my-arweave-app +npm install +``` + + + + +```sh +yarn create vite my-arweave-app --template react-ts +cd my-arweave-app +yarn +``` + + + + +### Add React Router DOM + + + + +```sh +npm install 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; +} +``` + +Run the project + + + +```sh +npm run dev +``` + + + + +```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 +``` + +### Deploy Permanently + +#### Generate Wallet + +We need the `arweave` package to generate a wallet + + + + +```console:no-line-numbers +npm install --save arweave +``` + + + + +```console:no-line-numbers +yarn add arweave -D +``` + + + + +then run this command in the terminal + +```sh +node -e "require('arweave').init({}).wallets.generate().then(JSON.stringify).then(console.log.bind(console))" > wallet.json +``` + +#### Fund Wallet +You will need to fund your wallet with ArDrive Turbo credits. To do this, enter [ArDrive](https://app.ardrive.io) and import your wallet. +Then, you can purchase turbo credits for your wallet. + +#### Setup Permaweb-Deploy + + + + +```console:no-line-numbers +npm install --global permaweb-deploy +``` + + + + +```console:no-line-numbers +yarn global add permaweb-deploy +``` + + + + + + +#### Update package.json + +```json +{ + ... + "scripts": { + ... + "deploy": "DEPLOY_KEY=$(base64 -i wallet.json) permaweb-deploy --ant-process << ANT-PROCESS >> " + } + ... +} +``` + +::: info +Replace << ANT-PROCESS >> with your ANT process id. +::: + +#### Run build + +Now it is time to generate a build, run + + + + +```console:no-line-numbers +npm run build +``` + + + + +```console:no-line-numbers +yarn build +``` + + + + +#### Run deploy + +Finally we are good to deploy our first Permaweb Application + + + + +```console:no-line-numbers +npm run deploy +``` + + + + +```console:no-line-numbers +yarn deploy +``` + + + + +::: info ERROR +If you receive an error `Insufficient funds`, make sure you remembered to fund your deployment wallet with ArDrive Turbo credits. +::: + +#### Response + +You should see a response similar to the following: + +```shell +Deployed TxId [<>] to ANT [<>] using undername [<>] +``` + +Your React app can be found at `https://arweave.net/<< tx-id >>`. + +::: tip SUCCESS +You should now have a React Application on the Permaweb! Great Job! +::: +### Congrats! + +You just published a react application on the Permaweb! This app will be hosted forever! + diff --git a/docs/src/ja/kits/react/vite.md b/docs/src/ja/kits/react/vite.md new file mode 100644 index 00000000..3768777c --- /dev/null +++ b/docs/src/ja/kits/react/vite.md @@ -0,0 +1,348 @@ +--- +locale: ja +--- +# Vite Starter Kit + +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 Project + +if you are not familiar with typescript you can use the template "react" (`--template react`) + + + + +```console:no-line-numbers +npm create vite@latest my-arweave-app -- --template react-ts +``` + + + + +```console:no-line-numbers +yarn create vite my-arweave-app --template react-ts +``` + + + + +### Change into the Project Directory + +```sh +cd my-arweave-app +``` + +### Install react-router-dom + +You have to install this package to manage routing between different pages + + + + +```console:no-line-numbers +npm install react-router-dom --save +``` + + + + +```console:no-line-numbers +yarn add react-router-dom -D +``` + + + + +### Run the App + +Now we need to check if everything is going Perfect before jumping into next Step, Run + + + +```console:no-line-numbers +npm run dev +``` + + + + +```console:no-line-numbers +yarn dev +``` + + + +it will start a new development server locally on your machine by default it uses `PORT 3000` if this PORT is already in use +it may ask you to switch to another available PORT in Terminal + +### Setup wallet types + +If you want to use [ArConnect](https://arconnect.io), [Arweave.app](https://arweave.app) or other browser-based wallets, you can install ArConnect's types package to have declarations for `window.arweaveWallet`. + + + +```console:no-line-numbers +npm install arconnect -D +``` + + + + +```console:no-line-numbers +yarn add arconnect -D +``` + + + + +After installing the package, you'll need to add it to your `src/vite-env.d.ts` file. + +```ts +/// +``` + +### Setup Routing + +Now modify the application and add a new routes such as an about page, first create 2 more .tsx files. (if you have used the vanilla JS react template, then make sure your component file extension should be `.jsx or .js`) + +```sh +touch src/HomePage.tsx +touch src/About.tsx +``` + +#### HomePage.tsx + +```ts +import { Link } from "react-router-dom"; + +function HomePage() { + return ( +
+ Welcome to the Permaweb! + +
About
+ +
+ ); +} + +export default HomePage; +``` + +#### About.tsx + +```ts +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 + +```ts +import { HashRouter } from "react-router-dom"; +import { Routes, Route } from "react-router-dom"; + +import HomePage from "./HomePage"; +import About from "./About"; + +function App() { + return ( + + + } /> + } /> + + + ); +} + +export default App; +``` + +::: info Hash Routing +Note that we are wrapping the routes in a HashRouter and using the react-router-dom Link component to build links. +This is important on the permaweb in its current state, it will ensure the routes work properly because applications +are served on a path like `https://[gateway]/[TX]` +::: + +## Deploy Permanently + +### Generate Wallet + +We need the `arweave` package to generate a wallet + + + + +```console:no-line-numbers +npm install --save arweave +``` + + + + +```console:no-line-numbers +yarn add arweave -D +``` + + + + +then run this command in the terminal + +```sh +node -e "require('arweave').init({}).wallets.generate().then(JSON.stringify).then(console.log.bind(console))" > wallet.json +``` + +### Update vite config + +Make sure you add the `base` property to the vite config object and set it to an empty string. + +vite.config.ts + +```ts +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +// https://vitejs.dev/config/ +export default defineConfig({ + base: '', + plugins: [react()], +}) +``` + +### Setup Irys + +We need Irys to deploy our app to Permaweb it provides instant data upload and retrieval + + + + +```console:no-line-numbers +npm install --global @irys/sdk +``` + + + + +```console:no-line-numbers +yarn global add @irys/sdk +``` + + + + +::: info +You will need to add AR to this wallet and fund your Irys wallet to be able to upload this app. See [https://irys.xyz](https://irys.xyz) and [https://www.arweave.org/](https://www.arweave.org/) for more information. +::: + +### Update package.json + +```json +{ + ... + "scripts": { + ... + "deploy": "irys upload-dir ./dist -h https://node2.irys.xyz --wallet ./wallet.json -t arweave --index-file index.html --no-confirmation" + } + ... +} +``` + +### Run build + +Now its time to Generate Build + + + + +```console:no-line-numbers +npm run build +``` + + + + +```console:no-line-numbers +yarn build +``` + + + + +### Run deploy + +Finally we are good to deploy our First Permaweb Application + + + + +```console:no-line-numbers +npm run deploy +``` + + + + +```console:no-line-numbers +yarn deploy +``` + + + + +::: tip SUCCESS +You should now have a React Application on the Permaweb! Great Job! +::: + +::: tip ERROR +If you receive this error `Not enough funds to send data`, you have to fund some AR into your wallet, and then try to deploy it again. +::: + +How do I fund my irys account? + +Check balance + +```console:no-line-numbers +irys balance [Address] -h https://node2.irys.xyz -t arweave +``` + +Fund Irys + +```console:no-line-numbers +irys fund 20000000000 -t arweave -h https://node2.irys.xyz -w ./wallet.json +``` + +::: tip INFO +It will take about 20 to 30 minutes for the funds to be deposited into your irys account. +::: + + diff --git a/docs/src/ja/kits/svelte/index.md b/docs/src/ja/kits/svelte/index.md new file mode 100644 index 00000000..52662d6b --- /dev/null +++ b/docs/src/ja/kits/svelte/index.md @@ -0,0 +1,16 @@ +--- +locale: ja +--- +# Svelte Starter Kits + +Svelte is a framework that compiles to a JavaScript bundle and in the process removes the framework from the distribution of the app. This results in a much smaller footprint than other frameworks. Svelte is the perfect framework for Permaweb Applications. A Permaweb Application is built on the principles of a Single Page Application, but lives on the Arweave network and is distributed by Permaweb gateways. + +Svelte Starter Kit Guides: + +* [Minimal](./minimal.md) - the minimum required to build a svelte permaweb app +* [Vite](./vite.md) - Svelte, Typescript and Vite + +::: info Permaweb Application Constraints +* 100% Front-end application (No Server-Side Backend) +* Applications are served from a sub-path (https://[gateway]/[TX_ID]) +::: diff --git a/docs/src/ja/kits/svelte/minimal.md b/docs/src/ja/kits/svelte/minimal.md new file mode 100644 index 00000000..f01404ec --- /dev/null +++ b/docs/src/ja/kits/svelte/minimal.md @@ -0,0 +1,329 @@ +--- +locale: ja +--- +# Minimal Svelte Starter Kit + +This guide will walk you through in a step by step flow to configure your development environment to build and deploy a permaweb application. + +## Prerequisites + +- Know typescript +- NodeJS v18 or greater +- Know Svelte - [https://svelte.dev](https://svelte.dev) +- Know git and common terminal commands + +## Development Dependencies + +- TypeScript +- esbuild +- w3 + +## Steps + +### Create Project + + + + +```console:no-line-numbers +mkdir myproject +cd myproject +npm init -y +npm install -D svelte esbuild typescript esbuild-svelte tinro svelte-preprocess +``` + + + + + +```console:no-line-numbers +mkdir myproject +cd myproject +yarn init -y +yarn add -D svelte esbuild typescript esbuild-svelte tinro svelte-preprocess +``` + + + + +## Create buildscript.js + +```js +import fs from "fs"; +import esbuild from "esbuild"; +import esbuildSvelte from "esbuild-svelte"; +import sveltePreprocess from "svelte-preprocess"; + +//make sure the directoy exists before stuff gets put into it +if (!fs.existsSync("./dist/")) { + fs.mkdirSync("./dist/"); +} +esbuild + .build({ + entryPoints: [`./src/main.ts`], + bundle: true, + outdir: `./dist`, + mainFields: ["svelte", "browser", "module", "main"], + // logLevel: `info`, + splitting: true, + write: true, + format: `esm`, + plugins: [ + esbuildSvelte({ + preprocess: sveltePreprocess(), + }), + ], + }) + .catch((error, location) => { + console.warn(`Errors: `, error, location); + process.exit(1); + }); + +//use a basic html file to test with +fs.copyFileSync("./index.html", "./dist/index.html"); +``` + +## Modify package.json + +Set `type` to `module`, add a build script + +```json +{ + "type": "module" + ... + "scripts": { + "build": "node buildscript.js" + } +} +``` + +## Create `src` directory and some src files + +```sh +mkdir src +touch src/main.ts +touch src/app.svelte +touch src/counter.svelte +touch src/about.svelte +``` + +### Main.ts + +```ts +import App from "./app.svelte"; + +new App({ + target: document.body, +}); +``` + +### app.svelte + +```html + + + + +``` + +::: info Hash Routing +You will notice the `router.mode.hash()` setting in the script session, this is important to configure your application to use hash based routing, which will enable url support when running that application on a path, like `https://[gateway]/[TX]` +::: + +### counter.svelte + +```html + +

Hello Permaweb

+ +

Count: {count}

+``` + +### about.svelte + +```html +

About Page

+

Minimal About Page

+Home +``` + +## Add index.html + +```html + + + + + + + Vite + Svelte + TS + + +
+ + + +``` + + +## Deploy Permanently + +### Generate Wallet + +We need the `arweave` package to generate a wallet + + + + +```console:no-line-numbers +npm install --save arweave +``` + + + + +```console:no-line-numbers +yarn add arweave -D +``` + + + + +then run this command in the terminal + +```sh +node -e "require('arweave').init({}).wallets.generate().then(JSON.stringify).then(console.log.bind(console))" > wallet.json +``` + +### Fund Wallet +You will need to fund your wallet with ArDrive Turbo credits. To do this, enter [ArDrive](https://app.ardrive.io) and import your wallet. +Then, you can purchase turbo credits for your wallet. + +### Setup Permaweb-Deploy + + + + +```console:no-line-numbers +npm install --global permaweb-deploy +``` + + + + +```console:no-line-numbers +yarn global add permaweb-deploy +``` + + + + +### Update vite.config.ts + +```ts +import { defineConfig } from 'vite' +import { svelte } from '@sveltejs/vite-plugin-svelte' + +export default defineConfig({ + plugins: [svelte()], + base: './' +}) +``` + +### Update package.json + +```json +{ + ... + "scripts": { + ... + "deploy": "DEPLOY_KEY=$(base64 -i wallet.json) permaweb-deploy --ant-process << ANT-PROCESS >> --deploy-folder build" + } + ... +} +``` + +::: info +Replace << ANT-PROCESS >> with your ANT process id. +::: + +### Run build + +Now it is time to generate a build, run + + + + +```console:no-line-numbers +npm run build +``` + + + + +```console:no-line-numbers +yarn build +``` + + + + +### Run deploy + +Finally we are good to deploy our first Permaweb Application + + + + +```console:no-line-numbers +npm run deploy +``` + + + + +```console:no-line-numbers +yarn deploy +``` + + + + +::: info ERROR +If you receive an error `Insufficient funds`, make sure you remembered to fund your deployment wallet with ArDrive Turbo credits. +::: + +### Response + +You should see a response similar to the following: + +```shell +Deployed TxId [<>] to ANT [<>] using undername [<>] +``` + +Your Svelte app can be found at `https://arweave.net/<< tx-id >>`. + +::: tip SUCCESS +You should now have a Svelte Application on the Permaweb! Great Job! +::: + +## Repository + +A completed version of this example is available here: [https://github.com/twilson63/permaweb-minimal-svelte-starter](https://github.com/twilson63/permaweb-minimal-svelte-starter) + +## Summary + +This is a minimal version of publishing a Svelte application on the permaweb, but you may want more features, like hot-reloading and tailwind, etc. Check out `hypar` for a turnkey starter kit. [HypAR](https://github.com/twilson63/hypar) diff --git a/docs/src/ja/kits/svelte/vite.md b/docs/src/ja/kits/svelte/vite.md new file mode 100644 index 00000000..d2d5d379 --- /dev/null +++ b/docs/src/ja/kits/svelte/vite.md @@ -0,0 +1,338 @@ +--- +locale: ja +--- +# Svelte/Vite Starter Kit + +Svelte is the framework that compiles out of the way, that results is small packages, which is perfect for the permaweb. As developers, we value Dev Experience as much as we value User Experience. This kit uses the `vite` bundle system to give developers a great DX experience. + +## Installing vite with svelte and typescript + + + + +```console +npm create vite@latest my-perma-app --template svelte-ts +``` + + + + +```console +npm create vite@latest my-perma-app -- --template svelte-ts +``` + + + + +```console +yarn create vite my-perma-app --template svelte-ts +``` + + + + +```console +pnpm create vite my-perma-app --template svelte-ts +``` + + + + +## Project Info + +The vite build system places your index.html file in the root directory, this is where you would include any css or global script dependencies if needed. For more information about the vite project layout check out the [vite documentation](https://vitejs.dev/guide/#index-html-and-project-root) + +## Setup hash-router + +To setup the hash-router we will use [tinro](https://github.com/AlexxNB/tinro). `tinro` is a tiny declarative routing library, that is similar to React Router. + + + + +```console +npm install --save-dev tinro +``` + + + + +```console +yarn add -D tinro +``` + + + + +## Telling Svelte to use hash routing + +In the `src/App.svelte` file, you want to configure the router to use the hash routing mode. + +```html + +
+``` + +The `router.mode.hash` function turns on hash router mode. +The `router.subscribe` callback is nice to reset the page to the top on page transfers + +## Adding some transition components + +These component will manage the transition between one page to another page when routing. + +Create a directory under the `src` directory called components and add these two files: + +### announcer.svelte + +```html + + +
{#key current} Navigated to {current} {/key}
+ + +``` + +> This component is for screen readers announcing when a page changes + +### transition.svelte + +```html + + +{#key $router.path} +
+ +
+{/key} +``` + +> This component adds a fade to the page transition + +## Adding Routes to the app + +```html + + + + + + + + + + +``` + +Adding the Announcer and Transition components to our routing system will handle announcing page transitions as well as animating the transition. + +## Create some pages + +### home.svelte + +```html + +

Hello Permaweb

+ +

Count: {count}

+About +``` + +### about.svelte + +```html +

About Page

+

Svelte/Vite About Page

+Home +``` + +### Modify `App.svelte` + +```html + +... +``` + +## Deploy Permanently + +### Generate Wallet + +We need the `arweave` package to generate a wallet + + + + +```console:no-line-numbers +npm install --save arweave +``` + + + + +```console:no-line-numbers +yarn add arweave -D +``` + + + + +then run this command in the terminal + +```sh +node -e "require('arweave').init({}).wallets.generate().then(JSON.stringify).then(console.log.bind(console))" > wallet.json +``` + +### Fund Wallet +You will need to fund your wallet with ArDrive Turbo credits. To do this, enter [ArDrive](https://app.ardrive.io) and import your wallet. +Then, you can purchase turbo credits for your wallet. + +### Setup Permaweb-Deploy + + + + +```console:no-line-numbers +npm install --global permaweb-deploy +``` + + + + +```console:no-line-numbers +yarn global add permaweb-deploy +``` + + + + +### Update vite.config.ts + +```ts +import { defineConfig } from 'vite' +import { svelte } from '@sveltejs/vite-plugin-svelte' + +export default defineConfig({ + plugins: [svelte()], + base: './' +}) +``` + +### Update package.json + +```json +{ + ... + "scripts": { + ... + "deploy": "DEPLOY_KEY=$(base64 -i wallet.json) permaweb-deploy --ant-process << ANT-PROCESS >> --deploy-folder build" + } + ... +} +``` + +::: info +Replace << ANT-PROCESS >> with your ANT process id. +::: + +### Run build + +Now it is time to generate a build, run + + + + +```console:no-line-numbers +npm run build +``` + + + + +```console:no-line-numbers +yarn build +``` + + + + +### Run deploy + +Finally we are good to deploy our first Permaweb Application + + + + +```console:no-line-numbers +npm run deploy +``` + + + + +```console:no-line-numbers +yarn deploy +``` + + + + +::: info ERROR +If you receive an error `Insufficient funds`, make sure you remembered to fund your deployment wallet with ArDrive Turbo credits. +::: + +### Response + +You should see a response similar to the following: + +```shell +Deployed TxId [<>] to ANT [<>] using undername [<>] +``` + +Your Svelte app can be found at `https://arweave.net/<< tx-id >>`. + +::: tip SUCCESS +You should now have a Svelte Application on the Permaweb! Great Job! +::: + +## Repository + +A completed version of this example is available here: [https://github.com/twilson63/svelte-ts-vite-example](https://github.com/twilson63/svelte-ts-vite-example) + +## Summary + +This is a minimal version of publishing a Svelte application on the permaweb, but you may want more features, like hot-reloading and tailwind, etc. Check out `hypar` for a turnkey starter kit. [HypAR](https://github.com/twilson63/hypar) diff --git a/docs/src/ja/kits/vue/create-vue.md b/docs/src/ja/kits/vue/create-vue.md new file mode 100644 index 00000000..461a39a6 --- /dev/null +++ b/docs/src/ja/kits/vue/create-vue.md @@ -0,0 +1,279 @@ +--- +locale: ja +--- +# Create Vue Starter Kit + +This guide will provide step-by-step instructions to configure your development environment and build a permaweb Vue application. + +## Prerequisites + +- Basic Typescript Knowledge (Not Mandatory) - [Learn Typescript](https://www.typescriptlang.org/docs/) +- NodeJS v16.15.0 or greater - [Download NodeJS](https://nodejs.org/en/download/) +- Knowledge of Vue.js (preferably Vue 3) - [Learn Vue.js](https://vuejs.org/) +- Know git and common terminal commands + +## Development Dependencies + +- TypeScript (Optional) +- NPM or Yarn Package Manager + +## Steps + +### Create Project + +The following command installs and launches create-vue, the official scaffolding tool for Vue projects. + + + + +```console:no-line-numbers +npm init vue@latest +``` + + + + +```console:no-line-numbers +yarn create vue +``` + + + + +During the process, you'll be prompted to select optional features such as TypeScript and testing support. I recommend selecting the `Vue Router` with yes, the rest can be selected as per your preference. + +```console:no-line-numbers +✔ Project name: … +✔ Add TypeScript? … No / Yes +✔ Add JSX Support? … No / Yes +✔ Add Vue Router for Single Page Application development? … No / *Yes* +✔ Add Pinia for state management? … No / Yes +✔ Add Vitest for Unit testing? … No / Yes +✔ Add Cypress for both Unit and End-to-End testing? … No / Yes +✔ Add ESLint for code quality? … No / Yes +✔ Add Prettier for code formatting? … No / Yes +``` + +### Change into the Project Directory + +```sh +cd +``` + +### Install Dependencies + + + + +```console:no-line-numbers +npm install +``` + + + + +```console:no-line-numbers +yarn +``` + + + + +### Setup Router + +Vue Router is the official router for Vue.js and seamlessly integrates with Vue. To make it work with Permaweb, switch from a browser history router to a hash router as the URL cannot be sent to the server. Change `createWebHistory` to `createWebHashHistory` in your `src/router/index.ts` or `src/router/index.js` file. + +```ts +import { createRouter, createWebHashHistory } from "vue-router"; +import HomeView from "../views/HomeView.vue"; + +const router = createRouter({ + history: createWebHashHistory(import.meta.env.BASE_URL), + routes: [ + { + path: "/", + name: "home", + component: HomeView, + }, + { + path: "/about", + name: "about", + component: () => import("../views/AboutView.vue"), + }, + ], +}); + +export default router; +``` + +### Setup Build + +Configure the build process in the `vite.config.ts` or `vite.config.js` file. To serve Permaweb apps from a sub-path (https://[gateway]/[TX_ID]), update the base property to ./ in the config file. + +```ts +export default defineConfig({ + base: './', + ... +}) +``` + +### Run the App + +Before moving forward, it is crucial to verify that everything is working correctly. Run a check to ensure smooth progress. + + + + +```console:no-line-numbers +npm run dev +``` + + + + +```console:no-line-numbers +yarn dev +``` + + + +it will start a new development server locally on your machine by default it uses `PORT 5173`. If this PORT is already in use it may increase the PORT number by 1 (`PORT 5174`) and try again. + +## Deploy Permanently + +### Generate Wallet + +We need the `arweave` package to generate a wallet + + + + +```console:no-line-numbers +npm install --save arweave +``` + + + + +```console:no-line-numbers +yarn add arweave -D +``` + + + + +then run this command in the terminal + +```sh +node -e "require('arweave').init({}).wallets.generate().then(JSON.stringify).then(console.log.bind(console))" > wallet.json +``` + +### Fund Wallet +You will need to fund your wallet with ArDrive Turbo credits. To do this, enter [ArDrive](https://app.ardrive.io) and import your wallet. +Then, you can purchase turbo credits for your wallet. + +### Setup Permaweb-Deploy + + + + +```console:no-line-numbers +npm install --global permaweb-deploy +``` + + + + +```console:no-line-numbers +yarn global add permaweb-deploy +``` + + + + +### Update package.json + +```json +{ + ... + "scripts": { + ... + "deploy": "DEPLOY_KEY=$(base64 -i wallet.json) permaweb-deploy --ant-process << ANT-PROCESS >> --deploy-folder build" + } + ... +} +``` + +::: info +Replace << ANT-PROCESS >> with your ANT process id. +::: + +### Run build + +Now it is time to generate a build, run + + + + +```console:no-line-numbers +npm run build +``` + + + + +```console:no-line-numbers +yarn build +``` + + + + +### Run deploy + +Finally we are good to deploy our first Permaweb Application + + + + +```console:no-line-numbers +npm run deploy +``` + + + + +```console:no-line-numbers +yarn deploy +``` + + + + +::: info ERROR +If you receive an error `Insufficient funds`, make sure you remembered to fund your deployment wallet with ArDrive Turbo credits. +::: + +### Response + +You should see a response similar to the following: + +```shell +Deployed TxId [<>] to ANT [<>] using undername [<>] +``` + +Your Vue app can be found at `https://arweave.net/<< tx-id >>`. + +::: tip SUCCESS +You should now have a Vue Application on the Permaweb! Great Job! +::: + +## Repository + +A fully functional example in JavaScript or TypeScript can be found at this location. + +- Repository: [https://github.com/ItsAnunesS/permaweb-create-vue-starter](https://github.com/ItsAnunesS/permaweb-create-vue-starter) + +## Summary + +This guide provides a simple step-by-step method to publish a Vue.js app on the Permaweb using Create Vue. If you need additional features Tailwind, consider exploring alternative starter kits listed in the guide to find a suitable solution for your requirements. diff --git a/docs/src/ja/kits/vue/index.md b/docs/src/ja/kits/vue/index.md new file mode 100644 index 00000000..6b7b5d5a --- /dev/null +++ b/docs/src/ja/kits/vue/index.md @@ -0,0 +1,18 @@ +--- +locale: ja +--- +# Vue Starter Kits + +Vue.js is a progressive JavaScript framework that allows building user interfaces. Unlike other frameworks, it compiles the template into JavaScript during runtime, resulting in a smaller file size and faster performance. Vue is ideal for building performant and scalable single-page applications, making it a popular choice among front-end developers. + +Vue Starter Kit Guides: + +**Note:** - Since `npm init vue@latest`alredy uses vite, we have not included a vite guide for Vue. + +- [Create Vue App](./create-vue.md) - Use Create Vue to efficiently build a Vue.js-based with TypeScript and Vite modern permaweb application + +::: info Permaweb Application Constraints + +- 100% Front-end application (No Server-Side Backend) +- Applications are served from a sub-path (https://[gateway]/[TX_ID]) + ::: From db9b77d5b35506533a35594c035d621eecc35914 Mon Sep 17 00:00:00 2001 From: kaz <87490841+0xkaz@users.noreply.github.com> Date: Tue, 8 Oct 2024 12:45:47 +0800 Subject: [PATCH 06/18] add src/ja/references --- docs/src/ja/references/README.md | 14 +++ docs/src/ja/references/bundling.md | 196 +++++++++++++++++++++++++++++ docs/src/ja/references/gql.md | 155 +++++++++++++++++++++++ docs/src/ja/references/http-api.md | 115 +++++++++++++++++ 4 files changed, 480 insertions(+) create mode 100644 docs/src/ja/references/README.md create mode 100644 docs/src/ja/references/bundling.md create mode 100644 docs/src/ja/references/gql.md create mode 100644 docs/src/ja/references/http-api.md diff --git a/docs/src/ja/references/README.md b/docs/src/ja/references/README.md new file mode 100644 index 00000000..08cd3a2f --- /dev/null +++ b/docs/src/ja/references/README.md @@ -0,0 +1,14 @@ +--- +locale: ja +title: Permaweb Cookbook - References +--- + +# References + +References for learning in depth about various topics like Bundling, GraphQL, and HTTP APIs. + +- [Bundling](bundling.md) +- [GraphQL](gql.md) +- [HTTP API](http-api) + +> Do you think a permaweb guide is missing? Create a issue at [Github](https://github.com/twilson63/permaweb-cookbook/issues) or consider [contributing](../getting-started/contributing.md) diff --git a/docs/src/ja/references/bundling.md b/docs/src/ja/references/bundling.md new file mode 100644 index 00000000..97c6d9bc --- /dev/null +++ b/docs/src/ja/references/bundling.md @@ -0,0 +1,196 @@ +--- +locale: ja +--- +# Bundling + +Before getting started with any of the below references, make sure you've read +[Bundles and Bundling](/concepts/bundles.md) from [Core Concepts](/concepts/). + +## Setup + +We'll be using the [arbundles](https://github.com/irys-xyz/arbundles) +library which is a JavaScript implementation of the +[ANS-104 specification](https://github.com/ArweaveTeam/arweave-standards/blob/master/ans/ANS-104.md). ArBundles comes with TypeScript support. + +**Note:** This reference assumes a NodeJS environment. Browser compatibility +with ArBundles is possible but currently requires wrangling `Buffer` polyfills. +This will be addressed in a future version of ArBundles. + + + + +```console +npm install arbundles +``` + + + + +```console +yarn add arbundles +``` + + + + +## Create a `Signer` + +In order to create Data Items, we need to first create a `Signer`. + + + + +```ts:no-line-numbers +import { ArweaveSigner, JWKInterface } from 'arbundles' + +const jwk: JWKInterface = { /* your Arweave jwk keyfile */ } +const signer = new ArweaveSigner(jwk) +``` + + + + +## Create a `DataItem` + +To create a `DataItem`, we pass some data along with a `Signer` to the +`createData()` utility function. + +**Note:** While the `createData()` utility function requires a `Signer`, the +returned `DataItem` is **not yet signed** and contains a placeholder ID. + + + + +```ts:no-line-numbers +import { createData } from 'arbundles' + +// Create a DataItem from a string +const myStringData: string = 'Hello, Permaweb!' +const myDataItem = createData(myStringData, signer) + +// Create a DataItem from a Buffer or Uint8Array +const myBufferData: Buffer | Uint8Array = Buffer.from('Hello, Permaweb!') +const myOtherDataItem = createData(myBufferData, signer) + +/* !!!WARNING!!! DATA ITEM ARE NOT YET SIGNED! */ +``` + + + + +## Create a `Bundle` + +To create a Bundle, we pass our `DataItem` to the `bundleAndSignData` utility +function and `await` the result. + +**Note:** A `DataItem` passed to this utility function can +be pre-signed as detailed in a later section. + + + + +```ts:no-line-numbers +import { bundleAndSignData } from 'arbundles' + +const dataItems = [ myDataItem, myOtherDataItem ] +const bundle = await bundleAndSignData(dataItems, signer) +``` + + + + +## Create a `Transaction` from a `Bundle` + +In order to post a `Bundle` to Arweave there ultimately needs to be a root +Layer 1 `Transaction` containing the `Bundle`. + + + + +```ts:no-line-numbers +import Arweave from 'Arweave' + +// Set up an Arweave client +const arweave = new Arweave({ + protocol: 'https', + host: 'arweave.net', + port: 443 +}) + +// Create using ArweaveJS +const tx = await arweave.createTransaction({ data: bundle.getRaw() }, jwk) + +// OR Create from the Bundle itself +const tx = await bundle.toTransaction({}, arweave, jwk) + +// Sign the transaction +await arweave.transactions.sign(tx, jwk) + +// Post tx to Arweave with your preferred method! +``` + + + + +## Sign a `DataItem` + +In order to get a `DataItem`'s ID (e.g. for use in a manifest also contained in the same bundle), we must call and `await` its `.sign()` method. If signing +is successful, the `DataItem` will now have their unique ID and signature and +are ready to be added to a `Bundle`. + + + + +```ts:no-line-numbers +await myDataItem.sign(signer) +await myOtherDataItem.sign(signer) + +const id1 = myDataItem.id +const id2 = myOtherDataItem.id +``` + + + + +## Tagging `DataItem` + +`DataItem` can themselves have tags just as Layer 1 Arweave Transactions can +have tags. Once an Arweave Gateway unbundles and indexes the `Bundle`, these +`DataItem` tags become queryable the same way a Layer 1 Arweave Transaction's +tags are queryable. + + + + +```ts:no-line-numbers + const myStringData: string = 'Hello, Permaweb!' + const tags = [ + { name: 'Title', value: 'Hello Permaweb' }, + { name: 'Content-Type', value: 'text/plain' } + ] + const myDataItem = createData(myStringData, signer, { tags }) +``` + + + + +## Consuming Bundles + +**WARNING:** Be sure that the `Buffer` you pass to `new Bundle(buffer)` does +contain a `Bundle`, otherwise, very small `Buffer` being passed will crash +the thread. **DO NOT** use `new Bundle(buffer)` in a production environment. +Instead, see the +[streamable interface](https://github.com/irys-xyz/arbundles/blob/master/src/stream) +in the ArBundles repository. + + + + +```ts:no-line-numbers + const bundle = new Bundle(Buffer.from(tx.data)) + const myDataItem = bundle.get(0) + const myOtherDataItem = bundle.get(1) +``` + + + diff --git a/docs/src/ja/references/gql.md b/docs/src/ja/references/gql.md new file mode 100644 index 00000000..70ce2857 --- /dev/null +++ b/docs/src/ja/references/gql.md @@ -0,0 +1,155 @@ +--- +locale: ja +--- +# Complete GraphQL Structure for Transactions +The following GraphQL query returns all of the properties of a transaction captured by the indexing service. + +```graphql:no-line-numbers +query { + transactions { + + pageInfo { + hasNextPage + } + edges { + cursor + node { + id + anchor + signature + recipient + owner { + address + key + } + fee { + winston + ar + } + quantity { + winston + ar + } + data { + size + type + } + tags { + name + value + } + block { + id + timestamp + height + previous + } + parent { + id + } + } + } + } +} + +``` + +## Pagination +By default, GraphQL queries return the first 10 results. Larger result sets can be requested by adding the `first: X` option (where `X` is a value from 1 to 100) to the transactions query. +```graphql{4} +query +{ + transactions( + first:100, + tags: [ + { + name: "App-Name", + values: ["PublicSquare"] + } + ] + ) + { + edges { + node { + id + tags { + name + value + } + } + } + } +} + +``` +If there are more than 100 items in the result set, subsequent pages of results can be retrieved by using a cursor. +```graphql{13-15,17} +query +{ + transactions( + first:100, + tags: [ + { + name: "App-Name", + values: ["PublicSquare"] + } + ] + ) + { + pageInfo { + hasNextPage + } + edges { + cursor + node { + id + tags { + name + value + } + } + } + } +} +``` +If there are subsequent result pages `hasNextPage` will have a value of `true`. Take the `cursor` value of the last item in the result set and use it as the value for the `after` query parameter. +```graphql{5} +query +{ + transactions( + first:100, + after: "WyIyMDIyLTEyLTMwVDE2OjQ0OjIzLjc0OVoiLDEwMF0=", + tags: [ + { + name: "App-Name", + values: ["PublicSquare"] + } + ] + ) + { + pageInfo { + hasNextPage + } + edges { + cursor + node { + id + tags { + name + value + } + } + } + } +} +``` +To retrieve the entire results set, repeat the `after` query with an updated `cursor` value from the last item of each page until `hasNextPage` is `false`. + +## Rate Limiting +Indexing services will implement rate limiting to prevent attacks and abuse of their services. The `arweave.net/graphql` service limits GraphQL queries to 600 queries every 5 minutes (per IP address). Always check the results of your queries to see if they have a status code in the 200s before parsing the response. A HTTP Status code of 429 will indicate rate limiting is being enforced. A HTTP Status code of 503 usually indicates that the query result set is too large for `arweave.net/graphql`. + +## Resources +* For a more complete listing of the Arweave GraphQL schema see the [Arweave GraphQL Guide](https://gql-guide.arweave.dev) +* [ArDB package](../guides/querying-arweave/ardb.md) +* [ar-gql package](../guides/querying-arweave/ar-gql.md) +* For a general guide to graphql [graphql.org/learn](https://graphql.org/learn) is a good starting point diff --git a/docs/src/ja/references/http-api.md b/docs/src/ja/references/http-api.md new file mode 100644 index 00000000..7e196f0a --- /dev/null +++ b/docs/src/ja/references/http-api.md @@ -0,0 +1,115 @@ +--- +locale: ja +--- + +# Arweave peer HTTP API +For a more complete reference of the Arweave peer HTTP APIs see the [linked guide](https://docs.arweave.org/developers/server/http-api). + +The endpoints present here are for done so for convenance and/or because they were omitted from the [linked guide](https://docs.arweave.org/developers/server/http-api). + +::: info +Permaweb gateway services are typically backed by one or more full Arweave nodes. As a result they will often expose the node endpoints under the `/tx/` path and routing the request directly to an Arweave node. This means these methods can often be called on a gateway as well as directly on an arweave peer/node. +::: + +
+ +### Get by field +Retrieves the header fields associated with a transaction directly from an Arweave node. Can be used to retrieve the transaction data as well, if the node +stores the chunks, and the data is small enough for the node to serve. + +`https://arweave.net/tx/TX_ID/FIELD` + +Available fields: id | last_tx | owner | target | quantity | data | reward | signature +```js +const result = await fetch('https://arweave.net/tx/sHqUBKFeS42-CMCvNqPR31yEP63qSJG3ImshfwzJJF8/data') +// fields are returned in base64url format, so we need to decode +const base64url = await result.text() +const jsonData = JSON.parse( Arweave.utils.b64UrlToString(base64url) ) +console.log(jsonData) +``` + +
+Click to view example result + +```json +{ + "ticker":"ANT-PENDING", + "name":"pending", + "owner":"NlNd_PcajvxAkOweo7rZHJKiIJ7vW1WXt9vb6CzGmC0", + "controller":"NlNd_PcajvxAkOweo7rZHJKiIJ7vW1WXt9vb6CzGmC0", + "evolve":null, + "records": { + "@":"As-g0fqvO_ALZpSI8yKfCZaFtnmuwWasY83BQ520Duw" + }, + "balances":{"NlNd_PcajvxAkOweo7rZHJKiIJ7vW1WXt9vb6CzGmC0":1} +} +``` +
+
+ +### Get Wallet Balance +The returned balance is in Winston. To get balance in $AR, divide the balance by 1000000000000 +`https://arweave.net/wallet/ADDRESS/balance` +```js +const res = await axios.get(`https://arweave.net/wallet/NlNd_PcajvxAkOweo7rZHJKiIJ7vW1WXt9vb6CzGmC0/balance`) +console.log(res) +console.log(res.data / 1000000000000) + +6638463438702 // Winston +6.638463438702 // $AR +``` +
+ +### Get transaction status +`https://arweave.net/tx/TX_ID/status` +::: tip +This endpoint only supports base Arweave transactions not bundled transactions. Transactions must be confirmed on-chain before their status will be available. +::: + +```js + const response = await fetch('https://arweave.net/tx/EiRSQExb5HvSynpn0S7_dDnwcws1AJMxoYx4x7nWoho/status') + const result = await response.json() + console.log(JSON.stringify(result)) +``` +
+Click to view example result + +```json +{ + "block_height":1095552,"block_indep_hash":"hyhLEyOw5WcIhZxq-tlnxhnEFgKChKHFrMoUdgIg2Sw0WoBMbdx6uSJKjxnQWon3","number_of_confirmations":10669 +} + +``` +
+
+ + + +### Get network information + +```js +const res = await axios.get('https://arweave.net/info') +console.log(res.data) +``` + +
+Click to view example result + +```json +{ + "network": "arweave.N.1", + "version": 5, + "release": 53, + "height": 1106211, + "current": "bqPU_7t-TdRIxgsja0ftgEMNnlGL6OX621LPJJzYP12w-uB_PN4F7qRYD-DpIuRu", + "blocks": 1092577, + "peers": 13922, + "queue_length": 0, + "node_state_latency": 0 +} + +``` +
+
+ + From 216ee8f36561322ac001d46150a8366084254fca Mon Sep 17 00:00:00 2001 From: kaz <87490841+0xkaz@users.noreply.github.com> Date: Tue, 8 Oct 2024 12:48:27 +0800 Subject: [PATCH 07/18] update languages/strings/ja.json --- docs/languages/strings/ja.json | 136 ++++++++++++++++----------------- 1 file changed, 68 insertions(+), 68 deletions(-) diff --git a/docs/languages/strings/ja.json b/docs/languages/strings/ja.json index 92c2083a..c530aaec 100644 --- a/docs/languages/strings/ja.json +++ b/docs/languages/strings/ja.json @@ -1,72 +1,72 @@ { - "cookbook-meetup-notification": "Cookbook Community Meetup - 12pm ET / 5pm GMT every week on Wednesdays", - "edit": "Edit", - "language": "Language", - "docs": "Docs", - "contributors": "Contributors", - "last-updated": "Last Updated", - "featured-contributors": "Featured Contributors", - "featured-contributors-action": "See All Contributors", - "onboarding-title": "Build on the Permaweb.", - "onboarding-desc": "A curated collection of developer guides & more to build on the Permaweb. All in one place.", - "get-started": "Get Started", - "first-time": "First Time?", - "hello-world": "Hello World", - "hello-world-card-desc": "Getting started with the Permaweb", - "hello-world-card-action": "Let's Go", - "core-concepts": "Core Concepts", - "core-concepts-card-desc": "Comprehensive building blocks for developers", - "core-concepts-card-action": "Get Started", - "guides": "Guides", - "guides-card-desc": "Specific deployments made easy", - "guides-card-action": "Get Started", - "contribute": "Contribute", - "contribute-card-desc": "Share your knowledge", - "contribute-card-action": "Go to Github repo", - "documentation": "Documentation", - "getting-started": "Getting Started", - "getting-started-welcome": "Welcome", - "getting-started-hw-cli": "Hello World (CLI)", - "getting-started-hw-code": "Hello World (With Code)", - "getting-started-hw-node": "Hello World (Nodejs)", - "getting-started-contributing": "Contributing", - "concepts": "Core Concepts", - "concepts-post-transactions": "Posting Transactions", - "concepts-tags": "Metadata (Tags)", - "concepts-querying": "Querying", - "concepts-fetching-data": "Fetching Data", - "concepts-transaction-types": "Transaction Types", - "concepts-bundles": "Bundles", - "concepts-path-manifests": "Path Manifests", - "concepts-wallets-and-keys": "Wallets and Keys", - "concepts-permaweb-applications": "Permaweb Applications", - "concepts-gateways": "Gateway Services", - "concepts-bundlers": "Bundling Services", - "concepts-atomic-tokens": "Atomic Tokens", - "concepts-vouch": "Vouch", + "cookbook-meetup-notification": "クックブックコミュニティミートアップ - 毎週水曜日の午後12時（ET）/ 午後5時（GMT）", + "edit": "編集", + "language": "言語", + "docs": "ドキュメント", + "contributors": "貢献者", + "last-updated": "最終更新", + "featured-contributors": "注目の貢献者", + "featured-contributors-action": "すべての貢献者を見る", + "onboarding-title": "パーマウェブ上で構築する。", + "onboarding-desc": "パーマウェブ上で構築するための開発者ガイドとその他のキュレーションされたコレクション。すべてが一か所に。", + "get-started": "始める", + "first-time": "初めてですか？", + "hello-world": "こんにちは世界", + "hello-world-card-desc": "パーマウェブの始め方", + "hello-world-card-action": "さあ行こう", + "core-concepts": "コアコンセプト", + "core-concepts-card-desc": "開発者のための包括的な構成要素", + "core-concepts-card-action": "始める", + "guides": "ガイド", + "guides-card-desc": "特定の展開を簡単に", + "guides-card-action": "始める", + "contribute": "貢献する", + "contribute-card-desc": "知識を共有する", + "contribute-card-action": "GitHubリポジトリへ行く", + "documentation": "ドキュメンテーション", + "getting-started": "始める", + "getting-started-welcome": "ようこそ", + "getting-started-hw-cli": "こんにちは世界（CLI）", + "getting-started-hw-code": "こんにちは世界（コードあり）", + "getting-started-hw-node": "こんにちは世界（Nodejs）", + "getting-started-contributing": "貢献する", + "concepts": "コアコンセプト", + "concepts-post-transactions": "トランザクションの投稿", + "concepts-tags": "メタデータ（タグ）", + "concepts-querying": "クエリ", + "concepts-fetching-data": "データの取得", + "concepts-transaction-types": "トランザクションの種類", + "concepts-bundles": "バンドル", + "concepts-path-manifests": "パスマニフェスト", + "concepts-wallets-and-keys": "ウォレットとキー", + "concepts-permaweb-applications": "パーマウェブアプリケーション", + "concepts-gateways": "ゲートウェイサービス", + "concepts-bundlers": "バンドリングサービス", + "concepts-atomic-tokens": "アトミックトークン", + "concepts-vouch": "保証", "guides-arprofile": "ArProfile", - "guides-dns-integration": "DNS Integration", - "guides-server-side": "Server Side", + "guides-dns-integration": "DNS統合", + "guides-server-side": "サーバーサイド", "guides-spheron": "Spheron", - "guides-atomic-token": "Atomic Tokens", - "guides-atomic-asset": "Atomic Assets", - "guides-deploying-apps": "Deploying Apps", - "guides-github-action": "Github Action", - "guides-deploying-manifests": "Deploying PathManifests", - "guides-deploying-psts": "Deploying PSTs", - "guides-execution-machine": "Execution Machine", - "guides-sdk-intro": "Execution Machine SDK", - "guides-sdk-deploy": "Deploy with SDK", - "guides-sdk-write": "Write with SDK", - "guides-sdk-read": "Read with SDK", - "guides-search-indexing-service": "Search Indexing Service", - "guides-intro": "Introduction", - "guides-warp-deploying-contracts": "Deploying Contracts", - "guides-warp-read-state": "Read Contract State", - "guides-warp-write-interactions": "Write Contract Interactions", - "guides-warp-evolve": "Evolve Contract", - "guides-api-token": "Api Token", - "guides-testing": "Testing", - "references": "References", - "kits": "Starter Kits" + "guides-atomic-token": "アトミックトークン", + "guides-atomic-asset": "アトミックアセット", + "guides-deploying-apps": "アプリの展開", + "guides-github-action": "GitHubアクション", + "guides-deploying-manifests": "パスマニフェストの展開", + "guides-deploying-psts": "PSTの展開", + "guides-execution-machine": "実行マシン", + "guides-sdk-intro": "実行マシンSDK", + "guides-sdk-deploy": "SDKで展開", + "guides-sdk-write": "SDKで書く", + "guides-sdk-read": "SDKで読む", + "guides-search-indexing-service": "検索インデックスサービス", + "guides-intro": "導入", + "guides-warp-deploying-contracts": "コントラクトの展開", + "guides-warp-read-state": "コントラクトの状態を読む", + "guides-warp-write-interactions": "コントラクトの相互作用を書く", + "guides-warp-evolve": "コントラクトを進化させる", + "guides-api-token": "APIトークン", + "guides-testing": "テスト", + "references": "リファレンス", + "kits": "スターターキット" } \ No newline at end of file From 7539fbc2cc2a080c7f588b43c05b28251545b397 Mon Sep 17 00:00:00 2001 From: kaz <87490841+0xkaz@users.noreply.github.com> Date: Wed, 9 Oct 2024 12:50:04 +0800 Subject: [PATCH 08/18] translate ja/getting-started --- docs/src/ja/getting-started/README.md | 39 ++++++------ docs/src/ja/getting-started/contributing.md | 60 +++++++++---------- .../ja/getting-started/quick-starts/hw-cli.md | 19 +++--- .../getting-started/quick-starts/hw-code.md | 42 ++++++------- .../quick-starts/hw-no-code.md | 28 ++++----- .../getting-started/quick-starts/hw-nodejs.md | 26 ++++---- docs/src/ja/getting-started/welcome.md | 18 +++--- 7 files changed, 115 insertions(+), 117 deletions(-) diff --git a/docs/src/ja/getting-started/README.md b/docs/src/ja/getting-started/README.md index 7aa3e0db..597fd85f 100644 --- a/docs/src/ja/getting-started/README.md +++ b/docs/src/ja/getting-started/README.md @@ -2,38 +2,37 @@ locale: ja --- -# Cooking with the Permaweb +# パーマウェブでの料理 -The Permaweb Cookbook is a developer resource that provides the essential concepts and references for buiding applications on the Permaweb. Each concept and reference will focus on specific aspects of the Permaweb development ecosystem while providing additional details and usage examples. +パーマウェブクックブックは、パーマウェブ上でアプリケーションを構築するための基本概念とリファレンスを提供する開発者向けリソースです。各概念とリファレンスは、パーマウェブ開発エコシステムの特定の側面に焦点を当てながら、追加の詳細や使用例を提供します。 -## Developers +## 開発者 -Welcome to the Arweave development community, where the past is forever etched in the blockchain and the future is full of endless possibilities. Let's build the decentralized web together! +ブロックチェーンに永遠に刻まれた過去と、無限の可能性に満ちた未来を持つArweave開発コミュニティへようこそ。一緒に分散型ウェブを構築しましょう！ -[Read More](welcome.md) +[もっと読む](welcome.md) -## Contributing +## 貢献 -The Cookbook is designed in a way that makes it easy for new Permaweb developers to contribute. Even if you don't know how to do something, contributing to the cookbook is a great way to learn! +クックブックは、新しいパーマウェブ開発者が貢献しやすいように設計されています。何かをする方法がわからなくても、クックブックへの貢献は学ぶための素晴らしい方法です！ -Check out all open issues here. Contribution guidelines here. if you find the cookbook is missing a concept, guide or reference, please add an issue. +ここでオープンなイシューを確認してください。貢献ガイドラインはこちらです。クックブックに概念、ガイド、リファレンスが不足していると感じた場合は、イシューを追加してください。 -[Read More](contributing.md) +[もっと読む](contributing.md) +## クックブックの読み方 -## How to Read the Cookbook +パーマウェブクックブックは、異なる目標を持つセクションに分かれています。 -The Permaweb Cookbook is split into different sections, each aimed at a different goal. - -| Section | Description | +| セクション | 説明 | | ------- | ----------- | -| Core Concepts | Building blocks of the Permaweb that are good to know for development | -| Guides | Snack-sized guides about different tools for development | -| References | References to commonly needed code snippets | -| Starter Kits | Front-end Framework Starters to get you started building on the Permaweb in no time | +| コア概念 | 開発のために知っておくべきパーマウェブの基本要素 | +| ガイド | 様々な開発ツールについてのスナックサイズのガイド | +| リファレンス | よく必要とされるコードスニペットへの参照 | +| スターターキット | 短時間でパーマウェブ上の開発を開始できるフロントエンドフレームワークスターター | -## Quick Starts +## クイックスタート -These are small guides to help developers from every experience level to ship code the the permaweb. +これらは、あらゆる経験レベルの開発者がパーマウェブにコードを出荷するのを助けるための小さなガイドです。 -- [Hello World (NodeJS)](quick-starts/hw-nodejs.md) +- [Hello World (NodeJS)](quick-starts/hw-nodejs.md) \ No newline at end of file diff --git a/docs/src/ja/getting-started/contributing.md b/docs/src/ja/getting-started/contributing.md index d3e29aaf..4d32c91e 100644 --- a/docs/src/ja/getting-started/contributing.md +++ b/docs/src/ja/getting-started/contributing.md @@ -1,63 +1,59 @@ --- locale: ja --- -# Contributing Workflow +# 貢献ワークフロー -Anyone in the community is welcome to contribute to the Permaweb Cookbook, as community members we want a high quality reference guide of little snack bite sized nuggets of information. Below is a step by step workflow of how anyone can contribute to this project. +コミュニティの誰もがパーマウェブクックブックに貢献することを歓迎します。私たちは、質の高いリファレンスガイドを提供することを目指しており、小さなスナックサイズの情報の塊を集めています。以下は、誰でもこのプロジェクトに貢献できる手順を示したワークフローです。 -## What do you need to know? +## 知っておくべきことは？ -* Git and Github - publishes content to github.com. -* Markdown - Markdown is a text based markup language that can be transformed into HTML -* Arweave and the Permaweb - Have some knowledge about the Permaweb that should be shared - -## Steps to Contribute +* GitとGithub - コンテンツをgithub.comに公開します。 +* Markdown - Markdownは、HTMLに変換できるテキストベースのマークアップ言語です。 +* Arweaveとパーマウェブ - 共有すべきパーマウェブについての知識を持っていること。 +## 貢献のステップ ![diagram](https://www.websequencediagrams.com/cgi-bin/cdraw?lz=dGl0bGUgQ29udHJpYnV0aW5nIHRvIFBlcm1hd2ViIENvb2tib29rCgoAGglvciAtPiBSZXBvIDogQ2hlY2sgT3V0IG9mIEZvcmsAFAVzaXRvcnkKbm90ZSBvdmVyAFYKb3IgOiBDcmVhdGUgTWFya2Rvd24gRG9jdW1lbnQAFxpvbW1pdCBDaGFuZ2VzAHQXUHVzaCBCcmFuY2gAYRljAHQGUHVsbCBSZXF1ZXMAWxphc3NpZ24gcmV2aWV3ZXIocykKUgAFBwCBdgsADQYAOhgAKAk6IEFwcHJvdmUgUFIAgjQXbWVyZ2UgdG8gbWFpbg&s=mscgen) -## Need Help? +## 助けが必要ですか？ -Join our [discord channel](https://discord.gg/haCAX3shxF) and post a note. +私たちの[Discordチャンネル](https://discord.gg/haCAX3shxF)に参加してメッセージを投稿してください。 -## Commiting work +## 作業のコミット -We are using [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) -for this repository. +このリポジトリでは[従来のコミット](https://www.conventionalcommits.org/en/v1.0.0/)を使用しています。 -General flow for making a contribution: +貢献を行うための一般的な流れ： -1. Fork the repo on GitHub -2. Clone the project to your own machine -3. Commit changes to your own branch -4. Push your work back up to your fork -5. Submit a Pull request so that we can review your changes +1. GitHubでリポジトリをフォークする +2. プロジェクトを自分のマシンにクローンする +3. 自分のブランチに変更をコミットする +4. フォークに作業をプッシュする +5. 変更をレビューできるようにプルリクエストを提出する -**NOTE**: Be sure to merge the latest from "upstream" before making a -pull request! +**注意**: プルリクエストを作成する前に、「アップストリーム」から最新のものをマージしてください！ -## Style +## スタイル -Here are some suggestions on tone and style from some contributors: +いくつかの貢献者からのトーンやスタイルに関する提案です： ::: tip -In writing them, I'm getting a feeling for the tone that's appropriate for each. -CoreConcepts should be rather textbook like, neutral voice, objective. "This is how Arweave works" -For Guides, I think it's ok to have a more personal voice. Refer to the reader as "you" and speak in the collaborative voice "next we'll take a look at..." -This may just be personal preference, but in general I feel this tone much more supportive and accessible when following a longer form guide. -Indeed, its the voice that most popular tutorials from other ecosystems are written in. -For Resources, I think it shares the same voice as core concepts, with a preference for brevity. +それらを書くことで、それぞれに適切なトーンを感じ取っています。 +コアコンセプトは、教科書のように中立的で客観的な声であるべきです。「これがArweaveの動作です」 +ガイドについては、より個人的な声を持つことが良いと思います。読者を「あなた」と呼び、共同の声で「次は…を見てみましょう」と話します。 +これは個人的な好みかもしれませんが、一般的に長い形式のガイドを追っているときは、このトーンがより支援的でアクセスしやすいと感じます。 +実際、これは他のエコシステムの人気のあるチュートリアルが書かれている声です。 +リソースについては、コアコンセプトと同じ声を持ち、簡潔さを重視します。 dmac ::: - ::: tip -Conceptual and referencial data should have a more cold scientific tone and guides should be a supportive or even humorous tone. Longer form content needs to pull readers in without them zoning out. +概念的および参照データは、より冷たい科学的トーンを持つべきで、ガイドは支援的またはユーモラスなトーンを持つべきです。長い形式のコンテンツは、読者を引き込む必要がありますが、彼らをぼーっとさせないようにする必要があります。 Arch_Druid ::: -## More information about contributing check out the repo style guide +## 貢献に関する詳細はリポジトリのスタイルガイドを参照してください [CONTRIBUTING](https://github.com/twilson63/permaweb-cookbook/blob/main/CONTRIBUTING.md) \ No newline at end of file diff --git a/docs/src/ja/getting-started/quick-starts/hw-cli.md b/docs/src/ja/getting-started/quick-starts/hw-cli.md index cece0668..792de5b9 100644 --- a/docs/src/ja/getting-started/quick-starts/hw-cli.md +++ b/docs/src/ja/getting-started/quick-starts/hw-cli.md @@ -3,17 +3,18 @@ locale: ja --- # Hello World (CLI) -This guide walks you through the most simple way to get data on to the permaweb using a command-line interface (CLI). -## Requirements +このガイドでは、コマンドラインインターフェース（CLI）を使用して、パーマウェブにデータを取得する最も簡単な方法を説明します。 -- [NodeJS](https://nodejs.org) LTS or greater +## 要件 -## Description +- [NodeJS](https://nodejs.org) LTS 以上 -Using a terminal/console window create a new folder called `hw-permaweb-1`. +## 説明 -## Setup +ターミナル/コンソールウィンドウを使用して、`hw-permaweb-1`という新しいフォルダーを作成します。 + +## セットアップ ```sh cd hw-permaweb-1 @@ -21,19 +22,19 @@ npm init -y npm install arweave ardrive-cli ``` -## Generate a wallet +## ウォレットを生成する ```sh npx -y @permaweb/wallet > ~/.demo-arweave-wallet.json ``` -## Create a web page +## ウェブページを作成する ```sh echo "

Hello Permaweb

" > index.html ``` -## Upload using Ardrive CLI +## Ardrive CLIを使用してアップロードする ```sh # Create a Drive diff --git a/docs/src/ja/getting-started/quick-starts/hw-code.md b/docs/src/ja/getting-started/quick-starts/hw-code.md index 7bde7462..03502bdf 100644 --- a/docs/src/ja/getting-started/quick-starts/hw-code.md +++ b/docs/src/ja/getting-started/quick-starts/hw-code.md @@ -1,21 +1,22 @@ --- locale: ja --- -# Hello World (Code) -This guide walks you through a quick way to get a static HTML, CSS and JavaScript webpage on to the permaweb using a few lines of code and a [command-line interface (CLI)](./hw-cli.md). +# Hello World (コード) -## Requirements +このガイドでは、数行のコードと[コマンドラインインターフェース (CLI)](./hw-cli.md)を使用して、静的なHTML、CSS、JavaScriptのウェブページをパーマウェブにアップロードする簡単な方法を説明します。 -- [NodeJS](https://nodejs.org) LTS or greater -- Basic knowledge of HTML, CSS and JavaScript -- A text editor (VS Code, Sublime, or similar) +## 要件 -## Description +- [NodeJS](https://nodejs.org) LTS以上 +- HTML、CSS、JavaScriptの基本的な知識 +- テキストエディタ（VS Code、Sublime、または同様のもの） -Using a terminal/console window create a new folder called `hello-world`. +## 説明 -## Setup +ターミナル/コンソールウィンドウを使用して、`hello-world`という新しいフォルダを作成します。 + +## セットアップ ```sh cd hello-world @@ -24,23 +25,23 @@ mkdir src && cd src touch index.js index.html style.css ``` -Next open your text editor and import the `hello-world` directory. +次に、テキストエディタを開き、`hello-world`ディレクトリをインポートします。 -## Generate a wallet +## ウォレットの生成 ```sh node -e "require('arweave').init({}).wallets.generate().then(JSON.stringify).then(console.log.bind(console))" > wallet.json ``` :::info -The wallet.json file must be in the root of the `hello-world` folder and not inside of your `src` folder. +wallet.jsonファイルは、`hello-world`フォルダのルートに配置する必要があり、`src`フォルダの中には置かないでください。 ::: -## Create a webpage +## ウェブページの作成 -This webpage is using basic HTML, CSS and JavaScript to create a styled button that when you click it the header text changes color. Once finished, we will be using Irys and our previously generated wallet to deploy a fully functioning, static and permanent webpage to Arweave. +このウェブページでは、基本的なHTML、CSS、JavaScriptを使用して、クリックするとヘッダーのテキストの色が変わるスタイル付きボタンを作成します。完成後、Irysと以前に生成したウォレットを使用して、完全に機能する静的かつ永続的なウェブページをArweaveにデプロイします。 -Paste the code from the following code blocks into their files: +次のコードブロックからコードをそれぞれのファイルに貼り付けてください： **index.html** @@ -101,13 +102,12 @@ function changeColor() {
+静的サイトをデプロイする準備が整ったら、コンソール/ターミナルで`open src/index.html`と入力して、すべてが正しく機能しているか確認できます。すべてが期待通りに動作している場合、Arweaveにデプロイする時が来ました！ -Now that there is a static site to deploy, it can be checked to ensure it all functions properly by typing `open src/index.html` in your console/terminal. If everything is working as expected it is time to deploy to Arweave! - -## Upload using permaweb-deploy +## permaweb-deployを使用したアップロード -See: https://github.com/permaweb/permaweb-deploy +詳細はこちら: [https://github.com/permaweb/permaweb-deploy](https://github.com/permaweb/permaweb-deploy) -## Congrats!! +## おめでとう！！ -You just published a static site on Arweave using a few commands and a few lines of code! +わずか数コマンドと数行のコードで、Arweaveに静的サイトを公開しました！ \ No newline at end of file diff --git a/docs/src/ja/getting-started/quick-starts/hw-no-code.md b/docs/src/ja/getting-started/quick-starts/hw-no-code.md index 9ad6eba9..bd974758 100644 --- a/docs/src/ja/getting-started/quick-starts/hw-no-code.md +++ b/docs/src/ja/getting-started/quick-starts/hw-no-code.md @@ -1,28 +1,28 @@ --- locale: ja --- -# Hello World (No Code) +# Hello World (ノーコード) -In this quick start we are going to upload an image to the permaweb with no code! +このクイックスタートでは、ノーコードで画像をパーマウェブにアップロードします！ -## Requirements +## 要件 -* Computer -* Internet -* Modern web browser +* コンピュータ +* インターネット +* モダンウェブブラウザ -## Create a wallet +## ウォレットを作成 -[https://arweave.app/add](https://arweave.app/add) or [https://arconnect.io](https://arconnect.io) +[https://arweave.app/add](https://arweave.app/add) または [https://arconnect.io](https://arconnect.io) -## Send some data to arweave +## データをArweaveに送信 -Go to [https://hello_cookbook.arweave.dev](https://hello_cookbook.arweave.dev) +[https://hello_cookbook.arweave.dev](https://hello_cookbook.arweave.dev)にアクセスします。 -Enter some data and click publish, connect your wallet and "BAM" +データを入力し、公開をクリックし、ウォレットを接続すると「バン！」です。 -## Congrats!! +## おめでとうございます！！ -You just published some data on Arweave using zero code. +あなたはゼロコードでArweaveにデータを公開しました。 -> To check out the project -> https://github.com/twilson63/pw-no-code-hello +> プロジェクトをチェックアウトするには -> https://github.com/twilson63/pw-no-code-hello \ No newline at end of file diff --git a/docs/src/ja/getting-started/quick-starts/hw-nodejs.md b/docs/src/ja/getting-started/quick-starts/hw-nodejs.md index 3a8b8c92..84e3855f 100644 --- a/docs/src/ja/getting-started/quick-starts/hw-nodejs.md +++ b/docs/src/ja/getting-started/quick-starts/hw-nodejs.md @@ -3,19 +3,19 @@ locale: ja --- # Hello World (NodeJS) -This guide walks you through the most simple way to get data on to the permaweb using `arweave-js` and `irys`. +このガイドでは、`arweave-js`と`irys`を使用して、データをパーマウェブにアップロードする最も簡単な方法を説明します。 -With Arweave 2.6 only allowing 1000 items per block, directly posting to the gateway (eg. using `arweave-js`) will likely be uncommon. +Arweave 2.6では、ブロックごとに1000アイテムしか許可されていないため、ゲートウェイに直接投稿する（例：`arweave-js`を使用する）ことはあまり一般的ではないでしょう。 -## Requirements +## 要件 -- [NodeJS](https://nodejs.org) LTS or greater +- [NodeJS](https://nodejs.org) LTS以上 -## Description +## 説明 -Using a terminal/console window create a new folder called `hw-nodejs`. +ターミナル/コンソールウィンドウを使用して、`hw-nodejs`という新しいフォルダを作成します。 -## Setup +## セットアップ ```sh cd hw-nodejs @@ -23,15 +23,16 @@ npm init -y npm install arweave ardrive-cli ``` -## Generate a wallet +## ウォレットの生成 ```sh npx -y @permaweb/wallet > ~/.demo-arweave-wallet.json ``` -## Upload using Ardrive Turbo +## Ardrive Turboを使用したアップロード + +現在、Irysのノード2では、100 KiB未満のアップロードが無料です。 -Uploads of less than 100 KiB are currently free on Irys' Node 2. ```js:no-line-numbers import Irys from "@irys/sdk"; @@ -57,9 +58,10 @@ try { } ``` -## Upload using ArweaveJS +## ArweaveJSを使用したアップロード + +最新バージョンの`nodejs`を実行している場合、この`arweavejs`スクリプトはそのまま動作します。その他のバージョンでは、`--experimental-fetch`フラグを使用する必要があるかもしれません。 -If you are running the latest version of `nodejs` this `arweavejs` script will work as is. For other versions you may need to use the `--experimental-fetch` flag. ```js:no-line-numbers import Arweave from "arweave"; diff --git a/docs/src/ja/getting-started/welcome.md b/docs/src/ja/getting-started/welcome.md index c17b624a..e46a6eea 100644 --- a/docs/src/ja/getting-started/welcome.md +++ b/docs/src/ja/getting-started/welcome.md @@ -1,21 +1,21 @@ --- locale: ja --- -# Developing on the Permaweb +# パーマウェブでの開発 -## Welcome to the Permaweb +## パーマウェブへようこそ -Creating applications on the permaweb, which is built on the Arweave protocol, is similar to building traditional web applications but with some key differences. +Arweaveプロトコルに基づいて構築されたパーマウェブ上でアプリケーションを作成することは、従来のウェブアプリケーションを構築するのと似ていますが、いくつかの重要な違いがあります。 -One major difference is that data is stored on the permaweb permanently, as the name suggests, rather than on a centralized server. This means that once data is uploaded to the permaweb, it cannot be deleted or altered. This can be beneficial for applications that require tamper-proof data storage, such as supply chain management or voting systems. +一つの大きな違いは、データがパーマウェブ上に永久に保存されることです。名前が示すように、これは集中型サーバーではなく、データが一度パーマウェブにアップロードされると、削除や変更ができないことを意味します。これは、サプライチェーン管理や投票システムなど、改ざん防止のデータ保存が必要なアプリケーションにとって有益です。 -Another difference is that the permaweb is decentralized, meaning there is no central point of control or failure. This can provide increased security and reliability for applications. +もう一つの違いは、パーマウェブが分散型であることです。つまり、中央集権的な管理ポイントや障害点が存在しません。これにより、アプリケーションのセキュリティと信頼性が向上します。 -Additionally, the permaweb uses a unique token, called AR, to pay for the storage of data on the network. This can add a new layer of complexity to application development, as developers need to consider how to integrate AR into their applications and handle payments. +さらに、パーマウェブでは、データのストレージに対して支払うためにARと呼ばれるユニークなトークンを使用しています。これにより、開発者はアプリケーションにARを統合し、支払いを処理する方法を考慮する必要があるため、アプリケーション開発に新たな複雑さが加わる可能性があります。 -Overall, the experience of creating applications on the permaweb can be challenging, but it can also be rewarding as it offers unique benefits over traditional web development. +全体として、パーマウェブ上でのアプリケーション作成の経験は挑戦的かもしれませんが、従来のウェブ開発に比べてユニークな利点を提供するため、やりがいもあります。 -## Hello Worlds +## ハローワールド -* [Hello World (No Code)](./quick-starts/hw-no-code.md) +* [Hello World (ノーコード)](./quick-starts/hw-no-code.md) * [Hello World (CLI)](./quick-starts/hw-cli.md) \ No newline at end of file From 6cee20f95101a7527569c0a4890daed09a620a22 Mon Sep 17 00:00:00 2001 From: kaz <87490841+0xkaz@users.noreply.github.com> Date: Wed, 9 Oct 2024 13:20:22 +0800 Subject: [PATCH 09/18] translate ja/references --- docs/src/ja/index.md | 40 +++++++++---------- docs/src/ja/references/README.md | 14 +++---- docs/src/ja/references/bundling.md | 62 ++++++++++-------------------- docs/src/ja/references/gql.md | 31 ++++++++------- docs/src/ja/references/http-api.md | 28 +++++++------- 5 files changed, 80 insertions(+), 95 deletions(-) diff --git a/docs/src/ja/index.md b/docs/src/ja/index.md index 6d74f421..19eee1ce 100644 --- a/docs/src/ja/index.md +++ b/docs/src/ja/index.md @@ -3,37 +3,37 @@ locale: ja onboarding: true --- -# Cooking with the Permaweb +# パーマウェブでの料理 -The Permaweb Cookbook is a developer resource that provides the essential concepts and references for buiding applications on the Permaweb. Each concept and reference will focus on specific aspects of the Permaweb development ecosystem while providing additional details and usage examples. +パーマウェブクックブックは、パーマウェブ上でアプリケーションを構築するための基本的な概念と参考資料を提供する開発者向けリソースです。各概念と参考資料は、パーマウェブ開発エコシステムの特定の側面に焦点を当て、追加の詳細と使用例を提供します。 -## Developers +## 開発者の皆様へ -Welcome to the Arweave development community, where the past is forever etched in the blockchain and the future is full of endless possibilities. Let's build the decentralized web together! +アーウィーブ開発コミュニティへようこそ。ここでは過去がブロックチェーンに永遠に刻まれ、未来は無限の可能性に満ちています。分散型ウェブを一緒に構築しましょう！ -[Read More](getting-started/welcome.md) +[詳しく読む](getting-started/welcome.md) -## Contributing +## 貢献 -The Cookbook is designed in a way that makes it easy for new Permaweb developers to contribute. Even if you don't know how to do something, contributing to the cookbook is a great way to learn! +クックブックは、新しいパーマウェブ開発者が簡単に貢献できるように設計されています。何かをする方法がわからなくても、クックブックに貢献することは学ぶ素晴らしい方法です！ -Check out all open issues here. Contribution guidelines here. if you find the cookbook is missing a concept, guide or reference, please add an issue. +ここで全てのオープンな問題を確認できます。貢献ガイドラインはこちらです。クックブックに概念、ガイド、またはリファレンスが欠けていると感じたら、問題を追加してください。 -[Read More](getting-started/contributing.md) +[詳しく読む](getting-started/contributing.md) -## How to Read the Cookbook +## クックブックの読み方 -The Permaweb Cookbook is split into different sections, each aimed at a different goal. +パーマウェブクックブックは、異なる目標に向けた異なるセクションに分かれています。 -| Section | Description | -| ------------- | ----------------------------------------------------------------------------------- | -| Core Concepts | Building blocks of the Permaweb that are good to know for development | -| Guides | Snack-sized guides about different tools for development | -| References | References to commonly needed code snippets | -| Starter Kits | Front-end Framework Starters to get you started building on the Permaweb in no time | +| セクション | 説明 | +| -------------- | ----------------------------------------------------------------------------- | +| コアコンセプト | 開発において知っておくべきパーマウェブの構成要素 | +| ガイド | 開発のためのさまざまなツールに関するスナックサイズのガイド | +| 参考資料 | 一般的に必要とされるコードスニペットへのリファレンス | +| スターターキット | 短時間でパーマウェブ上で構築を開始するためのフロントエンドフレームワークスターター | -## Quick Starts +## クイックスタート -These are small guides to help developers from every experience level to ship code the the permaweb. +これは、すべての経験レベルの開発者がパーマウェブにコードを送信するのを助けるための小さなガイドです。 -- [Hello World (No Code)](getting-started/quick-starts/hw-no-code.md) +- [ハローワールド (ノーコード)](getting-started/quick-starts/hw-no-code.md) \ No newline at end of file diff --git a/docs/src/ja/references/README.md b/docs/src/ja/references/README.md index 08cd3a2f..4655aa59 100644 --- a/docs/src/ja/references/README.md +++ b/docs/src/ja/references/README.md @@ -1,14 +1,14 @@ --- locale: ja -title: Permaweb Cookbook - References +title: パーマウェブクックブック - 参考資料 --- -# References +# 参考資料 -References for learning in depth about various topics like Bundling, GraphQL, and HTTP APIs. +バンドリング、GraphQL、HTTP APIなどのさまざまなトピックについて深く学ぶための参考資料。 -- [Bundling](bundling.md) -- [GraphQL](gql.md) -- [HTTP API](http-api) +- [バンドリング](bundling.md) +- [GraphQL](gql.md) +- [HTTP API](http-api) -> Do you think a permaweb guide is missing? Create a issue at [Github](https://github.com/twilson63/permaweb-cookbook/issues) or consider [contributing](../getting-started/contributing.md) +> パーマウェブに関するガイドが不足していると思いますか？[Github](https://github.com/twilson63/permaweb-cookbook/issues)に問題を作成するか、[貢献](../getting-started/contributing.md)を検討してください。 \ No newline at end of file diff --git a/docs/src/ja/references/bundling.md b/docs/src/ja/references/bundling.md index 97c6d9bc..9ba16871 100644 --- a/docs/src/ja/references/bundling.md +++ b/docs/src/ja/references/bundling.md @@ -1,20 +1,15 @@ --- locale: ja --- -# Bundling +# バンドリング -Before getting started with any of the below references, make sure you've read -[Bundles and Bundling](/concepts/bundles.md) from [Core Concepts](/concepts/). +以下の参考資料を始める前に、[コアコンセプト](/concepts/)の[バンドルとバンドリング](/concepts/bundles.md)を読んでおくことをお勧めします。 -## Setup +## セットアップ -We'll be using the [arbundles](https://github.com/irys-xyz/arbundles) -library which is a JavaScript implementation of the -[ANS-104 specification](https://github.com/ArweaveTeam/arweave-standards/blob/master/ans/ANS-104.md). ArBundles comes with TypeScript support. +私たちは、[arbundles](https://github.com/irys-xyz/arbundles)ライブラリを使用します。これは、[ANS-104仕様](https://github.com/ArweaveTeam/arweave-standards/blob/master/ans/ANS-104.md)のJavaScript実装です。ArBundlesはTypeScriptサポートも提供しています。 -**Note:** This reference assumes a NodeJS environment. Browser compatibility -with ArBundles is possible but currently requires wrangling `Buffer` polyfills. -This will be addressed in a future version of ArBundles. +**注意:** この参考資料はNodeJS環境を前提としています。ArBundlesのブラウザ互換性は可能ですが、現在は`Buffer`ポリフィルを扱う必要があります。これは将来のArBundlesのバージョンで解決される予定です。 @@ -33,9 +28,9 @@ yarn add arbundles -## Create a `Signer` +## `Signer`を作成する -In order to create Data Items, we need to first create a `Signer`. +データアイテムを作成するには、まず`Signer`を作成する必要があります。 @@ -50,13 +45,11 @@ const signer = new ArweaveSigner(jwk) -## Create a `DataItem` +## `DataItem`を作成する -To create a `DataItem`, we pass some data along with a `Signer` to the -`createData()` utility function. +`DataItem`を作成するには、いくつかのデータと`Signer`を`createData()`ユーティリティ関数に渡します。 -**Note:** While the `createData()` utility function requires a `Signer`, the -returned `DataItem` is **not yet signed** and contains a placeholder ID. +**注意:** `createData()`ユーティリティ関数は`Signer`を必要としますが、返される`DataItem`は**まだ署名されておらず**、プレースホルダーIDが含まれています。 @@ -78,13 +71,11 @@ const myOtherDataItem = createData(myBufferData, signer) -## Create a `Bundle` +## `Bundle`を作成する -To create a Bundle, we pass our `DataItem` to the `bundleAndSignData` utility -function and `await` the result. +`Bundle`を作成するには、`DataItem`を`bundleAndSignData`ユーティリティ関数に渡し、結果を`await`します。 -**Note:** A `DataItem` passed to this utility function can -be pre-signed as detailed in a later section. +**注意:** このユーティリティ関数に渡される`DataItem`は、後のセクションで詳述されているように、事前に署名されている場合があります。 @@ -99,10 +90,9 @@ const bundle = await bundleAndSignData(dataItems, signer) -## Create a `Transaction` from a `Bundle` +## `Bundle`から`Transaction`を作成する -In order to post a `Bundle` to Arweave there ultimately needs to be a root -Layer 1 `Transaction` containing the `Bundle`. +`Bundle`をArweaveに投稿するには、最終的に`Bundle`を含むルートLayer 1の`Transaction`が必要です。 @@ -132,11 +122,9 @@ await arweave.transactions.sign(tx, jwk) -## Sign a `DataItem` +## `DataItem`に署名する -In order to get a `DataItem`'s ID (e.g. for use in a manifest also contained in the same bundle), we must call and `await` its `.sign()` method. If signing -is successful, the `DataItem` will now have their unique ID and signature and -are ready to be added to a `Bundle`. +`DataItem`のID（例えば、同じバンドルに含まれるマニフェストで使用するため）を取得するには、その`.sign()`メソッドを呼び出して`await`する必要があります。署名が成功すると、`DataItem`は独自のIDと署名を持ち、`Bundle`に追加する準備が整います。 @@ -152,12 +140,9 @@ const id2 = myOtherDataItem.id -## Tagging `DataItem` +## `DataItem`にタグ付けする -`DataItem` can themselves have tags just as Layer 1 Arweave Transactions can -have tags. Once an Arweave Gateway unbundles and indexes the `Bundle`, these -`DataItem` tags become queryable the same way a Layer 1 Arweave Transaction's -tags are queryable. +`DataItem`は、Layer 1のArweaveトランザクションと同様に、タグを持つことができます。Arweaveゲートウェイが`Bundle`をアンバンドルしてインデックス化すると、これらの`DataItem`タグは、Layer 1のArweaveトランザクションのタグと同じようにクエリ可能になります。 @@ -174,14 +159,9 @@ tags are queryable. -## Consuming Bundles +## バンドルの消費 -**WARNING:** Be sure that the `Buffer` you pass to `new Bundle(buffer)` does -contain a `Bundle`, otherwise, very small `Buffer` being passed will crash -the thread. **DO NOT** use `new Bundle(buffer)` in a production environment. -Instead, see the -[streamable interface](https://github.com/irys-xyz/arbundles/blob/master/src/stream) -in the ArBundles repository. +**警告:** `new Bundle(buffer)`に渡す`Buffer`が`Bundle`を含んでいることを確認してください。そうでない場合、非常に小さな`Buffer`が渡されるとスレッドがクラッシュします。**本番環境では** `new Bundle(buffer)`を使用しないでください。代わりに、ArBundlesリポジトリの[ストリーミングインターフェース](https://github.com/irys-xyz/arbundles/blob/master/src/stream)を参照してください。 diff --git a/docs/src/ja/references/gql.md b/docs/src/ja/references/gql.md index 70ce2857..9571c27f 100644 --- a/docs/src/ja/references/gql.md +++ b/docs/src/ja/references/gql.md @@ -1,8 +1,9 @@ --- locale: ja --- -# Complete GraphQL Structure for Transactions -The following GraphQL query returns all of the properties of a transaction captured by the indexing service. + +# トランザクションの完全なGraphQL構造 +次のGraphQLクエリは、インデックスサービスによってキャプチャされたトランザクションのすべてのプロパティを返します。 ```graphql:no-line-numbers query { @@ -54,8 +55,9 @@ query { ``` -## Pagination -By default, GraphQL queries return the first 10 results. Larger result sets can be requested by adding the `first: X` option (where `X` is a value from 1 to 100) to the transactions query. +## ページネーション +デフォルトでは、GraphQLクエリは最初の10件の結果を返します。より大きな結果セットを要求するには、トランザクションクエリに `first: X` オプションを追加します（ここで `X` は1から100の値）。 + ```graphql{4} query { @@ -82,7 +84,7 @@ query } ``` -If there are more than 100 items in the result set, subsequent pages of results can be retrieved by using a cursor. +結果セットに100件を超えるアイテムがある場合、カーソルを使用して次のページの結果を取得できます。 ```graphql{13-15,17} query { @@ -112,7 +114,7 @@ query } } ``` -If there are subsequent result pages `hasNextPage` will have a value of `true`. Take the `cursor` value of the last item in the result set and use it as the value for the `after` query parameter. +次の結果ページがある場合、`hasNextPage`の値は`true`になります。結果セットの最後のアイテムの`cursor`値を取得し、それを`after`クエリパラメーターの値として使用します。 ```graphql{5} query { @@ -143,13 +145,14 @@ query } } ``` -To retrieve the entire results set, repeat the `after` query with an updated `cursor` value from the last item of each page until `hasNextPage` is `false`. -## Rate Limiting -Indexing services will implement rate limiting to prevent attacks and abuse of their services. The `arweave.net/graphql` service limits GraphQL queries to 600 queries every 5 minutes (per IP address). Always check the results of your queries to see if they have a status code in the 200s before parsing the response. A HTTP Status code of 429 will indicate rate limiting is being enforced. A HTTP Status code of 503 usually indicates that the query result set is too large for `arweave.net/graphql`. +すべての結果セットを取得するには、`hasNextPage`が`false`になるまで、各ページの最後のアイテムから取得した`cursor`値を使用して`after`クエリを繰り返します。 + +## レート制限 +インデックスサービスは、攻撃やサービスの悪用を防ぐためにレート制限を実施します。`arweave.net/graphql`サービスは、GraphQLクエリを5分ごとに600クエリに制限しています（IPアドレスごと）。レスポンスを解析する前に、クエリの結果に200番台のステータスコードがあるかを必ず確認してください。HTTPステータスコード429は、レート制限が施行されていることを示します。HTTPステータスコード503は、クエリの結果セットが`arweave.net/graphql`にとって大きすぎることを示すことが一般的です。 -## Resources -* For a more complete listing of the Arweave GraphQL schema see the [Arweave GraphQL Guide](https://gql-guide.arweave.dev) -* [ArDB package](../guides/querying-arweave/ardb.md) -* [ar-gql package](../guides/querying-arweave/ar-gql.md) -* For a general guide to graphql [graphql.org/learn](https://graphql.org/learn) is a good starting point +## リソース +* Arweave GraphQLスキーマのより完全なリストについては、[Arweave GraphQL Guide](https://gql-guide.arweave.dev)を参照してください。 +* [ArDBパッケージ](../guides/querying-arweave/ardb.md) +* [ar-gqlパッケージ](../guides/querying-arweave/ar-gql.md) +* GraphQLに関する一般的なガイドは、[graphql.org/learn](https://graphql.org/learn)が良い出発点です。 \ No newline at end of file diff --git a/docs/src/ja/references/http-api.md b/docs/src/ja/references/http-api.md index 7e196f0a..419d0acc 100644 --- a/docs/src/ja/references/http-api.md +++ b/docs/src/ja/references/http-api.md @@ -2,24 +2,25 @@ locale: ja --- -# Arweave peer HTTP API -For a more complete reference of the Arweave peer HTTP APIs see the [linked guide](https://docs.arweave.org/developers/server/http-api). +# Arweave ピア HTTP API -The endpoints present here are for done so for convenance and/or because they were omitted from the [linked guide](https://docs.arweave.org/developers/server/http-api). +Arweave ピア HTTP API のより完全なリファレンスについては、[リンクされたガイド](https://docs.arweave.org/developers/server/http-api)を参照してください。 + +ここに示されているエンドポイントは、便利さのため、または[リンクされたガイド](https://docs.arweave.org/developers/server/http-api)から省略されたために提示されています。 ::: info -Permaweb gateway services are typically backed by one or more full Arweave nodes. As a result they will often expose the node endpoints under the `/tx/` path and routing the request directly to an Arweave node. This means these methods can often be called on a gateway as well as directly on an arweave peer/node. +Permaweb ゲートウェイサービスは、通常、1つ以上の完全な Arweave ノードによってバックされています。その結果、ノードエンドポイントが `/tx/` パスの下で公開され、リクエストが直接 Arweave ノードにルーティングされることがよくあります。これは、これらのメソッドがゲートウェイ上でも、Arweave ピア/ノード上でも呼び出すことができることを意味します。 :::
-### Get by field -Retrieves the header fields associated with a transaction directly from an Arweave node. Can be used to retrieve the transaction data as well, if the node -stores the chunks, and the data is small enough for the node to serve. +### フィールドによる取得 +トランザクションに関連するヘッダーフィールドを直接 Arweave ノードから取得します。ノードがチャンクを保存していて、データがノードによって提供されるのに十分小さい場合は、トランザクションデータを取得するためにも使用できます。 `https://arweave.net/tx/TX_ID/FIELD` -Available fields: id | last_tx | owner | target | quantity | data | reward | signature +利用可能なフィールド: id | last_tx | owner | target | quantity | data | reward | signature + ```js const result = await fetch('https://arweave.net/tx/sHqUBKFeS42-CMCvNqPR31yEP63qSJG3ImshfwzJJF8/data') // fields are returned in base64url format, so we need to decode @@ -47,9 +48,10 @@ console.log(jsonData)
-### Get Wallet Balance -The returned balance is in Winston. To get balance in $AR, divide the balance by 1000000000000 +### ウォレット残高の取得 +返される残高はウィンストン（Winston）単位です。$ARでの残高を取得するには、残高を1000000000000で割ってください。 `https://arweave.net/wallet/ADDRESS/balance` + ```js const res = await axios.get(`https://arweave.net/wallet/NlNd_PcajvxAkOweo7rZHJKiIJ7vW1WXt9vb6CzGmC0/balance`) console.log(res) @@ -60,10 +62,10 @@ console.log(res.data / 1000000000000) ```
-### Get transaction status +### トランザクションのステータス取得 `https://arweave.net/tx/TX_ID/status` ::: tip -This endpoint only supports base Arweave transactions not bundled transactions. Transactions must be confirmed on-chain before their status will be available. +このエンドポイントは、バンドルされたトランザクションではなく、基本的な Arweave トランザクションのみをサポートしています。トランザクションのステータスが利用可能になる前に、オンチェーンで確認される必要があります。 ::: ```js @@ -85,7 +87,7 @@ This endpoint only supports base Arweave transactions not bundled transactions. -### Get network information +### ネットワーク情報の取得 ```js const res = await axios.get('https://arweave.net/info') From 6c7942d8d74f6f56653553351cb5036979bf2f52 Mon Sep 17 00:00:00 2001 From: kaz <87490841+0xkaz@users.noreply.github.com> Date: Wed, 9 Oct 2024 13:41:43 +0800 Subject: [PATCH 10/18] feat: translate ja/kits --- docs/src/ja/kits/README.md | 9 +- docs/src/ja/kits/react/akord.md | 46 ++++++----- docs/src/ja/kits/react/create-react-app.md | 96 +++++++++++----------- docs/src/ja/kits/react/index.md | 24 +++--- docs/src/ja/kits/react/turbo.md | 73 ++++++++-------- docs/src/ja/kits/react/vite.md | 69 ++++++++-------- docs/src/ja/kits/svelte/index.md | 18 ++-- docs/src/ja/kits/svelte/minimal.md | 53 ++++++------ docs/src/ja/kits/svelte/vite.md | 73 ++++++++-------- docs/src/ja/kits/vue/create-vue.md | 88 ++++++++++---------- docs/src/ja/kits/vue/index.md | 18 ++-- 11 files changed, 284 insertions(+), 283 deletions(-) diff --git a/docs/src/ja/kits/README.md b/docs/src/ja/kits/README.md index d4082b90..44d11863 100644 --- a/docs/src/ja/kits/README.md +++ b/docs/src/ja/kits/README.md @@ -1,10 +1,7 @@ ---- -locale: ja ---- -# Starter Kits +# スターターキット -Starter kits are boiler plate repositories for specific frameworks configured and ready to go, to build on the permaweb. +スターターキットは、特定のフレームワーク用に設定され、すぐに使用できるボイラープレートリポジトリであり、パーマウェブ上での構築に役立ちます。 - [React](./react/index.md) - [Svelte](./svelte/index.md) -- [Vue](./vue/index.md) +- [Vue](./vue/index.md) \ No newline at end of file diff --git a/docs/src/ja/kits/react/akord.md b/docs/src/ja/kits/react/akord.md index 7a4494d4..b6498401 100644 --- a/docs/src/ja/kits/react/akord.md +++ b/docs/src/ja/kits/react/akord.md @@ -1,25 +1,26 @@ --- locale: ja --- -# React Starter Kit with Vite & Akord +# Vite と Akord を使った React スターターキット -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. +このガイドでは、開発環境を設定し、パーマウェブ React アプリケーションを構築してデプロイするためのステップバイステップの流れを紹介します。 -## 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 +- 基本的な TypeScript の知識（必須ではありません） - [https://www.typescriptlang.org/docs/](Learn Typescript) +- NodeJS v16.15.0 以上 - [https://nodejs.org/en/download/](Download NodeJS) +- ReactJS の知識 - [https://reactjs.org/](Learn ReactJS) +- Git および一般的なターミナルコマンドの知識 -## Development Dependencies +## 開発依存関係 -- TypeScript -- NPM or Yarn Package Manager +- TypeScript +- NPM または Yarn パッケージマネージャー -## Steps +## ステップ + +### React アプリを作成する -### Create React App ```sh yarn create vite my-arweave-app --template react-ts @@ -27,15 +28,15 @@ cd my-arweave-app yarn ``` -### Add React Router DOM +### React Router DOM を追加 ```sh yarn add react-router-dom ``` -We need to use the hash-router to create a working app on arweave. +Arweave で動作するアプリを作成するために、ハッシュルーターを使用する必要があります。 -### Page Components +### ページコンポーネント ```sh touch src/Home.tsx src/About.tsx @@ -79,9 +80,9 @@ function About() { export default About; ``` -#### Modify App.tsx +#### App.tsx の修正 -We need to update the App.tsx to manage different pages +異なるページを管理するために App.tsx を更新する必要があります。 ```tsx import { HashRouter } from "react-router-dom"; @@ -166,11 +167,12 @@ akord login {your_email_address} akord deploy ./dist 'My perma app' ``` -### Congrats! +### おめでとう！ + +あなたはパーマウェブ上に React アプリケーションを公開しました！このアプリは永遠にホストされます！ -You just published a react application on the Permaweb! This app will be hosted forever! +## リソースとさらなる学習 -## Resources & further reading +- [レシピ](https://github.com/Akord-com/recipes) - Arweave ブロックチェーンと簡単に対話する方法を学ぶ +- [Akord CLI](https://github.com/Akord-com/akord-cli) -- [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/ja/kits/react/create-react-app.md b/docs/src/ja/kits/react/create-react-app.md index 249c5780..0c91d967 100644 --- a/docs/src/ja/kits/react/create-react-app.md +++ b/docs/src/ja/kits/react/create-react-app.md @@ -1,27 +1,27 @@ --- locale: ja --- -# Create React App Starter Kit +# Create React App スターターキット -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. +このガイドでは、開発環境を設定し、パーマウェブ React アプリケーションを構築してデプロイするためのステップバイステップの流れを紹介します。 -## 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 +- 基本的な TypeScript の知識（必須ではありません） - [https://www.typescriptlang.org/docs/](Learn Typescript) +- NodeJS v16.15.0 以上 - [https://nodejs.org/en/download/](Download NodeJS) +- ReactJS の知識 - [https://reactjs.org/](Learn ReactJS) +- Git および一般的なターミナルコマンドの知識 -## Development Dependencies +## 開発依存関係 -- TypeScript -- NPM or Yarn Package Manager +- TypeScript +- NPM または Yarn パッケージマネージャー -## Steps +## ステップ -### Create Project +### プロジェクトを作成する -If you are not familiar with typescript you can exclude the extra check `--template typescript` +TypeScript に不慣れな場合は、追加のチェック `--template typescript` を除外できます。 @@ -46,9 +46,9 @@ yarn create react-app permaweb-create-react-app --template typescript cd permaweb-create-react-app ``` -### Install react-router-dom +### react-router-dom をインストールする -You have to install this package to manage routing between different pages +異なるページ間のルーティングを管理するために、このパッケージをインストールする必要があります。 @@ -67,9 +67,10 @@ yarn add react-router-dom -D -### Run the App -Now we need to check if everything is working before jumping into next step, run +### アプリを実行する + +次のステップに進む前に、すべてが正常に動作しているか確認する必要があります。次のコマンドを実行してください。 @@ -86,10 +87,9 @@ yarn start -This will start a new development server locally on your machine. By default it uses `PORT 3000`, if this PORT is already in use -it may ask you to switch to another available PORT in Terminal +これにより、ローカルマシン上で新しい開発サーバーが起動します。デフォルトでは `PORT 3000` を使用します。このポートがすでに使用されている場合、ターミナルで別の利用可能なポートに切り替えるよう求められる場合があります。 -### Modify the package.json to contain the following config +### package.json を次の設定に変更する ```json { @@ -98,9 +98,9 @@ it may ask you to switch to another available PORT in Terminal } ``` -### Setup Routing +### ルーティングを設定する -Now modify the application and add a new route such as an about page, first create 2 more .tsx files. (if you have exluceded the extra check `--template typescript`, then your component file extension should be `.jsx or .js`) +アプリケーションを変更し、アバウトページなどの新しいルートを追加します。まず、2つの `.tsx` ファイルを作成します（`--template typescript` のチェックを除外した場合は、コンポーネントファイルの拡張子は `.jsx` または `.js` になります）。 ```sh touch src/HomePage.tsx @@ -145,9 +145,9 @@ function About() { export default About; ``` -#### Modify App.tsx +#### App.tsx を修正する -We need to update the App.tsx to manage the different pages +異なるページを管理できるように App.tsx を更新する必要があります。 ```ts import { HashRouter } from "react-router-dom"; @@ -170,17 +170,17 @@ function App() { export default App; ``` -::: info Hash Routing -Note that we are wrapping the routes in a HashRouter and using the react-router-dom Link component to build links. -This is important on the permaweb in its current state, it will ensure the routes work properly because applications -are served on a path like `https://[gateway]/[TX]` +::: info Hash ルーティング +ルートを HashRouter でラップし、react-router-dom の Link コンポーネントを使用してリンクを構築していることに注意してください。これは、現状のパーマウェブでは重要です。これにより、アプリケーションが `https://[gateway]/[TX]` のようなパスで提供されるため、ルートが正しく機能することが保証されます。 ::: -## Deploy Permanently +## 永続的にデプロイする + +### ウォレットを生成する + +ウォレットを生成するために `arweave` パッケージが必要です。 -### Generate Wallet -We need the `arweave` package to generate a wallet @@ -205,11 +205,11 @@ then run this command in the terminal node -e "require('arweave').init({}).wallets.generate().then(JSON.stringify).then(console.log.bind(console))" > wallet.json ``` -### Fund Wallet -You will need to fund your wallet with ArDrive Turbo credits. To do this, enter [ArDrive](https://app.ardrive.io) and import your wallet. -Then, you can purchase turbo credits for your wallet. +### ウォレットに資金を追加する +ArDrive Turbo クレジットでウォレットに資金を追加する必要があります。これを行うには、[ArDrive](https://app.ardrive.io) にアクセスし、ウォレットをインポートします。その後、ウォレットのために Turbo クレジットを購入できます。 + +### Permaweb-Deploy を設定する -### Setup Permaweb-Deploy @@ -249,9 +249,9 @@ You will need to add AR to this wallet and fund your Irys wallet to be able to u Replace << ANT-PROCESS >> with your ANT process id. ::: -### Run build +### ビルドを実行する -Now it is time to generate a build, run +ビルドを生成する時間です。次のコマンドを実行します。 @@ -270,9 +270,9 @@ yarn build -### Run deploy +### デプロイを実行する -Finally we are good to deploy our first Permaweb Application +最後に、最初の Permaweb アプリケーションをデプロイします。 @@ -292,27 +292,27 @@ yarn deploy ::: info ERROR -If you receive an error `Insufficient funds`, make sure you remembered to fund your deployment wallet with ArDrive Turbo credits. +`Insufficient funds` のエラーが表示された場合、デプロイメント用のウォレットに ArDrive Turbo クレジットを追加するのを忘れないでください。 ::: -### Response +### レスポンス -You should see a response similar to the following: +次のようなレスポンスが表示されるはずです： ```shell Deployed TxId [<>] to ANT [<>] using undername [<>] ``` -Your React app can be found at `https://arweave.net/<< tx-id >>`. +あなたの React アプリは `https://arweave.net/<< tx-id >>` で見つけることができます。 ::: tip SUCCESS -You should now have a React Application on the Permaweb! Great Job! +これで、Permaweb 上に React アプリケーションがあるはずです！素晴らしい仕事です！ ::: -## Repository +## リポジトリ -A completed version of this example is available here: [https://github.com/VinceJuliano/permaweb-create-react-app](https://github.com/VinceJuliano/permaweb-create-react-app) +この例の完成版はここで入手できます：[https://github.com/VinceJuliano/permaweb-create-react-app](https://github.com/VinceJuliano/permaweb-create-react-app) -## Summary +## まとめ -This is a Create React App version of publishing a React app on the permaweb. You may discover new ways to deploy an app on the permaweb or checkout other starter kits in this guide! +これは、Create React App を使用して Permaweb に React アプリを公開する方法です。Permaweb にアプリをデプロイする新しい方法を発見したり、このガイドに掲載されている他のスターターキットをチェックしたりできます！ \ No newline at end of file diff --git a/docs/src/ja/kits/react/index.md b/docs/src/ja/kits/react/index.md index a41159af..15bc3ce0 100644 --- a/docs/src/ja/kits/react/index.md +++ b/docs/src/ja/kits/react/index.md @@ -1,21 +1,17 @@ --- locale: ja --- -# React Starter Kits +# React スターターキット -React is a popular library used for building user interfaces. Alongside other popular -tools such as create-react-app, a React project can be compiled into a bundle. This bundle -can be uploaded as a transaction to the permaweb where it will serve as a single page application. +React は、ユーザーインターフェースを構築するために使用される人気のあるライブラリです。create-react-app などの他の人気ツールと組み合わせることで、React プロジェクトはバンドルにコンパイルできます。このバンドルは、トランザクションとしてパーマウェブにアップロードされ、シングルページアプリケーションとして機能します。 -React Starter Kit Guides: +React スターターキットガイド: -* [Vite](./turbo.md) - React + Vite, publish with permaweb-deploy -* [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 - +* [Vite](./turbo.md) - React + Vite、permaweb-deploy で公開 +* [Create React App](./create-react-app.md) - Create React App を利用して React パーマウェブアプリを構築 +* [Akord](./akord.md) - React + Vite、Akord でデプロイ - -::: info Permaweb Application Constraints -* 100% Front-end application (No Server-Side Backend) -* Applications are served from a sub-path (https://[gateway]/[TX_ID]) -::: +::: info パーマウェブアプリケーションの制約 +* 100% フロントエンドアプリケーション（サーバーサイドバックエンドなし） +* アプリケーションはサブパスから提供されます（https://[gateway]/[TX_ID]） +::: \ No newline at end of file diff --git a/docs/src/ja/kits/react/turbo.md b/docs/src/ja/kits/react/turbo.md index e76cc32c..ee207e54 100644 --- a/docs/src/ja/kits/react/turbo.md +++ b/docs/src/ja/kits/react/turbo.md @@ -3,24 +3,23 @@ locale: ja --- # React Starter Kit w/vite & ArDrive -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. +このガイドでは、Permaweb React アプリケーションを構築してデプロイするための開発環境を構成する手順を説明します。 -## 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 +- 基本的な TypeScript の知識（必須ではありません） - [https://www.typescriptlang.org/docs/](TypeScriptを学ぶ) +- NodeJS v16.15.0 以上 - [https://nodejs.org/en/download/](NodeJSをダウンロード) +- ReactJS の知識 - [https://reactjs.org/](ReactJSを学ぶ) +- git と一般的なターミナルコマンドの知識 -## Development Dependencies +## 開発依存関係 - TypeScript -- NPM or Yarn Package Manager +- NPM または Yarn パッケージマネージャ -## Steps - -### Create React App +## 手順 +### React アプリを作成する @@ -62,9 +61,9 @@ yarn add react-router-dom -We need to use the hash-router to create a working app on arweave. +Arweave で動作するアプリを作成するには、ハッシュルーターを使用する必要があります。 -### Page Components +### ページコンポーネント ```sh touch src/Home.tsx src/About.tsx @@ -108,9 +107,10 @@ function About() { export default About; ``` -#### Modify App.tsx +#### App.tsx を修正する + +異なるページを管理できるように App.tsx を更新する必要があります。 -We need to update the App.tsx to manage different pages ```tsx import { HashRouter } from "react-router-dom"; @@ -133,9 +133,9 @@ function App() { export default App; ``` -#### Modify index.css +#### index.css を修正する -Alter the `body` selector +`body` セレクタを変更します。 ```css body { @@ -168,9 +168,10 @@ yarn dev -### Building React App +### React アプリをビルドする + +#### vite.config.ts を修正する -#### Modify vite.config.ts ```ts import { defineConfig } from 'vite' @@ -188,11 +189,11 @@ export default defineConfig({ yarn build ``` -### Deploy Permanently +### 永続的にデプロイする -#### Generate Wallet +#### ウォレットを生成する -We need the `arweave` package to generate a wallet +ウォレットを生成するために `arweave` パッケージが必要です。 @@ -217,11 +218,10 @@ then run this command in the terminal node -e "require('arweave').init({}).wallets.generate().then(JSON.stringify).then(console.log.bind(console))" > wallet.json ``` -#### Fund Wallet -You will need to fund your wallet with ArDrive Turbo credits. To do this, enter [ArDrive](https://app.ardrive.io) and import your wallet. -Then, you can purchase turbo credits for your wallet. +#### ウォレットに資金を追加する +ArDrive Turbo クレジットでウォレットに資金を追加する必要があります。これを行うには、[ArDrive](https://app.ardrive.io) にアクセスし、ウォレットをインポートします。その後、ウォレットのために Turbo クレジットを購入できます。 -#### Setup Permaweb-Deploy +#### Permaweb-Deploy を設定する @@ -282,9 +282,11 @@ yarn build -#### Run deploy +#### デプロイを実行する + +最後に、最初の Permaweb アプリケーションをデプロイします。 + -Finally we are good to deploy our first Permaweb Application @@ -304,23 +306,22 @@ yarn deploy ::: info ERROR -If you receive an error `Insufficient funds`, make sure you remembered to fund your deployment wallet with ArDrive Turbo credits. +`Insufficient funds` エラーが表示された場合は、デプロイメント用のウォレットに ArDrive Turbo クレジットを追加したことを確認してください。 ::: -#### Response +#### 応答 -You should see a response similar to the following: +以下のような応答が表示されるはずです： ```shell Deployed TxId [<>] to ANT [<>] using undername [<>] ``` -Your React app can be found at `https://arweave.net/<< tx-id >>`. +あなたの React アプリは `https://arweave.net/<< tx-id >>` で見つけることができます。 ::: tip SUCCESS -You should now have a React Application on the Permaweb! Great Job! +これで、Permaweb 上に React アプリケーションを持っていることになります！素晴らしい仕事です！ ::: -### Congrats! - -You just published a react application on the Permaweb! This app will be hosted forever! +### おめでとうございます！ +あなたは Permaweb に React アプリケーションを公開しました！このアプリは永遠にホストされます！ \ No newline at end of file diff --git a/docs/src/ja/kits/react/vite.md b/docs/src/ja/kits/react/vite.md index 3768777c..0d8553b4 100644 --- a/docs/src/ja/kits/react/vite.md +++ b/docs/src/ja/kits/react/vite.md @@ -1,28 +1,27 @@ --- locale: ja --- -# Vite Starter Kit +# Vite スターターキット -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. +このガイドでは、Permaweb の React アプリケーションを構築してデプロイするために、開発環境を設定する手順を説明します。 -## 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 +- 基本的な TypeScript の知識（必須ではありません） - [https://www.typescriptlang.org/docs/](TypeScript を学ぶ) +- NodeJS v16.15.0 以上 - [https://nodejs.org/en/download/](NodeJS をダウンロード) +- ReactJS の知識 - [https://reactjs.org/](ReactJS を学ぶ) +- Git と一般的なターミナルコマンドの知識 -## Development Dependencies +## 開発依存関係 - TypeScript -- NPM or Yarn Package Manager +- NPM または Yarn パッケージマネージャ -## Steps +## 手順 -### Create Project - -if you are not familiar with typescript you can use the template "react" (`--template react`) +### プロジェクトの作成 +TypeScript に不慣れな場合は、テンプレート「react」を使用できます（`--template react`）。 @@ -86,12 +85,14 @@ yarn dev -it will start a new development server locally on your machine by default it uses `PORT 3000` if this PORT is already in use -it may ask you to switch to another available PORT in Terminal -### Setup wallet types +デフォルトでは、ローカルマシン上で新しい開発サーバーが開始され、`PORT 3000` が使用されます。このポートがすでに使用中の場合、ターミナルで利用可能な別のポートに切り替えるように求められることがあります。 + +### ウォレットの種類を設定 + +[ArConnect](https://arconnect.io)、[Arweave.app](https://arweave.app) または他のブラウザベースのウォレットを使用したい場合は、`window.arweaveWallet` の宣言を持つ ArConnect のタイプパッケージをインストールできます。 + -If you want to use [ArConnect](https://arconnect.io), [Arweave.app](https://arweave.app) or other browser-based wallets, you can install ArConnect's types package to have declarations for `window.arweaveWallet`. @@ -187,17 +188,16 @@ function App() { export default App; ``` -::: info Hash Routing -Note that we are wrapping the routes in a HashRouter and using the react-router-dom Link component to build links. -This is important on the permaweb in its current state, it will ensure the routes work properly because applications -are served on a path like `https://[gateway]/[TX]` +::: info ハッシュルーティング +ルートを HashRouter でラップし、react-router-dom の Link コンポーネントを使用してリンクを構築していることに注意してください。 +これは現在の状態の Permaweb では重要であり、アプリケーションが `https://[gateway]/[TX]` のようなパスで提供されるため、ルートが適切に機能することを保証します。 ::: -## Deploy Permanently +## 永続的にデプロイ -### Generate Wallet +### ウォレットを生成する -We need the `arweave` package to generate a wallet +ウォレットを生成するために `arweave` パッケージが必要です。 @@ -222,9 +222,9 @@ then run this command in the terminal node -e "require('arweave').init({}).wallets.generate().then(JSON.stringify).then(console.log.bind(console))" > wallet.json ``` -### Update vite config +### vite 設定の更新 -Make sure you add the `base` property to the vite config object and set it to an empty string. +vite 設定オブジェクトに `base` プロパティを追加し、空の文字列に設定してください。 vite.config.ts @@ -239,9 +239,9 @@ export default defineConfig({ }) ``` -### Setup Irys +### Irys のセットアップ -We need Irys to deploy our app to Permaweb it provides instant data upload and retrieval +アプリを Permaweb にデプロイするために Irys が必要です。Irys は即時データのアップロードと取得を提供します。 @@ -261,7 +261,7 @@ yarn global add @irys/sdk ::: info -You will need to add AR to this wallet and fund your Irys wallet to be able to upload this app. See [https://irys.xyz](https://irys.xyz) and [https://www.arweave.org/](https://www.arweave.org/) for more information. +このウォレットに AR を追加し、Irys ウォレットに資金を供給する必要があります。このアプリをアップロードできるようにするためです。詳細については [https://irys.xyz](https://irys.xyz) と [https://www.arweave.org/](https://www.arweave.org/) をご覧ください。 ::: ### Update package.json @@ -320,16 +320,17 @@ yarn deploy ::: tip SUCCESS -You should now have a React Application on the Permaweb! Great Job! +これで Permaweb 上に React アプリケーションができました！素晴らしい仕事です！ ::: ::: tip ERROR -If you receive this error `Not enough funds to send data`, you have to fund some AR into your wallet, and then try to deploy it again. +もしこのエラー `データを送信するための資金が不足しています` が表示された場合は、ウォレットにいくらかの AR を資金を供給し、その後再度デプロイを試みてください。 ::: -How do I fund my irys account? +## Irys アカウントに資金を供給する方法 + +### 残高を確認 -Check balance ```console:no-line-numbers irys balance [Address] -h https://node2.irys.xyz -t arweave @@ -342,7 +343,7 @@ irys fund 20000000000 -t arweave -h https://node2.irys.xyz -w ./wallet.json ``` ::: tip INFO -It will take about 20 to 30 minutes for the funds to be deposited into your irys account. +資金が Irys アカウントに入金されるまでに約 20 ～ 30 分かかります。 ::: diff --git a/docs/src/ja/kits/svelte/index.md b/docs/src/ja/kits/svelte/index.md index 52662d6b..882b5661 100644 --- a/docs/src/ja/kits/svelte/index.md +++ b/docs/src/ja/kits/svelte/index.md @@ -1,16 +1,16 @@ --- locale: ja --- -# Svelte Starter Kits +# Svelte スターターキット -Svelte is a framework that compiles to a JavaScript bundle and in the process removes the framework from the distribution of the app. This results in a much smaller footprint than other frameworks. Svelte is the perfect framework for Permaweb Applications. A Permaweb Application is built on the principles of a Single Page Application, but lives on the Arweave network and is distributed by Permaweb gateways. +Svelte は、JavaScript バンドルにコンパイルされるフレームワークで、アプリの配布からフレームワークを削除します。これにより、他のフレームワークに比べてはるかに小さなフットプリントが実現されます。Svelte はパーマウェブアプリケーションに最適なフレームワークです。パーマウェブアプリケーションはシングルページアプリケーションの原則に基づいて構築されますが、Arweave ネットワーク上に存在し、パーマウェブゲートウェイによって配布されます。 -Svelte Starter Kit Guides: +Svelte スターターキットガイド: -* [Minimal](./minimal.md) - the minimum required to build a svelte permaweb app -* [Vite](./vite.md) - Svelte, Typescript and Vite +* [最小限](./minimal.md) - Svelte パーマウェブアプリを構築するために必要な最小限の要素 +* [Vite](./vite.md) - Svelte、TypeScript、および Vite -::: info Permaweb Application Constraints -* 100% Front-end application (No Server-Side Backend) -* Applications are served from a sub-path (https://[gateway]/[TX_ID]) -::: +::: info パーマウェブアプリケーションの制約 +* 100% フロントエンドアプリケーション（サーバーサイドバックエンドなし） +* アプリケーションはサブパスから提供されます（https://[gateway]/[TX_ID]） +::: \ No newline at end of file diff --git a/docs/src/ja/kits/svelte/minimal.md b/docs/src/ja/kits/svelte/minimal.md index f01404ec..ee3683a6 100644 --- a/docs/src/ja/kits/svelte/minimal.md +++ b/docs/src/ja/kits/svelte/minimal.md @@ -3,24 +3,24 @@ locale: ja --- # Minimal Svelte Starter Kit -This guide will walk you through in a step by step flow to configure your development environment to build and deploy a permaweb application. +このガイドでは、Permaweb アプリケーションを構築しデプロイするための開発環境を構成する手順を説明します。 -## Prerequisites +## 前提条件 -- Know typescript -- NodeJS v18 or greater -- Know Svelte - [https://svelte.dev](https://svelte.dev) -- Know git and common terminal commands +- TypeScript の知識 +- NodeJS v18 以上 +- Svelte の知識 - [https://svelte.dev](https://svelte.dev) +- Git と一般的なターミナルコマンドの知識 -## Development Dependencies +## 開発依存関係 - TypeScript - esbuild - w3 -## Steps +## 手順 -### Create Project +### プロジェクトの作成 @@ -134,7 +134,7 @@ new App({ ``` ::: info Hash Routing -You will notice the `router.mode.hash()` setting in the script session, this is important to configure your application to use hash based routing, which will enable url support when running that application on a path, like `https://[gateway]/[TX]` +スクリプトセッションにある `router.mode.hash()` 設定に注意してください。これは、アプリケーションをハッシュベースのルーティングを使用するように構成するために重要です。これにより、アプリケーションを `https://[gateway]/[TX]` のようなパスで実行する際の URL サポートが可能になります。 ::: ### counter.svelte @@ -178,12 +178,11 @@ You will notice the `router.mode.hash()` setting in the script session, this is ``` +## 永続的なデプロイ -## Deploy Permanently +### ウォレットの生成 -### Generate Wallet - -We need the `arweave` package to generate a wallet +ウォレットを生成するために `arweave` パッケージが必要です。 @@ -208,11 +207,11 @@ then run this command in the terminal node -e "require('arweave').init({}).wallets.generate().then(JSON.stringify).then(console.log.bind(console))" > wallet.json ``` -### Fund Wallet -You will need to fund your wallet with ArDrive Turbo credits. To do this, enter [ArDrive](https://app.ardrive.io) and import your wallet. -Then, you can purchase turbo credits for your wallet. +### ウォレットに資金を追加 +ウォレットに ArDrive Turbo クレジットを追加する必要があります。これを行うには、[ArDrive](https://app.ardrive.io) にアクセスし、ウォレットをインポートします。 +その後、ウォレットのためにターボクレジットを購入できます。 -### Setup Permaweb-Deploy +### Permaweb-Deploy のセットアップ @@ -303,27 +302,27 @@ yarn deploy ::: info ERROR -If you receive an error `Insufficient funds`, make sure you remembered to fund your deployment wallet with ArDrive Turbo credits. +資金不足のエラー `Insufficient funds` が表示された場合は、デプロイ用のウォレットに ArDrive Turbo クレジットを追加したことを確認してください。 ::: -### Response +### 応答 -You should see a response similar to the following: +次のような応答が表示されるはずです： ```shell Deployed TxId [<>] to ANT [<>] using undername [<>] ``` -Your Svelte app can be found at `https://arweave.net/<< tx-id >>`. +あなたの Svelte アプリは `https://arweave.net/<< tx-id >>` で見つけることができます。 ::: tip SUCCESS -You should now have a Svelte Application on the Permaweb! Great Job! +これで Permaweb に Svelte アプリケーションを持つことができました！素晴らしい仕事です！ ::: -## Repository +## リポジトリ -A completed version of this example is available here: [https://github.com/twilson63/permaweb-minimal-svelte-starter](https://github.com/twilson63/permaweb-minimal-svelte-starter) +この例の完全なバージョンは、こちらで利用できます: [https://github.com/twilson63/permaweb-minimal-svelte-starter](https://github.com/twilson63/permaweb-minimal-svelte-starter) -## Summary +## まとめ -This is a minimal version of publishing a Svelte application on the permaweb, but you may want more features, like hot-reloading and tailwind, etc. Check out `hypar` for a turnkey starter kit. [HypAR](https://github.com/twilson63/hypar) +これは Permaweb に Svelte アプリケーションを公開するための最小限のバージョンですが、ホットリロードや Tailwind などの機能を追加したいかもしれません。その場合は、ターンキーのスターターキットである `hypar` をチェックしてください。 [HypAR](https://github.com/twilson63/hypar) \ No newline at end of file diff --git a/docs/src/ja/kits/svelte/vite.md b/docs/src/ja/kits/svelte/vite.md index d2d5d379..771d41fa 100644 --- a/docs/src/ja/kits/svelte/vite.md +++ b/docs/src/ja/kits/svelte/vite.md @@ -1,11 +1,13 @@ --- locale: ja --- -# Svelte/Vite Starter Kit +# Svelte/Vite スターターキット + +Svelte は、余計なものをコンパイルし、コンパクトなパッケージを生成するフレームワークで、Permaweb に最適です。開発者として、私たちはユーザーエクスペリエンスと同じくらい、開発エクスペリエンス (DX) を重視しています。このキットは、開発者に素晴らしい DX 経験を提供するために `vite` バンドルシステムを使用しています。 + +## Svelte と TypeScript を使用した vite のインストール -Svelte is the framework that compiles out of the way, that results is small packages, which is perfect for the permaweb. As developers, we value Dev Experience as much as we value User Experience. This kit uses the `vite` bundle system to give developers a great DX experience. -## Installing vite with svelte and typescript @@ -38,13 +40,13 @@ pnpm create vite my-perma-app --template svelte-ts -## Project Info +## プロジェクト情報 -The vite build system places your index.html file in the root directory, this is where you would include any css or global script dependencies if needed. For more information about the vite project layout check out the [vite documentation](https://vitejs.dev/guide/#index-html-and-project-root) +vite のビルドシステムは、index.html ファイルをルートディレクトリに配置します。ここに必要に応じて CSS やグローバルスクリプトの依存関係を含めることができます。vite プロジェクトのレイアウトに関する詳細は、[vite ドキュメント](https://vitejs.dev/guide/#index-html-and-project-root)を参照してください。 -## Setup hash-router +## ハッシュルーターのセットアップ -To setup the hash-router we will use [tinro](https://github.com/AlexxNB/tinro). `tinro` is a tiny declarative routing library, that is similar to React Router. +ハッシュルーターをセットアップするために、[tinro](https://github.com/AlexxNB/tinro)を使用します。`tinro` は、React Router に似た小さな宣言型ルーティングライブラリです。 @@ -63,9 +65,9 @@ yarn add -D tinro -## Telling Svelte to use hash routing +## Svelte にハッシュルーティングを使用するよう指示する -In the `src/App.svelte` file, you want to configure the router to use the hash routing mode. +`src/App.svelte` ファイルで、ルーターをハッシュルーティングモードを使用するように設定します。 ```html