Add read state, handle message

src/App.tsx

@@ -7,9 +7,9 @@ import { useApi } from '@gear-js/react-hooks';
 function Component() {
   const { isApiReady } = useApi();
 
-  // if (!isApiReady) {
-  //   return <>!isApiReady</>;
-  // }
+  if (!isApiReady) {
+    return <>!isApiReady</>;
+  }
 
   return (
     <>

src/app/hooks/api.ts

@@ -1,4 +1,4 @@
-import { useAlert, useReadFullState } from '@gear-js/react-hooks';
+import { useAlert, useReadFullState, useSendMessageHandler } from '@gear-js/react-hooks';
 import { getStateMetadata, ProgramMetadata, StateMetadata } from '@gear-js/api';
 import { HexString } from '@polkadot/util/types';
 import { useEffect, useState } from 'react';

src/app/hooks/use-read-state.tsx

@@ -0,0 +1,28 @@
+import meta from '@/assets/meta/fungible_token.meta.txt';
+import metaAirdrop from '@/assets/meta/meme_drop.meta.txt';
+
+import { useReadState } from '.';
+import { ENV } from '../сonsts';
+import { useProgramMetadata } from './api';
+import { useSendMessageHandler } from '@gear-js/react-hooks';
+
+export const programIdState = ENV.CONTRACT;
+export const programIdAirdrop = ENV.AIRDROP;
+
+export function useState() {
+	const { state } = useReadState<any>({
+		programId: programIdState,
+		meta,
+		payload: '0x',
+	});
+
+	return { state };
+}
+
+export function useStateMessage() {
+	const metadata = useProgramMetadata(metaAirdrop);
+	return useSendMessageHandler(programIdAirdrop, metadata, {
+		disableAlerts: true,
+		isMaxGasLimit: true,
+	});
+}

src/app/сonsts.ts

@@ -0,0 +1,5 @@
+export const ENV = {
+	NODE: import.meta.env.VITE_NODE_ADDRESS,
+	CONTRACT: import.meta.env.VITE_CONTRACT_ADDRESS,
+	AIRDROP: import.meta.env.VITE_AIRDROP_CONTRACT_ADDRESS,
+}

src/assets/meta/fungible_token.meta.txt

@@ -0,0 +1 @@
+0002000100000000000105000000010700000000000000000108000000590e3800084466756e6769626c655f746f6b656e5f696f28496e6974436f6e66696700001001106e616d65040118537472696e6700011873796d626f6c040118537472696e6700011461646d696e08011c4163746f724964000120646563696d616c73100108753800000400000502000810106773746418636f6d6d6f6e287072696d6974697665731c4163746f724964000004000c01205b75383b2033325d00000c00000320000000100010000005030014084466756e6769626c655f746f6b656e5f696f204654416374696f6e00011c104d696e74080118616d6f756e7418011075313238000108746f08011c4163746f724964000000104275726e080118616d6f756e741801107531323800011066726f6d08011c4163746f724964000100205472616e736665720c011066726f6d08011c4163746f724964000108746f08011c4163746f724964000118616d6f756e74180110753132380002001c417070726f7665080108746f08011c4163746f724964000118616d6f756e74180110753132380003002c546f74616c537570706c790004002442616c616e63654f66040008011c4163746f7249640005002041646441646d696e04011461646d696e08011c4163746f724964000600001800000507001c084466756e6769626c655f746f6b656e5f696f1c46544576656e74000110205472616e736665720c011066726f6d08011c4163746f724964000108746f08011c4163746f724964000118616d6f756e74180110753132380000001c417070726f76650c011066726f6d08011c4163746f724964000108746f08011c4163746f724964000118616d6f756e74180110753132380001002c546f74616c537570706c790400180110753132380002001c42616c616e63650400180110753132380003000020084466756e6769626c655f746f6b656e5f696f3c496f46756e6769626c65546f6b656e00001c01106e616d65040118537472696e6700011873796d626f6c040118537472696e6700011861646d696e732401305665633c4163746f7249643e000130746f74616c5f737570706c791801107531323800012062616c616e6365732801505665633c284163746f7249642c2075313238293e000128616c6c6f77616e6365733001905665633c284163746f7249642c205665633c284163746f7249642c2075313238293e293e000120646563696d616c7310010875380000240000020800280000022c002c000004080818003000000234003400000408082800

src/assets/meta/meme_drop.meta.txt

@@ -0,0 +1 @@
+0002000100000000000104000000000000000001080000000109000000c90730000808696f10496e6974000004013866745f636f6e74726163745f696404011c4163746f72496400000410106773746418636f6d6d6f6e287072696d6974697665731c4163746f724964000004000801205b75383b2033325d000008000003200000000c000c0000050300100808696f18416374696f6e00010c2041646441646d696e0401286163636f756e745f696404011c4163746f7249640000002c416464436c61696d65727308012c6163636f756e745f6964731401305665633c4163746f7249643e00011c616d6f756e74731801245665633c753132383e00010014436c61696d00020000140000020400180000021c001c0000050700200808696f1451756572790001102c476574436c61696d65727300000040476574436c61696d6572416d6f756e74040004011c4163746f7249640001003c4765744674436f6e747261637449640002002447657441646d696e7300030000240808696f2851756572795265706c7900011020436c61696d65727304002801505665633c284163746f7249642c2075313238293e00000034436c61696d6572416d6f756e7404001c0110753132380001001841646d696e7304001401305665633c4163746f7249643e000200304674436f6e74726163744964040004011c4163746f72496400030000280000022c002c00000408041c00

src/features/wallet/components/wallet/wallet.module.scss

@@ -0,0 +1,6 @@
+.token {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	margin-right: 10px;
+}

src/features/wallet/components/wallet/wallet.tsx

@@ -5,15 +5,25 @@ import { useModal } from '@/hooks/use-modal';
 
 import { AccountButton } from '../account-button';
 import { WalletModal } from '../wallet-modal';
+import { useState } from '@/app/hooks/use-read-state';
+
+import style from './wallet.module.scss'
 
 function Wallet() {
   const { account, isAccountReady } = useAccount();
   const [isModalOpen, openModal, closeModal] = useModal();
+  const { state } = useState();
 
   return isAccountReady ? (
     <>
       {account ? (
-        <AccountButton color="dark" address={account.address} name={account.meta.name} onClick={openModal} />
+        <>
+          <div className={style.token}>
+            <h2>{state?.totalSupply}</h2>
+            <h2>{state?.symbol}</h2>
+          </div>
+          <AccountButton color="dark" address={account.address} name={account.meta.name} onClick={openModal} />
+        </>
       ) : (
         <Button text="Connect Wallet" onClick={openModal} />
       )}

src/pages/home.tsx

@@ -1,11 +1,14 @@
+import { useStateMessage } from '@/app/hooks/use-read-state'
 import { Container } from '@/components'
 import { Button } from '@gear-js/vara-ui'
 import React from 'react'
 
 export const Home = () => {
+	const handleMessage = useStateMessage()
+
 	return (
 		<Container>
-			<Button text='Button' />
+			<Button text='Claim' onClick={() => handleMessage({ payload: { Claim: null } })} />
 		</Container>
 	)
 }