Merge pull request #10 from inkdevhub/vsofiya-inkdevhub-docs-1

Update some files and fix the links

docs/build/img/swanky/index.md

@@ -0,0 +1 @@
+test

docs/build/index.md

@@ -3,20 +3,28 @@ title: Build
 position: 1
 ---
 
+import Figure from "/src/components/figure"
+
 # Overview
 
+ <Figure caption="Build" src={require('./img/banner-build.jpg').default } width="100%" /> 
+
 Welcome to the Build section of the ink! Dev Hub documentation, your comprehensive guide to developing WASM (ink!) smart contracts within the Polkadot and Kusama ecosystems. Here, you'll find all the tools and resources you need to bring your innovative smart contract ideas to life.
 
 From scaffolding your project with Swanky to leveraging DRink!'s minimal runtime for effective contract interactions, this section covers it all. Our goal is to empower you, whether you're a seasoned web3 developer or new to the ecosystem, to seamlessly navigate the complexities of WASM smart contract development.
 
 # Swanky Suite 
 
+ <Figure caption="Swanky Suite" src={require('./img/banner-swanky.jpg').default } width="100%" />
+
 Swanky is designed to be the go-to developer tool for every aspect of developing WASM (ink!) smart contracts for Polkadot, from scaffolding to live-net deployment. While some tools currently exist, Swanky's intent is to integrate and extend these tools as necessary, offering a more streamlined, dev-friendly experience.
 
 The development of a smart contract project follows a clear, necessary sequence: scaffolding a new project, building and testing locally, deploying and testing on a test network, and finally deploying on a live network. Swanky is designed to provide support at every stage of this process, making it an indispensable asset for any WASM (ink!) smart contract developer.
 
 # DRink!
 
+ <Figure caption="DRink!" src={require('./img/banner-drink.jpg').default } width="100%" />
+
 DRink! library provides a minimal viable functionality for arbitrary runtime interaction and standard contract-related operations (like code upload, instantiation or calling). DRink! was designed with a particular trade-off in mind: giving up the whole node layer with simultaneously gaining direct access to the runtime. For that, we make use of the existing machinery exposed by the Substrate framework, that before was primarily used for pallet unit testing. We build (in-memory) minimal runtime supporting ink! smart contracts (although the library supports arbitrary ink!-compatible runtime) and expose a convenient, synchronous interface for interacting with the chain.
 
 Since there is no node running in the background, we can benefit from omitting node/network configuration issues, blocktime/finalization delays or overhead coming from asynchronous communication between e2e client and RPC chain service.

docs/build/swanky/cli.md

@@ -2,6 +2,8 @@
 sidebar_position: 1
 ---
 
+import Figure from '/src/components/figure'
+
 # Swanky CLI
 
 Swanky CLI is a Node.js based CLI application that abstracts away and extends the functionality of Polkadot.js, `cargo contract`, and other ink! based smart contract developer tools.
