Skip to content

Commit

Permalink
feature: fix the pdf issue up upgradeding, remove gamer passport unus…
Browse files Browse the repository at this point in the history 
…ed style code
  • Loading branch information
@newbreedofgeek
newbreedofgeek committed Aug 7, 2024
1 parent fecd833 commit e80086e
Show file tree
Hide file tree
Showing 7 changed files with 59 additions and 43 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
"react-dom": "18.2.0",
"react-hot-toast": "2.4.1",
"react-inlinesvg": "3.0.3",
"react-pdf": "9.0.0",
"react-pdf": "9.1.0",
"react-router-dom": "6.23.1",
"react-slick": "0.30.2",
"react-vertical-timeline-component": "3.6.0",
Expand Down
5 changes: 1 addition & 4 deletions src/pages/AppMarketplace/MultiversxInfographics/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import { useNftsStore } from "store/nfts";
import { HeaderComponent } from "../../../components/Layout/HeaderComponent";
import { Button } from "../../../libComponents/Button";

pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`;
pdfjs.GlobalWorkerOptions.workerSrc = new URL("pdfjs-dist/build/pdf.worker.min.mjs", import.meta.url).toString();

const options = {
cMapUrl: "/cmaps/",
Expand All @@ -32,15 +32,12 @@ export const MultiversxInfographics = () => {
const { tokenLogin } = useGetLoginInfo();
const { hasPendingTransactions } = useGetPendingTransactions();
const { chainID } = useGetNetworkConfig();

const [shownAppDataNfts, setShownAppDataNfts] = useState<DataNft[]>([]);
const [isLoading, setIsLoading] = useState(true);
const [isFetchingDataMarshal, setIsFetchingDataMarshal] = useState<boolean>(true);
const [owned, setOwned] = useState<boolean>(false);
const [viewDataRes, setViewDataRes] = useState<ExtendedViewDataReturnType>();

const { mvxNfts: nfts, isLoadingMvx: isLoadingUserNfts } = useNftsStore();

const [file, setFile] = useState<PDFFile>(null);
const [numPages, setNumPages] = useState<number>(0);
const [pageNumber, setPageNumber] = useState(1); //setting 1 to show first page
Expand Down
2 changes: 0 additions & 2 deletions src/pages/AppMarketplace/NFPodcast/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,6 @@ import { useGetPendingTransactions } from "hooks";
import { Button } from "libComponents/Button";
import { BlobDataType, ExtendedViewDataReturnType } from "libs/types";
import { decodeNativeAuthToken, getApiDataMarshal, toastError } from "libs/utils";
import "react-pdf/dist/Page/AnnotationLayer.css";
import "react-pdf/dist/Page/TextLayer.css";
import { scrollToSection } from "libs/utils";
import { useNftsStore } from "store/nfts";
import musicNoteBlack from "../../../assets/img/nf-tunes/music-note-black.png";
Expand Down
2 changes: 0 additions & 2 deletions src/pages/AppMarketplace/NFTunes/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,6 @@ import { useGetPendingTransactions } from "hooks";
import { Button } from "libComponents/Button";
import { BlobDataType, ExtendedViewDataReturnType } from "libs/types";
import { decodeNativeAuthToken, getApiDataMarshal, toastError } from "libs/utils";
import "react-pdf/dist/Page/AnnotationLayer.css";
import "react-pdf/dist/Page/TextLayer.css";
import { scrollToSection } from "libs/utils";
import { useNftsStore } from "store/nfts";
import manuImage from "assets/img/nf-tunes/manu.png";
Expand Down
2 changes: 1 addition & 1 deletion src/pages/GamerPassport/ActionModals.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ export const ActionModalStep1 = (props: any) => {
value={psnUserName}
onChange={(e) => setPsnUserName(e.target.value)}
className="text-black p-2 w-[250px] rounded-sm mt-2"
placeholder="foo_bar"
placeholder="my_psn_user_name"
/>
<p className="text-sm text-red-400 mt-3">
* Make sure you enter YOUR username, as you will be asked to prove ownership to claim your rewards! Bruh, we will find out! 😎
Expand Down
65 changes: 33 additions & 32 deletions src/pages/GamerPassport/GamerPassport.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -222,12 +222,12 @@ export const GamerPassport = () => {

return (
<HeaderComponent pageTitle={""} subTitle={""} hasImage={false}>
<div className="w-[100%] bg-green-000">
<div className="w-[100%]">
<div
id="hero"
className="mt-2 bg-red-100 h-[200px] md:h-[400px] bg-no-repeat bg-cover md:bg-contain bg-top md:bg-fixed rounded-3xl"
className="mt-2 h-[200px] md:h-[400px] bg-no-repeat bg-cover md:bg-contain bg-top md:bg-fixed rounded-3xl"
style={{ "backgroundImage": `url(${hero})` }}>
<div className="flex flex-col bg-red-000 h-[100%] justify-center items-center">
<div className="flex flex-col h-[100%] justify-center items-center">
<h1 className="!text-white !text-2xl text-center md:!text-3xl">Gamer Passport</h1>
<h2 className="!text-white !text-lg md:!text-xl md:w-[500px] text-center mt-2">Play your games, share your data, and score monthly rewards!</h2>
<div className="w-[7.5rem] relative bg-gradient-to-r from-yellow-300 to-orange-500 px-[1px] py-[1px] rounded-md justify-center mt-5">
Expand Down Expand Up @@ -270,12 +270,12 @@ export const GamerPassport = () => {
)}

{userInDataCollection && (
<div id="my-data-snapshot" className="flex flex-col justify-center items-center bg-red-000">
<div id="my-data-snapshot" className="flex flex-col justify-center items-center">
<div className="flex flex-col justify-center items-center">
{userCurrViewDataError && (
<div className="flex flex-col justify-center items-center mt-10">
<FontAwesomeIcon fade={true} color="#4691e2" icon={faHeartCrack} size="3x" className="m-2" />
<p className="mt-2 bg-red-500 p-4 rounded-sm">Something is broken : {userCurrViewDataError}</p>
<p className="mt-2 bg-red-500 p-4 rounded-sm">{userCurrViewDataError}</p>
</div>
)}

Expand All @@ -292,24 +292,24 @@ export const GamerPassport = () => {
<h3 className="!text-2xl text-center">You are plugged into the Gaming Data Realm</h3>
</div>

<div className="mt-10 bg-red-000 flex flex-col md:flex-row bg-red-000 w-[100%]">
<div className="mt-10 flex flex-col md:flex-row w-[100%]">
<VolumeChartAnalytics
dataLakeUserGrowthData={dataLakeUserGrowthData}
dataLakeDataVolumeGrowthData={dataLakeDataVolumeGrowthData}
dataVolumeGamerReferenceBytes={userCurrViewData.totalBytes}
/>
</div>

<div className="mt-2 bg-red-000 flex flex-col justify-around space-y-2 md:space-y-0 md:space-x-4 md:flex-row w-[100%]">
<div className="flex flex-col justify-center items-center border-dotted border-2 border-[#006ee4] rounded-3xl bg-red-000 flex-1 h-[150px] p-3 md:p-0">
<div className="mt-2 flex flex-col justify-around space-y-2 md:space-y-0 md:space-x-4 md:flex-row w-[100%]">
<div className="flex flex-col justify-center items-center border-dotted border-2 border-[#006ee4] rounded-3xl flex-1 h-[150px] p-3 md:p-0">
<p className="text-xl">Last Snapshot</p>
<p className="text-lg mt-1 opacity-50">{moment(userCurrViewData.updatedOn).format("LLLL")}</p>
</div>
<div className="flex flex-col justify-center items-center border-dotted border-2 border-[#006ee4] rounded-3xl bg-red-000 flex-1 h-[150px] p-3 md:p-0">
<div className="flex flex-col justify-center items-center border-dotted border-2 border-[#006ee4] rounded-3xl flex-1 h-[150px] p-3 md:p-0">
<p className="text-xl">Data Volume Contributed (bytes)</p>
<p className="text-xl mt-2">{userCurrViewData.totalBytes.toLocaleString()}</p>
</div>
<div className="flex flex-col justify-center items-center border-dotted border-2 border-[#006ee4] rounded-3xl bg-red-000 flex-1 h-[150px] p-3 md:p-0">
<div className="flex flex-col justify-center items-center border-dotted border-2 border-[#006ee4] rounded-3xl flex-1 h-[150px] p-3 md:p-0">
<p className="text-xl">Your $ITHEUM Rewards</p>
<FontAwesomeIcon fade={true} color="#4691e2" icon={faBatteryQuarter} size="3x" className="m-2" />
<p className="">Charging...</p>
Expand All @@ -336,22 +336,22 @@ export const GamerPassport = () => {
The Itheum Data Realm is a big pool of 'Passive' Data from users, mainly filled with gaming data right now. Data Coalition DAOs handle the trade
and share the earnings with the users who contribute.
</p>
<div className="mt-10 bg-red-000 flex flex-col md:flex-row">
<div className="mt-10 flex flex-col md:flex-row">
<VolumeChartAnalytics dataLakeUserGrowthData={dataLakeUserGrowthData} dataLakeDataVolumeGrowthData={dataLakeDataVolumeGrowthData} />
</div>

<div className="mt-2 bg-red-000 flex flex-col justify-around space-y-2 md:space-y-0 md:space-x-4 md:flex-row">
<div className="flex flex-col justify-center items-center border-dotted border-2 border-[#006ee4] rounded-3xl bg-red-000 flex-1 h-[200px] p-3 md:p-0">
<div className="mt-2 flex flex-col justify-around space-y-2 md:space-y-0 md:space-x-4 md:flex-row">
<div className="flex flex-col justify-center items-center border-dotted border-2 border-[#006ee4] rounded-3xl flex-1 h-[200px] p-3 md:p-0">
<p className="md:text-2xl">Supported Platforms</p>
<p className="md:text-3xl mt-1">Live: PlayStation</p>
<p className="md:text-lg mt-1 opacity-50">Coming: XBOX, Steam</p>
</div>
<div className="flex flex-col justify-center items-center border-dotted border-2 border-[#006ee4] rounded-3xl bg-red-000 flex-1 h-[200px] p-3 md:p-0">
<div className="flex flex-col justify-center items-center border-dotted border-2 border-[#006ee4] rounded-3xl flex-1 h-[200px] p-3 md:p-0">
<p className="md:text-2xl">Reward Pool</p>
<p className="md:text-3xl mt-2">1,000,000 ITHEUM</p>
<p className="">* reserved for first 500 gamers</p>
</div>
<div className="flex flex-col justify-center items-center border-dotted border-2 border-[#006ee4] rounded-3xl bg-red-000 flex-1 h-[200px] p-3 md:p-0">
<div className="flex flex-col justify-center items-center border-dotted border-2 border-[#006ee4] rounded-3xl flex-1 h-[200px] p-3 md:p-0">
<p className="md:text-2xl">Rewards Emitted</p>
<FontAwesomeIcon fade={true} color="#4691e2" icon={faBatteryQuarter} size="3x" className="m-2" />
<p className="">Charging...</p>
Expand All @@ -366,8 +366,8 @@ export const GamerPassport = () => {
Check if you are eligible, login with your Google Account and you're in! Told you it's easy...
</p>

<div className="mt-2 bg-red-000 flex flex-col justify-around space-y-2 md:space-y-0 md:space-x-4 md:flex-row">
<div className="flex flex-col justify-center items-center border-dotted border-2 border-[#006ee4] rounded-3xl bg-red-000 flex-1 h-[250px] p-3 md:p-0">
<div className="mt-2 flex flex-col justify-around space-y-2 md:space-y-0 md:space-x-4 md:flex-row">
<div className="flex flex-col justify-center items-center border-dotted border-2 border-[#006ee4] rounded-3xl flex-1 h-[250px] p-3 md:p-0">
<p className="md:text-3xl">1.</p>
{step1Passed ? (
<>
Expand All @@ -388,7 +388,7 @@ export const GamerPassport = () => {
</>
)}
</div>
<div className="flex flex-col justify-center items-center border-dotted border-2 border-[#006ee4] rounded-3xl bg-red-000 flex-1 h-[250px] p-3 md:p-0">
<div className="flex flex-col justify-center items-center border-dotted border-2 border-[#006ee4] rounded-3xl flex-1 h-[250px] p-3 md:p-0">
<p className="md:text-3xl">2.</p>
{step2Passed ? (
<>
Expand All @@ -408,7 +408,7 @@ export const GamerPassport = () => {
</>
)}
</div>
<div className="flex flex-col justify-center items-center border-dotted border-2 border-[#006ee4] rounded-3xl bg-red-000 flex-1 h-[250px] p-3 md:p-0">
<div className="flex flex-col justify-center items-center border-dotted border-2 border-[#006ee4] rounded-3xl flex-1 h-[250px] p-3 md:p-0">
<p className="md:text-3xl">3.</p>
{step3Passed ? (
<>
Expand Down Expand Up @@ -440,16 +440,16 @@ export const GamerPassport = () => {
<p className="opacity-50 text-center mt-2 mb-5">
Cause gaming data ownership is the future! blah blah blah... but seriously, there are some cool perks!
</p>
<div className="mt-2 bg-red-000 flex flex-col justify-around space-y-2 md:space-y-0 md:space-x-4 md:flex-row">
<div className="flex flex-col justify-center items-center border-dotted border-2 border-[#006ee4] rounded-3xl bg-red-000 flex-1 h-[200px] p-3 md:p-0">
<div className="mt-2 flex flex-col justify-around space-y-2 md:space-y-0 md:space-x-4 md:flex-row">
<div className="flex flex-col justify-center items-center border-dotted border-2 border-[#006ee4] rounded-3xl flex-1 h-[200px] p-3 md:p-0">
<p className="md:text-2xl w-[80%] text-center">Compare Yourself to Top Gamers</p>
<p className="text-sm file:md:text-md w-[80%] text-center">See how you stack up against other gamers and check out what they're playing</p>
</div>
<div className="flex flex-col justify-center items-center border-dotted border-2 border-[#006ee4] rounded-3xl bg-red-000 flex-1 h-[200px] p-3 md:p-0">
<div className="flex flex-col justify-center items-center border-dotted border-2 border-[#006ee4] rounded-3xl flex-1 h-[200px] p-3 md:p-0">
<p className="md:text-2xl w-[80%] text-center">Effortless! Works in the "Background</p>
<p className="text-sm md:text-md w-[80%] text-center">Your data is collected passively, so just keep playing games like usual!</p>
</div>
<div className="flex flex-col justify-center items-center border-dotted border-2 border-[#006ee4] rounded-3xl bg-red-000 flex-1 h-[200px] p-3 md:p-0">
<div className="flex flex-col justify-center items-center border-dotted border-2 border-[#006ee4] rounded-3xl flex-1 h-[200px] p-3 md:p-0">
<p className="md:text-2xl w-[80%] text-center">Earn $ITHEUM Rewards for Your Data</p>
<p className="text-sm md:text-md w-[80%] text-center">Your data's gold! Play more, share more, and rack up the rewards!</p>
</div>
Expand All @@ -462,34 +462,35 @@ export const GamerPassport = () => {
Yep, your data is gold, and Itheum wants to break the cycle of big corporations exploiting it. Here’s the "VOODOO" behind the scenes:
</p>

<div className="mt-2 bg-red-000 flex flex-col justify-around space-y-2 md:space-y-0 md:space-x-4 md:flex-row">
<div className="flex flex-col justify-center items-center border-dotted border-2 border-[#006ee4] rounded-3xl bg-red-000 flex-1 h-[200px] p-3 md:p-0">
<div className="mt-2 flex flex-col justify-around space-y-2 md:space-y-0 md:space-x-4 md:flex-row">
<div className="flex flex-col justify-center items-center border-dotted border-2 border-[#006ee4] rounded-3xl flex-1 h-[200px] p-3 md:p-0">
<p className="md:text-2xl w-[80%] text-center">Itheum Data Realm</p>
<p className="text-sm md:text-md w-[80%] text-center">
We're filling our Data Realm with your passive gaming data. Right now, you share your data, and we reward you with $ITHEUM from the
protocol.
</p>
</div>
<div className="flex flex-col justify-center items-center border-dotted border-2 border-[#006ee4] rounded-3xl bg-red-000 flex-1 h-[200px] p-3 md:p-0">
<div className="flex flex-col justify-center items-center border-dotted border-2 border-[#006ee4] rounded-3xl flex-1 h-[200px] p-3 md:p-0">
<p className="md:text-2xl w-[80%] text-center">Data Coalition DAO</p>
<p className="text-sm md:text-md w-[80%] text-center">
When the data realm is full, a Data Coalition DAO (DC DAO) will take charge of the giant data pool.
</p>
</div>
<div className="flex flex-col justify-center items-center border-dotted border-2 border-[#006ee4] rounded-3xl bg-red-000 flex-1 h-[200px] p-3 md:p-0">
<div className="flex flex-col justify-center items-center border-dotted border-2 border-[#006ee4] rounded-3xl flex-1 h-[200px] p-3 md:p-0">
<p className="md:text-2xl w-[80%] text-center">Bulk Data Broker</p>
<p className="text-sm md:text-md w-[80%] text-center">The DC DAO will trade your data with AI companies and share the earnings with you.</p>
</div>
</div>
</div>

<div id="FAQ" className="mt-10">
<FAQAccordion faqList={faqList} borderStyleStr="border-dotted border-2 border-[#006ee4]" />
</div>
</div>
)}

<div id="footer" className="mt-10 p-10"></div>
<>
<div id="FAQ" className="mt-10">
<FAQAccordion faqList={faqList} borderStyleStr="border-dotted border-2 border-[#006ee4]" />
</div>
<div id="footer" className="mt-10 p-10"></div>
</>

<ActionModalStep1
showActionModel={showActionModalStep1}
Expand Down
24 changes: 23 additions & 1 deletion src/pages/GamerPassport/SharedComps.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,28 @@ export function VolumeChartAnalytics({
}

export const faqList = [
{
title: "I've joined, but my submission is being reviewed, what next?",
content: (
<>
<p>
Once your submission is received, it can take around 12 hours for your submission to be approved and for the first data snapshot to be collected and
to appear on this app page. So, please come back in some time and it should be available. (We are working to speed things up)
</p>
</>
),
},
{
title: "I've joined, but no data is shown yet, how long will it take?",
content: (
<>
<p>
Once your submission is approved, it can take around 12 hours for your first data snapshot to be collected and to appear on this app page. So, please
come back in some time and it should be available. (We are working to speed things up)
</p>
</>
),
},
{
title: "I'm not a PlayStation gamer, can I join?",
content: (
Expand Down Expand Up @@ -208,7 +230,7 @@ export const faqList = [
),
},
{
title: "I've joined and I want to increase the amount of data I generate to get more rewards, can I do this?",
title: "I want to increase the amount of data I generate to get more rewards, can I do this?",
content: (
<p>
Right now, we’re in passive data collection mode, automatically gathering data from your connected platforms. But stay tuned! We're working on letting
Expand Down

0 comments on commit e80086e

Please sign in to comment.