refactor: update instruction components to use span instead of p and …

src/components/common/section/index.tsx

@@ -23,10 +23,10 @@ const INSTRUCTIONS = [
     description: (
       <>
         Once the payment is complete, the page will load your results <br />
-        <p className="mt-2">
+        <span className="mt-2">
           <span className="font-bold">IMPORTANT:</span> DO NOT refresh the page if you’ve made a payment but haven’t
           received the result yet. Wait until the process is complete
-        </p>
+        </span>
       </>
     ),
   },
@@ -37,10 +37,10 @@ const INSTRUCTIONS = [
   {
     subtitle: 'Ask another question:',
     description: (
-      <p>
+      <span>
         To start a new session, click &quot;
         <span className="font-bold">Make a New Forecast</span>&quot; or refresh the page
-      </p>
+      </span>
     ),
   },
 ];

src/components/pages/game/game.tsx

@@ -57,6 +57,7 @@ export const GameSection = () => {
   const [isRetry, setRetry] = useState(false);
   const [dontReload, setDontReload] = useState(false);
   const [currencyName, setCurrencyName] = useState<Currencies>(Object.keys(currencies)[0] as Currencies);
+  const [question, setQuestion] = useState<string>('');
 
   const {
     register,
@@ -70,6 +71,7 @@ export const GameSection = () => {
 
   const onSubmit: SubmitHandler<TarotRequestSchemaType> = async (data, e) => {
     e?.preventDefault();
+    setQuestion(data.question.trim());
     await transfer({ question: data.question.trim(), tokenName: currencyName });
   };
 
@@ -93,8 +95,9 @@ export const GameSection = () => {
     if (predictionAnswer) {
       const timer = setTimeout(() => {
         const formatted = predictionAnswer.answer.replaceAll('*', '');
+        const response = `Your answer:\n${formatted}\n\n\nYour question:\n${question}`;
 
-        setValue('question', formatted);
+        setValue('question', response);
         setShowTip(true);
         setRetry(true);
       }, 3200);
@@ -103,7 +106,7 @@ export const GameSection = () => {
         clearTimeout(timer);
       };
     }
-  }, [isSuccess, predictionAnswer, setValue, watch]);
+  }, [isSuccess, predictionAnswer, question, setValue, watch]);
 
   useEffect(() => {
     if (isTipSuccess) {

src/hooks/contracts/write/use-send-sol.ts

@@ -1,5 +1,5 @@
 import { useWallet } from '@solana/wallet-adapter-react';
-import { SystemProgram, Transaction } from '@solana/web3.js';
+import { LAMPORTS_PER_SOL, SystemProgram, Transaction } from '@solana/web3.js';
 import { useMutation } from '@tanstack/react-query';
 
 import { useGetTokenAndSolBalance } from '../read/use-get-token-and-sol-balance';
@@ -38,8 +38,8 @@ const useSendSol = () => {
       const fee = await rawTx.getEstimatedFee(connection);
       const solBalance = tokens?.find((token) => token.mint === wSolMint.toBase58())?.amount;
 
-      if (fee && solBalance && Number(solBalance) + Number(amount) < fee) {
-        throw new Error('Insufficient SOL for transaction fee');
+      if (fee && solBalance && Number(solBalance) < fee + amount * LAMPORTS_PER_SOL) {
+        throw new Error('Insufficient funds');
       }
 
       return await sendAndConfirmTransaction(publicKey, rawTx, sendTransaction);

src/hooks/contracts/write/use-send.ts

@@ -70,8 +70,8 @@ const useSend = () => {
       const fee = await rawTx.getEstimatedFee(connection);
       const solBalance = tokens?.find((token) => token.mint === wSolMint.toBase58())?.amount;
 
-      if (fee && solBalance && Number(solBalance) + Number(amount) < fee) {
-        throw new Error('Insufficient SOL for transaction fee');
+      if (fee && solBalance && Number(solBalance) < fee) {
+        throw new Error('Insufficient funds');
       }
 
       return await sendAndConfirmTransaction(publicKey, rawTx, sendTransaction);