feat: add currencies

src/components/common/CurrencySelect/index.tsx

@@ -1,21 +1,28 @@
-import Solana from '@/components/common/Svg/Solana.tsx';
 import { Select, SelectTrigger, SelectItem, SelectValue, SelectContent } from '@/components/ui/select.tsx';
+import { currencies, TCurrencies } from '@/constants/addresses.ts';
 
-export const CurrencySelect = () => {
+interface ICurrencySelect {
+  value: string;
+  onValueChange: (value: TCurrencies) => void;
+}
+
+export const CurrencySelect = ({ value, onValueChange }: ICurrencySelect) => {
   return (
-    <Select>
-      <SelectTrigger>
+    <Select value={value} onValueChange={onValueChange}>
+      <SelectTrigger className="font-poppins">
         <SelectValue placeholder="Theme" />
       </SelectTrigger>
-      <SelectContent>
-        <SelectItem value="light">
-          <div className="flex flex-row items-center gap-4">
-            <Solana />
-            <div>0.003</div>
-          </div>
-        </SelectItem>
-        <SelectItem value="dark">Dark</SelectItem>
-        <SelectItem value="system">System</SelectItem>
+      <SelectContent className="font-poppins">
+        {Object.values(currencies).map((e, index) => {
+          return (
+            <SelectItem key={index} value={Object.keys(currencies)[index]}>
+              <div className="flex flex-row items-center gap-4">
+                <img src={`/icons/currencies/${Object.keys(currencies)[index]}.svg`} alt="currecy" />
+                <div>{e.defaultPrice}</div>
+              </div>
+            </SelectItem>
+          );
+        })}
       </SelectContent>
     </Select>
   );

src/components/pages/game/game.tsx

@@ -7,12 +7,12 @@ import { z } from 'zod';
 
 import { BaseTooltip } from '@/components/common/BaseTooltip';
 import { CurrencySelect } from '@/components/common/CurrencySelect';
-import Solana from '@/components/common/Svg/Solana.tsx';
 import { Button } from '@/components/ui/button.tsx';
+import { currencies, TCurrencies } from '@/constants/addresses.ts';
 import useStatus from '@/hooks/api/use-status';
 import useMakePrediction from '@/hooks/contracts/write/use-make-prediction';
 import useSend from '@/hooks/contracts/write/use-send.ts';
-import { cn } from '@/lib/utils';
+import { cn, showTxToast } from '@/lib/utils';
 import { useWalletModalStore } from '@/store/wallet-modal.tsx';
 
 const TarotRequestSchema = z.object({
@@ -56,6 +56,7 @@ export const GameSection = () => {
   const [showTip, setShowTip] = useState<boolean>(false);
   const [isRetry, setRetry] = useState(false);
   const [dontReload, setDontReload] = useState(false);
+  const [currencyName, setCurrencyName] = useState<TCurrencies>(Object.keys(currencies)[0] as TCurrencies);
 
   const {
     register,
@@ -69,7 +70,7 @@ export const GameSection = () => {
 
   const onSubmit: SubmitHandler<TarotRequestSchemaType> = async (data, e) => {
     e?.preventDefault();
-    await transfer({ question: data.question.trim(), tokenName: 'usdcMint' });
+    await transfer({ question: data.question.trim(), tokenName: currencyName });
   };
 
   const handleTip = async () => {
@@ -83,7 +84,9 @@ export const GameSection = () => {
       return;
     }
 
-    await transferCurrency({ amount: selectedTip, tokenName: 'usdcMint' });
+    await showTxToast('Sending Tip to the Oracle', async () => {
+      await transferCurrency({ amount: selectedTip, tokenName: currencyName });
+    });
   };
 
   useEffect(() => {
@@ -213,7 +216,7 @@ export const GameSection = () => {
       </div>
 
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-10">
-        <CurrencySelect />
+        <CurrencySelect onValueChange={setCurrencyName} value={currencyName} />
         {publicKey ? (
           <BaseTooltip content={status?.isShutDown ? 'Oracle is taking a brake' : ''}>
             <Button
@@ -253,10 +256,10 @@ export const GameSection = () => {
         <div className="grid grid-rows-[auto_auto] gap-5 lg:grid-cols-2 lg:gap-10">
           <div className="grid grid-cols-2 gap-[20px] md:grid-cols-5">
             <div className="flex w-full items-center justify-center rounded-[8px] border border-[#3A3939] bg-[#D0C7A3] p-[14px] text-[20px] max-md:col-span-2">
-              <Solana />
+              <img src={`/icons/currencies/${currencyName}.svg`} alt="currecy" />
             </div>
 
-            {[0.002, 0.004, 0.02, 0.5].map((tip) => (
+            {currencies[currencyName].tips.map((tip) => (
               <Button
                 size="responsive"
                 variant="outline"

src/constants/addresses.ts

@@ -16,15 +16,20 @@ export const currencies = {
   wSolMint: {
     address: wSolMint,
     decimals: 9,
-    tips: [],
+    tips: [0.002, 0.004, 0.02, 0.5],
+    defaultPrice: 0.003,
   },
   usdcMint: {
     address: usdcMint,
     decimals: 6,
+    tips: [0.5, 1, 5, 10],
+    defaultPrice: 0.4,
   },
   usdtMint: {
     address: usdtMint,
     decimals: 6,
+    tips: [0.5, 1, 5, 10],
+    defaultPrice: 0.4,
   },
 };
 

src/env.ts

@@ -7,9 +7,6 @@ export const env = createEnv({
     VITE_API_URL: z.string().optional(),
     VITE_PUBLIC_NETWORKS_MODE: z.enum(['testnet', 'mainnet']).default('testnet'),
     VITE_PUBLIC_SOLANA_RPC: z.string().optional(),
-    VITE_DEPOSIT_AMOUNT_SOL: z.string().default('0.003'),
-    VITE_DEPOSIT_AMOUNT_USDT: z.string().default('0.003'),
-    VITE_DEPOSIT_AMOUNT_USDC: z.string().default('0.003'),
     VITE_WSOL_MINT: z.string().default('So11111111111111111111111111111111111111112'),
     VITE_USDC_MINT: z.string().default('GcdYBygdoiv6KNH4noHmdkK5hvKqdnfUUKMhe9d7vHek'),
     VITE_USDT_MINT: z.string().default('DViAQybZkCmA3RioGmaZ3c5SsxAdPARoCTKpE5qKe8Z9'),

src/hooks/contracts/write/use-make-prediction.ts

@@ -39,7 +39,7 @@ const useMakePrediction = () => {
 
       notify();
 
-      const txHash = await sendCurrency({ amount: 0.4, tokenName });
+      const txHash = await sendCurrency({ amount: currencies[tokenName].defaultPrice, tokenName });
 
       if (!txHash) {
         return;
@@ -51,7 +51,7 @@ const useMakePrediction = () => {
         tarots,
         hash: txHash,
         question,
-        address: currencies.usdcMint.address.toString(),
+        address: currencies[tokenName].address.toString(),
       });
 
       if (toastId) {

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

@@ -27,8 +27,7 @@ const useSend = () => {
       }
 
       if (tokenName === 'wSolMint') {
-        await sendSol(amount);
-        return;
+        return await sendSol(amount);
       }
 
       const { address: mint, decimals } = currencies[tokenName];