Merge pull request #8 from RedDuck-Software/feat/tarot-design-1

feat: tarot design part 1

package.json

@@ -10,6 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fontsource/bona-nova-sc": "^5.1.1",
+    "@fontsource/poppins": "^5.1.1",
     "@hookform/resolvers": "^3.10.0",
     "@radix-ui/react-accordion": "^1.2.2",
     "@radix-ui/react-dialog": "^1.1.4",

src/App.tsx

@@ -6,6 +6,10 @@ import { QueryProvider } from '@/providers/query-provider';
 import { RouterProvider } from '@/providers/router-provider';
 import { SolanaProvider } from '@/providers/solana-provider';
 
+import '@fontsource/bona-nova-sc/400.css';
+import '@fontsource/bona-nova-sc/700.css';
+import '@fontsource/poppins/400.css';
+
 function App() {
   return (
     <SolanaProvider>

src/components/common/Svg/Solana.tsx

@@ -0,0 +1,54 @@
+const Solana = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32">
+    <rect width="32" height="32" fill="#1E1E1E" rx="16"></rect>
+    <path
+      fill="url(#paint0_linear_32_641)"
+      d="M8.558 21.23a.72.72 0 0 1 .511-.212h17.64c.323 0 .484.39.256.617l-3.485 3.487a.72.72 0 0 1-.511.211H5.329a.361.361 0 0 1-.256-.617z"
+    ></path>
+    <path
+      fill="url(#paint1_linear_32_641)"
+      d="M8.558 8.211A.74.74 0 0 1 9.069 8h17.64c.323 0 .484.39.256.617l-3.485 3.487a.72.72 0 0 1-.511.211H5.329a.362.362 0 0 1-.256-.617z"
+    ></path>
+    <path
+      fill="url(#paint2_linear_32_641)"
+      d="M23.48 14.679a.72.72 0 0 0-.511-.212H5.329a.361.361 0 0 0-.256.617l3.485 3.487a.72.72 0 0 0 .511.212h17.64c.323 0 .484-.39.256-.618z"
+    ></path>
+    <defs>
+      <linearGradient
+        id="paint0_linear_32_641"
+        x1="25.024"
+        x2="12.805"
+        y1="5.917"
+        y2="29.309"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#00FFA3"></stop>
+        <stop offset="1" stopColor="#DC1FFF"></stop>
+      </linearGradient>
+      <linearGradient
+        id="paint1_linear_32_641"
+        x1="19.686"
+        x2="7.466"
+        y1="3.129"
+        y2="26.52"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#00FFA3"></stop>
+        <stop offset="1" stopColor="#DC1FFF"></stop>
+      </linearGradient>
+      <linearGradient
+        id="paint2_linear_32_641"
+        x1="22.338"
+        x2="10.118"
+        y1="4.514"
+        y2="27.906"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#00FFA3"></stop>
+        <stop offset="1" stopColor="#DC1FFF"></stop>
+      </linearGradient>
+    </defs>
+  </svg>
+);
+
+export default Solana;

src/components/pages/game/game.tsx

@@ -2,13 +2,12 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { useWallet } from '@solana/wallet-adapter-react';
 import { useEffect } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
-import { toast } from 'react-toastify';
+
 import { z } from 'zod';
 
-import { ConnectWalletButton } from '@/components/common/Header/connect-wallet-button';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
 import useMakePrediction from '@/hooks/contracts/write/use-make-prediction';
+import Solana from '@/components/common/Svg/Solana.tsx';
+import { useWalletModalStore } from '@/store/wallet-modal.tsx';
 
 const TarotRequestSchema = z.object({
   question: z
@@ -23,15 +22,12 @@ type TarotRequestSchemaType = z.infer<typeof TarotRequestSchema>;
 
 export const GameSection = () => {
   const { publicKey } = useWallet();
+  const { setIsOpen } = useWalletModalStore();
   const { mutateAsync: transfer, isSuccess, isPending, data: predictionAnswer } = useMakePrediction();
 
-  const {
-    register,
-    handleSubmit,
-    watch,
-    setValue,
-    formState: { errors },
-  } = useForm<TarotRequestSchemaType>({ resolver: zodResolver(TarotRequestSchema) });
+  const { register, handleSubmit, watch, setValue } = useForm<TarotRequestSchemaType>({
+    resolver: zodResolver(TarotRequestSchema),
+  });
 
   const onSubmit: SubmitHandler<TarotRequestSchemaType> = async (data, e) => {
     e?.preventDefault();
@@ -46,44 +42,45 @@ export const GameSection = () => {
   }, [isSuccess, predictionAnswer, setValue, watch]);
 
   return (
-    <div className="mx-auto w-[600px] max-w-[600px] rounded-lg bg-gray-50 p-6 shadow-md">
-      <h1 className="mb-6 text-center text-3xl font-semibold text-gray-800">Game Page</h1>
-      <form onSubmit={handleSubmit(onSubmit)} className="w-full space-y-4">
-        <Input
-          asChild
-          error={errors.question && <span className="text-sm text-red-600">{errors.question.message}</span>}
-        >
-          <textarea
-            {...register('question')}
+    <div className="font-inknut container flex flex-col gap-[20px] py-[20px]">
+      <div className="font-bona-nova-sc text-center text-[50px]">Your Future In One Bet</div>
+      <div>
+        <img src="images/tarot-game/bord.png" alt="bord" />
+      </div>
+      <div className="flex flex-row items-center justify-between">
+        <div className="text-[24px]">Type your question and ask the cards</div>
+        <button className="rounded-[8px] border border-[#3A3939] bg-[#E8D5AF] px-[20px] py-[13px] text-[22px]">
+          Suggest question
+        </button>
+      </div>
+      <textarea
+        {...register('question')}
+        className="rounded-[8px] border border-[#3A3939] bg-transparent p-4 placeholder-[#3A3939]"
+        placeholder="Type your question here"
+        disabled={isPending}
+        rows={4}
+      />
+      <div className="grid grid-cols-2 gap-10">
+        <div className="flex flex-row items-center gap-4 rounded-[8px] border border-[#3A3939] bg-[#D0C7A3] p-[14px] text-[20px]">
+          <Solana />
+          <div className="font-poppins">0.002 $SOL</div>
+        </div>
+        {publicKey ? (
+          <button
+            onClick={handleSubmit(onSubmit)}
             disabled={isPending}
-            placeholder="Enter your question here..."
-            className="max-h-[500px] min-h-[150px] w-full resize-y rounded-lg border border-gray-300 p-3 text-black shadow-sm placeholder:text-black focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
-            rows={4}
-          />
-        </Input>
-        <Button
-          type="button"
-          onClick={async () => {
-            const questionValue = watch('question');
-            if (questionValue) {
-              await navigator.clipboard.writeText(questionValue);
-              toast.success('Copied!');
-            }
-          }}
-          className="w-full rounded-lg bg-gray-200 px-4 py-2 text-sm font-medium text-gray-700 shadow-md transition hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2"
-        >
-          Copy Text
-        </Button>
-        <Button
-          className={`mt-4 w-full rounded-lg bg-blue-500 px-4 py-2 text-white shadow-md transition hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:bg-gray-400`}
-          type="submit"
-          disabled={!publicKey || isPending}
-        >
-          Make a Prediction
-        </Button>
-      </form>
-      <div className="mt-4">
-        <ConnectWalletButton />
+            className="rounded-[8px] border border-[#3A3939] bg-[#9DA990] text-[22px] text-[#4F5548]"
+          >
+            Make a Forecast
+          </button>
+        ) : (
+          <button
+            onClick={() => setIsOpen(true)}
+            className="rounded-[8px] border border-[#3A3939] bg-[#9DA990] text-[22px] text-[#4F5548]"
+          >
+            Connect Wallet
+          </button>
+        )}
       </div>
     </div>
   );

src/index.css

@@ -5,7 +5,7 @@
 body {
   place-items: center;
   min-height: 100vh;
-  background-color: #83a4c5;
+  background-color: #D8BA9F;
 }
 
 @layer base {

tailwind.config.ts

@@ -69,20 +69,22 @@ const config = {
       },
       fontFamily: {
         inknut: ['"Inknut Antiqua"', 'serif'],
+        'bona-nova-sc': ['"Bona Nova SC"', 'serif'],
+        poppins: ['"Poppins"', 'serif'],
       },
       keyframes: {
-        "accordion-down": {
-          from: { height: "0" },
-          to: { height: "var(--radix-accordion-content-height)" },
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
         },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: "0" },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
         },
       },
       animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
       },
     },
   },

