From 6444b42a2aaa599cf1de91fa3d4dc20c947b2ee5 Mon Sep 17 00:00:00 2001
From: NikiTaysRD <nikitays101@gmail.com>
Date: Fri, 17 Jan 2025 18:19:07 +0200
Subject: [PATCH] feat: add currencies

---
 public/icons/currencies/usdcMint.svg          | 12 +++++++
 public/icons/currencies/usdtMint.svg          | 11 +++++++
 public/icons/currencies/wSolMint.svg          | 20 +++++++++++
 .../common/CurrencySelect/index.tsx           | 33 +++++++++++--------
 src/components/pages/game/game.tsx            | 17 ++++++----
 src/constants/addresses.ts                    |  7 +++-
 src/env.ts                                    |  3 --
 .../contracts/write/use-make-prediction.ts    |  4 +--
 src/hooks/contracts/write/use-send.ts         |  3 +-
 9 files changed, 82 insertions(+), 28 deletions(-)
 create mode 100644 public/icons/currencies/usdcMint.svg
 create mode 100644 public/icons/currencies/usdtMint.svg
 create mode 100644 public/icons/currencies/wSolMint.svg

diff --git a/public/icons/currencies/usdcMint.svg b/public/icons/currencies/usdcMint.svg
new file mode 100644
index 0000000..10cdb67
--- /dev/null
+++ b/public/icons/currencies/usdcMint.svg
@@ -0,0 +1,12 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_32_666)">
+        <path d="M16 32C24.8667 32 32 24.8667 32 16C32 7.13328 24.8667 0 16 0C7.13328 0 0 7.13328 0 16C0 24.8667 7.13328 32 16 32Z" fill="#2775CA"/>
+        <path d="M20.4001 18.5333C20.4001 16.2 19.0001 15.4 16.2001 15.0667C14.2001 14.8 13.8001 14.2667 13.8001 13.3333C13.8001 12.3999 14.4668 11.8 15.8001 11.8C17.0001 11.8 17.6668 12.2 18.0001 13.2C18.0668 13.4 18.2668 13.5333 18.4668 13.5333H19.5334C19.8001 13.5333 20.0001 13.3333 20.0001 13.0667V13C19.7334 11.5333 18.5334 10.4 17.0001 10.2667V8.66674C17.0001 8.40002 16.8001 8.20002 16.4668 8.1333H15.4668C15.2001 8.1333 15.0001 8.3333 14.9334 8.66674V10.2C12.9334 10.4667 11.6668 11.8 11.6668 13.4667C11.6668 15.6667 13.0001 16.5333 15.8001 16.8667C17.6668 17.2 18.2668 17.6 18.2668 18.6667C18.2668 19.7335 17.3334 20.4667 16.0668 20.4667C14.3334 20.4667 13.7334 19.7333 13.5334 18.7333C13.4668 18.4667 13.2668 18.3333 13.0668 18.3333H11.9334C11.6668 18.3333 11.4668 18.5333 11.4668 18.8V18.8667C11.7334 20.5333 12.8001 21.7333 15.0001 22.0667V23.6667C15.0001 23.9333 15.2001 24.1333 15.5334 24.2H16.5334C16.8001 24.2 17.0001 24 17.0668 23.6667V22.0667C19.0668 21.7333 20.4001 20.3333 20.4001 18.5333Z" fill="white"/>
+        <path d="M12.6001 25.5333C7.40008 23.6667 4.73336 17.8667 6.6668 12.7333C7.6668 9.93331 9.8668 7.80003 12.6001 6.80003C12.8668 6.66675 13.0001 6.46675 13.0001 6.13331V5.20003C13.0001 4.93331 12.8668 4.73331 12.6001 4.66675C12.5334 4.66675 12.4001 4.66675 12.3334 4.73331C6.00008 6.73331 2.53336 13.4667 4.53336 19.8C5.73336 23.5333 8.60008 26.4 12.3334 27.6C12.6001 27.7333 12.8668 27.6 12.9334 27.3333C13.0001 27.2667 13.0001 27.2 13.0001 27.0667V26.1333C13.0001 25.9333 12.8001 25.6667 12.6001 25.5333ZM19.6668 4.73331C19.4001 4.60003 19.1334 4.73331 19.0668 5.00003C19.0001 5.06675 19.0001 5.13331 19.0001 5.26675V6.20003C19.0001 6.46675 19.2001 6.73331 19.4001 6.86675C24.6001 8.73331 27.2668 14.5333 25.3334 19.6667C24.3334 22.4667 22.1334 24.6 19.4001 25.6C19.1334 25.7333 19.0001 25.9333 19.0001 26.2667V27.2C19.0001 27.4667 19.1334 27.6667 19.4001 27.7333C19.4668 27.7333 19.6001 27.7333 19.6668 27.6667C26.0001 25.6667 29.4668 18.9333 27.4668 12.6C26.2668 8.80003 23.3334 5.93331 19.6668 4.73331Z" fill="white"/>
+    </g>
+    <defs>
+        <clipPath id="clip0_32_666">
+            <rect width="32" height="32" fill="white"/>
+        </clipPath>
+    </defs>
+</svg>
diff --git a/public/icons/currencies/usdtMint.svg b/public/icons/currencies/usdtMint.svg
new file mode 100644
index 0000000..328392a
--- /dev/null
+++ b/public/icons/currencies/usdtMint.svg
@@ -0,0 +1,11 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_32_660)">
+        <path d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z" fill="#26A17B"/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M17.922 17.383V17.381C17.812 17.389 17.245 17.423 15.98 17.423C14.97 17.423 14.259 17.393 14.009 17.381V17.384C10.121 17.213 7.21905 16.536 7.21905 15.726C7.21905 14.917 10.121 14.24 14.009 14.066V16.71C14.263 16.728 14.991 16.771 15.997 16.771C17.204 16.771 17.809 16.721 17.922 16.711V14.068C21.802 14.241 24.697 14.918 24.697 15.726C24.697 16.536 21.802 17.211 17.922 17.383ZM17.922 13.793V11.427H23.336V7.81897H8.59505V11.427H14.009V13.792C9.60905 13.994 6.30005 14.866 6.30005 15.91C6.30005 16.954 9.60905 17.825 14.009 18.028V25.61H17.922V18.026C22.3151 17.824 25.616 16.953 25.616 15.91C25.616 14.867 22.3151 13.996 17.922 13.793Z" fill="white"/>
+    </g>
+    <defs>
+        <clipPath id="clip0_32_660">
+            <rect width="32" height="32" fill="white"/>
+        </clipPath>
+    </defs>
+</svg>
diff --git a/public/icons/currencies/wSolMint.svg b/public/icons/currencies/wSolMint.svg
new file mode 100644
index 0000000..919c2bc
--- /dev/null
+++ b/public/icons/currencies/wSolMint.svg
@@ -0,0 +1,20 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="32" height="32" rx="16" fill="#1E1E1E"/>
+    <path d="M8.5577 21.2294C8.69108 21.0959 8.87449 21.0181 9.06901 21.0181H26.7091C27.0315 21.0181 27.1926 21.4073 26.9648 21.6353L23.4801 25.122C23.3467 25.2555 23.1633 25.3333 22.9688 25.3333H5.32868C5.00633 25.3333 4.84516 24.9441 5.07303 24.7161L8.5577 21.2294Z" fill="url(#paint0_linear_32_653)"/>
+    <path d="M8.5577 8.21131C8.69664 8.07785 8.88005 8 9.06901 8H26.7091C27.0315 8 27.1926 8.38926 26.9648 8.61726L23.4801 12.104C23.3467 12.2374 23.1633 12.3153 22.9688 12.3153H5.32868C5.00633 12.3153 4.84516 11.926 5.07303 11.698L8.5577 8.21131Z" fill="url(#paint1_linear_32_653)"/>
+    <path d="M23.4801 14.6786C23.3467 14.5451 23.1633 14.4673 22.9688 14.4673H5.32868C5.00633 14.4673 4.84516 14.8565 5.07303 15.0845L8.5577 18.5712C8.69108 18.7047 8.87449 18.7826 9.06901 18.7826H26.7091C27.0315 18.7826 27.1926 18.3933 26.9648 18.1653L23.4801 14.6786Z" fill="url(#paint2_linear_32_653)"/>
+    <defs>
+        <linearGradient id="paint0_linear_32_653" x1="25.024" y1="5.91711" x2="12.8045" y2="29.3088" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#00FFA3"/>
+            <stop offset="1" stop-color="#DC1FFF"/>
+        </linearGradient>
+        <linearGradient id="paint1_linear_32_653" x1="19.6858" y1="3.12856" x2="7.46634" y2="26.5202" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#00FFA3"/>
+            <stop offset="1" stop-color="#DC1FFF"/>
+        </linearGradient>
+        <linearGradient id="paint2_linear_32_653" x1="22.3379" y1="4.51392" x2="10.1184" y2="27.9056" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#00FFA3"/>
+            <stop offset="1" stop-color="#DC1FFF"/>
+        </linearGradient>
+    </defs>
+</svg>
diff --git a/src/components/common/CurrencySelect/index.tsx b/src/components/common/CurrencySelect/index.tsx
index 69f983a..b36ed45 100644
--- a/src/components/common/CurrencySelect/index.tsx
+++ b/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>
   );
diff --git a/src/components/pages/game/game.tsx b/src/components/pages/game/game.tsx
index f4a9f70..da27e43 100644
--- a/src/components/pages/game/game.tsx
+++ b/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"
diff --git a/src/constants/addresses.ts b/src/constants/addresses.ts
index ef17b93..aee2cd3 100644
--- a/src/constants/addresses.ts
+++ b/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,
   },
 };
 
diff --git a/src/env.ts b/src/env.ts
index 986ef68..17754ae 100644
--- a/src/env.ts
+++ b/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'),
diff --git a/src/hooks/contracts/write/use-make-prediction.ts b/src/hooks/contracts/write/use-make-prediction.ts
index 9cef8b1..556c4e9 100644
--- a/src/hooks/contracts/write/use-make-prediction.ts
+++ b/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) {
diff --git a/src/hooks/contracts/write/use-send.ts b/src/hooks/contracts/write/use-send.ts
index b4d1242..4e869d8 100644
--- a/src/hooks/contracts/write/use-send.ts
+++ b/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];