Add react template variants (#182)

docs/api/tooling/create-gear-app.md

@@ -7,9 +7,24 @@ sidebar_label: Vara React Application Template
 
 ## Accelerate Decentralized App Development
 
-For those looking to swiftly launch decentralized applications (dApps) on the Vara network, the Vara React Application Template, also known as `create-vara-app`, offers a pre-configured solution designed to streamline the development process. With its well-thought-out infrastructure and convenient features, this template allows for quick creation and deployment of dApps on the Vara network.
+For those looking to swiftly launch decentralized applications (dApps) on the Vara network, the Vara React Application Template, also known as `create-vara-app` or `create-gear-app`, offers a pre-configured solution designed to streamline the development process. With its well-thought-out infrastructure and convenient features, this template allows for quick creation and deployment of dApps on the Vara network.
 
-The Vara React Application Template is available on [GitHub](https://github.com/gear-foundation/dapps-react-app). This template is packed with benefits and features that make it an ideal choice for developers seeking efficiency and simplicity in their dApp development workflow.
+The Vara React Application Template is available in two themed variations:
+
+**Vara**, at [GitHub](https://github.com/gear-foundation/dapps/frontend/templates/create-vara-app),
+
+| Home Page | Wallet Connection |
+|------|------|
+| ![Vara Template Home Page](./img/cva.png) | ![Vara Template Wallet Connection](./img/cva-wallet.png) |
+
+
+and **Gear**, at [GitHub](https://github.com/gear-foundation/dapps/frontend/templates).
+
+| Home Page | Wallet Connection |
+|------|------|
+| ![Gear Template Home Page](./img/cga.png) | ![Gear Template Wallet Connection](./img/cga-wallet.png) |
+
+This template is packed with benefits and features that make it an ideal choice for developers seeking efficiency and simplicity in their dApp development workflow.
 
 ## Features
 
@@ -27,9 +42,17 @@ The Vara React Application Template is an invaluable resource for developers in
 
 ## Installation
 
-Create new project based on this template:
+Create new project based on Vara template:
+
+```sh
+npx degit gear-foundation/dapps/frontend/templates/create-vara-app dApp
+cd dApp
+```
+
+Create new project based on Gear template:
+
 
 ```sh
-npx degit gear-foundation/dapps-react-app dApp
+npx degit gear-foundation/dapps/frontend/templates/create-gear-app dApp
 cd dApp
-```
+```

docs/examples/NFTs/nft-marketplace/nft-application.md

@@ -9,26 +9,77 @@ This article explains how to create a `React` application and connect it to an [
 
 ### Preparation
 
-1. First clone the [frontend-starter](https://github.com/gear-foundation/dapps/tree/master/frontend/templates/gear-app-starter). Install [NodeJs](https://nodejs.org/en/download/) and [NPM](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm). Make sure the latest LTS version of the NodeJs is installed. 
+1. First install one of the [templates](https://github.com/gear-foundation/dapps/tree/master/frontend/templates). Install [NodeJs](https://nodejs.org/en/download/) and [NPM](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm). Make sure the latest LTS version of the NodeJs is installed. 
 
 2. Then install yarn:
     ```shell
     yarn install
     ```
 
 3. There is an `.env.example` file. Create your own `.env` file and copy the contents of `.env.example` to your `.env` file. It contains the following variables:
-    - `REACT_APP_NODE_ADDRESS`: This variable defines the node we'll be working on.
-    - `REACT_APP_CONTRACT_ADDRESS`: The address of the contract uploaded to the chain.
-    - `REACT_APP_IPFS_ADDRESS` and `REACT_APP_IPFS_GATEWAY_ADDRESS`: These variables are needed when uploading media files to IPFS.
+    - `VITE_NODE_ADDRESS`: This variable defines the node we'll be working on.
+
+    You have to add next varibles as well:
+
+    - `VITE_CONTRACT_ADDRESS`: The address of the contract uploaded to the chain.
+    - `VITE_IPFS_ADDRESS` and `VITE_IPFS_GATEWAY_ADDRESS`: These variables are needed when uploading media files to IPFS
+
+4. In a root `consts.ts` file, specify newly added environment variables:
+    
+```typescript
+const ADDRESS = {
+  NODE: import.meta.env.VITE_NODE_ADDRESS as string,
+  CONTRACT_ADDRESS: import.meta.env.VITE_CONTRACT_ADDRESS as HexString,
+  IPFS_ADDRESS: import.meta.env.VITE_IPFS_ADDRESS as string,
+  IPFS_GATEWAY_ADDRESS: import.meta.env.VITE_IPFS_GATEWAY_ADDRESS as string,
+};
+```
 
-4. Upload the contract to the chain and set up the address in the `.env` file. Place the `meta.txt` file in the `assets/meta` folder and the `nft_state.meta.wasm` file in the `assets/wasm folder`.
+5. Install `kubo-rpc-client` library to handle IPFS requests:
 
-5. Run the application:
     ```shell
-    yarn start
+    yarn add kubo-rpc-client
     ```
 
-6. The main file `App.tsx` is simple:
+    Let's create a context to utilize it in a React way. Create `index.tsx` file in a `context` folder, and write the following code:
+
+    ```jsx
+    import { create, KuboRPCClient } from 'kubo-rpc-client';
+    import { createContext, ReactNode, useContext, useRef } from 'react';
+
+    type Props = {
+      children: ReactNode;
+    };
+
+    const IPFSContext = createContext({} as KuboRPCClient);
+
+    function IPFSProvider({ children }: Props) {
+      const ipfsRef = useRef(create({ url: process.env.REACT_APP_IPFS_ADDRESS as string }));
+      const { Provider } = IPFSContext;
+
+      return <Provider value={ipfsRef.current}>{children}</Provider>;
+    }
+
+    const useIPFS = () => useContext(IPFSContext);
+
+    export { IPFSProvider, useIPFS };
+    ```
+
+    Add `IPFSProvider` to a providers array in a `hocs/index.tsx` file:
+
+    ```typescript
+        import { IPFSProvider } from '@/context';
+
+        const providers = [..., IPFSProvider];
+    ```
+
+6. Upload the contract to the chain and set up the address in the `.env` file. Place the `meta.txt` file in the `assets/meta` folder and the `nft_state.meta.wasm` file in the `assets/wasm` folder.
+
+7. Run the application:
+    ```shell
+    yarn start
+    ```
+8. The main file `App.tsx` is simple:
 
     ```typescript
     import { useApi, useAccount } from '@gear-js/react-hooks';
@@ -67,7 +118,7 @@ This article explains how to create a `React` application and connect it to an [
     const { isAccountReady } = useAccount();
     ```
 
-7. If the `api` is ready and the `account` is connected, it displays the application's pages. Navigate to the pages folder. The project has only one page `Home`. The `index.tsx` file is also simple:
+9. If the `api` is ready and the `account` is connected, it displays the application's pages. Navigate to the pages folder. The project has only one page `Home`. The `index.tsx` file is also simple:
 
     ```typescript
     import { Route, Routes } from 'react-router-dom';
@@ -284,7 +335,7 @@ and configure the `API` of your node:
 
     ```typescript
     ...
-    import { useIPFS } from 'hooks';
+    import { useIPFS } from '@/context';
     ...
     export function CreateNft() {
         ...
@@ -398,7 +449,7 @@ touch src/hooks/api.ts
     ```typescript 
     import { useAccount } from '@gear-js/react-hooks';
     import { Button, FileInput, Input } from '@gear-js/ui'
-    import { useIPFS } from 'hooks';
+    import { useIPFS } from '@/context';
     import { useSendNFTMessage } from 'hooks/api';
     import { useState } from 'react'
     import { useNavigate } from 'react-router-dom';