diff --git a/rair-front/package.json b/rair-front/package.json index bf17de3d3..d938985f6 100644 --- a/rair-front/package.json +++ b/rair-front/package.json @@ -13,26 +13,21 @@ "prepare": "cd ../ && husky install ./minting-marketplace/.husky" }, "dependencies": { - "@account-kit/core": "^4.11.0", - "@account-kit/infra": "^4.11.0", - "@account-kit/signer": "^4.11.0", - "@alchemy/aa-accounts": "^3.19.0", - "@alchemy/aa-alchemy": "^3.19.0", - "@alchemy/aa-core": "^3.19.0", - "@alchemy/aa-ethers": "^3.19.0", - "@alchemy/aa-signers": "^3.19.0", "@analytics/google-analytics": "^1.0.7", "@emotion/is-prop-valid": "^1.3.1", + "@emotion/react": "^11.14.0", + "@emotion/styled": "^11.14.0", "@fortawesome/fontawesome-svg-core": "^6.7.2", "@fortawesome/free-brands-svg-icons": "^6.7.2", "@fortawesome/free-regular-svg-icons": "^6.7.2", "@fortawesome/free-solid-svg-icons": "^6.7.2", "@fortawesome/react-fontawesome": "^0.2.2", - "@getyoti/react-face-capture": "^2.3.1", "@metamask/onboarding": "^1.0.1", "@metamask/providers": "^14.0.2", "@mui/icons-material": "^5.16.7", "@mui/material": "^5.16.7", + "@react-three/drei": "9.92.7", + "@react-three/fiber": "8.15.12", "@reduxjs/toolkit": "^2.5.1", "@sentry/browser": "^7.85.0", "@sentry/react": "^7.85.0", @@ -47,6 +42,7 @@ "bootstrap": "^5.3.3", "ethers": "^6.13.5", "global": "^4.4.0", + "lodash-es": "^4.17.21", "moment-timezone": "^0.5.45", "prettier": "^3.4.2", "react": "^18.3.1", @@ -70,9 +66,11 @@ "reactjs-popup": "^2.0.6", "slick-carousel": "^1.8.1", "socket.io-client": "^4.8.1", - "styled-components": "^6.1.14", + "styled-components": "5.3.10", "sweetalert2": "^11.10.1", "sweetalert2-react-content": "^5.1.0", + "three": "0.150.1", + "three-gif-loader": "^1.1.0", "use-debounce": "^10.0.4", "use-state-if-mounted": "^1.0.7", "uuid": "^11.0.4", @@ -83,6 +81,7 @@ "vite-plugin-radar": "^0.9.6", "vite-plugin-svgr": "^4.2.0", "wagmi": "^2.14.9", + "web-vitals": "^4.2.4", "wicg-inert": "^3.1.3", "zustand": "^5.0.3" }, diff --git a/rair-front/src/App.tsx b/rair-front/src/App.tsx index a2972bb90..6536019bc 100644 --- a/rair-front/src/App.tsx +++ b/rair-front/src/App.tsx @@ -1,3 +1,4 @@ +//@ts-nocheck import { Fragment, useCallback, useEffect, useState } from 'react'; import { Toaster } from 'react-hot-toast'; import { Route, Routes, useLocation, useNavigate } from 'react-router-dom'; @@ -56,13 +57,13 @@ import ThankYouPage from './components/ThankYouPage'; import UserProfilePage from './components/UserProfilePage/UserProfilePage'; import NotificationPage from './components/UserProfileSettings/NotificationPage/NotificationPage'; import VideoManager from './components/videoManager/VideoManager'; -import YotiPage from './components/YotiPage/YotiPage'; +// import YotiPage from './components/YotiPage/YotiPage'; import useConnectUser from './hooks/useConnectUser'; import useContracts from './hooks/useContracts'; import { useAppDispatch, useAppSelector } from './hooks/useReduxHooks'; import useWeb3Tx from './hooks/useWeb3Tx'; import { loadCategories, loadSettings } from './redux/settingsSlice'; -import { setConnectedChain } from './redux/web3Slice'; +// import { setConnectedChain } from './redux/web3Slice'; import { AppContainerFluid, MainBlockApp @@ -75,6 +76,7 @@ import ErrorFallback from './views/ErrorFallback/ErrorFallback'; import 'bootstrap/dist/css/bootstrap.min.css'; import './App.css'; +import MomentsGame from './components/MomentsGame/MomentsGame'; /* Track a page view */ // const analytics = getInformationGoogleAnalytics(); // analytics.page(); @@ -155,19 +157,19 @@ function App() { } }, [setRenderBtnConnect]); - useEffect(() => { - if (window.ethereum) { - const foo = async (chainId) => { - dispatch(setConnectedChain(chainId)); - }; - window.ethereum.on('chainChanged', foo); - window.ethereum.on('accountsChanged', logoutUser); - return () => { - window.ethereum.off('chainChanged', foo); - window.ethereum.off('accountsChanged', logoutUser); - }; - } - }, [dispatch, logoutUser, blockchainSettings]); + // useEffect(() => { + // if (window.ethereum) { + // const foo = async (chainId) => { + // dispatch(setConnectedChain(chainId)); + // }; + // window.ethereum.on('chainChanged', foo); + // window.ethereum.on('accountsChanged', logoutUser); + // return () => { + // window.ethereum.off('chainChanged', foo); + // window.ethereum.off('accountsChanged', logoutUser); + // }; + // } + // }, [dispatch, logoutUser, blockchainSettings]); // gtag @@ -402,25 +404,25 @@ function App() { path: '/slidelock', content: }, - { - path: '/yoti-page', - content: - }, + // { + // path: '/yoti-page', + // content: + // }, { path: '/about-page', content: }, - { - path: '/main-page', - content: ( - - ) - } + // { + // path: '/main-page', + // content: ( + // + // ) + // } ].map((item, index) => { // If the path is set as the Home Page, render it as the default path (/) const isHome = item.path === import.meta.env.VITE_HOME_PAGE; @@ -445,13 +447,14 @@ function App() { { path: '/', content: ( - + + // ), requirement: import.meta.env.VITE_HOME_PAGE === '/' }, @@ -582,10 +585,10 @@ function App() { path: '/:userAddress', content: }, - { - path: '/:contractId/:product/:offer/:token', - content: - }, + // { + // path: '/:contractId/:product/:offer/:token', + // content: + // }, { path: '/coming-soon', content: @@ -616,45 +619,45 @@ function App() { }, //3 Tab Marketplace? - { - path: '/tokens/:blockchain/:contract/:product/:tokenId', - content: ( - - ), - requirement: - import.meta.env.VITE_3_TAB_MARKETPLACE_DISABLED !== 'true' - }, - { - path: '/collection/:blockchain/:contract/:product/:tokenId', - content: ( - - ), - requirement: - import.meta.env.VITE_3_TAB_MARKETPLACE_DISABLED !== 'true' - }, - { - path: '/unlockables/:blockchain/:contract/:product/:tokenId', - content: ( - - ), - requirement: - import.meta.env.VITE_3_TAB_MARKETPLACE_DISABLED !== 'true' - }, + // { + // path: '/tokens/:blockchain/:contract/:product/:tokenId', + // content: ( + // + // ), + // requirement: + // import.meta.env.VITE_3_TAB_MARKETPLACE_DISABLED !== 'true' + // }, + // { + // path: '/collection/:blockchain/:contract/:product/:tokenId', + // content: ( + // + // ), + // requirement: + // import.meta.env.VITE_3_TAB_MARKETPLACE_DISABLED !== 'true' + // }, + // { + // path: '/unlockables/:blockchain/:contract/:product/:tokenId', + // content: ( + // + // ), + // requirement: + // import.meta.env.VITE_3_TAB_MARKETPLACE_DISABLED !== 'true' + // }, { path: '/notifications', diff --git a/rair-front/src/axios.responseTypes.ts b/rair-front/src/axios.responseTypes.ts index 0df9b863c..7502f79f9 100644 --- a/rair-front/src/axios.responseTypes.ts +++ b/rair-front/src/axios.responseTypes.ts @@ -1,3 +1,4 @@ +//@ts-nocheck import { TOfferType } from './components/marketplace/marketplace.types'; import { MediaListResponseType } from './components/video/video.types'; import { CatalogItem } from './redux/tokenSlice'; diff --git a/rair-front/src/components/AboutPage/AboutPageNew/MainBlock/MainBlock.tsx b/rair-front/src/components/AboutPage/AboutPageNew/MainBlock/MainBlock.tsx index 2e73d1804..ed08518a4 100644 --- a/rair-front/src/components/AboutPage/AboutPageNew/MainBlock/MainBlock.tsx +++ b/rair-front/src/components/AboutPage/AboutPageNew/MainBlock/MainBlock.tsx @@ -1,3 +1,4 @@ +//@ts-nocheck import { useState } from 'react'; import Modal from 'react-modal'; import { Hex } from 'viem'; diff --git a/rair-front/src/components/DemoMediaUpload/PopUpChoiceNFT/PopUpChoiceNFT.tsx b/rair-front/src/components/DemoMediaUpload/PopUpChoiceNFT/PopUpChoiceNFT.tsx index b78516c68..d81a8c359 100644 --- a/rair-front/src/components/DemoMediaUpload/PopUpChoiceNFT/PopUpChoiceNFT.tsx +++ b/rair-front/src/components/DemoMediaUpload/PopUpChoiceNFT/PopUpChoiceNFT.tsx @@ -1,3 +1,4 @@ +//@ts-nocheck import React, { useCallback, useEffect, useState } from 'react'; import Modal from 'react-modal'; diff --git a/rair-front/src/components/DemoMediaUpload/UploadedListBox/UploadedListBox.tsx b/rair-front/src/components/DemoMediaUpload/UploadedListBox/UploadedListBox.tsx index 6f4f4dfaa..4cf3eca74 100644 --- a/rair-front/src/components/DemoMediaUpload/UploadedListBox/UploadedListBox.tsx +++ b/rair-front/src/components/DemoMediaUpload/UploadedListBox/UploadedListBox.tsx @@ -1,3 +1,4 @@ +//@ts-nocheck import React, { useCallback, useEffect, useState } from 'react'; import Modal from 'react-modal'; import { diff --git a/rair-front/src/components/MainPage/components/LogoCarousel.tsx b/rair-front/src/components/MainPage/components/LogoCarousel.tsx index 3980ee951..73636b357 100644 --- a/rair-front/src/components/MainPage/components/LogoCarousel.tsx +++ b/rair-front/src/components/MainPage/components/LogoCarousel.tsx @@ -1,3 +1,4 @@ +//@ts-nocheck import React from 'react'; import Slider from 'react-slick'; diff --git a/rair-front/src/components/MockUpPage/FilteringBlock/portal/ModalItem/ModalItem.tsx b/rair-front/src/components/MockUpPage/FilteringBlock/portal/ModalItem/ModalItem.tsx index ab1e596cd..e08ef53d7 100644 --- a/rair-front/src/components/MockUpPage/FilteringBlock/portal/ModalItem/ModalItem.tsx +++ b/rair-front/src/components/MockUpPage/FilteringBlock/portal/ModalItem/ModalItem.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import { useCallback, useEffect, useState } from 'react'; import { faTimes } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; diff --git a/rair-front/src/components/MockUpPage/NftList/NftData/NftDataCommonLink.tsx b/rair-front/src/components/MockUpPage/NftList/NftData/NftDataCommonLink.tsx index e1cbdd3b4..16553e0a3 100644 --- a/rair-front/src/components/MockUpPage/NftList/NftData/NftDataCommonLink.tsx +++ b/rair-front/src/components/MockUpPage/NftList/NftData/NftDataCommonLink.tsx @@ -21,7 +21,7 @@ import { } from '../../../../hooks/useReduxHooks'; import { dataStatuses } from '../../../../redux/commonTypes'; import { loadCollection } from '../../../../redux/tokenSlice'; -import { setRequestedChain } from '../../../../redux/web3Slice'; +// import { setRequestedChain } from '../../../../redux/web3Slice'; import { CatalogVideoItem } from '../../../../types/commonTypes'; import { MediaFile, @@ -250,11 +250,11 @@ const NftDataCommonLinkComponent: React.FC = ({ [blockchain, contract, currentCollection, embeddedParams, navigate, product] ); - useEffect(() => { - if (blockchain) { - dispatch(setRequestedChain(blockchain)); - } - }, [blockchain, dispatch]); + // useEffect(() => { + // if (blockchain) { + // dispatch(setRequestedChain(blockchain)); + // } + // }, [blockchain, dispatch]); useEffect(() => { if (!tokenId || !currentCollectionMetadata.product) { diff --git a/rair-front/src/components/MockUpPage/NftList/NftData/SerialNumberBuySell.tsx b/rair-front/src/components/MockUpPage/NftList/NftData/SerialNumberBuySell.tsx index 873635588..faf7ba211 100644 --- a/rair-front/src/components/MockUpPage/NftList/NftData/SerialNumberBuySell.tsx +++ b/rair-front/src/components/MockUpPage/NftList/NftData/SerialNumberBuySell.tsx @@ -1,3 +1,4 @@ +//@ts-nocheck import React, { useCallback, useEffect, useState } from 'react'; import { Provider } from 'react-redux'; import { useParams } from 'react-router'; diff --git a/rair-front/src/components/MockUpPage/NftList/NftItemForCollectionView.tsx b/rair-front/src/components/MockUpPage/NftList/NftItemForCollectionView.tsx index 9f88f4de1..4d1270255 100644 --- a/rair-front/src/components/MockUpPage/NftList/NftItemForCollectionView.tsx +++ b/rair-front/src/components/MockUpPage/NftList/NftItemForCollectionView.tsx @@ -1,3 +1,4 @@ +//@ts-nocheck import React, { memo, useCallback, useEffect, useState } from 'react'; import ReactPlayer from 'react-player'; import { Provider, useStore } from 'react-redux'; diff --git a/rair-front/src/components/MomentsGame/MomentsGame.tsx b/rair-front/src/components/MomentsGame/MomentsGame.tsx new file mode 100644 index 000000000..bde405970 --- /dev/null +++ b/rair-front/src/components/MomentsGame/MomentsGame.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import styled from 'styled-components'; +import ThreeGame from '../ThreeGame/ThreeGame'; + +const GameContainer = styled.div` + width: 100%; + height: 90vh; + position: relative; + overflow: hidden; +`; + +const GameIframe = styled.iframe` + width: 100%; + height: 100%; + border: none; + position: absolute; + top: 0; + left: 0; +`; + +const MomentsGame: React.FC = () => { + return ( + + + + ); +}; + +export default MomentsGame; \ No newline at end of file diff --git a/rair-front/src/components/MomentsGame/components/TariffGlobe.tsx b/rair-front/src/components/MomentsGame/components/TariffGlobe.tsx new file mode 100644 index 000000000..b0b85f6df --- /dev/null +++ b/rair-front/src/components/MomentsGame/components/TariffGlobe.tsx @@ -0,0 +1,908 @@ +//@ts-nocheck +import { useEffect, useRef, useState, useCallback, useMemo } from 'react'; +import * as THREE from 'three'; +import { throttle } from 'lodash'; +import Globe from 'globe.gl'; + +// Define LuminanceFormat constant to resolve import issues +const LuminanceFormat = 4; // This matches the value in Three.js + +// Import parcel components +import RegionView from './RegionView'; +import ParcelGrid from './ParcelGrid'; +import ParcelPurchase from './ParcelPurchase'; + +// Define a type for the Globe instance +type GlobeInstance = { + globeImageUrl: (url: string) => GlobeInstance; + bumpImageUrl: (url: string) => GlobeInstance; + backgroundImageUrl: (url: string) => GlobeInstance; + width: (width: number) => GlobeInstance; + height: (height: number) => GlobeInstance; + backgroundColor: (color: string) => GlobeInstance; + pointsData: (data: any[]) => GlobeInstance; + pointColor: (color: string | ((d: any) => string)) => GlobeInstance; + pointRadius: (radius: number | ((d: any) => number)) => GlobeInstance; + pointAltitude: (altitude: number | ((d: any) => number)) => GlobeInstance; + pointsMerge: (merge: boolean) => GlobeInstance; + pointsTransitionDuration: (duration: number) => GlobeInstance; + arcsData: (data: any[]) => GlobeInstance; + arcColor: (color: string | ((d: any) => string)) => GlobeInstance; + arcAltitude: (altitude: number | ((d: any) => number)) => GlobeInstance; + arcStroke: (stroke: number | ((d: any) => number)) => GlobeInstance; + arcsTransitionDuration: (duration: number) => GlobeInstance; + _destructor: () => void; + // Add methods for accessing internal objects + renderer?: () => any; + camera?: () => any; + controls?: () => any; + // Camera methods + pointOfView?: (pov: any, transitionDuration?: number) => GlobeInstance; + // Add methods for HTML elements + htmlElementsData?: (data: any[]) => GlobeInstance; + htmlElement?: (elementFn: (d: any) => HTMLElement) => GlobeInstance; + htmlTransitionDuration?: (duration: number) => GlobeInstance; + onHtmlElementClick?: (callback: (d: any) => void) => GlobeInstance; + onHtmlElementHover?: (callback: (d: any | null) => void) => GlobeInstance; + // Add methods for polygons + polygonsData?: (data: any[]) => GlobeInstance; + polygonCapColor?: (color: string | ((d: any) => string)) => GlobeInstance; + polygonSideColor?: (color: string | ((d: any) => string)) => GlobeInstance; + polygonStrokeColor?: (color: string | ((d: any) => string)) => GlobeInstance; + polygonAltitude?: (altitude: number | ((d: any) => number)) => GlobeInstance; + onPolygonClick?: (callback: (polygon: any) => void) => GlobeInstance; + onPolygonHover?: (callback: (polygon: any | null) => void) => GlobeInstance; +} + +interface Country { + id: string; + name: string; + gdp: number; + previousGdp: number; + gdpChange: number; + population: number; + coordinates: { + lat: number; + lng: number; + }; + tradePartners: TradePartner[]; +} + +interface TradePartner { + countryId: string; + importVolume: number; + exportVolume: number; + tariffRate: number; +} + +interface GlobalParameters { + baseTariffRate: number; + gdpGrowthRate: number; + tradeMultiplier: number; + laborProductivity: number; + taxRate: number; +} + +// Add new interfaces for the parcellation system +interface Region { + id: string; + name: string; + countryId: string; + population: number; + gdp: number; + coordinates: { + lat: number; + lng: number; + }; + parcelCount: number; +} + +interface Parcel { + id: string; + regionId: string; + countryId: string; + coordinates: { + lat: number; + lng: number; + }; + price: number; + owner: string | null; + purchaseDate: string | null; +} + +interface CountryZoomState { + isZoomed: boolean; + countryId: string | null; + regionId: string | null; +} + +interface TariffGlobeProps { + width?: number; + height?: number; + countries?: Country[]; + globalParameters?: GlobalParameters; + isRunning?: boolean; + wallet?: { + address: string | null; + rifBalance: number; + }; +} + +export default function TariffGlobe({ + width = 800, + height = 600, + countries = [], + globalParameters = { baseTariffRate: 5, gdpGrowthRate: 2, tradeMultiplier: 1, laborProductivity: 1, taxRate: 15 }, + isRunning = false, + wallet = { address: null, rifBalance: 0 } +}: TariffGlobeProps) { + const containerRef = useRef(null); + const globeRef = useRef(null); + const [isClient, setIsClient] = useState(false); + const [error, setError] = useState(null); + const [selectedCountry, setSelectedCountry] = useState(null); + const [hoveredCountry, setHoveredCountry] = useState(null); + + // New state for parcel system + const [zoomState, setZoomState] = useState({ + isZoomed: false, + countryId: null, + regionId: null + }); + const [regions, setRegions] = useState([]); + const [parcels, setParcels] = useState([]); + const [selectedParcel, setSelectedParcel] = useState(null); + const [loadingParcels, setLoadingParcels] = useState(false); + + // Derived/computed state + const selectedRegion = useMemo(() => { + if (!zoomState.regionId) return null; + return regions.find(r => r.id === zoomState.regionId) || null; + }, [regions, zoomState.regionId]); + + const countryRegions = useMemo(() => { + if (!zoomState.countryId) return []; + return regions.filter(r => r.countryId === zoomState.countryId); + }, [regions, zoomState.countryId]); + + const regionParcels = useMemo(() => { + if (!zoomState.regionId) return []; + return parcels.filter(p => p.regionId === zoomState.regionId); + }, [parcels, zoomState.regionId]); + + // Set isClient to true when component mounts (client-side only) + useEffect(() => { + setIsClient(true); + // Generate mock regions and parcels for prototype + generateMockRegionsAndParcels(); + }, []); + + // Mock data generation for prototype + const generateMockRegionsAndParcels = () => { + // Generate regions + const mockRegions: Region[] = []; + let regionId = 1; + + countries.forEach(country => { + // Generate between 3-8 regions per country based on population + const regionCount = Math.max(3, Math.min(8, Math.ceil(country.population / 200))); + + for (let i = 0; i < regionCount; i++) { + // Calculate region population as fraction of country population + const regionPopulation = (country.population / regionCount) * (0.7 + Math.random() * 0.6); + + // Calculate region GDP as fraction of country GDP proportional to population + const populationShare = regionPopulation / country.population; + const regionGDP = country.gdp * populationShare; + + // Calculate region coordinates with random offset from country center + const latOffset = (Math.random() - 0.5) * 8; + const lngOffset = (Math.random() - 0.5) * 8; + + mockRegions.push({ + id: `${country.id}-r${regionId}`, + name: `${country.name} Region ${i + 1}`, + countryId: country.id, + population: Number(regionPopulation.toFixed(1)), + gdp: Number((regionGDP).toFixed(1)), + coordinates: { + lat: country.coordinates.lat + latOffset, + lng: country.coordinates.lng + lngOffset + }, + parcelCount: Math.ceil(regionPopulation * 2) // 2 parcels per 1M population + }); + + regionId++; + } + }); + + setRegions(mockRegions); + + // Generate parcels (only for the first few regions to avoid excessive memory usage) + const limitedRegions = mockRegions.slice(0, 20); + const mockParcels: Parcel[] = []; + + limitedRegions.forEach(region => { + for (let i = 0; i < region.parcelCount; i++) { + // Calculate parcel coordinates with random offset from region center + const latOffset = (Math.random() - 0.5) * 2; + const lngOffset = (Math.random() - 0.5) * 2; + + // Set a price proportional to the region's GDP per capita + const gdpPerCapita = region.gdp / region.population; + const basePrice = 50 + Math.floor(gdpPerCapita * 5); + + mockParcels.push({ + id: `${region.id}-p${i+1}`, + regionId: region.id, + countryId: region.countryId, + coordinates: { + lat: region.coordinates.lat + latOffset, + lng: region.coordinates.lng + lngOffset + }, + price: basePrice + Math.floor(Math.random() * 30), + owner: Math.random() > 0.7 ? null : Math.random() > 0.5 ? wallet.address : `0x${Math.random().toString(16).substring(2, 10)}...`, + purchaseDate: Math.random() > 0.7 ? null : new Date(Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000).toISOString() + }); + } + }); + + setParcels(mockParcels); + }; + + // Initialize globe + useEffect(() => { + if (!containerRef.current || !isClient) return; + + // Dynamically import globe.gl only on client-side + import('globe.gl') + .then((GlobeModule) => { + const Globe = GlobeModule.default; + + // Initialize globe + const globe = new Globe(containerRef.current as HTMLElement) + .globeImageUrl('//unpkg.com/three-globe/example/img/earth-dark.jpg') + .bumpImageUrl('//unpkg.com/three-globe/example/img/earth-topology.png') + .backgroundImageUrl('//unpkg.com/three-globe/example/img/night-sky.png') + .width(width) + .height(height) + .backgroundColor('rgba(0,0,0,0)') + .arcsTransitionDuration(1000) + .htmlTransitionDuration(1000); // Transition for HTML elements + + globeRef.current = globe; + setError(null); + }) + .catch(err => { + console.error('Failed to load globe.gl:', err); + setError('Failed to load globe visualization. Please check your internet connection.'); + }); + + // Cleanup + return () => { + if (globeRef.current) { + globeRef.current._destructor(); + } + }; + }, [width, height, isClient]); + + // Update globe data when countries or parameters change + useEffect(() => { + if (!globeRef.current || !countries.length) return; + + try { + // Max absolute GDP change for scaling bar height (adjust scaling as needed) + const maxAbsGdpChange = Math.max(...countries.map(c => Math.abs(c.gdpChange)), 1); // Avoid division by zero + + // Prepare HTML elements data for countries (GDP change bars) + const htmlElementsData = countries.map(country => ({ + lat: country.coordinates.lat, + lng: country.coordinates.lng, + countryData: country, // Pass full country data + gdpChange: country.gdpChange, + name: country.name, + id: country.id + })); + + // Prepare arcs data for trade relationships + const arcsData = countries.flatMap(country => + country.tradePartners.map(partner => { + const partnerCountry = countries.find(c => c.id === partner.countryId); + if (!partnerCountry) return null; + + return { + startLat: country.coordinates.lat, + startLng: country.coordinates.lng, + endLat: partnerCountry.coordinates.lat, + endLng: partnerCountry.coordinates.lng, + color: `rgba(255, 255, 255, ${partner.tariffRate / 20})`, // Opacity based on tariff rate + width: Math.log10(partner.importVolume + partner.exportVolume) / 2 // Width based on trade volume + }; + }).filter(Boolean) as any[] + ); + + // Update globe with new data + // Cast to any to use dynamically added/extended methods + (globeRef.current as any) + .arcsData(arcsData) + .arcColor(d => (d as any).color) + .arcAltitude(0.2) + .arcStroke(d => (d as any).width) + // --- HTML Elements for GDP Bars --- + .htmlElementsData(htmlElementsData) + .htmlElement(d => { + const country = (d as any).countryData as Country; + const elementData = d as any; // Capture data for listeners + const el = document.createElement('div'); + el.className = 'gdp-bar-container'; + + // Create Country Name Label + const nameLabel = document.createElement('div'); + nameLabel.className = 'country-map-label name-label'; + nameLabel.style.color = 'white'; + nameLabel.textContent = country.name; + el.appendChild(nameLabel); + + // Create GDP Value Label + const gdpLabel = document.createElement('div'); + gdpLabel.className = 'country-map-label gdp-label'; + gdpLabel.style.color = 'white'; + gdpLabel.textContent = `$${(country.gdp / 1000).toFixed(1)}T`; // Format GDP + el.appendChild(gdpLabel); + + // Create GDP Change Bar + const barContainer = document.createElement('div'); // Container to hold the bar itself + barContainer.className = 'bar-visual-container'; + const bar = document.createElement('div'); + bar.className = 'gdp-bar'; + // Scale height based on GDP change magnitude (adjust scaling factor as needed) + const barHeight = Math.min(50, Math.max(2, (Math.abs(country.gdpChange) / maxAbsGdpChange) * 50)); // Max 50px height, min 2px + bar.style.height = `${barHeight}px`; + bar.style.backgroundColor = country.gdpChange >= 0 ? '#4caf50' : '#f44336'; // Green for positive, Red for negative + barContainer.appendChild(bar); + el.appendChild(barContainer); + + // --- Add Event Listeners Directly --- + el.addEventListener('click', () => { + handleElementClick(elementData); + }); + el.addEventListener('mouseover', () => { + handleElementHover(elementData); + }); + el.addEventListener('mouseout', () => { + handleElementHover(null); // Clear hover on mouse out + }); + + return el; + }); + } catch (err) { + console.error('Error updating globe data:', err); + setError('Error updating globe visualization.'); + } + }, [countries, globalParameters, isRunning]); + + // Handle selection and zoom to country + const handleElementClick = (elementData: any) => { + if (!globeRef.current) return; + + try { + if (elementData && elementData.id) { + const country = countries.find(c => c.id === elementData.id); + if (country) { + setSelectedCountry(country); + + // Zoom to the country + zoomToCountry(country); + } else { + setSelectedCountry(null); + } + } else { + setSelectedCountry(null); + } + } catch (err) { + console.error('Error handling globe click:', err); + setSelectedCountry(null); + } + }; + + // Function to zoom to a country + const zoomToCountry = (country: Country) => { + if (!globeRef.current || !globeRef.current.pointOfView) return; + + try { + // Set zoom state first + setZoomState({ + isZoomed: true, + countryId: country.id, + regionId: null + }); + + // Calculate altitude based on country population (proxy for area) + // This is a simplified approach - ideally would use actual geographic boundaries + const populationFactor = Math.log10(country.population) / 3; // Scale population logarithmically + const altitude = 0.8 / populationFactor; // Closer zoom for bigger countries + + // Zoom to the country + (globeRef.current as any).pointOfView({ + lat: country.coordinates.lat, + lng: country.coordinates.lng, + altitude: altitude + }, 1000); // 1000ms transition + } catch (err) { + console.error('Error zooming to country:', err); + } + }; + + // Reset zoom to global view + const resetZoom = () => { + if (!globeRef.current || !globeRef.current.pointOfView) return; + + try { + // Reset zoom state + setZoomState({ + isZoomed: false, + countryId: null, + regionId: null + }); + + // Reset selected country and parcel + setSelectedCountry(null); + setSelectedParcel(null); + + // Zoom out to global view + (globeRef.current as any).pointOfView({ + lat: 0, + lng: 0, + altitude: 2.5 + }, 1000); // 1000ms transition + } catch (err) { + console.error('Error resetting zoom:', err); + } + }; + + // Handle mouse move for hover effects on HTML elements + const handleElementHover = (elementData: any | null) => { + if (!globeRef.current) return; + + try { + if (elementData && elementData.id) { + const country = countries.find(c => c.id === elementData.id); + if (country) { + setHoveredCountry(country); + } else { + setHoveredCountry(null); + } + } else { + setHoveredCountry(null); + } + } catch (err) { + console.error('Error handling globe mouse move:', err); + setHoveredCountry(null); + } + }; + + // Handle region selection + const handleSelectRegion = (regionId: string) => { + const region = regions.find(r => r.id === regionId); + if (!region) return; + + // Update zoom state + setZoomState(prev => ({ + ...prev, + regionId + })); + + // Simulate loading parcels for the region + setLoadingParcels(true); + setTimeout(() => { + setLoadingParcels(false); + }, 500); // Simulate load time + + // Zoom to the region if we have globe controls + if (globeRef.current && globeRef.current.pointOfView) { + // Zoom in closer to the region + (globeRef.current as any).pointOfView({ + lat: region.coordinates.lat, + lng: region.coordinates.lng, + altitude: 0.3 // Closer zoom for regions + }, 1000); // 1000ms transition + } + }; + + // Handle going back from region to country view + const handleRegionGoBack = () => { + const country = countries.find(c => c.id === zoomState.countryId); + if (!country) return; + + // Reset to country view + setZoomState(prev => ({ + ...prev, + regionId: null + })); + + // Zoom back to country + zoomToCountry(country); + }; + + // Handle parcel selection + const handleSelectParcel = (parcelId: string) => { + const parcel = parcels.find(p => p.id === parcelId); + if (!parcel || parcel.owner) return; // Don't select already owned parcels + + setSelectedParcel(parcel); + }; + + // Handle parcel purchase + const handlePurchaseParcel = useCallback((parcelId: string) => { + if (!wallet.address) return; + + // Find the parcel + const parcel = parcels.find(p => p.id === parcelId); + if (!parcel) return; + + // Simulate purchase + setParcels(prev => prev.map(p => { + if (p.id === parcelId) { + return { + ...p, + owner: wallet.address, + purchaseDate: new Date().toISOString() + }; + } + return p; + })); + + // Close the purchase modal + setSelectedParcel(null); + + // Show success message + alert(`Successfully purchased parcel ${parcelId} for ${parcel.price} RIF!`); + }, [parcels, wallet.address]); + + return ( +
+
+
+ + {/* Error message */} + {error && ( +
+ {error} +
+ )} + + {/* Country info panels and UI */} + + {/* Country hover info (only shown when not zoomed and hovering) */} + {hoveredCountry && !selectedCountry && !zoomState.isZoomed && ( +
+
{hoveredCountry.name}
+
${(hoveredCountry.gdp / 1000).toFixed(1)}T
+
hoveredCountry.previousGdp ? 'growing' : 'shrinking'}`}> + {hoveredCountry.gdp > hoveredCountry.previousGdp ? '🟢' : '🔴'} + {((hoveredCountry.gdp - hoveredCountry.previousGdp) / hoveredCountry.previousGdp * 100).toFixed(1)}% +
+
+ )} + + {/* Country details panel (for non-zoomed state) */} + {selectedCountry && !zoomState.isZoomed && ( +
+

{selectedCountry.name}

+
+ GDP: + ${(selectedCountry.gdp / 1000).toFixed(1)}T +
+
+ Population: + {(selectedCountry.population).toFixed(1)}M +
+
+ Growth: + selectedCountry.previousGdp ? 'growing' : 'shrinking'}> + {selectedCountry.gdp > selectedCountry.previousGdp ? '🟢' : '🔴'} + {((selectedCountry.gdp - selectedCountry.previousGdp) / selectedCountry.previousGdp * 100).toFixed(1)}% + +
+

Trade Partners

+
+ {selectedCountry.tradePartners.map(partner => { + const partnerCountry = countries.find(c => c.id === partner.countryId); + if (!partnerCountry) return null; + + return ( +
+
{partnerCountry.name}
+
+
Import: ${partner.importVolume}B
+
Export: ${partner.exportVolume}B
+
Tariff: {partner.tariffRate}%
+
+
+ ); + })} +
+ + +
+ )} + + {/* Zoom controls */} + {zoomState.isZoomed && ( +
+ +
+ )} + + {/* Loading indicator for parcels */} + {loadingParcels && ( +
+
+
Loading region parcels...
+
+ )} + + {/* Region view when zoomed to country */} + {zoomState.isZoomed && zoomState.countryId && !zoomState.regionId && ( + c.id === zoomState.countryId) as Country} + regions={countryRegions} + wallet={wallet} + onSelectRegion={handleSelectRegion} + onClose={resetZoom} + /> + )} + + {/* Parcel grid when zoomed to region */} + {zoomState.isZoomed && zoomState.regionId && selectedRegion && ( + + )} + + {/* Parcel purchase modal */} + {selectedParcel && selectedRegion && ( +
+ setSelectedParcel(null)} + /> +
+ )} + + {/* Add some basic CSS */} + +
+ ); +} \ No newline at end of file diff --git a/rair-front/src/components/Navigation/MenuComponents/MobileNavigationList.tsx b/rair-front/src/components/Navigation/MenuComponents/MobileNavigationList.tsx index f06524293..55b2b477f 100644 --- a/rair-front/src/components/Navigation/MenuComponents/MobileNavigationList.tsx +++ b/rair-front/src/components/Navigation/MenuComponents/MobileNavigationList.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import React, { useCallback, useEffect, useState } from 'react'; import { NavLink } from 'react-router-dom'; import { faChevronLeft, faSignOutAlt } from '@fortawesome/free-solid-svg-icons'; diff --git a/rair-front/src/components/ServerSettings/blockchainSettings.tsx b/rair-front/src/components/ServerSettings/blockchainSettings.tsx index ee009b617..6a269d560 100644 --- a/rair-front/src/components/ServerSettings/blockchainSettings.tsx +++ b/rair-front/src/components/ServerSettings/blockchainSettings.tsx @@ -1,5 +1,5 @@ import { useCallback, useEffect, useState } from 'react'; -import { AlchemyChainMap } from '@alchemy/aa-core'; +// import { AlchemyChainMap } from '@alchemy/aa-core'; import { Hex } from 'viem'; import { useAppDispatch, useAppSelector } from '../../hooks/useReduxHooks'; @@ -167,21 +167,21 @@ const BlockchainSettings = () => { type: 'text', setting: 'hash', effect: (chain) => { - const alchemyData = AlchemyChainMap.get(Number(chain)); - updateBlockchainSetting(chain, { - alchemySupport: !!alchemyData - }); - if (alchemyData) { - updateBlockchainSetting(chain, { - testnet: !!alchemyData?.testnet, - blockExplorerGateway: - alchemyData.blockExplorers?.default?.url || '', - rpcEndpoint: alchemyData.rpcUrls.default.http.at(0) || '', - numericalId: alchemyData.id, - name: alchemyData.name, - symbol: alchemyData.nativeCurrency.symbol - }); - } + // const alchemyData = AlchemyChainMap.get(Number(chain)); + // updateBlockchainSetting(chain, { + // alchemySupport: !!alchemyData + // }); + // if (alchemyData) { + // updateBlockchainSetting(chain, { + // testnet: !!alchemyData?.testnet, + // blockExplorerGateway: + // alchemyData.blockExplorers?.default?.url || '', + // rpcEndpoint: alchemyData.rpcUrls.default.http.at(0) || '', + // numericalId: alchemyData.id, + // name: alchemyData.name, + // symbol: alchemyData.nativeCurrency.symbol + // }); + // } } }, { diff --git a/rair-front/src/components/SplashPage/CoinAgenda2021/CoinAgenda2021.tsx b/rair-front/src/components/SplashPage/CoinAgenda2021/CoinAgenda2021.tsx index 43a18dd42..81b371610 100644 --- a/rair-front/src/components/SplashPage/CoinAgenda2021/CoinAgenda2021.tsx +++ b/rair-front/src/components/SplashPage/CoinAgenda2021/CoinAgenda2021.tsx @@ -6,7 +6,7 @@ import { useOpenVideoPlayer } from '../../../hooks/useOpenVideoPlayer'; import { useAppDispatch, useAppSelector } from '../../../hooks/useReduxHooks'; import useSwal from '../../../hooks/useSwal'; import { setSEOInfo } from '../../../redux/seoSlice'; -import { setRequestedChain } from '../../../redux/web3Slice'; +// import { setRequestedChain } from '../../../redux/web3Slice'; import { SplashPageProps } from '../../../types/commonTypes'; import { splashData } from '../../../utils/infoSplashData/coicAgenda2021'; import MetaTags from '../../SeoTags/MetaTags'; @@ -71,9 +71,9 @@ const CoinAgenda2021SplashPage: FC = ({ setIsSplashPage }) => { setIsSplashPage?.(true); }, [setIsSplashPage]); - useEffect(() => { - dispatch(setRequestedChain(ukraineglitchChainId)); - }, [dispatch]); + // useEffect(() => { + // dispatch(setRequestedChain(ukraineglitchChainId)); + // }, [dispatch]); const togglePurchaseList = () => { setPurchaseList((prev) => !prev); diff --git a/rair-front/src/components/SplashPage/Greyman/GreymanSplashPage.tsx b/rair-front/src/components/SplashPage/Greyman/GreymanSplashPage.tsx index 602a1c3c9..304f665de 100644 --- a/rair-front/src/components/SplashPage/Greyman/GreymanSplashPage.tsx +++ b/rair-front/src/components/SplashPage/Greyman/GreymanSplashPage.tsx @@ -1,3 +1,4 @@ +//@ts-nocheck import { FC, useCallback, useEffect, useState } from 'react'; //Google Analytics import ReactGA from 'react-ga'; @@ -16,7 +17,7 @@ import useWeb3Tx from '../../../hooks/useWeb3Tx'; /* importing images*/ import { metaMaskIcon } from '../../../images'; import { setSEOInfo } from '../../../redux/seoSlice'; -import { setRequestedChain } from '../../../redux/web3Slice'; +// import { setRequestedChain } from '../../../redux/web3Slice'; import { CustomModalStyle, SplashPageProps } from '../../../types/commonTypes'; import MobileCarouselNfts from '../../AboutPage/AboutPageNew/ExclusiveNfts/MobileCarouselNfts'; import PurchaseTokenButton from '../../common/PurchaseToken'; @@ -151,9 +152,9 @@ const GreymanSplashPage: FC = ({ setIsSplashPage }) => { setOpenCheckList((prev) => !prev); }; - useEffect(() => { - dispatch(setRequestedChain(GreymanChainId)); - }, [dispatch]); + // useEffect(() => { + // dispatch(setRequestedChain(GreymanChainId)); + // }, [dispatch]); const openModal = useCallback(() => { setIsOpen(true); diff --git a/rair-front/src/components/SplashPage/ImmersiVerse/ImmersiVerseSplashPage.tsx b/rair-front/src/components/SplashPage/ImmersiVerse/ImmersiVerseSplashPage.tsx index 06a57c2d4..a951d5338 100644 --- a/rair-front/src/components/SplashPage/ImmersiVerse/ImmersiVerseSplashPage.tsx +++ b/rair-front/src/components/SplashPage/ImmersiVerse/ImmersiVerseSplashPage.tsx @@ -1,3 +1,4 @@ +//@ts-nocheck import { FC, useEffect, useState } from 'react'; import Modal from 'react-modal'; diff --git a/rair-front/src/components/SplashPage/MarkKohler/MarkKohler.tsx b/rair-front/src/components/SplashPage/MarkKohler/MarkKohler.tsx index 305e58107..99e37bb6c 100644 --- a/rair-front/src/components/SplashPage/MarkKohler/MarkKohler.tsx +++ b/rair-front/src/components/SplashPage/MarkKohler/MarkKohler.tsx @@ -8,7 +8,7 @@ import { useOpenVideoPlayer } from '../../../hooks/useOpenVideoPlayer'; import { useAppDispatch, useAppSelector } from '../../../hooks/useReduxHooks'; import useSwal from '../../../hooks/useSwal'; import { setSEOInfo } from '../../../redux/seoSlice'; -import { setRequestedChain } from '../../../redux/web3Slice'; +// import { setRequestedChain } from '../../../redux/web3Slice'; import { SplashPageProps } from '../../../types/commonTypes'; import { blockchain, @@ -154,10 +154,10 @@ const MarkKohler: FC = ({ setIsSplashPage }) => { ); }, [carousel_match.matches]); - useEffect(() => { - dispatch(setRequestedChain('0x5')); - //eslint-disable-next-line - }, []); + // useEffect(() => { + // dispatch(setRequestedChain('0x5')); + // //eslint-disable-next-line + // }, []); const toggleCheckList = () => { setOpenCheckList((prev) => !prev); diff --git a/rair-front/src/components/SplashPage/NFTNYC/NFTNYC.tsx b/rair-front/src/components/SplashPage/NFTNYC/NFTNYC.tsx index d10aae9a7..e0c51d54a 100644 --- a/rair-front/src/components/SplashPage/NFTNYC/NFTNYC.tsx +++ b/rair-front/src/components/SplashPage/NFTNYC/NFTNYC.tsx @@ -7,7 +7,7 @@ import { useOpenVideoPlayer } from '../../../hooks/useOpenVideoPlayer'; import { useAppDispatch, useAppSelector } from '../../../hooks/useReduxHooks'; import useSwal from '../../../hooks/useSwal'; import { setSEOInfo } from '../../../redux/seoSlice'; -import { setRequestedChain } from '../../../redux/web3Slice'; +// import { setRequestedChain } from '../../../redux/web3Slice'; import { SplashPageProps } from '../../../types/commonTypes'; import { useNFTNYC } from '../../../utils/infoSplashData/nftnyc'; import { ImageLazy } from '../../MockUpPage/ImageLazy/ImageLazy'; @@ -77,10 +77,10 @@ const NFTNYCSplashPage: FC = ({ setIsSplashPage }) => { setPurchaseList((prev) => !prev); }; - useEffect(() => { - dispatch(setRequestedChain(ukraineglitchChainId)); - //eslint-disable-next-line - }, []); + // useEffect(() => { + // dispatch(setRequestedChain(ukraineglitchChainId)); + // //eslint-disable-next-line + // }, []); useEffect(() => { setIsSplashPage?.(true); diff --git a/rair-front/src/components/SplashPage/Nipseyverse/index.tsx b/rair-front/src/components/SplashPage/Nipseyverse/index.tsx index 6bae2cd2d..2a947dee5 100644 --- a/rair-front/src/components/SplashPage/Nipseyverse/index.tsx +++ b/rair-front/src/components/SplashPage/Nipseyverse/index.tsx @@ -1,3 +1,4 @@ +//@ts-nocheck import { FC, useCallback, useEffect, useState } from 'react'; import Modal from 'react-modal'; import { useNavigate } from 'react-router-dom'; @@ -18,7 +19,7 @@ import useWeb3Tx from '../../../hooks/useWeb3Tx'; /* importing images*/ import { discrodIconNoBorder, metaMaskIcon } from '../../../images'; import { setSEOInfo } from '../../../redux/seoSlice'; -import { setRequestedChain } from '../../../redux/web3Slice'; +// import { setRequestedChain } from '../../../redux/web3Slice'; import { CustomModalStyle, SplashPageProps } from '../../../types/commonTypes'; import MetaTags from '../../SeoTags/MetaTags'; import ExclusiveNft from '../ExclusiveNft/ExclusiveNft'; @@ -86,10 +87,10 @@ const SplashPage: FC = ({ setIsSplashPage }) => { const { correctBlockchain, web3Switch } = useWeb3Tx(); - useEffect(() => { - dispatch(setRequestedChain('0x1')); - //eslint-disable-next-line - }, []); + // useEffect(() => { + // dispatch(setRequestedChain('0x1')); + // //eslint-disable-next-line + // }, []); useEffect(() => { setIsSplashPage?.(true); diff --git a/rair-front/src/components/SplashPage/Nutcrackers/Nutcrackers.tsx b/rair-front/src/components/SplashPage/Nutcrackers/Nutcrackers.tsx index acb267343..a0452db64 100644 --- a/rair-front/src/components/SplashPage/Nutcrackers/Nutcrackers.tsx +++ b/rair-front/src/components/SplashPage/Nutcrackers/Nutcrackers.tsx @@ -10,7 +10,7 @@ import { useAppDispatch, useAppSelector } from '../../../hooks/useReduxHooks'; import useSwal from '../../../hooks/useSwal'; import { metaMaskIcon } from '../../../images'; import { setSEOInfo } from '../../../redux/seoSlice'; -import { setRequestedChain } from '../../../redux/web3Slice'; +// import { setRequestedChain } from '../../../redux/web3Slice'; import { SplashPageProps } from '../../../types/commonTypes'; import PurchaseTokenButton from '../../common/PurchaseToken'; import { ImageLazy } from '../../MockUpPage/ImageLazy/ImageLazy'; @@ -47,10 +47,10 @@ const Nutcrackers: FC = ({ setIsSplashPage }) => { const targetBlockchain: Hex = '0x89'; const nutcrackerAddress: Hex = '0xF4ca90d4a796f57133c6de47c2261BF237cfF780'; - useEffect(() => { - dispatch(setRequestedChain(targetBlockchain)); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); + // useEffect(() => { + // dispatch(setRequestedChain(targetBlockchain)); + // // eslint-disable-next-line react-hooks/exhaustive-deps + // }, []); useEffect(() => { if (leftTokensNumber <= wholeTokens) { diff --git a/rair-front/src/components/SplashPage/SimDogs/SimDogs.tsx b/rair-front/src/components/SplashPage/SimDogs/SimDogs.tsx index 7b0d1bd32..d8fee11ba 100644 --- a/rair-front/src/components/SplashPage/SimDogs/SimDogs.tsx +++ b/rair-front/src/components/SplashPage/SimDogs/SimDogs.tsx @@ -10,7 +10,7 @@ import { useOpenVideoPlayer } from '../../../hooks/useOpenVideoPlayer'; import { useAppDispatch, useAppSelector } from '../../../hooks/useReduxHooks'; import useSwal from '../../../hooks/useSwal'; import { setSEOInfo } from '../../../redux/seoSlice'; -import { setRequestedChain } from '../../../redux/web3Slice'; +// import { setRequestedChain } from '../../../redux/web3Slice'; import { CatalogVideoItem, SplashPageProps } from '../../../types/commonTypes'; import { donationGridData, @@ -125,9 +125,9 @@ const SimDogsSplashPage: React.FC = ({ setIsSplashPage }) => { setIsSplashPage?.(true); }, [setIsSplashPage]); - useEffect(() => { - dispatch(setRequestedChain(mainChain)); - }, [dispatch]); + // useEffect(() => { + // dispatch(setRequestedChain(mainChain)); + // }, [dispatch]); return (
diff --git a/rair-front/src/components/SplashPage/SplashPageTemplate/VideoPlayer/ShowVideoToLoggedInUsers.tsx b/rair-front/src/components/SplashPage/SplashPageTemplate/VideoPlayer/ShowVideoToLoggedInUsers.tsx index 9616bb588..df3bc6242 100644 --- a/rair-front/src/components/SplashPage/SplashPageTemplate/VideoPlayer/ShowVideoToLoggedInUsers.tsx +++ b/rair-front/src/components/SplashPage/SplashPageTemplate/VideoPlayer/ShowVideoToLoggedInUsers.tsx @@ -1,3 +1,4 @@ +//@ts-nocheck import { useCallback, useState } from 'react'; import Modal from 'react-modal'; import { Provider, useStore } from 'react-redux'; diff --git a/rair-front/src/components/SplashPage/SplashPageTemplate/VideoTiles/VideoTilesItem.tsx b/rair-front/src/components/SplashPage/SplashPageTemplate/VideoTiles/VideoTilesItem.tsx index a87a3d1db..44f06f84e 100644 --- a/rair-front/src/components/SplashPage/SplashPageTemplate/VideoTiles/VideoTilesItem.tsx +++ b/rair-front/src/components/SplashPage/SplashPageTemplate/VideoTiles/VideoTilesItem.tsx @@ -1,3 +1,4 @@ +//@ts-nocheck import { useCallback, useState } from 'react'; import Modal from 'react-modal'; import { Provider, useStore } from 'react-redux'; diff --git a/rair-front/src/components/SplashPage/UkraineGlitchSplashPage/UkraineSplashPage.tsx b/rair-front/src/components/SplashPage/UkraineGlitchSplashPage/UkraineSplashPage.tsx index 046e10ad9..d9c2125e1 100644 --- a/rair-front/src/components/SplashPage/UkraineGlitchSplashPage/UkraineSplashPage.tsx +++ b/rair-front/src/components/SplashPage/UkraineGlitchSplashPage/UkraineSplashPage.tsx @@ -4,7 +4,7 @@ import { teamUkraineArray } from './AboutUsTeam'; import { useAppDispatch, useAppSelector } from '../../../hooks/useReduxHooks'; import { setSEOInfo } from '../../../redux/seoSlice'; -import { setRequestedChain } from '../../../redux/web3Slice'; +// import { setRequestedChain } from '../../../redux/web3Slice'; import { SplashPageProps } from '../../../types/commonTypes'; // import NFTLA_Video from "../images/NFT-LA-RAIR-2021.mp4" import { splashData } from '../../../utils/infoSplashData/ukraineSplashPage'; @@ -85,10 +85,10 @@ const UkraineSplashPage: FC = ({ setIsSplashPage }) => { window.addEventListener('resize', () => setCarousel(carousel_match.matches)); - useEffect(() => { - dispatch(setRequestedChain(ukraineglitchChainId)); - //eslint-disable-next-line - }, []); + // useEffect(() => { + // dispatch(setRequestedChain(ukraineglitchChainId)); + // //eslint-disable-next-line + // }, []); useEffect(() => { setIsSplashPage?.(true); diff --git a/rair-front/src/components/SplashPage/VaporverseSplash/VaporverseSplashPage.tsx b/rair-front/src/components/SplashPage/VaporverseSplash/VaporverseSplashPage.tsx index 3730af255..e77faabdf 100644 --- a/rair-front/src/components/SplashPage/VaporverseSplash/VaporverseSplashPage.tsx +++ b/rair-front/src/components/SplashPage/VaporverseSplash/VaporverseSplashPage.tsx @@ -6,7 +6,7 @@ import { teamVaporVerseArray } from './AboutUsTeam'; import useConnectUser from '../../../hooks/useConnectUser'; import { useAppDispatch, useAppSelector } from '../../../hooks/useReduxHooks'; import { setSEOInfo } from '../../../redux/seoSlice'; -import { setRequestedChain } from '../../../redux/web3Slice'; +// import { setRequestedChain } from '../../../redux/web3Slice'; import { SplashPageProps } from '../../../types/commonTypes'; import { splashData } from '../../../utils/infoSplashData/vapoverseSplashPage'; import { ImageLazy } from '../../MockUpPage/ImageLazy/ImageLazy'; @@ -119,9 +119,9 @@ const VaporverseSplashPage: FC = ({ setIsSplashPage }) => { // getAllProduct() // }, [getAllProduct]) - useEffect(() => { - dispatch(setRequestedChain(chainId)); - }, [dispatch]); + // useEffect(() => { + // dispatch(setRequestedChain(chainId)); + // }, [dispatch]); useEffect(() => { setIsSplashPage(true); diff --git a/rair-front/src/components/SplashPage/wallstreet80sclub/wallstreet80sclub.tsx b/rair-front/src/components/SplashPage/wallstreet80sclub/wallstreet80sclub.tsx index 993299e59..8191fb8a8 100644 --- a/rair-front/src/components/SplashPage/wallstreet80sclub/wallstreet80sclub.tsx +++ b/rair-front/src/components/SplashPage/wallstreet80sclub/wallstreet80sclub.tsx @@ -5,7 +5,7 @@ import { teamWallstreetArray } from './AboutUsTeam'; import RairFavicon from '../../../components/MockUpPage/assets/rair_favicon.ico'; import { useAppDispatch, useAppSelector } from '../../../hooks/useReduxHooks'; import { setSEOInfo } from '../../../redux/seoSlice'; -import { setRequestedChain } from '../../../redux/web3Slice'; +// import { setRequestedChain } from '../../../redux/web3Slice'; import { SplashPageProps } from '../../../types/commonTypes'; import { blockchain, @@ -92,10 +92,10 @@ const Wallstreet80sClubSplashPage: FC = ({ ); }, [carousel_match.matches]); - useEffect(() => { - dispatch(setRequestedChain(blockchain)); - //eslint-disable-next-line - }, []); + // useEffect(() => { + // dispatch(setRequestedChain(blockchain)); + // //eslint-disable-next-line + // }, []); const togglePurchaseList = () => { setPurchaseList((prev) => !prev); diff --git a/rair-front/src/components/ThreeGame/ThreeGame.tsx b/rair-front/src/components/ThreeGame/ThreeGame.tsx new file mode 100644 index 000000000..9eb32a31f --- /dev/null +++ b/rair-front/src/components/ThreeGame/ThreeGame.tsx @@ -0,0 +1,59 @@ +//@ts-nocheck +import React, { useState } from "react"; +import ReactDOM from "react-dom"; +import { Canvas } from "@react-three/fiber"; +import { useProgress } from "@react-three/drei"; + +import SampleLevel from "./levels/SampleLevel"; +import SecondLevel from "./levels/SecondLevel"; +import PhysicalMovements from "./components/PhysicalMovements"; + +import "./index.css"; +import GameMenu from "./components/GameMenu"; + +function Loader() { + const { progress } = useProgress(); + return
loading {progress.toFixed()} %
; +} + +const ThreeGame = () => { + const [currentLevel, setCurrentLevel] = useState(1); + const [coinCount, setCoinCount] = useState(0); + const [gameStarted, setGameStarted] = useState(false); + + + const renderLevel = () => { + switch (currentLevel) { + case 1: + return setCurrentLevel(2)} onCoinCollect={() => setCoinCount(prev => prev + 1)} />; + case 2: + return setCoinCount(prev => prev + 1)} />; + default: + return setCurrentLevel(2)} onCoinCollect={() => setCoinCount(prev => prev + 1)} />; + } + }; + + + const handleStartGame = () => { + setGameStarted(true); + }; + + if (!gameStarted) { + return ; + } + + return ( + <> +
+ Coins: {coinCount} +
+ {/* */} + + + {renderLevel()} + + + ); +}; + +export default ThreeGame; \ No newline at end of file diff --git a/rair-front/src/components/ThreeGame/components/Attack.tsx b/rair-front/src/components/ThreeGame/components/Attack.tsx new file mode 100644 index 000000000..ee2fee44e --- /dev/null +++ b/rair-front/src/components/ThreeGame/components/Attack.tsx @@ -0,0 +1,16 @@ +//@ts-nocheck +import React, { useRef } from "react"; + +import { bomb } from "../utils/textureManager.ts"; + +const Attack = () => { + const ref = useRef(); + return ( + + + + + ); +}; + +export default Attack; \ No newline at end of file diff --git a/rair-front/src/components/ThreeGame/components/Coin.tsx b/rair-front/src/components/ThreeGame/components/Coin.tsx new file mode 100644 index 000000000..1b610aa23 --- /dev/null +++ b/rair-front/src/components/ThreeGame/components/Coin.tsx @@ -0,0 +1,67 @@ +//@ts-nocheck +import React, { useCallback, useRef, useState } from "react"; +import { useFrame, useThree } from "@react-three/fiber"; +import throttle from "lodash-es/throttle"; + +import { coin } from "../utils/textureManager.ts"; +import coinSound from "../sounds/coin.wav"; +import { calcDistance } from "../utils/calcDistance"; + +const Coin = ({ position, onCollect }) => { + const sound = new Audio(coinSound); + + const ref = useRef(); + const [hide, setHide] = useState(false); + const { scene, camera } = useThree(); + + const coinControl = useCallback( + throttle(() => { + if (!hide) { + // ref.current.lookAt(camera.position); + const position = ref?.current?.position; + + // this is supposed to be the first object in the scene: tshe player + const collision = + calcDistance(scene.children[0].position, position) < 1; + + if (collision) { + sound.play(); + setHide(true); + if (onCollect) { + onCollect(); + } + } + } + }, 100), + [hide, onCollect] + ); + + useFrame(coinControl); + + if (hide) { + return null; + } + + return ( + + + + + ); +}; + +const isSameType = (prevProps, nextProps) => { + return prevProps.type === nextProps.type; +}; + +export default React.memo(Coin, isSameType); \ No newline at end of file diff --git a/rair-front/src/components/ThreeGame/components/GameMenu.css b/rair-front/src/components/ThreeGame/components/GameMenu.css new file mode 100644 index 000000000..94573a8a0 --- /dev/null +++ b/rair-front/src/components/ThreeGame/components/GameMenu.css @@ -0,0 +1,81 @@ +.game-menu { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + width: 100vw; + background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); + color: white; + font-family: 'Arial', sans-serif; +} + +.menu-container { + display: flex; + flex-direction: column; + align-items: center; + padding: 2rem; + background-color: rgba(0, 0, 0, 0.5); + border-radius: 10px; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); + max-width: 600px; + text-align: center; +} + +.game-title { + font-size: 3rem; + margin-bottom: 2rem; + color: #ffd700; + text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); +} + +.play-button { + background-color: #4caf50; + color: white; + border: none; + padding: 1rem 3rem; + font-size: 1.5rem; + border-radius: 5px; + cursor: pointer; + margin-bottom: 2rem; + transition: all 0.3s ease; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +.play-button:hover { + background-color: #45a049; + transform: translateY(-3px); + box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); +} + +.play-button:active { + transform: translateY(1px); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.game-instructions { + text-align: left; + margin-top: 1rem; +} + +.game-instructions h2 { + color: #ffd700; + margin-bottom: 1rem; +} + +.game-instructions ul { + list-style-type: none; + padding: 0; +} + +.game-instructions li { + margin-bottom: 0.5rem; + padding-left: 1.5rem; + position: relative; +} + +.game-instructions li:before { + content: "•"; + color: #4caf50; + position: absolute; + left: 0; +} \ No newline at end of file diff --git a/rair-front/src/components/ThreeGame/components/GameMenu.tsx b/rair-front/src/components/ThreeGame/components/GameMenu.tsx new file mode 100644 index 000000000..24bdf31c1 --- /dev/null +++ b/rair-front/src/components/ThreeGame/components/GameMenu.tsx @@ -0,0 +1,37 @@ +//@ts-nocheck +import React, {useState} from "react"; +import "./GameMenu.css"; +import { useAppSelector } from "../../../hooks/useReduxHooks"; + +interface GameMenuProps { + onStartGame: () => void; +} + +const GameMenu: React.FC = ({ onStartGame }) => { + const { adminRights, superAdmin, isLoggedIn, loginStatus } = useAppSelector( + (store) => store.user + ); + const [login, setLogin] = useState(false); + + return ( +
+
+

RAIR Game

+ +
+

How to Play

+
    +
  • Use WASD or arrow keys to move
  • +
  • Collect coins to increase your score
  • +
  • Press E to interact with draggable objects
  • +
  • Find the portal to advance to the next level
  • +
+
+
+
+ ); +}; + +export default GameMenu; \ No newline at end of file diff --git a/rair-front/src/components/ThreeGame/components/Object.tsx b/rair-front/src/components/ThreeGame/components/Object.tsx new file mode 100644 index 000000000..7063893ba --- /dev/null +++ b/rair-front/src/components/ThreeGame/components/Object.tsx @@ -0,0 +1,26 @@ +//@ts-nocheck +import React, { useRef } from "react"; + +import { wood } from "../utils/textureManager.ts"; + +const Object = ({ texture, position, name }) => { + const ref = useRef(); + + return ( + + + + + ); +}; + +const isSameType = (prevProps, nextProps) => { + return prevProps.type === nextProps.type; +}; + +export default React.memo(Object, isSameType); \ No newline at end of file diff --git a/rair-front/src/components/ThreeGame/components/PhysicalMovements.tsx b/rair-front/src/components/ThreeGame/components/PhysicalMovements.tsx new file mode 100644 index 000000000..e60af5d1a --- /dev/null +++ b/rair-front/src/components/ThreeGame/components/PhysicalMovements.tsx @@ -0,0 +1,78 @@ +//@ts-nocheck +import useLongPress from "../hooks/useLongPress.tsx"; + +const PhysicalMovements = () => { + const onKeyLongPress = (type, key, keyCode, code) => { + document.dispatchEvent( + new KeyboardEvent(type, { + key: key, + keyCode: keyCode, + code: code, + which: keyCode, + shiftKey: false, + ctrlKey: false, + metaKey: false, + }) + ); + }; + + const longWPressEvent = useLongPress( + () => onKeyLongPress("keydown", "W", 87, "KeyW"), + null, + { + shouldPreventDefault: true, + delay: 0, + onClear: () => onKeyLongPress("keyup", "W", 87, "KeyW"), + } + ); + + const longSPressEvent = useLongPress( + () => onKeyLongPress("keydown", "S", 83, "KeyS"), + null, + { + shouldPreventDefault: true, + delay: 0, + onClear: () => onKeyLongPress("keyup", "S", 83, "KeyS"), + } + ); + + const longDPressEvent = useLongPress( + () => onKeyLongPress("keydown", "D", 68, "KeyD"), + null, + { + shouldPreventDefault: true, + delay: 0, + onClear: () => onKeyLongPress("keyup", "D", 68, "KeyD"), + } + ); + + const longAPressEvent = useLongPress( + () => onKeyLongPress("keydown", "A", 65, "KeyA"), + null, + { + shouldPreventDefault: true, + delay: 0, + onClear: () => onKeyLongPress("keyup", "A", 65, "KeyA"), + } + ); + + return ( +
+ + + + +
+ ); +}; + +export default PhysicalMovements; \ No newline at end of file diff --git a/rair-front/src/components/ThreeGame/components/Plane.tsx b/rair-front/src/components/ThreeGame/components/Plane.tsx new file mode 100644 index 000000000..7762ce192 --- /dev/null +++ b/rair-front/src/components/ThreeGame/components/Plane.tsx @@ -0,0 +1,19 @@ +//@ts-nocheck +import React, { useRef } from "react"; + +const Plane = (props) => { + const ref = useRef(); + return ( + + + + + ); +}; + +export default Plane; \ No newline at end of file diff --git a/rair-front/src/components/ThreeGame/components/Player.tsx b/rair-front/src/components/ThreeGame/components/Player.tsx new file mode 100644 index 000000000..5665c127c --- /dev/null +++ b/rair-front/src/components/ThreeGame/components/Player.tsx @@ -0,0 +1,241 @@ +//@ts-nocheck +import React, { useRef, useCallback, useState, useEffect } from "react"; +import { useFrame, useThree } from "@react-three/fiber"; +import throttle from "lodash-es/throttle"; + +import { + playerUpMovement, + playerDownMovement, + playerRightMovement, + playerLeftMovement, + playerIdleMovement, +} from "../utils/textureManager.ts"; +import { useKeyboardControls } from "../hooks/useKeyboardControls.tsx"; +import { calcDistance, closestObject } from "../utils/calcDistance"; +import Attack from "./Attack"; + +const Player = () => { + const { moveForward, moveBackward, moveLeft, moveRight, action } = + useKeyboardControls(); + + const { camera, scene } = useThree(); + const ref = useRef(); + const [isDragging, setIsDragging] = useState(false); + const [draggedObject, setDraggedObject] = useState(null); + const [nearDraggable, setNearDraggable] = useState(false); + + // Handle key presses to start/stop dragging + useEffect(() => { + const handleKeyDown = (e) => { + // Start dragging with 'E' key when near a draggable object + if ((e.key === 'e' || e.key === 'E') && nearDraggable && !isDragging) { + const draggableObjects = scene.children.filter((e) => { + return calcDistance(e.position, ref.current.position) <= 1.5 && e.name === "Draggable"; + }); + + if (draggableObjects.length > 0) { + setIsDragging(true); + setDraggedObject(draggableObjects[0]); + console.log("Started dragging object"); + } + } + + // Stop dragging with 'E' or 'Escape' key + if ((e.key === 'Escape' || e.key === 'e' || e.key === 'E') && isDragging) { + setIsDragging(false); + setDraggedObject(null); + console.log("Released object"); + } + }; + + window.addEventListener("keydown", handleKeyDown); + return () => window.removeEventListener("keydown", handleKeyDown); + }, [isDragging, nearDraggable, scene]); + + const positionControl = useCallback( + throttle(() => { + const position = ref.current.position; + + // Check if we're near a draggable object + const draggableObjects = scene.children.filter((e) => { + return calcDistance(e.position, position) <= 1.5 && e.name === "Draggable"; + }); + + // Update nearDraggable state + setNearDraggable(draggableObjects.length > 0); + + // If we're dragging an object, move it with the player + if (isDragging && draggedObject) { + draggedObject.position.x = position.x; + draggedObject.position.z = position.z; + } + + // Check for collisions with blocking objects + const collisions = scene.children.filter((e) => { + return calcDistance(e.position, position) <= 2 && e.name === "Blocking"; + }); + + const topCollisions = collisions.filter((e) => { + return ( + (e.position.x === Math.ceil(position.x) || + e.position.x === Math.floor(position.x)) && + e.position.z <= position.z + ); + }); + + const topClosest = + closestObject( + topCollisions.map((e) => e.position.z), + position.z, + -9999 + ) + 1; + + const bottomCollisions = collisions.filter((e) => { + return ( + (e.position.x === Math.ceil(position.x) || + e.position.x === Math.floor(position.x)) && + e.position.z >= position.z + ); + }); + + const bottomClosest = + closestObject( + bottomCollisions.map((e) => e.position.z), + position.z, + 9999 + ) - 1; + + const rightCollisions = collisions.filter((e) => { + return ( + (e.position.z === Math.ceil(position.z) || + e.position.z === Math.floor(position.z)) && + e.position.x >= position.x + ); + }); + + const rightClosest = + closestObject( + rightCollisions.map((e) => e.position.x), + position.x, + 9999 + ) - 1; + + const leftCollisions = collisions.filter((e) => { + return ( + (e.position.z === Math.ceil(position.z) || + e.position.z === Math.floor(position.z)) && + e.position.x <= position.x + ); + }); + + const leftClosest = + closestObject( + leftCollisions.map((e) => e.position.x), + position.x, + -9999 + ) + 1; + + // Prevent movement if there's a collision + if (moveForward && ref.current.position.z <= topClosest) { + return; + } + + if (moveBackward && ref.current.position.z >= bottomClosest) { + return; + } + + if (moveRight && ref.current.position.x >= rightClosest) { + return; + } + + if (moveLeft && ref.current.position.x <= leftClosest) { + return; + } + + // If no collision, allow movement + if (moveForward) { + ref.current.position.z = Number( + (ref.current.position.z - 0.1).toFixed(2) + ); + } + + if (moveBackward) { + ref.current.position.z = Number( + (ref.current.position.z + 0.1).toFixed(2) + ); + } + + if (moveRight) { + ref.current.position.x = Number( + (ref.current.position.x + 0.1).toFixed(2) + ); + } + + if (moveLeft) { + ref.current.position.x = Number( + (ref.current.position.x - 0.1).toFixed(2) + ); + } + + camera?.position.set(ref.current.position.x, 5, ref.current.position.z); + }, 5), + [moveForward, moveBackward, moveRight, moveLeft, isDragging, draggedObject] + ); + + // Check if we should stop dragging + useEffect(() => { + const checkDragging = () => { + if (isDragging && draggedObject) { + const position = ref.current.position; + const distance = calcDistance(draggedObject.position, position); + + if (distance > 2) { + setIsDragging(false); + setDraggedObject(null); + console.log("Stopped dragging object"); + } + } + }; + + const interval = setInterval(checkDragging, 100); + return () => clearInterval(interval); + }, [isDragging, draggedObject]); + + useFrame(positionControl); + + const calculateImage = () => { + if (moveForward) { + return playerUpMovement; + } + + if (moveBackward) { + return playerDownMovement; + } + + if (moveRight) { + return playerRightMovement; + } + + if (moveLeft) { + return playerLeftMovement; + } + + return playerIdleMovement; + }; + + return ( + <> + + + + {action && } + + + ); +}; + +export default Player; \ No newline at end of file diff --git a/rair-front/src/components/ThreeGame/hooks/useKeyboardControls.tsx b/rair-front/src/components/ThreeGame/hooks/useKeyboardControls.tsx new file mode 100644 index 000000000..59db19d87 --- /dev/null +++ b/rair-front/src/components/ThreeGame/hooks/useKeyboardControls.tsx @@ -0,0 +1,68 @@ +//@ts-nocheck +import { useState, useEffect } from "react"; + +function actionByValue(key) { + const value = 10; + const keys = { + moveForward: -value, + moveBackward: value, + moveLeft: -value, + moveRight: value, + action: value, + }; + return keys[key]; +} + +function actionByKey(key) { + const keys = { + KeyW: "moveForward", + KeyS: "moveBackward", + KeyA: "moveLeft", + KeyD: "moveRight", + KeyE: "action", + }; + return keys[key]; +} + +export const useKeyboardControls = () => { + const [movement, setMovement] = useState({ + moveForward: 0, + moveBackward: 0, + moveLeft: 0, + moveRight: 0, + action: 0, + lastMovement: null, + }); + + useEffect(() => { + // Primary movements + const handleKeyDown = (e) => { + if (actionByKey(e.code)) { + setMovement((state) => ({ + ...state, + [actionByKey(e.code)]: actionByValue(actionByKey(e.code)), + lastMovement: actionByKey(e.code), + })); + } + }; + // Used to reset keys + const handleKeyUp = (e) => { + if (actionByKey(e.code)) { + setMovement((state) => ({ + ...state, + [actionByKey(e.code)]: 0, + })); + } + }; + + document.addEventListener("keydown", handleKeyDown); + document.addEventListener("keyup", handleKeyUp); + + return () => { + document.removeEventListener("keydown", handleKeyDown); + document.removeEventListener("keyup", handleKeyUp); + }; + }, []); + + return movement; +}; \ No newline at end of file diff --git a/rair-front/src/components/ThreeGame/hooks/useLongPress.tsx b/rair-front/src/components/ThreeGame/hooks/useLongPress.tsx new file mode 100644 index 000000000..dc28d4696 --- /dev/null +++ b/rair-front/src/components/ThreeGame/hooks/useLongPress.tsx @@ -0,0 +1,63 @@ +//@ts-nocheck +import { useCallback, useRef, useState } from "react"; + +const useLongPress = ( + onLongPress, + onClick, + { shouldPreventDefault = true, delay = 300, onClear } = {} +) => { + const [longPressTriggered, setLongPressTriggered] = useState(false); + const timeout = useRef(); + const target = useRef(); + + const start = useCallback( + (event) => { + if (shouldPreventDefault && event.target) { + event.target.addEventListener("touchend", preventDefault, { + passive: false, + }); + target.current = event.target; + } + timeout.current = setTimeout(() => { + onLongPress(event); + setLongPressTriggered(true); + }, delay); + }, + [onLongPress, delay, shouldPreventDefault] + ); + + const clear = useCallback( + (event, shouldTriggerClick = true) => { + timeout.current && clearTimeout(timeout.current); + shouldTriggerClick && !longPressTriggered && onClick(); + setLongPressTriggered(false); + if (shouldPreventDefault && target.current) { + target.current.removeEventListener("touchend", preventDefault); + } + onClear(); + }, + [shouldPreventDefault, onClick, longPressTriggered] + ); + + return { + onMouseDown: (e) => start(e), + onTouchStart: (e) => start(e), + onMouseUp: (e) => clear(e), + onMouseLeave: (e) => clear(e, false), + onTouchEnd: (e) => clear(e), + }; +}; + +const isTouchEvent = (event) => { + return "touches" in event; +}; + +const preventDefault = (event) => { + if (!isTouchEvent(event)) return; + + if (event.touches.length < 2 && event.preventDefault) { + event.preventDefault(); + } +}; + +export default useLongPress; \ No newline at end of file diff --git a/rair-front/src/components/ThreeGame/images/bomb.gif b/rair-front/src/components/ThreeGame/images/bomb.gif new file mode 100644 index 000000000..c8db597f8 Binary files /dev/null and b/rair-front/src/components/ThreeGame/images/bomb.gif differ diff --git a/rair-front/src/components/ThreeGame/images/chest.png b/rair-front/src/components/ThreeGame/images/chest.png new file mode 100644 index 000000000..6952011f0 Binary files /dev/null and b/rair-front/src/components/ThreeGame/images/chest.png differ diff --git a/rair-front/src/components/ThreeGame/images/coin.gif b/rair-front/src/components/ThreeGame/images/coin.gif new file mode 100644 index 000000000..140e5839b Binary files /dev/null and b/rair-front/src/components/ThreeGame/images/coin.gif differ diff --git a/rair-front/src/components/ThreeGame/images/orb.gif b/rair-front/src/components/ThreeGame/images/orb.gif new file mode 100644 index 000000000..3bbc16650 Binary files /dev/null and b/rair-front/src/components/ThreeGame/images/orb.gif differ diff --git a/rair-front/src/components/ThreeGame/images/playerDown.gif b/rair-front/src/components/ThreeGame/images/playerDown.gif new file mode 100644 index 000000000..1e6356e53 Binary files /dev/null and b/rair-front/src/components/ThreeGame/images/playerDown.gif differ diff --git a/rair-front/src/components/ThreeGame/images/playerIdle.gif b/rair-front/src/components/ThreeGame/images/playerIdle.gif new file mode 100644 index 000000000..d8379162b Binary files /dev/null and b/rair-front/src/components/ThreeGame/images/playerIdle.gif differ diff --git a/rair-front/src/components/ThreeGame/images/playerLeft.gif b/rair-front/src/components/ThreeGame/images/playerLeft.gif new file mode 100644 index 000000000..e091f5803 Binary files /dev/null and b/rair-front/src/components/ThreeGame/images/playerLeft.gif differ diff --git a/rair-front/src/components/ThreeGame/images/playerRight.gif b/rair-front/src/components/ThreeGame/images/playerRight.gif new file mode 100644 index 000000000..c65597eb4 Binary files /dev/null and b/rair-front/src/components/ThreeGame/images/playerRight.gif differ diff --git a/rair-front/src/components/ThreeGame/images/playerUp.gif b/rair-front/src/components/ThreeGame/images/playerUp.gif new file mode 100644 index 000000000..885faac08 Binary files /dev/null and b/rair-front/src/components/ThreeGame/images/playerUp.gif differ diff --git a/rair-front/src/components/ThreeGame/images/wall.jpg b/rair-front/src/components/ThreeGame/images/wall.jpg new file mode 100644 index 000000000..b508d1da9 Binary files /dev/null and b/rair-front/src/components/ThreeGame/images/wall.jpg differ diff --git a/rair-front/src/components/ThreeGame/images/wood.png b/rair-front/src/components/ThreeGame/images/wood.png new file mode 100644 index 000000000..f9b94d7de Binary files /dev/null and b/rair-front/src/components/ThreeGame/images/wood.png differ diff --git a/rair-front/src/components/ThreeGame/index.css b/rair-front/src/components/ThreeGame/index.css new file mode 100644 index 000000000..e197a457a --- /dev/null +++ b/rair-front/src/components/ThreeGame/index.css @@ -0,0 +1,81 @@ +.stats { + bottom: 0 !important; + left: 0 !important; + top: unset !important; +} + +.d-pad { + position: fixed; + right: 10px; + bottom: 10px; + width: 90px; + height: 90px; + z-index: 2; +} + +.d-pad button { + position: absolute; + background: #404040; + border: none; + width: 30px; + height: 30px; +} + +#up { + top: 0; + left: calc(50% - 15px); + border: solid black 2px; + border-bottom: none; + border-radius: 8px 8px 0 0; +} + +#right { + right: 0; + top: calc(50% - 15px); + border: solid black 2px; + border-left: none; + border-radius: 0 8px 8px 0; +} + +#down { + bottom: 0; + left: calc(50% - 15px); + border: solid black 2px; + border-top: none; + border-radius: 0 0 8px 8px; +} + +#left { + left: 0; + top: calc(50% - 15px); + border: solid black 2px; + border-right: none; + border-radius: 8px 0 0 8px; +} + +#center { + left: calc(50% - 15px); + top: calc(50% - 15px); + background: #000; +} + +.coin-counter { + position: absolute; + top: 20px; + left: 20px; + background-color: rgba(0, 0, 0, 0.7); + color: #ffd700; + padding: 10px 15px; + border-radius: 5px; + font-size: 1.2rem; + font-weight: bold; + z-index: 10; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); +} + +/* Canvas styles */ +canvas { + width: 100% !important; + height: 100% !important; + outline: none; +} \ No newline at end of file diff --git a/rair-front/src/components/ThreeGame/levels/SampleLevel.tsx b/rair-front/src/components/ThreeGame/levels/SampleLevel.tsx new file mode 100644 index 000000000..7479f089c --- /dev/null +++ b/rair-front/src/components/ThreeGame/levels/SampleLevel.tsx @@ -0,0 +1,148 @@ +//@ts-nocheck +import { useState, useMemo, useEffect } from "react"; +import { Stats, OrbitControls } from "@react-three/drei"; +import { useThree } from "@react-three/fiber"; + +import Plane from "../components/Plane"; +import Player from "../components/Player"; +import Object from "../components/Object"; +import Coin from "../components/Coin"; +import { mapDataString } from "./../utils/mapDataString"; +import { chest, orb } from "./../utils/textureManager"; +import { calcDistance } from "../utils/calcDistance"; + +const mapData = mapDataString(` +# # # # # # # # # # # # # # # # # +# · · · · · · · · · · · · · · · # +# · · · T · · · · · · · · · · · # +# · · · · · · · · · · · · · · · # +# · · · · · · · · · · · · · · · # +# · · · C · · · C · · · C · · · # +# · · · · · C · · · C · · · · · # +# · · · C · · · C · · · C · · · # # # # # # # # # # # # # # # # +# · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · # +# · · · C · C · · C C · · · · · · · · · · · · · · · · · · · · # # # # # # # # # +# · · · · · · · · · · · · · · · # · · · · · · · · · · · · · · · · · · · · · · # +# · · · · · · · · · · · · · · · # · · · · · · · · · · · · · · · · · · C C C · # +# # # # # # # · · · # # # # # # # · · · · · · · · · · · · · · · · · · · · · · # +# · · · · · · · · · · · · · · · # · · · · · · · · · · · · · · # # # # # # # # # +# · · · · · · · · · · · · · · · # · · · · · · · · · · · · · · # +# · · · · · · · · · · · · · · · # · · · · · · · · · · · · · · # +# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # +`); + +const resolveMapTile = (type, x, y, mapData, setCurrentMap, onCoinCollect) => { + const key = `${x}-${y}`; + + switch (type) { + case "#": + return ( + + ); + case "T": + return ( + + ); + case "C": + return ( + + ); + default: + return null; + } +}; + +const SampleLevel = ({ onLevelComplete, onCoinCollect }) => { + const [colour, setColour] = useState("#7E370C"); + const [currentMap, setCurrentMap] = useState(mapData); + const { scene } = useThree(); + + // Check for portal collision + useEffect(() => { + const checkPortalCollision = () => { + const player = scene.children.find(child => child.name === "Player"); + const portal = scene.children.find(child => child.name === "Portal"); + + if (player && portal) { + const distance = calcDistance(player.position, portal.position); + if (distance < 2) { + console.log("Portal reached!"); + onLevelComplete(); + } + } + }; + + const interval = setInterval(checkPortalCollision, 100); + return () => clearInterval(interval); + }, [scene, onLevelComplete]); + + const memoizedMapData = useMemo(() => { + return currentMap.map((row, y) => + row.map((type, x) => resolveMapTile(type, x, y, mapData, setCurrentMap, onCoinCollect)) + ); + }, [currentMap, onCoinCollect]); + + console.log("World rendering..."); + + return ( + <> + + + + {memoizedMapData} + + + + + + + {/**/} + + + ); +}; + +export default SampleLevel; \ No newline at end of file diff --git a/rair-front/src/components/ThreeGame/levels/SecondLevel.tsx b/rair-front/src/components/ThreeGame/levels/SecondLevel.tsx new file mode 100644 index 000000000..c5da92716 --- /dev/null +++ b/rair-front/src/components/ThreeGame/levels/SecondLevel.tsx @@ -0,0 +1,125 @@ +//@ts-nocheck +import { useState, useMemo } from "react"; +import { Stats } from "@react-three/drei"; + +import Plane from "../components/Plane"; +import Player from "../components/Player"; +import Object from "../components/Object"; +import Coin from "../components/Coin"; +import { mapDataString } from "../utils/mapDataString"; +import { chest, orb } from "../utils/textureManager"; + +const mapData = mapDataString(` +# # # # # # # # # # # # # # # # # +# · · · · · · · · · · · · · · · # +# · C · · · · · · · · · · C · · # +# · · # # # · · · · · # # # · · # +# · · # · · · · T · · · · # · · # +# · · # · · · · · · · · · # · · # +# · · · · · · · · · · · · · · · # +# · · · · · C · · · C · · · · · # +# · · # · · · · · · · · · # · · # +# · · # · · · · · · · · · # · · # +# · C # · · · · · · · · · # C · # +# · · # # # · · · · · # # # · · # +# · · · · · · · · · · · · · · · # +# # # # # # # # # # # # # # # # # +`); + +const resolveMapTile = (type, x, y, mapData, setCurrentMap, onCoinCollect) => { + const key = `${x}-${y}`; + + switch (type) { + case "#": + return ( + + ); + case "T": + return ( + + ); + case "C": + return ( + + ); + default: + return null; + } +}; + +const SecondLevel = ({ onCoinCollect }) => { + const [colour, setColour] = useState("#2E8B57"); + const [currentMap, setCurrentMap] = useState(mapData); + + const memoizedMapData = useMemo(() => { + return currentMap.map((row, y) => + row.map((type, x) => resolveMapTile(type, x, y, mapData, setCurrentMap, onCoinCollect)) + ); + }, [currentMap, onCoinCollect]); + + return ( + <> + + + + {memoizedMapData} + + {/* Decorative lights */} + + + + + + + {/* Portal light to next level */} + + + + + + ); +}; + +export default SecondLevel; \ No newline at end of file diff --git a/rair-front/src/components/ThreeGame/sounds/coin.wav b/rair-front/src/components/ThreeGame/sounds/coin.wav new file mode 100644 index 000000000..63eb368b5 Binary files /dev/null and b/rair-front/src/components/ThreeGame/sounds/coin.wav differ diff --git a/rair-front/src/components/ThreeGame/utils/calcDistance.ts b/rair-front/src/components/ThreeGame/utils/calcDistance.ts new file mode 100644 index 000000000..cd8e60648 --- /dev/null +++ b/rair-front/src/components/ThreeGame/utils/calcDistance.ts @@ -0,0 +1,19 @@ +//@ts-nocheck +const calcDistance = (p1, p2) => { + const a = p2.x - p1.x; + const b = p2.y - p1.y; + const c = p2.z - p1.z; + + return Math.sqrt(a * a + b * b + c * c); + }; + + const closestObject = (arr, val, fallback) => { + if (!arr.length) { + return fallback; + } + return arr.reduce((a, b) => { + return Math.abs(b - val) < Math.abs(a - val) ? b : a; + }); + }; + + export { calcDistance, closestObject }; \ No newline at end of file diff --git a/rair-front/src/components/ThreeGame/utils/mapDataString.ts b/rair-front/src/components/ThreeGame/utils/mapDataString.ts new file mode 100644 index 000000000..8b164b4bf --- /dev/null +++ b/rair-front/src/components/ThreeGame/utils/mapDataString.ts @@ -0,0 +1,20 @@ +//@ts-nocheck +export const mapDataString = (str) => { + const lineBreak = "\n"; + const data: string[][] = []; + let line = -1; + let string = str; + // strip any break at the end + if (string[string.length - 1] === lineBreak) { + string = string.slice(0, -1); + } + for (const char of string) { + if (char === " ") continue; + if (char === lineBreak) { + data[++line] = []; + } else { + data[line].push(char); + } + } + return data; + }; \ No newline at end of file diff --git a/rair-front/src/components/ThreeGame/utils/textureManager.ts b/rair-front/src/components/ThreeGame/utils/textureManager.ts new file mode 100644 index 000000000..aca34eaab --- /dev/null +++ b/rair-front/src/components/ThreeGame/utils/textureManager.ts @@ -0,0 +1,66 @@ +//@ts-nocheck +import { + TextureLoader, + NearestFilter, + LinearMipMapLinearFilter, + SRGBColorSpace, + EquirectangularReflectionMapping, + } from "three"; + import GifLoader from "three-gif-loader"; + + import wallImg from "../images/wall.jpg"; + import playerUp from "../images/playerUp.gif"; + import playerDown from "../images/playerDown.gif"; + import playerRight from "../images/playerRight.gif"; + import playerLeft from "../images/playerLeft.gif"; + import playerIdle from "../images/playerIdle.gif"; + import coinImg from "../images/coin.gif"; + import chestImg from "../images/chest.png"; + import orbImg from "../images/orb.gif"; + import bombImg from "../images/bomb.gif"; + + // instantiate GifLoader + const gifLoader = new GifLoader(); + const pngLoader = new TextureLoader(); + + function imgLoader(path, type) { + let image; + + if (type === "gif") { + image = gifLoader.load(path); + } else { + image = pngLoader.load(path); + } + + // options + image.mapping = EquirectangularReflectionMapping; + image.colorSpace = SRGBColorSpace; + image.magFilter = NearestFilter; + image.minFilter = LinearMipMapLinearFilter; + + return image; + } + + const wood = imgLoader(wallImg, "png"); + const playerUpMovement = imgLoader(playerUp, "gif"); + const playerDownMovement = imgLoader(playerDown, "gif"); + const playerRightMovement = imgLoader(playerRight, "gif"); + const playerLeftMovement = imgLoader(playerLeft, "gif"); + const playerIdleMovement = imgLoader(playerIdle, "gif"); + const coin = imgLoader(coinImg, "gif"); + const chest = imgLoader(chestImg, "png"); + const orb = imgLoader(orbImg, "gif"); + const bomb = imgLoader(bombImg, "gif"); + + export { + playerUpMovement, + playerDownMovement, + playerRightMovement, + playerLeftMovement, + playerIdleMovement, + wood, + coin, + chest, + orb, + bomb, + }; \ No newline at end of file diff --git a/rair-front/src/components/UserProfileSettings/PopUpSetting.tsx b/rair-front/src/components/UserProfileSettings/PopUpSetting.tsx index d139348bf..fb72235a0 100644 --- a/rair-front/src/components/UserProfileSettings/PopUpSetting.tsx +++ b/rair-front/src/components/UserProfileSettings/PopUpSetting.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import { useCallback, useEffect, useRef, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { Popup } from 'reactjs-popup'; diff --git a/rair-front/src/components/UserProfileSettings/coin.wav b/rair-front/src/components/UserProfileSettings/coin.wav new file mode 100644 index 000000000..63eb368b5 Binary files /dev/null and b/rair-front/src/components/UserProfileSettings/coin.wav differ diff --git a/rair-front/src/components/YotiPage/YotiPage.tsx b/rair-front/src/components/YotiPage/YotiPage.tsx index 06319ce8b..5b1829554 100644 --- a/rair-front/src/components/YotiPage/YotiPage.tsx +++ b/rair-front/src/components/YotiPage/YotiPage.tsx @@ -1,5 +1,5 @@ import { FC, useState } from 'react'; -import FaceCapture from '@getyoti/react-face-capture'; +// import FaceCapture from '@getyoti/react-face-capture'; import useSwal from '../../hooks/useSwal'; import { YotiLogo } from '../../images'; @@ -54,15 +54,16 @@ const YotiPage: FC = ({ setOpenVideoPlayer }) => { return (
{yotiVerify ? ( - +
123
+ // ) : (
diff --git a/rair-front/src/components/adminViews/BatchERC20Transfer.tsx b/rair-front/src/components/adminViews/BatchERC20Transfer.tsx index 8d9d2dbce..52e842422 100644 --- a/rair-front/src/components/adminViews/BatchERC20Transfer.tsx +++ b/rair-front/src/components/adminViews/BatchERC20Transfer.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import { useCallback, useState } from 'react'; import Dropzone from 'react-dropzone'; import { faPlus, faTrash } from '@fortawesome/free-solid-svg-icons'; diff --git a/rair-front/src/components/adminViews/BlockchainSwitcher.tsx b/rair-front/src/components/adminViews/BlockchainSwitcher.tsx index 9e2f154dd..bb8ae901d 100644 --- a/rair-front/src/components/adminViews/BlockchainSwitcher.tsx +++ b/rair-front/src/components/adminViews/BlockchainSwitcher.tsx @@ -1,13 +1,14 @@ +// @ts-nocheck import { useState } from 'react'; import { JsonRpcProvider, Wallet } from 'ethers'; import { useAppDispatch, useAppSelector } from '../../hooks/useReduxHooks'; import useSwal from '../../hooks/useSwal'; import useWeb3Tx from '../../hooks/useWeb3Tx'; -import { - setConnectedChain, - setProgrammaticProvider -} from '../../redux/web3Slice'; +// import { +// setConnectedChain, +// setProgrammaticProvider +// } from '../../redux/web3Slice'; import InputField from '../common/InputField'; const BlockChainSwitcher = () => { @@ -36,8 +37,8 @@ const BlockChainSwitcher = () => { }; const provider = new JsonRpcProvider(rpcEndpoint, networkData); const currentWallet = new Wallet(UNSAFE_PrivateKey, provider); - dispatch(setProgrammaticProvider(currentWallet)); - dispatch(setConnectedChain(chainId)); + // dispatch(setProgrammaticProvider(currentWallet)); + // dispatch(setConnectedChain(chainId)); } catch (err) { const error = err as Error; console.error(error); diff --git a/rair-front/src/components/adminViews/ImportAndTransfer.tsx b/rair-front/src/components/adminViews/ImportAndTransfer.tsx index 748ae9be0..fe8d8b0c6 100644 --- a/rair-front/src/components/adminViews/ImportAndTransfer.tsx +++ b/rair-front/src/components/adminViews/ImportAndTransfer.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import BatchERC20Transfer from './BatchERC20Transfer'; import BlockChainSwitcher from './BlockchainSwitcher'; import ImportExternalContract from './ImportExternalContracts'; diff --git a/rair-front/src/components/adminViews/ImportExternalContracts.tsx b/rair-front/src/components/adminViews/ImportExternalContracts.tsx index d9ee24dee..a78e1f746 100644 --- a/rair-front/src/components/adminViews/ImportExternalContracts.tsx +++ b/rair-front/src/components/adminViews/ImportExternalContracts.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import { useEffect, useState } from 'react'; import { isAddress } from 'ethers'; import { Hex } from 'viem'; diff --git a/rair-front/src/components/adminViews/LicenseExchange.tsx b/rair-front/src/components/adminViews/LicenseExchange.tsx index b4ea5b83c..0255349de 100644 --- a/rair-front/src/components/adminViews/LicenseExchange.tsx +++ b/rair-front/src/components/adminViews/LicenseExchange.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import { useCallback, useState } from 'react'; import { formatEther, parseUnits } from 'ethers'; diff --git a/rair-front/src/components/adminViews/UserManager.tsx b/rair-front/src/components/adminViews/UserManager.tsx index ad26e074a..0e19bd761 100644 --- a/rair-front/src/components/adminViews/UserManager.tsx +++ b/rair-front/src/components/adminViews/UserManager.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import { useCallback, useEffect, useState } from 'react'; import axios from 'axios'; diff --git a/rair-front/src/components/adminViews/transferTokens.tsx b/rair-front/src/components/adminViews/transferTokens.tsx index 33cdbfa6c..30cb57104 100644 --- a/rair-front/src/components/adminViews/transferTokens.tsx +++ b/rair-front/src/components/adminViews/transferTokens.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import { useCallback, useEffect, useState } from 'react'; import { Contract, isAddress, ZeroAddress } from 'ethers'; import { Hex } from 'viem'; diff --git a/rair-front/src/components/common/PurchaseToken.tsx b/rair-front/src/components/common/PurchaseToken.tsx index de2a27773..2ca177ce2 100644 --- a/rair-front/src/components/common/PurchaseToken.tsx +++ b/rair-front/src/components/common/PurchaseToken.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import React, { useCallback, useEffect, useState } from 'react'; import { Provider, useStore } from 'react-redux'; import { faCheck } from '@fortawesome/free-solid-svg-icons'; diff --git a/rair-front/src/components/creatorAndConsumerModes.types.ts b/rair-front/src/components/creatorAndConsumerModes.types.ts index 186399276..5423e5537 100644 --- a/rair-front/src/components/creatorAndConsumerModes.types.ts +++ b/rair-front/src/components/creatorAndConsumerModes.types.ts @@ -1,3 +1,4 @@ +//@ts-nocheck import { ethers } from 'ethers'; export type TSingleOfferDataObject = { diff --git a/rair-front/src/components/creatorStudio/Deploy.tsx b/rair-front/src/components/creatorStudio/Deploy.tsx index 61538e4f9..31df2ff9f 100644 --- a/rair-front/src/components/creatorStudio/Deploy.tsx +++ b/rair-front/src/components/creatorStudio/Deploy.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import { useCallback, useEffect, useState } from 'react'; import { faGem, faLandmark } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; diff --git a/rair-front/src/components/creatorStudio/creatorSteps/singleMetadataEditor.tsx b/rair-front/src/components/creatorStudio/creatorSteps/singleMetadataEditor.tsx index 172fe3bc9..66008dbf5 100644 --- a/rair-front/src/components/creatorStudio/creatorSteps/singleMetadataEditor.tsx +++ b/rair-front/src/components/creatorStudio/creatorSteps/singleMetadataEditor.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import { useCallback, useEffect, useState } from 'react'; import Dropzone from 'react-dropzone'; import { useParams } from 'react-router-dom'; diff --git a/rair-front/src/components/creatorStudio/diamondCreatorSteps/DiamondMinterMarketplace.tsx b/rair-front/src/components/creatorStudio/diamondCreatorSteps/DiamondMinterMarketplace.tsx index 79bb0a0dd..ca1db8cc2 100644 --- a/rair-front/src/components/creatorStudio/diamondCreatorSteps/DiamondMinterMarketplace.tsx +++ b/rair-front/src/components/creatorStudio/diamondCreatorSteps/DiamondMinterMarketplace.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import React, { useCallback, useEffect, useState } from 'react'; import MarketplaceOfferConfig from './MarketplaceOfferConfig'; diff --git a/rair-front/src/components/creatorStudio/workflowSteps.tsx b/rair-front/src/components/creatorStudio/workflowSteps.tsx index 56d83428f..87ca27c67 100644 --- a/rair-front/src/components/creatorStudio/workflowSteps.tsx +++ b/rair-front/src/components/creatorStudio/workflowSteps.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import { FC, useCallback, useEffect, useState } from 'react'; import { NavLink, diff --git a/rair-front/src/components/nft/PersonalProfile/PersonalProfileMyNftTab/ResaleModal/ResaleModal.tsx b/rair-front/src/components/nft/PersonalProfile/PersonalProfileMyNftTab/ResaleModal/ResaleModal.tsx index 1c4a8c393..1c689403a 100644 --- a/rair-front/src/components/nft/PersonalProfile/PersonalProfileMyNftTab/ResaleModal/ResaleModal.tsx +++ b/rair-front/src/components/nft/PersonalProfile/PersonalProfileMyNftTab/ResaleModal/ResaleModal.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import React, { useCallback, useEffect, useState } from 'react'; import { faTrash } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; diff --git a/rair-front/src/components/video/videoItem.tsx b/rair-front/src/components/video/videoItem.tsx index eb010694d..741c089dd 100644 --- a/rair-front/src/components/video/videoItem.tsx +++ b/rair-front/src/components/video/videoItem.tsx @@ -1,3 +1,4 @@ +//@ts-nocheck import { useCallback, useEffect, useState } from 'react'; import Modal from 'react-modal'; import { Provider, useStore } from 'react-redux'; diff --git a/rair-front/src/hooks/useComponentVisible.tsx b/rair-front/src/hooks/useComponentVisible.tsx index da0f516ed..056f8b438 100644 --- a/rair-front/src/hooks/useComponentVisible.tsx +++ b/rair-front/src/hooks/useComponentVisible.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import { useEffect, useRef, useState } from 'react'; function useComponentVisible(initialIsVisible: any) { diff --git a/rair-front/src/hooks/useConnectUser.tsx b/rair-front/src/hooks/useConnectUser.tsx index da4a23dd6..a6d3f6c10 100644 --- a/rair-front/src/hooks/useConnectUser.tsx +++ b/rair-front/src/hooks/useConnectUser.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import { useCallback, useEffect, useState } from 'react'; import { useNavigate } from 'react-router'; import { useLocation } from 'react-router-dom'; @@ -14,22 +15,16 @@ import { OnboardingButton } from '../components/common/OnboardingButton/Onboardi import { dataStatuses } from '../redux/commonTypes'; import { loadCurrentUser } from '../redux/userSlice'; import { - connectChainAlchemyV4, + // connectChainAlchemyV4, connectChainMetamask, - connectChainWeb3Auth, setConnectedChain, setExchangeRates, setProgrammaticProvider } from '../redux/web3Slice'; -import { CombinedBlockchainData } from '../types/commonTypes'; -import { User } from '../types/databaseTypes'; +// import { CombinedBlockchainData } from '../types/commonTypes'; +// import { User } from '../types/databaseTypes'; import chainData from '../utils/blockchainData'; -import { - rFetch, - signWeb3MessageAlchemyV4, - signWeb3MessageMetamask, - signWeb3MessageWeb3Auth -} from '../utils/rFetch'; +import { rFetch, signWeb3MessageMetamask } from '../utils/rFetch'; import sockets from '../utils/sockets'; const getCoingeckoRates = async () => { @@ -94,58 +89,58 @@ const useConnectUser = () => { }; }, [currentUserAddress]); - const loginWithAlchemySigner = useCallback(async () => { - const defaultChain: Hex = import.meta.env.VITE_DEFAULT_BLOCKCHAIN; - const chainInformation = getBlockchainData(defaultChain); - if ( - !chainInformation?.hash || - !chainInformation?.alchemy || - !chainInformation?.viem || - !chainInformation?.alchemyAppKey - ) { - return {}; - } - - const { connectedChain, currentUserAddress, userDetails } = await dispatch( - connectChainAlchemyV4(chainInformation as CombinedBlockchainData) - ).unwrap(); - - return { - userAddress: currentUserAddress, - blockchain: connectedChain, - userDetails - }; - }, [dispatch, getBlockchainData]); - - const loginWithWeb3Auth = useCallback(async () => { - const defaultChain: Hex = import.meta.env.VITE_DEFAULT_BLOCKCHAIN; - const chainInformation = getBlockchainData(defaultChain); - if ( - !chainInformation?.hash || - !chainInformation?.alchemy || - !chainInformation?.viem || - !chainInformation?.alchemyAppKey - ) { - return {}; - } - - reactSwal.fire({ - title: 'Connecting', - html: 'Please wait', - icon: 'info', - showConfirmButton: false - }); - - const { connectedChain, currentUserAddress, userDetails } = await dispatch( - connectChainWeb3Auth(chainInformation as CombinedBlockchainData) - ).unwrap(); - - return { - userAddress: currentUserAddress, - blockchain: connectedChain, - userDetails - }; - }, [getBlockchainData, reactSwal, dispatch]); + // const loginWithAlchemySigner = useCallback(async () => { + // const defaultChain: Hex = import.meta.env.VITE_DEFAULT_BLOCKCHAIN; + // const chainInformation = getBlockchainData(defaultChain); + // if ( + // !chainInformation?.hash || + // !chainInformation?.alchemy || + // !chainInformation?.viem || + // !chainInformation?.alchemyAppKey + // ) { + // return {}; + // } + + // const { connectedChain, currentUserAddress, userDetails } = await dispatch( + // connectChainAlchemyV4(chainInformation as CombinedBlockchainData) + // ).unwrap(); + + // return { + // userAddress: currentUserAddress, + // blockchain: connectedChain, + // userDetails + // }; + // }, [dispatch, getBlockchainData]); + + // const loginWithWeb3Auth = useCallback(async () => { + // const defaultChain: Hex = import.meta.env.VITE_DEFAULT_BLOCKCHAIN; + // const chainInformation = getBlockchainData(defaultChain); + // if ( + // !chainInformation?.hash || + // !chainInformation?.alchemy || + // !chainInformation?.viem || + // !chainInformation?.alchemyAppKey + // ) { + // return {}; + // } + + // reactSwal.fire({ + // title: 'Connecting', + // html: 'Please wait', + // icon: 'info', + // showConfirmButton: false + // }); + + // const { connectedChain, currentUserAddress, userDetails } = await dispatch( + // connectChainWeb3Auth(chainInformation as CombinedBlockchainData) + // ).unwrap(); + + // return { + // userAddress: currentUserAddress, + // blockchain: connectedChain, + // userDetails + // }; + // }, [getBlockchainData, reactSwal, dispatch]); const loginWithMetamask = useCallback(async () => { const { connectedChain, currentUserAddress } = await dispatch( @@ -203,20 +198,20 @@ const useConnectUser = () => { Web3 )} -
- -
+ */} + {/*
+ */}
-
Each social login creates a unique wallet address
+ {/*
Each social login creates a unique wallet address
*/}
If you login with a different account, you won’t see purchases in your other wallets @@ -256,12 +251,6 @@ const useConnectUser = () => { reactSwal.close(); try { switch (loginMethod) { - case 'alchemyV4': - loginData = await loginWithAlchemySigner(); - break; - case 'web3auth': - loginData = await loginWithWeb3Auth(); - break; case 'metamask': loginData = await loginWithMetamask(); break; @@ -328,18 +317,6 @@ const useConnectUser = () => { loginData.userAddress ); break; - case 'alchemyV4': - loginResponse = await signWeb3MessageAlchemyV4( - loginData.userAddress, - loginData.userDetails - ); - break; - case 'web3auth': - loginResponse = await signWeb3MessageWeb3Auth( - loginData.userAddress - ); - reactSwal.close(); - break; } const updateData = {}; @@ -394,8 +371,6 @@ const useConnectUser = () => { [ selectMethod, reactSwal, - loginWithAlchemySigner, - loginWithWeb3Auth, loginWithMetamask, loginWithProgrammaticProvider, adminRights, diff --git a/rair-front/src/hooks/useContracts.tsx b/rair-front/src/hooks/useContracts.tsx index c01865fa1..d40a0f086 100644 --- a/rair-front/src/hooks/useContracts.tsx +++ b/rair-front/src/hooks/useContracts.tsx @@ -1,11 +1,11 @@ -//@ts-nocheck +// @ts-nocheck /* eslint-disable no-case-declarations */ import { useCallback, useEffect, useState } from 'react'; -import { createModularAccountAlchemyClient } from '@alchemy/aa-alchemy'; -import { SmartContractAccount } from '@alchemy/aa-core'; -import { AccountSigner, EthersProviderAdapter } from '@alchemy/aa-ethers'; -import { Web3AuthSigner } from '@alchemy/aa-signers/web3auth'; -import { Alchemy } from 'alchemy-sdk'; +// import { createModularAccountAlchemyClient } from '@alchemy/aa-alchemy'; +// import { SmartContractAccount } from '@alchemy/aa-core'; +// import { AccountSigner, EthersProviderAdapter } from '@alchemy/aa-ethers'; +// import { Web3AuthSigner } from '@alchemy/aa-signers/web3auth'; +// import { Alchemy } from 'alchemy-sdk'; import { BrowserProvider, Contract, isAddress, JsonRpcSigner } from 'ethers'; import { Hex } from 'viem'; @@ -29,7 +29,7 @@ const useContracts = () => { ); const [signer, setSigner] = useState< - JsonRpcSigner | AccountSigner + JsonRpcSigner >(); const [diamondFactoryInstance, setDiamondFactoryInstance] = useState< Contract | undefined @@ -47,98 +47,92 @@ const useContracts = () => { Contract | undefined >(); - const createAlchemyV4Signer = useCallback(async () => { - const chainData = getBlockchainData(connectedChain); - - if (!chainData) { - return; - } - if (!programmaticProvider) { - return {}; - } - - return await programmaticProvider.account.getSigner(); - }, [connectedChain, getBlockchainData, programmaticProvider]); - - const createWeb3AuthSigner = useCallback(async () => { - const chainData = getBlockchainData(connectedChain); - - if (!chainData) { - return; - } - - const web3AuthSigner = new Web3AuthSigner({ - clientId: import.meta.env.VITE_WEB3AUTH_CLIENT_ID, - chainConfig: { - chainNamespace: 'eip155', - chainId: chainData.chainId, - rpcTarget: chainData.rpcEndpoint, - displayName: chainData.name, - blockExplorer: chainData.blockExplorerGateway, - ticker: chainData.symbol, - tickerName: chainData.name - }, - web3AuthNetwork: chainData.testnet - ? 'sapphire_devnet' - : 'sapphire_mainnet' - }); - - await web3AuthSigner.authenticate({ - init: async () => { - await web3AuthSigner.inner.initModal(); - }, - connect: async () => { - await web3AuthSigner.inner.connect(); - } - }); - - const modularAccount = await createModularAccountAlchemyClient({ - apiKey: chainData.alchemyAppKey, - chain: chainData.viem!, - signer: web3AuthSigner, - gasManagerConfig: chainData.alchemyGasPolicy - ? { - policyId: chainData.alchemyGasPolicy - } - : undefined - }); - - const alchemy = new Alchemy({ - apiKey: chainData.alchemyAppKey, - network: chainData?.alchemy, - maxRetries: 10 - }); - - const ethersProvider = await alchemy.config.getProvider(); - const provider = - EthersProviderAdapter.fromEthersProvider(ethersProvider).connectToAccount( - modularAccount - ); - - return provider; - }, [connectedChain, getBlockchainData]); + // const createAlchemyV4Signer = useCallback(async () => { + // const chainData = getBlockchainData(connectedChain); + + // if (!chainData) { + // return; + // } + // if (!programmaticProvider) { + // return {}; + // } + + // return await programmaticProvider.account.getSigner(); + // }, [connectedChain, getBlockchainData, programmaticProvider]); + + // const createWeb3AuthSigner = useCallback(async () => { + // const chainData = getBlockchainData(connectedChain); + + // if (!chainData) { + // return; + // } + + // const web3AuthSigner = new Web3AuthSigner({ + // clientId: import.meta.env.VITE_WEB3AUTH_CLIENT_ID, + // chainConfig: { + // chainNamespace: 'eip155', + // chainId: chainData.chainId, + // rpcTarget: chainData.rpcEndpoint, + // displayName: chainData.name, + // blockExplorer: chainData.blockExplorerGateway, + // ticker: chainData.symbol, + // tickerName: chainData.name + // }, + // web3AuthNetwork: chainData.testnet + // ? 'sapphire_devnet' + // : 'sapphire_mainnet' + // }); + + // await web3AuthSigner.authenticate({ + // init: async () => { + // await web3AuthSigner.inner.initModal(); + // }, + // connect: async () => { + // await web3AuthSigner.inner.connect(); + // } + // }); + + // const modularAccount = await createModularAccountAlchemyClient({ + // apiKey: chainData.alchemyAppKey, + // chain: chainData.viem!, + // signer: web3AuthSigner, + // gasManagerConfig: chainData.alchemyGasPolicy + // ? { + // policyId: chainData.alchemyGasPolicy + // } + // : undefined + // }); + + // const alchemy = new Alchemy({ + // apiKey: chainData.alchemyAppKey, + // network: chainData?.alchemy, + // maxRetries: 10 + // }); + + // const ethersProvider = await alchemy.config.getProvider(); + // const provider = + // EthersProviderAdapter.fromEthersProvider(ethersProvider).connectToAccount( + // modularAccount + // ); + + // return provider; + // }, [connectedChain, getBlockchainData]); const refreshSigner = useCallback(async () => { if (!isLoggedIn) { return; } switch (loginType) { - case 'alchemyV4': - setSigner(await createAlchemyV4Signer()); - break; case 'metamask': if (!window.ethereum.isConnected()) { return; } const metamaskProvider = new BrowserProvider(window.ethereum); - const signer = await metamaskProvider.getSigner(0); - setSigner(signer); - break; - case 'web3auth': - setSigner(await createWeb3AuthSigner()); + // const signer = await metamaskProvider.getSigner(0); + // setSigner(signer); break; } - }, [isLoggedIn, loginType, createAlchemyV4Signer, createWeb3AuthSigner]); + }, [isLoggedIn, loginType]); useEffect(() => { refreshSigner(); diff --git a/rair-front/src/hooks/useIPFSImageLink.tsx b/rair-front/src/hooks/useIPFSImageLink.tsx index ff6f31ec5..ffadc2d49 100644 --- a/rair-front/src/hooks/useIPFSImageLink.tsx +++ b/rair-front/src/hooks/useIPFSImageLink.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import { useEffect, useState } from 'react'; function useIPFSImageLink(initialImageLink: string | undefined) { diff --git a/rair-front/src/hooks/useOpenVideoPlayer.tsx b/rair-front/src/hooks/useOpenVideoPlayer.tsx index d997a274c..96bda48f4 100644 --- a/rair-front/src/hooks/useOpenVideoPlayer.tsx +++ b/rair-front/src/hooks/useOpenVideoPlayer.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import { useState } from 'react'; export type TUseOpenVideoPlayer = [ diff --git a/rair-front/src/hooks/useReduxHooks.tsx b/rair-front/src/hooks/useReduxHooks.tsx index 5b77c5450..1a36b3650 100644 --- a/rair-front/src/hooks/useReduxHooks.tsx +++ b/rair-front/src/hooks/useReduxHooks.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import { useDispatch, useSelector } from 'react-redux'; import type { AppDispatch, RootState } from '../redux/store'; diff --git a/rair-front/src/hooks/useServerSettings.tsx b/rair-front/src/hooks/useServerSettings.tsx index 9d75c39cf..9071ebd1d 100644 --- a/rair-front/src/hooks/useServerSettings.tsx +++ b/rair-front/src/hooks/useServerSettings.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import { useCallback, useEffect } from 'react'; import { Hex } from 'viem'; diff --git a/rair-front/src/hooks/useWeb3Tx.ts b/rair-front/src/hooks/useWeb3Tx.ts index d005d3b94..ff6e9ee70 100644 --- a/rair-front/src/hooks/useWeb3Tx.ts +++ b/rair-front/src/hooks/useWeb3Tx.ts @@ -1,9 +1,10 @@ +// @ts-nocheck /* eslint-disable no-case-declarations */ import { useCallback } from 'react'; -import { - SendUserOperationResult, - UserOperationOverrides -} from '@alchemy/aa-core'; +// import { +// SendUserOperationResult, +// UserOperationOverrides +// } from '@alchemy/aa-core'; import { Contract, ContractTransactionResponse } from 'ethers'; import { encodeFunctionData, Hex } from 'viem'; @@ -11,7 +12,7 @@ import { useAppDispatch, useAppSelector } from './useReduxHooks'; import useServerSettings from './useServerSettings'; import useSwal from './useSwal'; -import { connectChainWeb3Auth, setConnectedChain } from '../redux/web3Slice'; +import { setConnectedChain } from '../redux/web3Slice'; import { CombinedBlockchainData } from '../types/commonTypes'; import { rFetch } from '../utils/rFetch'; @@ -162,123 +163,123 @@ const useWeb3Tx = () => { [handleReceipt, handleWeb3Error] ); - const verifyAAUserOperation = useCallback( - async ( - contractProvider: any, - userOperation: SendUserOperationResult, - options: web3Options - ) => { - if (!contractProvider) { - console.error('Provider not found'); - return; - } - try { - const txHash = await contractProvider.waitForUserOperationTransaction({ - hash: userOperation.hash - }); - handleReceipt(txHash, options?.callback); - return true; - } catch (err: any) { - const stringified = err.toString(); - if ( - stringified - .toLowerCase() - .includes('failed to find transaction for user operation') - ) { - reactSwal.fire({ - title: 'Please wait', - html: 'Verifying user operation', - icon: 'info', - showConfirmButton: false - }); - return await verifyAAUserOperation( - contractProvider, - userOperation, - options - ); - } - console.error(err); - reactSwal.fire('Error', err.toString(), 'error'); - } - }, - [handleReceipt, reactSwal] - ); + // const verifyAAUserOperation = useCallback( + // async ( + // contractProvider: any, + // userOperation: SendUserOperationResult, + // options: web3Options + // ) => { + // if (!contractProvider) { + // console.error('Provider not found'); + // return; + // } + // try { + // const txHash = await contractProvider.waitForUserOperationTransaction({ + // hash: userOperation.hash + // }); + // handleReceipt(txHash, options?.callback); + // return true; + // } catch (err: any) { + // const stringified = err.toString(); + // if ( + // stringified + // .toLowerCase() + // .includes('failed to find transaction for user operation') + // ) { + // reactSwal.fire({ + // title: 'Please wait', + // html: 'Verifying user operation', + // icon: 'info', + // showConfirmButton: false + // }); + // return await verifyAAUserOperation( + // contractProvider, + // userOperation, + // options + // ); + // } + // console.error(err); + // reactSwal.fire('Error', err.toString(), 'error'); + // } + // }, + // [handleReceipt, reactSwal] + // ); - const web3AuthCall = useCallback( - async ( - contract: Contract, - method: string, - args: any[], - options: web3Options - ) => { - if (!currentUserAddress || !contract) { - return; - } - const methodFound = contract.getFunction(method); - let fragment = methodFound.fragment; - if (!fragment) { - fragment = methodFound.getFragment(); - } - if (fragment.stateMutability === 'view') { - // If the method is a view function, query the info directly through Ethers - return await contract[method](...args); - } - let transactionValue: bigint = BigInt(0); - if (args?.at(-1)?.value !== undefined) { - transactionValue = BigInt(args.pop().value); - } - const uoCallData = encodeFunctionData({ - abi: [fragment], - functionName: method, - args: args - }); + // const web3AuthCall = useCallback( + // async ( + // contract: Contract, + // method: string, + // args: any[], + // options: web3Options + // ) => { + // if (!currentUserAddress || !contract) { + // return; + // } + // const methodFound = contract.getFunction(method); + // let fragment = methodFound.fragment; + // if (!fragment) { + // fragment = methodFound.getFragment(); + // } + // if (fragment.stateMutability === 'view') { + // // If the method is a view function, query the info directly through Ethers + // return await contract[method](...args); + // } + // let transactionValue: bigint = BigInt(0); + // if (args?.at(-1)?.value !== undefined) { + // transactionValue = BigInt(args.pop().value); + // } + // const uoCallData = encodeFunctionData({ + // abi: [fragment], + // functionName: method, + // args: args + // }); - const elegibleForSponsorship = - options.sponsored && - !transactionValue && - (await (contract.runner as any).account.checkGasSponsorshipEligibility({ - uo: { - target: await contract.getAddress(), - data: uoCallData, - value: transactionValue - } - })); + // const elegibleForSponsorship = + // options.sponsored && + // !transactionValue && + // (await (contract.runner as any).account.checkGasSponsorshipEligibility({ + // uo: { + // target: await contract.getAddress(), + // data: uoCallData, + // value: transactionValue + // } + // })); - const overrides: UserOperationOverrides = { - paymasterAndData: '0x' - }; + // const overrides: UserOperationOverrides = { + // paymasterAndData: '0x' + // }; - const userOperation = await (contract.runner as any).account - .sendUserOperation({ - uo: { - target: await contract.getAddress(), - data: uoCallData, - value: transactionValue - }, - overrides: elegibleForSponsorship ? undefined : overrides - }) - .catch((err) => { - console.error(err); - reactSwal.fire('Error', err.details, 'error'); - }); - if (!userOperation?.hash) { - return false; - } - return await verifyAAUserOperation( - contract.runner, - userOperation, - options - ); - }, - [currentUserAddress, reactSwal, verifyAAUserOperation] - ); + // const userOperation = await (contract.runner as any).account + // .sendUserOperation({ + // uo: { + // target: await contract.getAddress(), + // data: uoCallData, + // value: transactionValue + // }, + // overrides: elegibleForSponsorship ? undefined : overrides + // }) + // .catch((err) => { + // console.error(err); + // reactSwal.fire('Error', err.details, 'error'); + // }); + // if (!userOperation?.hash) { + // return false; + // } + // return await verifyAAUserOperation( + // contract.runner, + // userOperation, + // options + // ); + // }, + // [currentUserAddress, reactSwal, verifyAAUserOperation] + // ); const connectWeb3AuthProgrammaticProvider = useCallback( async (chainData?: CombinedBlockchainData) => { if (!chainData) { return; } - dispatch(connectChainWeb3Auth(chainData)); + // dispatch(connectChainWeb3Auth(chainData)); }, [dispatch] ); @@ -367,23 +368,12 @@ const useWeb3Tx = () => { switch (loginType) { case 'metamask': return metamaskCall(contract, method, args, options); - case 'web3auth': - return web3AuthCall(contract, method, args, options); - case 'alchemyV4': - return web3AuthCall(contract, method, args, options); default: reactSwal.fire('Error', 'Please login', 'error'); return undefined; } }, - [ - connectedChain, - currentUserAddress, - loginType, - metamaskCall, - reactSwal, - web3AuthCall - ] + [connectedChain, currentUserAddress, loginType, metamaskCall, reactSwal] ); const web3Switch = useCallback( diff --git a/rair-front/src/hooks/useWindowDimensions.tsx b/rair-front/src/hooks/useWindowDimensions.tsx index c1e47f240..0eaa00bef 100644 --- a/rair-front/src/hooks/useWindowDimensions.tsx +++ b/rair-front/src/hooks/useWindowDimensions.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import { useEffect, useState } from 'react'; const getWindowDimensions = () => { diff --git a/rair-front/src/main.tsx b/rair-front/src/main.tsx index face02237..8cd52d164 100644 --- a/rair-front/src/main.tsx +++ b/rair-front/src/main.tsx @@ -1,3 +1,4 @@ +//@ts-nocheck import React, { useEffect } from 'react'; import { createRoot } from 'react-dom/client'; import { HelmetProvider } from 'react-helmet-async'; diff --git a/rair-front/src/redux/web3Slice.ts b/rair-front/src/redux/web3Slice.ts index 9f5840908..04287ba19 100644 --- a/rair-front/src/redux/web3Slice.ts +++ b/rair-front/src/redux/web3Slice.ts @@ -1,23 +1,21 @@ -//@ts-nocheck -import { - alchemy, - AlchemySmartAccountClient, - createAlchemySmartAccountClient -} from '@account-kit/infra'; -import { AlchemyWebSigner } from '@account-kit/signer'; -import { createLightAccount } from '@account-kit/smart-contracts'; -import { createModularAccountAlchemyClient } from '@alchemy/aa-alchemy'; -import { Web3AuthSigner } from '@alchemy/aa-signers/web3auth'; +// import {} from // alchemy, +// AlchemySmartAccountClient, +// createAlchemySmartAccountClient +// '@account-kit/infra'; +// import { AlchemyWebSigner } from '@account-kit/signer'; +// import { createLightAccount } from '@account-kit/smart-contracts'; +// import { createModularAccountAlchemyClient } from '@alchemy/aa-alchemy'; +// import { Web3AuthSigner } from '@alchemy/aa-signers/web3auth'; import { Maybe } from '@metamask/providers/dist/utils'; import type { PayloadAction } from '@reduxjs/toolkit'; import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'; -import { WEB3AUTH_NETWORK } from '@web3auth/base'; +// import { WEB3AUTH_NETWORK } from '@web3auth/base'; import { BrowserProvider } from 'ethers'; import { Hex } from 'viem'; import { dataStatuses } from './commonTypes'; -import { CombinedBlockchainData } from '../types/commonTypes'; +// import { CombinedBlockchainData } from '../types/commonTypes'; import { metamaskEventListeners } from '../utils/metamaskUtils'; interface ChainData { @@ -28,7 +26,7 @@ export interface ContractsState extends ChainData { web3Status: dataStatuses; connectedChain?: Hex; currentUserAddress?: Hex; - programmaticProvider?: AlchemySmartAccountClient; + programmaticProvider?: any; requestedChain?: Hex; exchangeRates?: any; } @@ -44,109 +42,109 @@ const initialState: ContractsState = { exchangeRates: undefined }; -export const connectChainAlchemyV4 = createAsyncThunk( - 'web3/connectChainAlchemyV4', - async (chainData: CombinedBlockchainData) => { - if (!chainData.alchemyAppKey || !chainData.viem) { - return {}; - } - const signer = new AlchemyWebSigner({ - client: { - connection: { - // rpcUrl: chainData.viem.blockExplorers.alchemy.http[0], - apiKey: chainData.alchemyAppKey - // chain: chainInformation.viem, - // policyId: chainInformation.alchemyGasPolicy - }, - iframeConfig: { - iframeContainerId: 'rair-asif' // Alchemy signer iFrame - } - } - }); - if (!signer) { - return {}; - } +// export const connectChainAlchemyV4 = createAsyncThunk( +// 'web3/connectChainAlchemyV4', +// async (chainData: CombinedBlockchainData) => { +// if (!chainData.alchemyAppKey || !chainData.viem) { +// return {}; +// } +// const signer = new AlchemyWebSigner({ +// client: { +// connection: { +// // rpcUrl: chainData.viem.blockExplorers.alchemy.http[0], +// apiKey: chainData.alchemyAppKey +// // chain: chainInformation.viem, +// // policyId: chainInformation.alchemyGasPolicy +// }, +// iframeConfig: { +// iframeContainerId: 'rair-asif' // Alchemy signer iFrame +// } +// } +// }); +// if (!signer) { +// return {}; +// } - const alchemyTransport = alchemy({ - apiKey: chainData.alchemyAppKey - }); +// const alchemyTransport = alchemy({ +// apiKey: chainData.alchemyAppKey +// }); - await signer.preparePopupOauth(); +// await signer.preparePopupOauth(); - const data = await signer.authenticate({ - type: 'oauth', - authProviderId: 'auth0', - auth0Connection: 'github', - mode: 'popup' - }); +// const data = await signer.authenticate({ +// type: 'oauth', +// authProviderId: 'auth0', +// auth0Connection: 'github', +// mode: 'popup' +// }); - const client = createAlchemySmartAccountClient({ - transport: alchemyTransport, - policyId: chainData.alchemyGasPolicy, - chain: chainData.viem, - account: await createLightAccount({ - chain: chainData.viem, - transport: alchemyTransport, - signer - }) - }); +// const client = createAlchemySmartAccountClient({ +// transport: alchemyTransport, +// policyId: chainData.alchemyGasPolicy, +// chain: chainData.viem, +// account: await createLightAccount({ +// chain: chainData.viem, +// transport: alchemyTransport, +// signer +// }) +// }); - return { - connectedChain: chainData.hash, - currentUserAddress: data.address, - userDetails: signer, - client - }; - } -); +// return { +// connectedChain: chainData.hash, +// currentUserAddress: data.address, +// userDetails: signer, +// client +// }; +// } +// ); -export const connectChainWeb3Auth = createAsyncThunk( - 'web3/connectChainWeb3Auth', - async (chainData: CombinedBlockchainData) => { - if (!chainData.viem) { - return {}; - } - const web3AuthSigner = new Web3AuthSigner({ - clientId: import.meta.env.VITE_WEB3AUTH_CLIENT_ID, - chainConfig: { - chainNamespace: 'eip155', - chainId: chainData.chainId, - rpcTarget: chainData.rpcEndpoint, - displayName: chainData.name, - blockExplorer: chainData.blockExplorerGateway, - ticker: chainData.symbol, - tickerName: chainData.name - }, - web3AuthNetwork: chainData.testnet - ? WEB3AUTH_NETWORK.SAPPHIRE_DEVNET - : WEB3AUTH_NETWORK.SAPPHIRE_MAINNET - }); - await web3AuthSigner.authenticate({ - init: async () => { - await web3AuthSigner.inner.initModal(); - }, - connect: async () => { - await web3AuthSigner.inner.connect(); - } - }); +// export const connectChainWeb3Auth = createAsyncThunk( +// 'web3/connectChainWeb3Auth', +// async (chainData: CombinedBlockchainData) => { +// if (!chainData.viem) { +// return {}; +// } +// const web3AuthSigner = new Web3AuthSigner({ +// clientId: import.meta.env.VITE_WEB3AUTH_CLIENT_ID, +// chainConfig: { +// chainNamespace: 'eip155', +// chainId: chainData.chainId, +// rpcTarget: chainData.rpcEndpoint, +// displayName: chainData.name, +// blockExplorer: chainData.blockExplorerGateway, +// ticker: chainData.symbol, +// tickerName: chainData.name +// }, +// web3AuthNetwork: chainData.testnet +// ? WEB3AUTH_NETWORK.SAPPHIRE_DEVNET +// : WEB3AUTH_NETWORK.SAPPHIRE_MAINNET +// }); +// await web3AuthSigner.authenticate({ +// init: async () => { +// await web3AuthSigner.inner.initModal(); +// }, +// connect: async () => { +// await web3AuthSigner.inner.connect(); +// } +// }); - const modularAccount = await createModularAccountAlchemyClient({ - apiKey: chainData.alchemyAppKey, - chain: chainData.viem, - signer: web3AuthSigner, - gasManagerConfig: chainData.alchemyGasPolicy - ? { - policyId: chainData.alchemyGasPolicy - } - : undefined - }); - return { - connectedChain: chainData.hash, - currentUserAddress: modularAccount.account.address, - userDetails: await web3AuthSigner.getAuthDetails() - }; - } -); +// const modularAccount = await createModularAccountAlchemyClient({ +// apiKey: chainData.alchemyAppKey, +// chain: chainData.viem, +// signer: web3AuthSigner, +// gasManagerConfig: chainData.alchemyGasPolicy +// ? { +// policyId: chainData.alchemyGasPolicy +// } +// : undefined +// }); +// return { +// connectedChain: chainData.hash, +// currentUserAddress: modularAccount.account.address, +// userDetails: await web3AuthSigner.getAuthDetails() +// }; +// } +// ); export const connectChainMetamask = createAsyncThunk( 'web3/connectChainMetamask', @@ -182,9 +180,9 @@ export const web3Slice = createSlice({ setExchangeRates: (state, action) => { state.exchangeRates = action.payload; }, - setRequestedChain: (state, action: PayloadAction) => { - state.requestedChain = action.payload; - }, + // setRequestedChain: (state, action: PayloadAction) => { + // state.requestedChain = action.payload; + // }, setConnectedChain: (state, action: PayloadAction) => { state.connectedChain = action.payload; }, @@ -212,48 +210,48 @@ export const web3Slice = createSlice({ }) .addCase(connectChainMetamask.rejected, (state) => { state.web3Status = dataStatuses.Failed; - }) - .addCase(connectChainWeb3Auth.pending, (state) => { - state.web3Status = dataStatuses.Loading; - }) - .addCase(connectChainWeb3Auth.fulfilled, (state, action) => { - state.web3Status = dataStatuses.Complete; - if (action.payload?.connectedChain) { - state.connectedChain = action.payload.connectedChain; - } - if (action.payload.currentUserAddress) { - state.currentUserAddress = - action.payload.currentUserAddress.toLowerCase() as Hex; - } - }) - .addCase(connectChainWeb3Auth.rejected, (state) => { - state.web3Status = dataStatuses.Failed; - }) - .addCase(connectChainAlchemyV4.pending, (state) => { - state.web3Status = dataStatuses.Loading; - }) - .addCase(connectChainAlchemyV4.fulfilled, (state, action) => { - state.web3Status = dataStatuses.Complete; - if (action.payload.connectedChain) { - state.connectedChain = action.payload.connectedChain; - } - if (action.payload.currentUserAddress) { - state.currentUserAddress = - action.payload.currentUserAddress.toLowerCase() as Hex; - } - if (action.payload.userDetails) { - state.programmaticProvider = action.payload.client; - } - }) - .addCase(connectChainAlchemyV4.rejected, (state) => { - state.web3Status = dataStatuses.Failed; }); + // .addCase(connectChainWeb3Auth.pending, (state) => { + // state.web3Status = dataStatuses.Loading; + // }) + // .addCase(connectChainWeb3Auth.fulfilled, (state, action) => { + // state.web3Status = dataStatuses.Complete; + // if (action.payload?.connectedChain) { + // state.connectedChain = action.payload.connectedChain; + // } + // if (action.payload.currentUserAddress) { + // state.currentUserAddress = + // action.payload.currentUserAddress.toLowerCase() as Hex; + // } + // }) + // .addCase(connectChainWeb3Auth.rejected, (state) => { + // state.web3Status = dataStatuses.Failed; + // }) + // .addCase(connectChainAlchemyV4.pending, (state) => { + // state.web3Status = dataStatuses.Loading; + // }) + // .addCase(connectChainAlchemyV4.fulfilled, (state, action) => { + // state.web3Status = dataStatuses.Complete; + // if (action.payload.connectedChain) { + // state.connectedChain = action.payload.connectedChain; + // } + // if (action.payload.currentUserAddress) { + // state.currentUserAddress = + // action.payload.currentUserAddress.toLowerCase() as Hex; + // } + // if (action.payload.userDetails) { + // state.programmaticProvider = action.payload.client; + // } + // }) + // .addCase(connectChainAlchemyV4.rejected, (state) => { + // state.web3Status = dataStatuses.Failed; + // }); } }); export const { setExchangeRates, - setRequestedChain, + // setRequestedChain, setConnectedChain, setProgrammaticProvider, setUserAddress diff --git a/rair-front/src/utils/blockchainData.ts b/rair-front/src/utils/blockchainData.ts index d62cbf032..16f4c0400 100644 --- a/rair-front/src/utils/blockchainData.ts +++ b/rair-front/src/utils/blockchainData.ts @@ -1,4 +1,5 @@ -import { base, mainnet, polygon, sepolia } from '@account-kit/infra'; +//@ts-nocheck +// import { base, mainnet, polygon, sepolia } from '@account-kit/infra'; import { Network } from 'alchemy-sdk'; import { Hex } from 'viem'; @@ -50,7 +51,7 @@ const chainData: TChainData = { image: MaticLogo, name: 'Matic(Polygon) Mainnet', chainId: '0x89', - viem: polygon, + viem: undefined, alchemy: Network.MATIC_MAINNET, coingecko: 'matic-network', alchemyAppKey: import.meta.env.VITE_MATIC_MAINNET_ALCHEMY_KEY, @@ -70,7 +71,7 @@ const chainData: TChainData = { image: EthereumLogo, name: 'Ethereum Mainnet', chainId: '0x1', - viem: mainnet, + viem: undefined, alchemy: Network.ETH_MAINNET, coingecko: 'ethereum', alchemyAppKey: import.meta.env.VITE_ETH_MAINNET_ALCHEMY_KEY, @@ -81,7 +82,7 @@ const chainData: TChainData = { image: EthereumLogo, name: 'Ethereum Sepolia', chainId: '0xaa36a7', - viem: sepolia, + viem: undefined, alchemy: Network.ETH_SEPOLIA, coingecko: undefined, alchemyAppKey: import.meta.env.VITE_ETH_SEPOLIA_ALCHEMY_KEY, @@ -103,7 +104,7 @@ const chainData: TChainData = { image: BaseLogo, name: 'Base Mainnet', chainId: '0x2105', - viem: base, + viem: undefined, alchemy: Network.BASE_MAINNET, coingecko: 'base', alchemyAppKey: import.meta.env.VITE_BASE_MAINNET_ALCHEMY_KEY, diff --git a/rair-front/src/utils/checkIPFSanimation.ts b/rair-front/src/utils/checkIPFSanimation.ts index 9e41bc0db..5d6b760a4 100644 --- a/rair-front/src/utils/checkIPFSanimation.ts +++ b/rair-front/src/utils/checkIPFSanimation.ts @@ -1,3 +1,5 @@ +//@ts-nocheck + export function checkIPFSanimation( link = `ipfs://bafybeigims7nqm7iz7gtymqpel6gtaftrmfn53ahj7kskf6p7jytllnttm?id=1` ) { diff --git a/rair-front/src/utils/copyEmbed.tsx b/rair-front/src/utils/copyEmbed.tsx index 33b5e1593..b59765fd8 100644 --- a/rair-front/src/utils/copyEmbed.tsx +++ b/rair-front/src/utils/copyEmbed.tsx @@ -1,3 +1,5 @@ +//@ts-nocheck + export const copyEmbebed = (videoId: number, contract: string) => { const iframe = `