Merge pull request #42 from RedDuck-Software/refactor/20.01.2025

Refactor/20.01.2025

.github/workflows/static-checks.yml

@@ -1,36 +1,31 @@
-name: Static Checks
-
-on:
-  push:
-    branches:
-      - main
-      - staging
-  pull_request: {}
-  workflow_dispatch: {}
-
-jobs:
-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-
-      - uses: actions/setup-node@v3
-        with:
-          node-version: '20'
-
-      - name: Enable Corepack
-        run: corepack enable
-
-      - uses: actions/cache@v3
-        id: cache2
-        with:
-          path: '**/node_modules'
-          key: ${{ runner.os }}-npm-${{ hashFiles('**/yarn.lock') }}-${{ github.sha }}
-          restore-keys: ${{ runner.os }}-npm-
-
-      - name: Install project dependencies
-        if: steps.cache.outputs.cache-hit != 'true'
-        run: yarn install --frozen-lockfile
-
-      - name: Testing
-        run: yarn tsc --noEmit && yarn lint && yarn build
+name: Static Checks
+
+on:
+  push:
+    branches:
+      - main
+      - dev
+  pull_request:
+
+permissions:
+  actions: read
+  contents: read
+
+jobs:
+  main:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+      - name: Enable Corepack
+        run: corepack enable
+      - name: Prepare Yarn
+        run: corepack prepare [email protected] --activate
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+      - name: Testing
+        run: yarn tsc --noEmit && yarn lint && yarn build

.prettierrc.cjs

@@ -1,7 +1,7 @@
-module.exports = {
-  singleQuote: true,
-  trailingComma: 'all',
-  printWidth: 120,
-  semi: true,
-  plugins: ['prettier-plugin-tailwindcss'],
-};
+module.exports = {
+  singleQuote: true,
+  trailingComma: 'all',
+  printWidth: 120,
+  semi: true,
+  plugins: ['prettier-plugin-tailwindcss'],
+};

.yarnrc.yml

@@ -1 +1 @@
-nodeLinker: node-modules
+nodeLinker: node-modules

components.json

@@ -18,4 +18,4 @@
     "hooks": "@/hooks"
   },
   "iconLibrary": "lucide"
-}
+}

eslint.config.js

@@ -59,6 +59,7 @@ export default tseslint.config(
       '@typescript-eslint/no-unsafe-call': 'off',
       '@typescript-eslint/no-unsafe-assignment': 'off',
       '@typescript-eslint/restrict-template-expressions': 'off',
+      '@typescript-eslint/consistent-type-definitions': ['error', 'type'],
     },
   },
 );

postcss.config.js