yarn.lock

@@ -960,6 +960,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@fontsource/bona-nova-sc@npm:^5.1.1":
+  version: 5.1.1
+  resolution: "@fontsource/bona-nova-sc@npm:5.1.1"
+  checksum: 10c0/567432a7317a70840e22c8e26f576da86144310dcf2754902e1cb6dccea679c7f3b55a78812f3bc3a62f59dc88d98d6eb894a22cdf6005180f63ef7b7b10986a
+  languageName: node
+  linkType: hard
+
+"@fontsource/poppins@npm:^5.1.1":
+  version: 5.1.1
+  resolution: "@fontsource/poppins@npm:5.1.1"
+  checksum: 10c0/22b73f498f5dfc6f42f9553d07f7277b04a86b7ab11bc0030bc75ab5feb46308af979fafcbe9dec66fa164955b0768920f8c43478a32f19d88b686ed1f542a63
+  languageName: node
+  linkType: hard
+
 "@fractalwagmi/popup-connection@npm:^1.0.18":
   version: 1.1.1
   resolution: "@fractalwagmi/popup-connection@npm:1.1.1"
@@ -5040,6 +5054,8 @@ __metadata:
   resolution: "ai-tarot-web@workspace:."
   dependencies:
     "@eslint/js": "npm:^9.17.0"
+    "@fontsource/bona-nova-sc": "npm:^5.1.1"
+    "@fontsource/poppins": "npm:^5.1.1"
     "@hookform/resolvers": "npm:^3.10.0"
     "@radix-ui/react-accordion": "npm:^1.2.2"
     "@radix-ui/react-dialog": "npm:^1.1.4"