tileville · yassmittal · Oct 20, 2024 · Oct 20, 2024 · Oct 20, 2024 · Oct 21, 2024
diff --git a/.gitignore b/.gitignore
@@ -15,3 +15,4 @@ private.md
 .turbo
 dist/
 .next
+.temp
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -69,6 +69,7 @@
     "tileville-chain-dev": "0.0.5",
     "truncate-middle": "^1.0.6",
     "uuid": "^10.0.0",
+    "vconsole": "^3.15.1",
     "zustand": "^4.4.6"
   },
   "devDependencies": {

diff --git a/apps/web/src/app/ClientLayout.tsx b/apps/web/src/app/ClientLayout.tsx
@@ -7,6 +7,7 @@ import { MobileNavBar } from "@/components/navbar/MobileNavBar";
 import { isMobile, isTablet } from "react-device-detect";
 import { useEffect, useState } from "react";
 import { Footer } from "@/components/Footer/Footer";
+import MobileBanner from "@/components/MainMenu/MobileBanner";
 
 const queryClient = new QueryClient();
 const StoreProtokitUpdater = dynamic(
@@ -34,7 +35,7 @@ export const ClientLayout = ({ children }: { children: React.ReactNode }) => {
 
   const renderFooter = () => {
     if (isMobile || isTablet) {
-      return "";
+      return <MobileBanner />;
     } else {
       return <Footer />;
     }

diff --git a/apps/web/src/app/competitions/page.tsx b/apps/web/src/app/competitions/page.tsx
@@ -1,26 +1,45 @@
 "use client";
+import { useEffect } from 'react'
 import { useCompetitionsData } from "@/db/react-query-hooks";
 import { GameEntryFeesModal } from "@/components/GameEntryFeesModal";
 import { useState } from "react";
 import CompetitionLoading from "./competitionLoading";
 import { Competition } from "@/types";
 import { CompetitionCard } from "@/components/CompetitionCard";
 import { CompetitionsHeader } from "@/components/Competitions/CompetitionsHeader";
+import VConsole from 'vconsole';
+
+let vConsole: any;
 
 export default function Competitions() {
   const { data, isLoading, isError, error } = useCompetitionsData();
   const [isFeeModalOpen, setIsFeesModalOpen] = useState(false);
   const [selectedCompetition, setSelectedCompetition] = useState<Competition>(
     {} as Competition
   );
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      vConsole = new VConsole();
+    }
+
+    return () => {
+      if (typeof window !== 'undefined')
+        vConsole?.destroy();
+    }
+
+  }, [])
+
+
   //TODO: Error Message UI improvement
   if (isError) {
     return <div>Error: {(error as { message: string }).message}</div>;
   }
 
+
   return (
     <>
-      <div className="mx-auto max-w-[1280px] pt-4">
+      <div className="mx-auto max-w-[1280px] pt-4 pb-12">
         <CompetitionsHeader />
 
         <div className="mt-0 grid grid-cols-1 gap-3 px-3 md:mt-5 md:pb-20">

diff --git a/apps/web/src/app/traits-info/page.tsx b/apps/web/src/app/traits-info/page.tsx
@@ -3,6 +3,7 @@
 import { HomeIcon } from "@radix-ui/react-icons";
 import { Trait, traitsContent } from "./trait-content";
 import { useState, useEffect, useRef } from "react";
+import { safeObjectEntries } from "@/lib/helpers";
 
 export default function TraitsInfo() {
   const [activeSection, setActiveSection] = useState("");
@@ -13,7 +14,7 @@ export default function TraitsInfo() {
       const scrollPosition = window.scrollY + 250;
       let currentSection = "";
 
-      Object.entries(sectionRefs.current).forEach(([id, ref]) => {
+      safeObjectEntries(sectionRefs.current).forEach(([id, ref]: [string, any]) => {
         if (
           ref &&
           ref.offsetTop <= scrollPosition &&
@@ -71,11 +72,10 @@ export default function TraitsInfo() {
                   <li key={trait.title}>
                     <button
                        => scrollToSection(sectionId)}
-                      className={`whitespace-nowrap rounded-md border border-primary-foreground px-2 py-1 text-xs font-medium transition-colors md:px-4 md:py-2 md:text-sm ${
-                        activeSection === sectionId
-                          ? "bg-primary-foreground text-primary"
-                          : "text-primary-foreground hover:bg-primary/30"
-                      }`}
+                      className={`whitespace-nowrap rounded-md border border-primary-foreground px-2 py-1 text-xs font-medium transition-colors md:px-4 md:py-2 md:text-sm ${activeSection === sectionId
+                        ? "bg-primary-foreground text-primary"
+                        : "text-primary-foreground hover:bg-primary/30"
+                        }`}
                     >
                       {trait.title}
                     </button>

diff --git a/apps/web/src/components/CompetitionCard.tsx b/apps/web/src/components/CompetitionCard.tsx
@@ -7,7 +7,8 @@ import * as Tooltip from "@radix-ui/react-tooltip";
 import { CountdownTimer } from "./common/CountdownTimer";
 import { HtmlRenderer } from "./common/HTMLRenderer";
 import { InfoCircledIcon, TimerIcon } from "@radix-ui/react-icons";
-import { DEFAULT_POSTER_URL } from "@/constants";
+import { DEFAULT_POSTER_URL, DEFAULT_TRASURY_ADDRESS } from "@/constants";
+import { useParticipationFee } from "@/lib/stores/network";
 
 type CompetitionCardProps = {
   competition: Competition;
@@ -24,6 +25,7 @@ export const CompetitionCard = ({
   const [competitionStatus, setCompetitionStatus] =
     useState<CompetitionStatus>("upcoming");
   const [currentDate] = useState(new Date());
+  const { payParticipationFees } = useParticipationFee();
 
   useEffect(() => {
     const isStartBeforeCurrent = isBefore(competition.start_date, currentDate);
@@ -39,12 +41,21 @@ export const CompetitionCard = ({
     }
   }, []);
 
+  const handlePayParticipationFess = async () => {
+    await payParticipationFees({
+      participation_fee: 1,
+      treasury_address: DEFAULT_TRASURY_ADDRESS,
+      competition_key: competition.unique_keyname,
+      type: "NETWORK",
+    });
+  };
+
   return (
     <div
       className="border-primary-30 competitionCard group relative grid min-h-[320px] grid-cols-12 gap-2 overflow-hidden rounded-lg pb-3 md:gap-3 md:pb-0"
       key={competition.id}
     >
-      <div className="relative col-span-12 aspect-square w-full overflow-hidden rounded-br-md h-auto md:h-full md:col-span-4 xl:h-[400px] xl:w-[400px] md:rounded-none">
+      <div className="relative col-span-12 aspect-square h-auto w-full overflow-hidden rounded-br-md md:col-span-4 md:h-full md:rounded-none xl:h-[400px] xl:w-[400px]">
         <Image
           src={competition.poster_url ?? DEFAULT_POSTER_URL}
           alt="competition poster url"
@@ -114,7 +125,7 @@ export const CompetitionCard = ({
           </div>
           {competition.is_speed_version && (
             <div className="col-span-4">
-              <div className="mb-2 flex justify-center md:justify-start items-center gap-2 text-xl">
+              <div className="mb-2 flex items-center justify-center gap-2 text-xl md:justify-start">
                 <span>
                   <Image
                     src="/icons/speed.svg"
@@ -123,7 +134,9 @@ export const CompetitionCard = ({
                     height="30"
                   />
                 </span>
-                <p className="text-medium text-sm md:text-base">Speedy Version</p>
+                <p className="text-medium text-sm md:text-base">
+                  Speedy Version
+                </p>
                 <Tooltip.Provider delayDuration={200}>
                   <Tooltip.Root>
                     <Tooltip.Trigger asChild>
@@ -147,7 +160,7 @@ export const CompetitionCard = ({
                 </Tooltip.Provider>
               </div>
 
-              <div className="flex items-center justify-center md:justify-start gap-2 text-xl">
+              <div className="flex items-center justify-center gap-2 text-xl md:justify-start">
                 <span>
                   <TimerIcon width={24} height={24} />
                 </span>
@@ -191,6 +204,13 @@ export const CompetitionCard = ({
               </Tooltip.Root>
             </Tooltip.Provider>
           </div>
+
+          <button
+            >
+            className="animated-button-v1 mx-auto w-full cursor-pointer whitespace-nowrap rounded-md border-2 border-primary bg-primary bg-opacity-30 py-2 text-center leading-none text-white disabled:cursor-not-allowed disabled:bg-primary/60"
+          >
+            Pay Entry Fees demo button
+          </button>
         </div>
       </div>
       {competition.competition_tweet_content &&

diff --git a/apps/web/src/components/MainMenu/MobileBanner.tsx b/apps/web/src/components/MainMenu/MobileBanner.tsx
@@ -0,0 +1,48 @@
+import { useState, useEffect } from "react";
+import { Flex } from "@radix-ui/themes";
+import { isMobile } from "react-device-detect";
+import Link from "next/link";
+import { AURO_WALLET_DEEP_LINK } from "@/constants";
+import { useSessionStorage } from "react-use";
+
+const MobileBanner = () => {
+  const [hasSeenBanner, setHasSeenBanner] = useSessionStorage(
+    "hasSeenBanner",
+    false
+  );
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    if (!hasSeenBanner && isMobile) {
+      setIsOpen(true);
+    }
+  }, [hasSeenBanner]);
+
+  const handleClose = () => {
+    setIsOpen(false);
+    setHasSeenBanner(true);
+  };
+
+  return (
+    isOpen && (
+      <div className="fixed inset-x-0 bottom-0 !rounded-none bg-white !px-2 !py-1 shadow-lg dark:bg-gray-800">
+        <Flex gap="6" justify="center">
+          <Link
+            href={AURO_WALLET_DEEP_LINK}
+            className="rounded-full border-primary bg-primary px-3 py-1 text-xs font-medium text-white hover:bg-primary/80"
+          >
+            Open in Auro Browser
+          </Link>
+          <button
+            className="rounded-full border-primary bg-primary/30 px-3 py-1 text-xs font-medium hover:bg-primary/50"
+            >
+          >
+            No, thanks
+        
10000
  </button>
+        </Flex>
+      </div>
+    )
+  );
+};
+
+export default MobileBanner;
diff --git a/apps/web/src/components/Marketplace/TraitsSection.tsx b/apps/web/src/components/Marketplace/TraitsSection.tsx
@@ -3,6 +3,7 @@ import { TraitsInfoCard } from "./TraitsInfoCard";
 import { Dialog } from "@radix-ui/themes";
 import { ATTRIBUTES_DATA, AttributesDataType } from "@/constants";
 import { Json } from "@/lib/database.types";
+import { safeObjectEntries } from "@/lib/helpers";
 
 type TraitsSectionType = {
   traits: Json;
@@ -59,7 +60,7 @@ const parseTraits = (traits: Json): Trait[] => {
         "value" in trait
     );
   } else if (typeof traits === "object" && traits !== null) {
-    return Object.entries(traits).map(([key, value]) => ({
+    return safeObjectEntries(traits).map(([key, value]) => ({
       key,
       value: String(value),
     }));

diff --git a/apps/web/src/components/profileTabs/DigitalCollection/NFTModalContent.tsx b/apps/web/src/components/profileTabs/DigitalCollection/NFTModalContent.tsx
@@ -1,7 +1,7 @@
 import Image from "next/image";
 import { Dialog } from "@radix-ui/themes";
 import { CopyIcon } from "@radix-ui/react-icons";
-import { copyToClipBoard, formatAddress } from "@/lib/helpers";
+import { copyToClipBoard, formatAddress, safeObjectEntries } from "@/lib/helpers";
 import React, { ReactNode } from "react";
 import { TraitsInfoTooltip } from "@/components/Marketplace/TraitsInfoTooltip";
 import { NFTModalFooter } from "./NFTModalFooter";
@@ -76,7 +76,7 @@ export const NFTModalContent = ({
           </div>
 
           <ul className="grid grid-cols-2 gap-2 text-center text-xs">
-            {Object.entries(nftProperties).map(([key, value]) => {
+            {safeObjectEntries(nftProperties).map(([key, value]) => {
               if (
                 typeof value === "object" &&
                 value !== null &&

diff --git a/apps/web/src/constants/index.ts b/apps/web/src/constants/index.ts
@@ -73,6 +73,9 @@ export const POSTHOG_TOKEN =
 export const POSTHOG_URI =
   process.env.NEXT_PUBLIC_POSTHOG_HOST || "https://us.i.posthog.com";
 
+export const AURO_WALLET_DEEP_LINK =
+  "https://www.aurowallet.com/applinks?action=openurl&networkid=mina%3Amainnet&url=https%3A%2F%2Ftileville.xyz/main-menu";
+
 export const isMockEnv = (): boolean => {
   const mintKey =
     typeof window !== "undefined" ? localStorage.getItem("IS_MOCK") : null;

diff --git a/apps/web/src/lib/helpers.ts b/apps/web/src/lib/helpers.ts
@@ -159,7 +159,9 @@ export async function sendPayment({
     from: from,
   };
 
-  if (window.mina?.isPallad) {
+  console.log("transaction", transaction)
+
+  if (false) {
     const signedTransactionResponse = async () => {
       const response = await (window as any).mina.request({
         method: "mina_signTransaction",
@@ -181,16 +183,23 @@ export async function sendPayment({
 
     return response.result.hash;
   } else {
+    console.log("flow in else block")
     try {
-      const data: SendTransactionResult | ProviderError = await (
-        window as any
-      )?.mina?.sendPayment({
+      const payload = {
         amount: amount,
         to: TREASURY_ADDRESS,
-        memo: `Pay ${amount} by auro wallet.`,
-      });
+        memo: `Pay fees`,
+        fee: 0.02,
+                nonce: nonce.nonce
+      }
+      console.log("payload", payload)
+      const data: SendTransactionResult | ProviderError = await (
+        window as any
+      )?.mina?.sendPayment(payload);
+      console.log("Transaction data", data)
       return (data as SendTransactionResult).hash;
     } catch (err: any) {
+      console.log("Transaction error", err)
       toast(`Txn failed with error ${err.toString()}. report a bug`);
     }
   }
@@ -221,3 +230,16 @@ export async function copyToClipBoard({
     });
   }
 }
+
+export const safeObjectEntries = (obj: any) => {
+  if (!obj || typeof obj !== 'object') {
+    return [];
+  }
+
+  try {
+    return Object.entries(obj);
+  } catch (error) {
+    console.error('Error in safeObjectEntries:', error);
+    return [];
+  }
+};
diff --git a/apps/web/src/lib/stores/network.tsx b/apps/web/src/lib/stores/network.tsx
@@ -68,7 +68,7 @@ export const useNetworkStore = create<NetworkState, [["zustand/immer", never]]>(
             (x) =>
               (network.chainId != "unknown"
                 ? x.chainId == network.chainId ||
-                  x.palladNetworkID === network.chainId
+                x.palladNetworkID === network.chainId
                 : x.name == network.name) || x.networkID === network.networkID
           );
           const accountAuthSignature =
@@ -155,8 +155,8 @@ export const useParticipationFee = () => {
   }): Promise<{ id: number } | null | undefined> => {
     let hash;
     let network = window.mina?.isPallad
-      ? networkStore.minaNetwork?.palladNetworkID || NETWORKS[1].palladNetworkID
-      : networkStore.minaNetwork?.networkID || NETWORKS[1].networkID;
+      ? networkStore.minaNetwork?.palladNetworkID || NETWORKS[0].palladNetworkID
+      : networkStore.minaNetwork?.networkID || NETWORKS[0].networkID;
     let txn_status = "PENDING";
     if (!networkStore.address) {
       networkStore.connectWallet(false);
@@ -188,9 +188,7 @@ export const useParticipationFee = () => {
           from: networkStore.address,
           amount: participation_fee,
         });
-
         txn_status = "PENDING";
-
         break;
       default:
     }
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,3 +15,4 @@ private.md @@
     .turbo
     dist/
     .next
+    .temp