@@ -3,4 +3,4 @@ export default {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

src/App.tsx

@@ -1,16 +1,16 @@
 import { Suspense } from 'react';
 import { ToastContainer } from 'react-toastify';
 
-import { FullPageLoader } from '@/components/common/Loader';
-import { QueryProvider } from '@/providers/query-provider';
-import { RouterProvider } from '@/providers/router-provider';
-import { SolanaProvider } from '@/providers/solana-provider';
+import { FullPageLoader } from './components/common/loader';
+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() {
+export const App = () => {
   return (
     <SolanaProvider>
       <QueryProvider>
@@ -21,6 +21,4 @@ function App() {
       </QueryProvider>
     </SolanaProvider>
   );
-}
-
-export default App;
+};

src/components/common/About/index.tsx

@@ -1,7 +1,7 @@
 import { useLocation } from 'react-router';
 
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
-import { routes } from '@/lib/router';
+import { routes } from '@/constants/router';
 
 const INSTRUCTIONS = [
   {

src/components/common/Header/index.tsx

@@ -5,8 +5,8 @@ import { Link } from 'react-router';
 import { NavMenu } from './nav-menu';
 
 import { Button } from '@/components/ui/button';
+import { routes } from '@/constants/router';
 import { useBreakpoint } from '@/hooks/use-breakpoint';
-import { routes } from '@/lib/router';
 import { cn } from '@/lib/utils';
 
 export const Header = () => {

src/components/common/Header/modals/base-error.tsx

@@ -6,7 +6,7 @@ export const BaseErrorModal = () => {
 
   return (
     <div className="flex w-[75vw] flex-col items-center justify-center gap-[15px] text-center text-[20px] leading-[30px] md:w-[480px]">
-      <img src="/icons/failed.svg" alt="failed" className="h-[120px] w-[93px] md:h-[180px] md:w-[140px]" />
+      <img src="/icons/modals/failed.svg" alt="failed" className="h-[120px] w-[93px] md:h-[180px] md:w-[140px]" />
 
       <p className="text-[22px] leading-[30px] md:text-[28px] md:leading-[39px]">Oracle Response Failed</p>
       <p className="text-[16px] leading-[22px] md:text-[18px] md:leading-[25px]">

src/components/common/Header/modals/cancelled.tsx

@@ -6,7 +6,7 @@ export const CanceledModal = () => {
 
   return (
     <div className="flex w-[75vw] flex-col items-center justify-center gap-[15px] text-center text-[20px] leading-[30px] md:w-[480px]">
-      <img src="/icons/scissors.svg" alt="failed" className="h-[116px] w-[107px] md:h-[173px] md:w-[159px]" />
+      <img src="/icons/modals/scissors.svg" alt="failed" className="h-[116px] w-[107px] md:h-[173px] md:w-[159px]" />
 
       <p className="text-[22px] leading-[30px] md:text-[28px] md:leading-[39px]">Transaction Cancelled</p>
       <p className="text-[16px] leading-[22px] md:text-[18px] md:leading-[25px]">

src/components/common/Header/modals/insufficient-funds.tsx

@@ -6,7 +6,7 @@ export const InsufficientFundsModal = () => {
 
   return (
     <div className="flex w-[75vw] flex-col items-center justify-center gap-[15px] text-center text-[20px] leading-[30px] md:w-[484px]">
-      <img src="/icons/funds.svg" alt="failed" className="h-[116px] w-[181px] md:h-[167px] md:w-[261px]" />
+      <img src="/icons/modals/funds.svg" alt="failed" className="h-[116px] w-[181px] md:h-[167px] md:w-[261px]" />
 
       <p className="text-[22px] leading-[30px] md:text-[28px] md:leading-[39px]">Insufficient Funds</p>
       <p className="text-[16px] leading-[22px] md:text-[18px] md:leading-[25px]">

src/components/common/Header/modals/successful.tsx

@@ -6,7 +6,7 @@ export const SuccessfulModal = () => {
 
   return (
     <div className="flex w-[75vw] flex-col items-center justify-center gap-[15px] text-center text-[20px] leading-[30px] md:w-[480px]">
-      <img src="/icons/successful.svg" alt="success" className="h-[120px] w-[93px] md:h-[180px] md:w-[140px]" />
+      <img src="/icons/modals/successful.svg" alt="success" className="h-[120px] w-[93px] md:h-[180px] md:w-[140px]" />
 
       <p className="text-[22px] leading-[30px] md:text-[28px] md:leading-[39px]">Payment Successful</p>
 

src/components/common/BaseTooltip/index.tsx → src/components/common/base-tooltip/index.tsx

@@ -4,15 +4,15 @@ import { ReactNode, useState } from 'react';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { cn } from '@/lib/utils';
 
-interface BaseTooltipProps {
+type BaseTooltipProps = {
   content: ReactNode;
   children: ReactNode;
   className?: string;
   contentClassName?: string;
   as?: 'div' | 'span';
   ignoreOnKeyDown?: boolean;
   forceOpen?: boolean;
-}
+};
 
 export const BaseTooltip = ({
   children,

src/components/common/AdminBtn/index.tsx → src/components/common/buttons/admin.tsx

@@ -1,7 +1,7 @@
 import { Link } from 'react-router';
 
 import { Button } from '@/components/ui/button';
-import { routes } from '@/lib/router';
+import { routes } from '@/constants/router';
 
 export const AdminBtn = () => {
   return (

src/components/common/PredictFutureBtn/index.tsx → src/components/common/buttons/predict-future.tsx

@@ -1,7 +1,7 @@
 import { Link } from 'react-router';
 
 import { Button } from '@/components/ui/button';
-import { routes } from '@/lib/router';
+import { routes } from '@/constants/router';
 
 export const PredictFutureBtn = () => {
   return (

src/components/common/CurrencySelect/index.tsx → src/components/common/currency-select/index.tsx

@@ -1,10 +1,10 @@
 import { Select, SelectTrigger, SelectItem, SelectValue, SelectContent } from '@/components/ui/select.tsx';
-import { currencies, TCurrencies } from '@/constants/addresses.ts';
+import { currencies, Currencies } from '@/constants/addresses';
 
-interface ICurrencySelect {
+type ICurrencySelect = {
   value: string;
-  onValueChange: (value: TCurrencies) => void;
-}
+  onValueChange: (value: Currencies) => void;
+};
 
 export const CurrencySelect = ({ value, onValueChange }: ICurrencySelect) => {
   return (

src/layouts/main-layout.tsx → src/components/common/layouts/main-layout.tsx

@@ -1,6 +1,6 @@
 import { Outlet } from 'react-router';
 
-import { Footer } from '@/components/common/Footer';
+import { Footer } from '@/components/common/footer';
 
 export function MainLayout() {
   return (

src/components/pages/game/game.tsx

@@ -5,13 +5,13 @@ import { SubmitHandler, useForm } from 'react-hook-form';
 import { toast } from 'react-toastify';
 import { z } from 'zod';
 
-import { BaseTooltip } from '@/components/common/BaseTooltip';
-import { CurrencySelect } from '@/components/common/CurrencySelect';
+import { BaseTooltip } from '@/components/common/base-tooltip';
+import { CurrencySelect } from '@/components/common/currency-select';
 import { Button } from '@/components/ui/button.tsx';
-import { currencies, TCurrencies } from '@/constants/addresses.ts';
+import { currencies, Currencies } from '@/constants/addresses';
 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 useSend from '@/hooks/contracts/write/use-send';
 import { cn, showTxToast } from '@/lib/utils';
 import { useWalletModalStore } from '@/store/wallet-modal.tsx';
 
@@ -56,7 +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 [currencyName, setCurrencyName] = useState<Currencies>(Object.keys(currencies)[0] as Currencies);
 
   const {
     register,

src/components/pages/home/cta.tsx

@@ -1,4 +1,4 @@
-import { PredictFutureBtn } from '@/components/common/PredictFutureBtn';
+import { PredictFutureBtn } from '@/components/common/buttons/predict-future';
 import { useBreakpoint } from '@/hooks/use-breakpoint';
 import { cn } from '@/lib/utils';
 import { BaseComponentProps } from '@/types';

src/components/pages/home/faq.tsx

@@ -1,4 +1,4 @@
-import { GoToTwitterBtn } from '@/components/common/GoToTwitterBtn';
+import { GoToTwitterBtn } from '@/components/common/buttons/go-to-twitter';
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
 
 const BENEFITS = [

src/components/pages/home/hero.tsx

@@ -1,10 +1,10 @@
 import { useWallet } from '@solana/wallet-adapter-react';
 
-import { AdminBtn } from '@/components/common/AdminBtn';
-import { GoToTwitterBtn } from '@/components/common/GoToTwitterBtn';
-import { PredictFutureBtn } from '@/components/common/PredictFutureBtn';
+import { AdminBtn } from '@/components/common/buttons/admin';
+import { GoToTwitterBtn } from '@/components/common/buttons/go-to-twitter';
+import { PredictFutureBtn } from '@/components/common/buttons/predict-future';
 import { OwnerAddress } from '@/constants/addresses';
-import { network } from '@/lib/solana';
+import { network } from '@/constants/solana';
 
 export const Hero = () => {
   const { publicKey } = useWallet();

src/components/ui/button.tsx

@@ -28,11 +28,10 @@ const buttonVariants = cva(
   },
 );
 
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
+export type ButtonProps = {
   asChild?: boolean;
-}
+} & React.ButtonHTMLAttributes<HTMLButtonElement> &
+  VariantProps<typeof buttonVariants>;
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {

src/components/ui/input.tsx

@@ -24,14 +24,15 @@ const inputVariants = cva(
   },
 );
 
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof inputVariants> {
+export type InputProps = {
   asChild?: boolean;
   error?: ReactNode;
   label?: ReactNode;
   endAdornment?: ReactNode;
   startAdornment?: ReactNode;
   wrapperClassName?: string;
-}
+} & React.InputHTMLAttributes<HTMLInputElement> &
+  VariantProps<typeof inputVariants>;
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   (

src/constants/addresses.ts

@@ -33,4 +33,4 @@ export const currencies = {
   },
 };
 
-export type TCurrencies = keyof typeof currencies;
+export type Currencies = keyof typeof currencies;

src/lib/router.ts → src/constants/router.ts

@@ -1,8 +1,8 @@
 import { lazy } from 'react';
 import { createBrowserRouter } from 'react-router';
 
-import { DefaultLayout } from '@/layouts/default-layout';
-import { MainLayout } from '@/layouts/main-layout';
+import { DefaultLayout } from '@/components/common/layouts/default-layout';
+import { MainLayout } from '@/components/common/layouts/main-layout';
 
 export const routes = {
   HOME: '/',

src/hooks/contracts/read/use-get-token-and-sol-balance.ts

@@ -3,7 +3,7 @@ import { useWallet } from '@solana/wallet-adapter-react';
 import { useQuery } from '@tanstack/react-query';
 
 import { wSolMint } from '@/constants/addresses';
-import { connection } from '@/lib/solana';
+import { connection } from '@/constants/solana';
 
 export const useGetTokenAndSolBalance = () => {
   const { publicKey } = useWallet();

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

@@ -2,9 +2,9 @@ import { useWallet } from '@solana/wallet-adapter-react';
 import { useMutation } from '@tanstack/react-query';
 import { toast } from 'react-toastify';
 
-import { currencies, TCurrencies } from '@/constants/addresses.ts';
+import { currencies, Currencies } from '@/constants/addresses';
 import useSubmitTarotCards from '@/hooks/api/use-submit-cards';
-import useSend from '@/hooks/contracts/write/use-send.ts';
+import useSend from '@/hooks/contracts/write/use-send';
 import { getRandomTarotCards } from '@/lib/utils';
 import { Status, useStatusModalStore } from '@/store/status-modal';
 
@@ -20,10 +20,10 @@ const notify = () => {
   });
 };
 
-interface IMakePrediction {
+type MakePrediction = {
   question: string;
-  tokenName: TCurrencies;
-}
+  tokenName: Currencies;
+};
 
 const useMakePrediction = () => {
   const { publicKey } = useWallet();
@@ -32,7 +32,7 @@ const useMakePrediction = () => {
   const { setStatus } = useStatusModalStore();
 
   return useMutation({
-    async mutationFn({ question, tokenName }: IMakePrediction) {
+    async mutationFn({ question, tokenName }: MakePrediction) {
       if (!publicKey) {
         return;
       }