Fixes bugs

frontend/package.json

@@ -3,15 +3,15 @@
   "version": "0.1.2",
   "private": true,
   "dependencies": {
-    "@gear-js/api": "0.32.3",
-    "@gear-js/react-hooks": "0.5.24",
+    "@gear-js/api": "0.32.4",
+    "@gear-js/react-hooks": "0.5.27",
     "@gear-js/ui": "0.5.19",
     "@mantine/form": "6.0.8",
     "@polkadot/api": "10.9.1",
     "@polkadot/extension-dapp": "0.46.5",
-    "@polkadot/react-identicon": "3.1.4",
+    "@polkadot/react-identicon": "^3.5.1",
     "@polkadot/types": "10.9.1",
-    "@polkadot/util": "12.3.2",
+    "@polkadot/util": "12.4.1",
     "@polkadot/util-crypto": "12.3.2",
     "@polkadot/wasm-crypto": "7.2.1",
     "@testing-library/jest-dom": "5.16.4",

frontend/src/features/score-balance/assets/fungible_token.meta.txt

@@ -0,0 +1 @@
+0001000100000000000105000000010900000000000000010a000000e10c4000081466745f696f28496e6974436f6e66696700001001106e616d65040118537472696e6700011873796d626f6c040118537472696e67000120646563696d616c730801087538000140696e697469616c5f63617061636974790c012c4f7074696f6e3c7533323e00000400000502000800000503000c04184f7074696f6e04045401100108104e6f6e6500000010536f6d65040010000001000010000005050014081466745f696f204654416374696f6e000120104d696e74080108746f18011c4163746f724964000118616d6f756e7420011075313238000000104275726e040020011075313238000100205472616e736665720c011066726f6d18011c4163746f724964000108746f18011c4163746f724964000118616d6f756e74200110753132380002001c417070726f7665080108746f18011c4163746f724964000118616d6f756e74200110753132380003002c546f74616c537570706c790004002442616c616e63654f66040018011c4163746f7249640005002041646441646d696e04012061646d696e5f696418011c4163746f7249640006002c44656c65746541646d696e04012061646d696e5f696418011c4163746f724964000700001810106773746418636f6d6d6f6e287072696d6974697665731c4163746f724964000004001c01205b75383b2033325d00001c00000320000000080020000005070024081466745f696f1c46545265706c790001082c546f74616c537570706c790400200110753132380000001c42616c616e63650400200110753132380001000028081466745f696f3c496f46756e6769626c65546f6b656e00001c01106e616d65040118537472696e6700011873796d626f6c040118537472696e67000130746f74616c5f737570706c792001107531323800012062616c616e6365732c01505665633c284163746f7249642c2075313238293e000128616c6c6f77616e6365733401905665633c284163746f7249642c205665633c284163746f7249642c2075313238293e293e000120646563696d616c73080108753800011861646d696e733c01305665633c4163746f7249643e00002c000002300030000004081820003400000238003800000408182c003c0000021800

frontend/src/features/score-balance/hooks.ts

@@ -1,15 +1,11 @@
-import { HexString } from '@polkadot/util/types';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { useAtomValue, useSetAtom } from 'jotai';
 import { useAccount } from '@gear-js/react-hooks';
 import { useReadState } from 'hooks';
 import { FT_BALANCE, FT_BALANCE_READY } from './atoms';
-import { IFTLogic, IFTMain, IFTStorage } from './types';
-import { getAccountBalanceById, getFTStorageIdByAccount } from './utils';
+import { IFTMain } from './types';
 import { ADDRESS } from './consts';
-import meta from './assets/ft_main.meta.txt';
-import metaFTLogic from './assets/ft_logic.meta.txt';
-import metaFTStorage from './assets/ft_storage.meta.txt';
+import meta from './assets/fungible_token.meta.txt';
 
 export function useFTBalance() {
   const setBalance = useSetAtom(FT_BALANCE);
@@ -24,72 +20,26 @@ export function useFTBalance() {
   };
 }
 
-function useFTStorage() {
+export function useFTBalanceSync() {
   const { account } = useAccount();
-  const { state: stateMain, error: errorMain } = useReadState<IFTMain>({
+  const { setBalance, setFTBalanceReady, isFTBalanceReady } = useFTBalance();
+  const { state, error, isStateRead } = useReadState<IFTMain>({
     programId: ADDRESS.SFT,
     meta,
   });
 
-  const { state: stateLogic, error: errorLogic } = useReadState<IFTLogic>({
-    programId: stateMain?.ftLogicId,
-    meta: metaFTLogic,
-  });
-  const [storageId, setStorageId] = useState<HexString | undefined | null>(null);
-  const [isIdExist, setIsIdExist] = useState<boolean | null>(null);
-
-  useEffect(() => {
-    if (stateLogic) {
-      setStorageId(
-        getFTStorageIdByAccount({
-          ids: stateLogic?.idToStorage,
-          accountAddress: account?.decodedAddress,
-        }),
-      );
-    }
-  }, [account, stateLogic]);
-
-  const { state, error } = useReadState<IFTStorage>({
-    programId: storageId !== null ? storageId : undefined,
-    meta: metaFTStorage,
-  });
-
   useEffect(() => {
-    if (storageId !== null && stateLogic) {
-      setIsIdExist(!!storageId);
-    }
-  }, [storageId, stateLogic, account]);
-
-  return { state, error: error || errorLogic || errorMain, isIdExist };
-}
-
-export function useFTBalanceSync() {
-  const { account } = useAccount();
-  const { setBalance, setFTBalanceReady, isFTBalanceReady } = useFTBalance();
-  const { state: stateStorage, isIdExist, error } = useFTStorage();
+    if (isStateRead && !isFTBalanceReady) setFTBalanceReady(isStateRead);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isFTBalanceReady, isStateRead]);
 
   useEffect(() => {
-    if (isIdExist !== null) {
-      setBalance(
-        getAccountBalanceById({
-          accountAddress: account?.decodedAddress,
-          balances: stateStorage?.balances,
-        }),
-      );
-
-      const getStorageReadState = () => {
-        if (isIdExist !== null) {
-          return isIdExist ? isIdExist && !!stateStorage?.balances : true;
-        }
-        return false;
-      };
-
-      if (!isFTBalanceReady && getStorageReadState()) {
-        setFTBalanceReady(true);
-      }
+    if (state?.balances && account?.decodedAddress) {
+      const userBalance = state.balances.find(([address]) => address === account.decodedAddress);
+      setBalance(userBalance ? userBalance[1] : '0');
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [account, isFTBalanceReady, isIdExist, stateStorage?.balances]);
+  }, [account?.decodedAddress, state?.balances]);
 
   return {
     errorFT: error,

frontend/src/features/score-balance/types.ts

@@ -1,9 +1,13 @@
 import { HexString } from '@polkadot/util/types';
 
 export type IFTMain = {
-  admin: HexString;
-  ftLogicId: HexString;
-  transactions: [];
+  admins: HexString[];
+  allowances: HexString[];
+  balances: Array<[HexString, string]>;
+  decimals: string;
+  name: string;
+  symbol: string;
+  totalSupply: string;
 };
 
 export type IFTLogic = {

frontend/src/features/session/components/participants-table/ParticipantsTable.tsx

@@ -1,3 +1,4 @@
+import { Fragment } from 'react';
 import { cx } from 'utils';
 import { shortenString } from 'features/session/utils';
 import styles from './ParticipantsTable.module.scss';
@@ -30,21 +31,23 @@ function ParticipantsTable({ data, userAddress }: Props) {
                 Object.keys(modifiedData[0]).map(
                   (cellName: string) =>
                     cellName !== 'id' && (
-                      <>
+                      <Fragment key={modifiedData[0].id}>
                         <td className={cx(styles.headTd)}>#</td>
                         <td className={cx(styles.headTd)}>{cellName}</td>
-                      </>
+                      </Fragment>
                     ),
                 )}
             </tr>
           </thead>
           <tbody className={cx(styles.body)}>
             {modifiedData?.map((row, rowIndex) => (
-              <tr className={cx(styles.bodyTr, isYourAddress(row.playerAddress) ? styles.bodyTrWithYourAddress : '')}>
+              <tr
+                key={row.id}
+                className={cx(styles.bodyTr, isYourAddress(row.playerAddress) ? styles.bodyTrWithYourAddress : '')}>
                 {Object.keys(row).map(
                   (cellName) =>
                     cellName !== 'id' && (
-                      <>
+                      <Fragment key={cellName}>
                         <td className={cx(styles.bodyTd, styles.bodyTdIndex)}>{rowIndex + 1}</td>
                         <td className={cx(styles.bodyTd, styles[`bodyTd${cellName}`])}>
                           {cellName === 'playerAddress' ? (
@@ -58,7 +61,7 @@ function ParticipantsTable({ data, userAddress }: Props) {
                             row[cellName as keyof TableData]
                           )}
                         </td>
-                      </>
+                      </Fragment>
                     ),
                 )}
               </tr>

frontend/src/features/wallet/components/wallet-info/WalletInfo.module.scss

@@ -12,6 +12,7 @@
 
   &-coin-image {
       margin-right: 10px;
+      width: 20px;
   }
 
   &-value {

frontend/src/features/wallet/components/wallet-modal/WalletModal.module.scss

@@ -1,5 +1,8 @@
 
 .list {  
+    max-height: 430px;
+    overflow-y: auto;
+
     .wallet-button {
       width: 100%;
       min-height: 48px;
@@ -43,6 +46,16 @@
   .account {
     display: flex;
     align-items: center;
+    margin: 10px 0;
+
+    &-identicon {
+      display: inline;
+    }
+
+    &-name {
+      max-width: 200px;
+      white-space: nowrap;
+    }
 
     &-button {
       width: 100%;
@@ -61,6 +74,15 @@
       border: none;
       outline: none;
       cursor: pointer;
+
+      &-content {
+        width: 100%;
+        padding-left: 10px;
+        gap: 10px;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+      }
 
       &.active {
         background: green