@@ -100,7 +102,7 @@ Passing `help` as an argument and providing it `-n`/`--nested-commands` flag wil
 swanky help --nested-commands
 ```
 
-
+<Figure caption="Full list of commands" src={require('../img/swanky/help.png').default} width="65%" />
 
 Note that every command and subcommand also supports `-h`/`--help` flags to display their usage instructions.
 
@@ -115,14 +117,22 @@ After gathering all the required information, the app will proceed to check your
 ```
 swanky init PROJECT_NAME
 ```
+<Figure caption="Init process" src={require('../img/swanky/init.png').default} width="65%" />
+
+The resulting folder structure should look something like this:
 
+<Figure caption="Folder structure" src={require('../img/swanky/folder-structure.png').default} width="65%" />
 
 If you want to start from a more complete example like those in the swanky-dapps repo, or rmrk-ink, or you want to convert your existing contract to a swanky project, you can use `swanky init --convert` command.
 
 It will prompt you for locations of your contract files, as well as additional crates and tests.
 
 In the last step, you'll be provided a list of files to be copied over and you'll be able to deselect any of them that are maybe not needed.
 
+<Figure caption="Converting an existing project" src={require('../img/swanky/init-convert.png').default} width="65%" />
+
+<Figure caption="Confirming the file list" src={require('../img/swanky/init-convert-confirm.png').default} width="65%" />
+
 :::note
 Swanky will look for a common ink! configuration, and will do it's best to copy everything to equivalent paths, but it is likely that you'll have to adjust some configs and import paths manually after conversion.
 :::
@@ -136,6 +146,7 @@ _Resources:_
 
 You can quickly check the presence and versions of required dependencies by running `swanky check` command.
 
+<Figure caption="Verify dependencies" src={require('../img/swanky/check.png').default} width="65%" />
 
 :::info
 For now, you will need to be be in a project folder to run this command.
@@ -159,6 +170,7 @@ You can also mark the account as "production" which will require you to set a pa
 
 Be careful not to use a dev account on live networks, as their mnemonic is stored in plain text in the config!
 
+<Figure caption="Creating and listing accounts" src={require('../img/swanky/acc-create.png').default} width="65%" />
 
 :::tip
 Newly generated accounts that are not the preconfigured dev accounts (Alice, Bob, Charlie...) will have no funds initially, so you'll have to transfer some manually.
@@ -172,6 +184,8 @@ _Resources:_
 
 `swanky contract` command offers several subcommands for different interactions with your contracts.
 
+<Figure caption="Different `contract` subcommands" src={require('../img/swanky/contract-commands.png').default} width="65%" />
+
 The command names are self explanatory, and to get more detailed information on using a specific command, you can use the help flag with it:
 
 ```
@@ -186,6 +200,8 @@ If you have multiple contracts and wish to compile them all at once, you can pas
 
 Likewise, if you're compiling for production, you need to pass the `--prod` flag.
 
