diff --git a/docs/api/tooling/create-gear-app.md b/docs/api/tooling/create-gear-app.md index f4629b7..c6633f8 100644 --- a/docs/api/tooling/create-gear-app.md +++ b/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 -``` \ No newline at end of file +``` diff --git a/docs/api/tooling/img/cga-wallet.png b/docs/api/tooling/img/cga-wallet.png new file mode 100644 index 0000000..70704af Binary files /dev/null and b/docs/api/tooling/img/cga-wallet.png differ diff --git a/docs/api/tooling/img/cga.png b/docs/api/tooling/img/cga.png new file mode 100644 index 0000000..4b59b09 Binary files /dev/null and b/docs/api/tooling/img/cga.png differ diff --git a/docs/api/tooling/img/cva-wallet.png b/docs/api/tooling/img/cva-wallet.png new file mode 100644 index 0000000..7b7d21c Binary files /dev/null and b/docs/api/tooling/img/cva-wallet.png differ diff --git a/docs/api/tooling/img/cva.png b/docs/api/tooling/img/cva.png new file mode 100644 index 0000000..d519465 Binary files /dev/null and b/docs/api/tooling/img/cva.png differ diff --git a/docs/examples/NFTs/nft-marketplace/nft-application.md b/docs/examples/NFTs/nft-marketplace/nft-application.md index 170cb4c..926c611 100644 --- a/docs/examples/NFTs/nft-marketplace/nft-application.md +++ b/docs/examples/NFTs/nft-marketplace/nft-application.md @@ -9,7 +9,7 @@ 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 @@ -17,18 +17,69 @@ This article explains how to create a `React` application and connect it to an [ ``` 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 {children}; + } + + 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';