apply documentation for app (#135)

* apply documentation for app

* remove some packages unnecessary

* added utils.spec.ts

* added default value for convertHex

* add cookie jest, add type for setCookie expires

* done jest for Collaborators

* fix metadata by wws, remove unnecessary folder, fix type

* fix building failed

documentation/README.md

@@ -0,0 +1,89 @@
+<div align="center"> 
+  <img src="https://user-images.githubusercontent.com/67900234/205422369-4ee51a5a-1822-4da2-bd21-055cd0b40230.svg" width="600" >
+</div>
+
+<br />
+
+<div align="center">
+  <img src="https://img.shields.io/github/contributors-anon/grindytech/gafi-app?style=flat-square" alt="contributors" />
+  <img src="https://img.shields.io/github/forks/grindytech/gafi-app?style=flat-square" alt="forks" />
+  <img src="https://img.shields.io/github/stars/grindytech/gafi-app?style=flat-square" alt="stars" />
+  <img src="https://img.shields.io/github/issues/grindytech/gafi-app?style=flat-square" alt="issues" />
+  <img src="https://img.shields.io/github/issues-pr/grindytech/gafi-app?style=flat-square" alt="pull-requests" />
+</div>
+
+# Gafi Dashboard - Frontend
+
+## Introduction
+
+Creating app dashboards for easy content management, like games, NFTs, and collections, is now simpler. <br />
+My goal a top-notch UI/UX with the latest tech for an exceptional user experience.
+
+Technologies:
+
+- [ReactJS](https://legacy.reactjs.org/)
+- [ViteJS](https://vitejs.dev/)
+- [Chakra-UI](https://chakra-ui.com/)
+- [PolkadotJS](https://github.com/polkadot-js/api)
+- [Tanstack](https://tanstack.com/)
+
+## How to installation?
+
+Create apps effortlessly with no build setup required. If you encounter issues, [report them here.](https://github.com/grindytech/gafi/issues)<br />
+Follow these steps for a hassle-free installation, making sure you have the necessary packages.
+
+- 1. [Git](https://git-scm.com/downloads)
+- 2. [Yarn](https://classic.yarnpkg.com/lang/en/docs/install/#mac-stable)
+
+```bash
+# Clone the repository
+git clone -b dev https://github.com/grindytech/gafi-app.git
+
+# Change to project directory
+cd gafi-app
+
+# Download project dependencies
+yarn install
+
+# Run the server
+yarn dev
+```
+
+<div> 
+  <img src="https://drive.google.com/uc?export=view&id=104-mZ_hZ8KSoA6Z7uf5daWG3kjtp0t1G" />
+</div>
+
+## How to use?
+
+To ensure a seamless app experience, connect a wallet ([Polkadot](https://polkadot.js.org/extension/), [Clover](https://docs.clv.org/use-clv-wallet/download-clv-wallet), or [Subwallet](https://www.subwallet.app/download.html)) for full features.<br />
+Guests can preview the application, but interactive access is limited. <br />
+For more details, please refer to our [documentation](https://wiki.gafi.network/learn/web3-gaming). Thank you!
+
+<div> 
+  <img src="https://drive.google.com/uc?export=view&id=1WZoK22Ji7Mgk5sr9DYV3XMrMZ4pgQdLE" />
+</div>
+
+## How to test
+
+Before deployment, crucial applications must pass unit testing<br />
+to ensure functionality and prevent bugs. also ensuring user satisfaction. <br />
+To better understand unit testing techniques for resolving [issues](https://jestjs.io/docs/getting-started)
+
+```bash
+# Clone the repository
+git clone -b dev https://github.com/grindytech/gafi-app.git
+
+# Change to project directory
+cd gafi-app
+
+# Download project dependencies
+yarn install
+
+# Execute unit tests
+yarn test
+```
+
+<div> 
+  <img src="https://drive.google.com/uc?export=view&id=1E1Y3sF2l4cut36CqxAD0kNYcJiVJLgrS" />
+  <img src="https://drive.google.com/uc?export=view&id=1_YXP9x84Psie_BreOs5h0jd6rZV0HgKz" width="100%" />
+</div>

jest.config.ts

@@ -7,6 +7,10 @@ module.exports = {
   moduleNameMapper: {
     '\\.svg$': '<rootDir>/src/__mocks__/svgrMock.tsx',
   },
+  setupFilesAfterEnv: [
+    // is not part of RTL
+    '@testing-library/jest-dom/extend-expect',
+  ],
   transform: {
     '^.+\\.tsx?$': 'ts-jest',
   },

package.json

@@ -15,7 +15,7 @@
     "preview": "vite preview --host",
     "typegen": "yarn get:testnet:metadata && yarn generate:defs && yarn generate:meta",
     "mainnet:typegen": "yarn mainnet:generate:defs && yarn mainnet:generate:meta",
-    "get:testnet:metadata": "rm -rf ./edgeware.json && curl -H \"Content-Type: application/json\" -d '{\"id\":\"1\", \"jsonrpc\":\"2.0\", \"method\": \"state_getMetadata\", \"params\":[]}' https://rpc-test.gafi.network >> edgeware.json",
+    "get:testnet:metadata": "rm -rf ./edgeware.json && curl -H \"Content-Type: application/json\" -d '{\"id\":\"1\", \"jsonrpc\":\"2.0\", \"method\": \"state_getMetadata\", \"params\":[]}' https://ws-testnet.gafi.network >> edgeware.json",
     "generate:defs": "ts-node --skip-project node_modules/.bin/polkadot-types-from-defs --package gafi-dashboard/interfaces --input ./src/interfaces --endpoint ./edgeware.json",
     "generate:meta": "ts-node --skip-project node_modules/.bin/polkadot-types-from-chain --package gafi-dashboard/interfaces --endpoint ./edgeware.json --output ./src/interfaces",
     "test": "jest"
@@ -29,7 +29,6 @@
     "@polkadot/api": "^9.4.2",
     "@polkadot/typegen": "^9.4.2",
     "@polkadot/types": "^9.4.2",
-    "@reduxjs/toolkit": "^1.9.5",
     "@tanstack/react-query": "^4.29.14",
     "@tanstack/react-query-devtools": "^4.29.15",
     "axios": "^1.1.2",
@@ -41,7 +40,6 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.44.3",
     "react-json-view": "^1.21.3",
-    "react-redux": "^8.1.1",
     "react-router-dom": "^6.13.0",
     "ts-jest": "^29.1.0",
     "vite-tsconfig-paths": "^4.2.0"

src/components/Avatar/AvatarCollaborators.tsx

@@ -3,12 +3,12 @@ import AvatarJazzicon from './AvatarJazzicon';
 
 import { ColorOfCollaborator, convertHex, shorten } from 'utils';
 
-import { TypeCollaboratorsRole } from 'layouts/Collaborators/CollaboratorsUtils';
 import React from 'react';
 import Clipboard from 'components/Clipboard';
+import { TypeCollaboratorRoles } from 'types/collaborator.type';
 
 interface AvatarProfileProps {
-  role: TypeCollaboratorsRole;
+  role: TypeCollaboratorRoles;
   account: { address: string; name: string };
   changeRole?: React.ReactNode;
   sx?: FlexProps;

src/components/ConnectWallet/ConnectWalletModal.tsx

@@ -128,7 +128,7 @@ export default ({ setAccount, onClose }: ConnectWalletModalProps) => {
 
                       // update cookie for extension injected
                       setCookie({
-                        expires: `${getDate}`,
+                        expires: getDate,
                         key: INJECTED_EXTENSION_CONNECTED,
                         value: meta.extension as string,
                       });

src/components/ConnectWallet/ConnectWalletProfile.tsx

@@ -38,8 +38,6 @@ export default ({ account, accounts }: ConnectWalletProfileProps) => {
     account: account.address,
   });
 
-  console.log(balance);
-
   return (
     <Popover placement="bottom-end">
       <PopoverTrigger>

src/contexts/contexts.account/index.tsx

@@ -88,7 +88,7 @@ const useAccountContext = () => {
 
     // update cookie for account
     setCookie({
-      expires: `${getDate}`,
+      expires: getDate,
       key: INJECTED_ACCOUNT_CONNECTED,
       value: JSON.stringify({ address: account.address, name: account.name }),
     });
@@ -103,4 +103,4 @@ const useAccountContext = () => {
   };
 };
 
-export { AccountContextProvider, useAccountContext };
+export { AccountContextProvider, useAccountContext, AccountContext };

src/hooks/useItemBalanceOf.ts

@@ -1,7 +1,4 @@
 import { useQuery } from '@tanstack/react-query';
-import { StorageKey, u32 } from '@polkadot/types';
-import { AccountId32 } from '@polkadot/types/interfaces';
-import { Codec } from '@polkadot/types/types';
 import { useSubstrateContext } from 'contexts/contexts.substrate';
 
 export interface ItemBalanceOfProps {
@@ -48,19 +45,14 @@ export default function useItemBalanceOf({
                 address
               );
 
-              return service.map(
-                ([option, meta]: [
-                  StorageKey<[AccountId32, u32, u32]>,
-                  Codec
-                ]) => {
-                  return {
-                    owner: option.args[0].toString(),
-                    collection_id: option.args[1].toNumber(),
-                    nft_id: option.args[2].toNumber(),
-                    amount: meta.toHuman() as string,
-                  };
-                }
-              );
+              return service.map(([option, meta]) => {
+                return {
+                  owner: option.args[0].toString(),
+                  collection_id: option.args[1].toNumber(),
+                  nft_id: option.args[2].toNumber(),
+                  amount: meta.toHuman() as string,
+                };
+              });
             })
           ).then(meta => meta.flat() as ItemBalanceOfProps[]);
         }

src/hooks/useLootTableOf.ts

@@ -1,7 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { GafiSupportGameTypesLoot } from '@polkadot/types/lookup';
-import { Vec } from '@polkadot/types';
 import { useSubstrateContext } from 'contexts/contexts.substrate';
 
 export interface lootTableOfProps {
@@ -48,9 +46,7 @@ export default function useLootTableOf({
         if (filter === 'pool_id' && arg) {
           return Promise.all(
             arg.map(async pool_id => {
-              const service = (await api.query.game.lootTableOf(
-                pool_id
-              )) as Vec<GafiSupportGameTypesLoot>;
+              const service = await api.query.game.lootTableOf(pool_id);
 
               return service.map(meta => ({
                 weight: meta.weight.toNumber(),

src/hooks/useMetaCollection.ts

@@ -2,8 +2,6 @@ import { useQuery } from '@tanstack/react-query';
 
 import useSubscribeSystem from './useSubscribeSystem';
 import { useEffect } from 'react';
-import { Option, StorageKey, u32 } from '@polkadot/types';
-import { PalletNftsCollectionMetadata } from '@polkadot/types/lookup';
 import { useSubstrateContext } from 'contexts/contexts.substrate';
 import { TypeMetaCollection } from 'types/meta.type.ts';
 
@@ -32,26 +30,21 @@ export default function useMetaCollection({
         if (filter === 'entries') {
           const service = await api.query.nfts.collectionMetadataOf.entries();
 
-          return service.map(
-            ([collection_id, meta]: [
-              StorageKey<[u32]>,
-              Option<PalletNftsCollectionMetadata>
-            ]) => {
-              const metadata = JSON.parse(
-                String(meta.value.data.toHuman())
-              ) as TypeMetaCollection;
-
-              return {
-                title: metadata.title || 'unknown',
-                description: metadata.description || 'unknown',
-                external_url: metadata.external_url || 'unknown',
-                avatar: metadata.avatar,
-                banner: metadata.banner,
-                cover: metadata.cover,
-                collection_id: collection_id.args[0].toNumber(),
-              } as MetaCollectionFieldProps;
-            }
-          );
+          return service.map(([collection_id, meta]) => {
+            const metadata = JSON.parse(
+              String(meta.value.data.toHuman())
+            ) as TypeMetaCollection;
+
+            return {
+              title: metadata.title || 'unknown',
+              description: metadata.description || 'unknown',
+              external_url: metadata.external_url || 'unknown',
+              avatar: metadata.avatar,
+              banner: metadata.banner,
+              cover: metadata.cover,
+              collection_id: collection_id.args[0].toNumber(),
+            } as MetaCollectionFieldProps;
+          });
         }
 
         if (filter === 'collection_id' && arg) {

src/hooks/useMetaGame.ts

@@ -1,7 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { Option, StorageKey, u32 } from '@polkadot/types';
-import { PalletNftsCollectionMetadata } from '@polkadot/types/lookup';
 import { useSubstrateContext } from 'contexts/contexts.substrate';
 import { TypeMetaGame } from 'types/meta.type.ts';
 
@@ -25,29 +23,24 @@ export default ({ filter, arg, key }: useMetaGameProps) => {
         if (filter === 'entries') {
           const service = await api.query.game.gameMetadataOf.entries();
 
-          return service.map(
-            ([game_id, meta]: [
-              StorageKey<[u32]>,
-              Option<PalletNftsCollectionMetadata>
-            ]) => {
-              const metadata = JSON.parse(
-                String(meta.value.data.toHuman())
-              ) as TypeMetaGame;
+          return service.map(([game_id, meta]) => {
+            const metadata = JSON.parse(
+              String(meta.value.data.toHuman())
+            ) as TypeMetaGame;
 
-              return {
-                title: metadata.title || 'unknown',
-                categories: metadata.categories || 'unknown',
-                description: metadata.description || 'unknown',
-                website: metadata.website || 'unknown',
-                twitter: metadata.twitter || 'unknown',
-                discord: metadata.discord || 'unknown',
-                avatar: metadata.avatar,
-                banner: metadata.banner,
-                cover: metadata.cover,
-                game_id: game_id.args[0].toNumber(),
-              } as MetaGameFieldProps;
-            }
-          );
+            return {
+              title: metadata.title,
+              categories: metadata.categories,
+              description: metadata.description,
+              website: metadata.website,
+              twitter: metadata.twitter,
+              discord: metadata.discord,
+              avatar: metadata.avatar,
+              banner: metadata.banner,
+              cover: metadata.cover,
+              game_id: game_id.args[0].toNumber(),
+            } as MetaGameFieldProps;
+          });
         }
 
         if (filter === 'game_id' && arg) {

src/hooks/useMetaPool.ts

@@ -32,8 +32,8 @@ export default ({ filter, arg, key }: useMetaPoolProps) => {
               ) as TypeMetaPool;
 
               return {
-                title: metadata.title || 'unknown',
-                description: metadata.description || 'unknown',
+                title: metadata.title,
+                description: metadata.description,
                 pool_id,
               } as MetaPoolFieldProps;
             })

src/hooks/useNFTsItem.ts

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import { Option, StorageKey, u32 } from '@polkadot/types';
+import { Option } from '@polkadot/types';
 import { PalletNftsItemDetails } from '@polkadot/types/lookup';
 import { useSubstrateContext } from 'contexts/contexts.substrate';
 
@@ -37,18 +37,13 @@ export default function useNFTsItem({ filter, key, arg }: useNFTsItemProps) {
 
               const service = await api.query.nfts.item.entries(collection_id);
 
-              return service.map(
-                ([option, meta]: [
-                  StorageKey<[u32, u32]>,
-                  Option<PalletNftsItemDetails>
-                ]) => {
-                  return {
-                    collection_id: option.args[0].toNumber(),
-                    nft_id: option.args[1].toNumber(),
-                    owner: meta.value.owner.toString(),
-                  };
-                }
-              );
+              return service.map(([option, meta]) => {
+                return {
+                  collection_id: option.args[0].toNumber(),
+                  nft_id: option.args[1].toNumber(),
+                  owner: meta.value.owner.toString(),
+                };
+              });
             })
           ).then(data => data.flat());
         }
@@ -58,10 +53,7 @@ export default function useNFTsItem({ filter, key, arg }: useNFTsItemProps) {
             arg.map(async option => {
               const [collection_id, nft_id] = option as number[];
 
-              const service = (await api.query.nfts.item(
-                nft_id,
-                collection_id
-              )) as Option<PalletNftsItemDetails>;
+              const service = await api.query.nfts.item(nft_id, collection_id);
 
               return {
                 collection_id,