+<Figure caption="Compile all contracts" src={require('../img/swanky/compile.png').default} width="65%"/>
+
 _Resources:_
 
 - [_`contract compile` command usage manual_](https://github.com/AstarNetwork/swanky-cli#swanky-contract-compile-contractname)
@@ -196,6 +212,8 @@ Compiling the contract will generate it's metadata too.
 
 Swanky provides `contract explain CONTRACT_NAME` command to get a more human friendly version of that metadata:
 
+<Figure caption="Getting contract metadata information" src={require('../img/swanky/contract-explain.png').default} width="65%"/>
+
 _Resources:_
 
 - [_`contract explain` command usage manual_](https://github.com/inkdevhub/swanky-cli#swanky-contract-explain-contractname)
@@ -217,6 +235,8 @@ The types are generated during the compile step and copied to `typedContract/con
 
 Running `swanky contract test CONTRACT_NAME` will detect all `*.test.ts` files in the `tests/contract_name/` directory, and run them sequentially, or in all directories inside `tests/` if you pass the `-a`/`--all` flag.
 
+<Figure caption="Run tests for a contract" src={require('../img/swanky/test.png').default} width="65%"/>
+
 :::tip
 Running the tests programmatically may throw warnings about duplicate dependencies on `@polkadot/*` libraries.
 This occurs because those libraries are included in swanky app itself, as well as in the test files.
@@ -234,7 +254,8 @@ Web based report will be generated and stored in `tests/*/testReports` directory
 ```
 serve PATH_TO_REPORTS
 ```
-
+<Figure caption="Web based test report" src={require('../img/swanky/test-report.png').default} width="65%"/>
+
 _Resources:_
 
 - [_`swanky contract test` command usage manual_](https://github.com/inkdevhub/swanky-cli#swanky-contract-test-contractname)
@@ -247,6 +268,8 @@ You will need to supply account you wish to deploy the contract from (`--account
 
 By default, your contract will be deployed to a local node, but you can pass a custom network via `-n`/`--network` flag. Available networks are configured in `swanky.config.json` file.
 
+<Figure caption="Deploying the contract" src={require('../img/swanky/deploy.png').default} width="65%"/>
+
 Successfully running the `deploy` command will print out the address your contract is deployed to, as well as save it into `swanky.config.json`
 
 _Resources:_
@@ -263,6 +286,9 @@ Both commands require `CONTRACT_NAME` and `MESSAGE_NAME` parameters, and for `tx
 
 If the message you're calling requires arguments to be passed, you can do that using `-p`/`--param` flag.
 
+<Figure caption="Calling a query on a contract" src={require('../img/swanky/contract-query.png').default} width="65%"/>
+
+<Figure caption="Calling a transaction on a contract" src={require('../img/swanky/contract-tx.png').default} width="65%"/>
 
 Result of a `query` is straight forward, `OK` followed by what ever the response is.
 
@@ -286,6 +312,7 @@ You can create additional contracts in the same project, using the `contract new
 
 The contract will be referred by `name` when using the relevant contract commands, and you can check the details in `swanky.config.json`
 
+<Figure caption="Adding a new contract" src={require('../img/swanky/contract-new.png').default} width="65%"/>
 
 _Resources:_
 
@@ -299,6 +326,7 @@ Simply running `swanky node start` will start the node, and the node will preser
 
 If you want to reset the node state, use the `swanky node purge` command.
 
+<Figure caption="Starting the swanky node" src={require('../img/swanky/node-start.png').default} width="65%"/>
 
 :::info
 Note that node needs to be running if you are using a default local network with `deploy`, `query` and `tx` commands.

docs/getting-started.md

@@ -3,7 +3,12 @@ title: About ink! Dev Hub
 sidebar_position: 1
 ---
 
-# Getting Started
+import Figure from "/src/components/figure"
+
+# Welcome to the ink! Dev Hub
+
+ <Figure caption="Welcome to the ink! Dev Hub" src={require('.//img/banner.png').default } width="100%" /> 
+
 
 The aim of the ink! Dev Hub is to improve developer tooling around WASM (ink!) smart contracts.
 

docs/learn/examples/_category_.json

@@ -1,4 +1,4 @@
 {
-    "label": "Tutorials",
+    "label": "Examples",
     "position": 3
 }

docs/learn/examples/index.md

@@ -1,3 +1,5 @@
-We are delighted to welcome you to the educational segment of the ink! Dev Hub Docs.
+# Examples
 
-This section provides comprehensive insights, examples, tutorial and more fore developers with a different level of experience.
+In this part of the ink! Dev Hub documentation, you'll discover a range of examples that illustrate various aspects of ink! smart contract development. 
+
+These examples are designed to provide practical insights and hands-on guidance, helping you understand and apply key concepts effectively in your own projects.

docs/learn/index.md

@@ -3,8 +3,12 @@ title: Learn
 position: 1
 ---
 
+import Figure from "/src/components/figure"
+
 # Overview
 
+<Figure caption="Learn" src={require('./img/banner-learn.jpg').default } width="100%" /> 
+
 Welcome to the Learn section of the ink! Dev Hub documentation, where your journey into the world of WASM (ink!) smart contracts begins. This section is tailored to equip you with the knowledge and skills necessary to navigate the Polkadot and Kusama ecosystems confidently. Whether you're new to blockchain development or an experienced web3 developer looking to expand your expertise, our comprehensive learning resources are designed to cater to your needs.
 
 As you progress through the Learn section, you'll gain valuable insights and hands-on experience with smart contract development, enabling you to harness the full potential of ink!.

docs/learn/tutorials/flipper-contract/flipper-contract.md

@@ -8,11 +8,11 @@ This tutorial targets developers with no experience in ink! and a **basic** leve
 
 | Tutorial                                                                   | Difficulty                     |
 |----------------------------------------------------------------------------|--------------------------------|
-| NFT contract with PSP34            | Intermediate ink! -  Basic Rust       |          
-| Implement Uniswap V2 core DEX | Advanced ink! - Basic Rust |
+| [NFT contract with PSP34](../nft/nft.md)            | Intermediate ink! -  Basic Rust       |          
+| [Implement Uniswap V2 core DEX](../dex/dex.md) | Advanced ink! - Basic Rust |
 
 ### To follow this tutorial you will need:
-- To [set up your ink! environment](https://docs.astar.network/docs/build/environment/ink_environment).
+- To [set up your ink! environment](/docs/learn/build-environment/ink_environment.md).
 - Basic Rust knowledge. [Learn Rust](https://www.rust-lang.org/learn).
 
 ### What will we do?

docs/learn/tutorials/flipper-contract/flipper.md

@@ -9,7 +9,7 @@ This is step-by-step explanation of the process behind building an ink! smart co
 Flipper is a basic smart contract that allows the user to toggle a boolean value located in storage to either `true` or `false`. When the flip function is called, the value will change from one to the other.
 
 ## Prerequisites
-Please refer to the previous section for the list of prerequisites.
+Please refer to the [previous section](./flipper-contract.md) for the list of prerequisites.
 
 ## Flipper Smart Contract
 In a new project folder, execute the following:

docs/learn/tutorials/nft/nft.md

@@ -11,12 +11,12 @@ This tutorial is suitable for developers with **intermediate** knowledge of ink!
 
 | Tutorial                                                                   | Difficulty                     |
 |----------------------------------------------------------------------------|--------------------------------|
-| Your First Flipper Contract              | Basic ink! -  Basic Rust       | 
-| Implement Uniswap V2 core DEX| Advanced ink! - Basic Rust |         
+| [Your First Flipper Contract](../flipper-contract/flipper-contract.md)              | Basic ink! -  Basic Rust       | 
+| [Implement Uniswap V2 core DEX](../dex/dex.md) | Advanced ink! - Basic Rust |         
 
 ## How to Start
 To follow this tutorial you will need:
-- To [set up your ink! environment](https://docs.astar.network/docs/build/environment/ink_environment).
+- To [set up your ink! environment](/docs/learn/build-environment/ink_environment.md).
 - Basic Rust knowledge. [Learn Rust](https://www.rust-lang.org/learn)
 - Prior knowledge about ERC721 is helpful but not mandatory.
 
@@ -34,9 +34,9 @@ To follow this tutorial you will need:
 - Event handling.
 
 ## Summary
-I. OpenBrush wizard  
-II. Override mint() method
-III Custom Trait for mint() 
-IV. PayableMint Trait definition 
-V. PayableMint Trait implementation  
-VI. Events
+[I. OpenBrush wizard](./wizard/wizard.md)   
+[II. Override mint() method](./override/override.md)   
+[III Custom Trait for mint()](./customTrait/customtrait.md)   
+[IV. PayableMint Trait definition](./payableMintTrait/payableminttrait.md)   
+[V. PayableMint Trait implementation](./payableMintImpl/payablemintimpl.md)   
+[VI. Events](./events/events.md)

docs/learn/tutorials/nft/wizard/wizard.md

@@ -5,7 +5,7 @@
 To create a smart contract which follows PSP34 standard use Openbrush Wizard:
 1. Open [Openbrush.io](https://openbrush.io/) website and go to bottom of the page.
 2. Select PSP34.
-3. Select the version to match the rest of the tutorial. Check *What will be used* in the opening chapter.
+3. Select the version to match the rest of the tutorial. Check *What will be used* in the [opening chapter](/docs/learn/tutorials/nft/nft.md).
 4. Name your contract. In this tutorial we will use `Shiden34`.
 5. Add your symbol name. In this tutorial we will use `SH34`.
 6. Select extensions: *Metadata*, *Mintable*, *Enumerable*.