use-ink · cmichi · Feb 21, 2023 · Feb 20, 2023 · Feb 21, 2023
@@ -16,16 +16,16 @@ The ink! metadata is generated when a contract is built using `cargo-contract`,
 `cargo contract build`.
 
 The metadata can be found in your contract's target directory under the name
-`metadata.json`.
+`<contract-name>.json`.
 
 :::note
 
-The metadata is also contained in your `$contract_name.contract` file. The difference is
+The metadata is also contained in your `<contract-name>.contract` file. The difference is
 that the `.contract` file also contains the Wasm binary of your contract.
 
 :::
 
-## metadata.json
+## `<contract-name>.json`
 The metadata is defined by the following **required** keys:
 - `source`: Information about the contract's Wasm code.
 - `contract`: Metadata about the contract.

@@ -113,7 +113,7 @@ the example and run:
 cargo contract build
 ```
 
-As a result you'll get a file `target/<example-name>.wasm` file, a `metadata.json` file
+As a result you'll get a file `target/<example-name>.wasm` file, a `<example-name>.json` file
 and a `<example-name>.contract` file in the `target/` folder of your contract.
 The `.contract` file combines the Wasm and metadata into one file and needs to be used
 when deploying the contract.

@@ -1,12 +1,37 @@
 ---
 title: Dapps
 slug: /examples/dapps
+hide_title: true
 ---
 
-Check out link! – a URL shortener DApp. It consists of a frontend and an ink! contract.
-You can view an online demo of the Dapp here: https://tiny.ink.
+<img src="/img/title/balloons-2.svg" className="titlePic" />
+
+# Dapps
+
+We'll point to a couple full-stack Dapp examples here.
+These can serve as inspiration for how to create a frontend for your
+smart contract.
+
+Two popular libraries for building frontends are:
+
+* [`polkadot-js/api`](https://github.com/polkadot-js/api) a low-level TypeScript API.
+* [useInkathon](https://github.com/scio-labs/use-inkathon) a React hooks library.
+
+## INK!athon
+
+INK!athon is a f full-stack dApp boilerplate project consisting of
+an ink! smart contract and a React frontend using the
+[useInkathon](https://github.com/scio-labs/use-inkathon) hooks library.
+
+## link!
+
+link! is a URL shortener DApp. It consists of a frontend and an ink! contract.
+
+link! uses [`polkadot-js/api`](https://github.com/polkadot-js/api) under the hood.
+The entire source code (contract + frontend) is located here:
+[https://github.com/paritytech/link](https://github.com/paritytech/link).
+
+You can view an online demo of the Dapp here: [https://tiny.ink](https://tiny.ink).
 
 To create new short links you need `ROC` tokens from our testnet.
 See [here](/testnet) for how to get those.
-
-The repository is located here: [https://github.com/paritytech/link](https://github.com/paritytech/link).
@@ -59,5 +59,5 @@ cargo contract build
 
 As a result you'll get the file `target/flipper.contract`. It's a JSON which bundles the contract's
 metadata and its Wasm blob. This file needs to be used when deploying the contract.
-You additionally get the individual `target/flipper.wasm` and `target/metadata.json` in the folder as well.
+You additionally get the individual `target/flipper.wasm` and `target/flipper.json` in the folder as well.
 
@@ -24,10 +24,10 @@ target
   └─ ink
     └─ flipper.contract
     └─ flipper.wasm
-    └─ metadata.json
+    └─ flipper.json
 ```
 
-Let's take a look at the structure of the `metadata.json`:
+Let's take a look at the structure of the `flipper.json`:
 
 ```json
 {

@@ -780,7 +780,7 @@ fn invoke_transaction(
 
 ```
 
-Note: the `function_selector` bytes can be found in the generated `target/ink/metadata.json`.
+Note: the `function_selector` bytes can be found in the generated `target/ink/<contract-name>.json`.
 
 ## Limitations of ink! v3
 

@@ -14,7 +14,7 @@ Los metadatos ink! son generados cuando un contrato es construido utilizando `ca
 `cargo contract build`.
 
 Los metadatos se pueden encontrar en tu en el directorio de destino de su contrato bajo el nombre
-`metadata.json`.
+`<contrato-nombre>.json`.
 
 :::note
 
@@ -23,7 +23,7 @@ es que el fichero `.contract` también contiene el binario Wasm de tu contrato.
 
 :::
 
-## metadata.json
+## <contract-nombre>.json
 Los metadatos se definen con las siguietes claves **requeridas**:
 - `source`: Información sobre el código Wasm.
 - `contract`: Metadatos sobre el contrato.

@@ -119,7 +119,7 @@ the example and run:
 cargo contract build
 ```
 
-As a result you'll get a file `target/<example-name>.wasm` file, a `metadata.json` file
+As a result you'll get a file `target/<example-name>.wasm` file, a `<example-name>.json` file
 and a `<example-name>.contract` file in the `target/` folder of your contract.
 The `.contract` file combines the Wasm and metadata into one file and needs to be used
 when deploying the contract.

@@ -61,5 +61,5 @@ cargo contract build
 
 As a result you'll get the file `target/flipper.contract`. It's a JSON which bundles the contract's
 metadata and its Wasm blob. This file needs to be used when deploying the contract.
-You additionally get the individual `target/flipper.wasm` and `target/metadata.json` in the folder as well.
+You additionally get the individual `target/flipper.wasm` and `target/flipper.json` in the folder as well.
 
@@ -21,10 +21,10 @@ target
   └─ ink
     └─ flipper.contract
     └─ flipper.wasm
-    └─ metadata.json
+    └─ flipper.json
 ```
 
-Vamos a ver la estructura de `metadata.json`:
+Vamos a ver la estructura de `flipper.json`:
 
 ```json
 {

@@ -784,7 +784,7 @@ fn invoke_transaction(
 
 ```
 
-Note: the `function_selector` bytes can be found in the generated `target/ink/metadata.json`.
+Note: the `function_selector` bytes can be found in the generated `target/ink/<contract-name>.json`.
 
 ## Limitations of ink! v3
-Original file line number
+Diff line change
@@ Expand Up / @@ -780,7 +780,7 @@ fn invoke_transaction( @@
     ```
-    Note: the `function_selector` bytes can be found in the generated `target/ink/metadata.json`.
+    Note: the `function_selector` bytes can be found in the generated `target/ink/<contract-name>.json`.
     ## Limitations of ink! v3
@@ Expand Down @@