From 7441d0ff0ae8052472a953815362aa74b76b9c2a Mon Sep 17 00:00:00 2001
From: RanaBug <rana.khy@gmail.com>
Date: Wed, 22 Jan 2025 13:33:46 +0000
Subject: [PATCH 1/3] added toggle to switch to mainnet or testnet manually

---
 src/apps/pillarx-app/api/homeFeed.ts          |  31 +++---
 .../components/PillarXLogo/PillarXLogo.tsx    |  93 +++++++++++++++++-
 .../__snapshots__/PillarXLogo.test.tsx.snap   |   2 +
 src/apps/pillarx-app/images/add.png           | Bin 0 -> 323 bytes
 src/apps/token-atlas/api/token.ts             |  51 +++++-----
 src/containers/Main.tsx                       |   7 +-
 src/providers/AllowedAppsProvider.tsx         |  19 ++--
 src/services/pillarXApiPresence.ts            |  22 +++--
 .../pillarXApiTransactionsHistory.tsx         |  22 +++--
 src/services/pillarXApiWaitlist.ts            |  22 +++--
 src/utils/blockchain.ts                       |   7 +-
 11 files changed, 199 insertions(+), 77 deletions(-)
 create mode 100644 src/apps/pillarx-app/images/add.png

diff --git a/src/apps/pillarx-app/api/homeFeed.ts b/src/apps/pillarx-app/api/homeFeed.ts
index fe66c374..23f5b322 100644
--- a/src/apps/pillarx-app/api/homeFeed.ts
+++ b/src/apps/pillarx-app/api/homeFeed.ts
@@ -10,26 +10,30 @@ import { ApiResponse, WalletData } from '../../../types/api';
 // utils
 import { CompatibleChains } from '../../../utils/blockchain';
 
-const chainIds =
-  process.env.REACT_APP_USE_TESTNETS === 'true'
-    ? [11155111]
-    : CompatibleChains.map((chain) => chain.chainId);
+const isTestnet =
+  (localStorage.getItem('isTestnet') === 'true' &&
+    process.env.REACT_APP_USE_TESTNETS === 'true') ||
+  (localStorage.getItem('isTestnet') === 'true' &&
+    process.env.REACT_APP_USE_TESTNETS === 'false');
+
+const chainIds = isTestnet
+  ? [11155111]
+  : CompatibleChains.map((chain) => chain.chainId);
 
 const chainIdsQuery = chainIds.map((id) => `chainIds=${id}`).join('&');
 
 export const homeFeedApi = createApi({
   reducerPath: 'homeFeedApi',
   baseQuery: fetchBaseQuery({
-    baseUrl:
-      process.env.REACT_APP_USE_TESTNETS === 'true'
-        ? 'https://feed-nubpgwxpiq-uc.a.run.app'
-        : 'https://feed-7eu4izffpa-uc.a.run.app',
+    baseUrl: isTestnet
+      ? 'https://feed-nubpgwxpiq-uc.a.run.app'
+      : 'https://feed-7eu4izffpa-uc.a.run.app',
   }),
   endpoints: (builder) => ({
     getTilesInfo: builder.query<ApiResponse, { page: number; address: string }>(
       {
         query: ({ page, address }) =>
-          `?page=${page}&address=${address}&${chainIdsQuery}&testnets=${process.env.REACT_APP_USE_TESTNETS || 'true'}`,
+          `?page=${page}&address=${address}&${chainIdsQuery}&testnets=${String(isTestnet)}`,
       }
     ),
   }),
@@ -38,10 +42,9 @@ export const homeFeedApi = createApi({
 // maxRetries: 5 is the default, and can be omitted. Shown for documentation purposes.
 const staggeredBaseQuery = retry(
   fetchBaseQuery({
-    baseUrl:
-      process.env.REACT_APP_USE_TESTNETS === 'true'
-        ? 'https://walletportfolio-nubpgwxpiq-uc.a.run.app'
-        : 'https://walletportfolio-7eu4izffpa-uc.a.run.app',
+    baseUrl: isTestnet
+      ? 'https://walletportfolio-nubpgwxpiq-uc.a.run.app'
+      : 'https://walletportfolio-7eu4izffpa-uc.a.run.app',
   }),
   {
     maxRetries: 5,
@@ -54,7 +57,7 @@ export const walletPortfolioTileApi = createApi({
   endpoints: (builder) => ({
     getWalletInfo: builder.query<WalletData, { address: string }>({
       query: ({ address }) =>
-        `?address=${address}&${chainIdsQuery}&testnets=${process.env.REACT_APP_USE_TESTNETS || 'true'}`,
+        `?address=${address}&${chainIdsQuery}&testnets=${String(isTestnet)}`,
     }),
   }),
 });
diff --git a/src/apps/pillarx-app/components/PillarXLogo/PillarXLogo.tsx b/src/apps/pillarx-app/components/PillarXLogo/PillarXLogo.tsx
index eaf51b16..0187ff6a 100644
--- a/src/apps/pillarx-app/components/PillarXLogo/PillarXLogo.tsx
+++ b/src/apps/pillarx-app/components/PillarXLogo/PillarXLogo.tsx
@@ -1,10 +1,101 @@
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+import { useEffect, useState } from 'react';
+
+// images
+import CloseIcon from '../../images/add.png';
+
+// components
+import Body from '../Typography/Body';
+import BodySmall from '../Typography/BodySmall';
+
 type PillarXLogoProps = {
   src: string;
   className?: string;
 };
 
 export const PillarXLogo = ({ src, className }: PillarXLogoProps) => {
-  return <img src={src} alt="pillar-x-logo" className={`w-min ${className}`} />;
+  const [clickCount, setClickCount] = useState(0);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [timer, setTimer] = useState<NodeJS.Timeout | null>(null);
+  const [isTestnet, setIsTestnet] = useState<string>(() => {
+    const savedState = localStorage.getItem('isTestnet');
+    return savedState || process.env.REACT_APP_USE_TESTNETS || 'false';
+  });
+
+  const handleLogoClick = () => {
+    if (clickCount === 0) {
+      const newTimer = setTimeout(() => {
+        setClickCount(0);
+      }, 1000);
+      setTimer(newTimer);
+    }
+
+    setClickCount((prevCount) => prevCount + 1);
+
+    if (clickCount + 1 === 3) {
+      setIsModalOpen(true);
+      setClickCount(0);
+      if (timer) clearTimeout(timer);
+    }
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
+  useEffect(() => {
+    localStorage.setItem('isTestnet', isTestnet);
+  }, [isTestnet]);
+
+  const handleToggle = () => {
+    setIsTestnet((prevState) => {
+      const newState = prevState === 'true' ? 'false' : 'true';
+      setTimeout(() => {
+        window.location.reload();
+      }, 500);
+      return newState;
+    });
+  };
+
+  return (
+    <>
+      <img
+        src={src}
+        alt="pillar-x-logo"
+        className={`w-min ${className}`}
+        onClick={handleLogoClick}
+      />
+      {isModalOpen && (
+        <div className="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50">
+          <div className="flex flex-col items-center gap-6 bg-container_grey rounded-lg p-8 w-full max-w-md desktop:mx-12 tablet:mx-12 mobile:mx-6">
+            <img
+              src={CloseIcon}
+              alt="close-modal-button"
+              className="fixed top-0 right-0 w-[40px] h-[40px] mt-6 mr-4 mb-20 desktop:mr-14 desktop:mb-28"
+              onClick={closeModal}
+            />
+            <Body>Switch network</Body>
+            <div className="flex w-full gap-4 items-center justify-center">
+              <BodySmall>Mainnet</BodySmall>
+              <div
+                onClick={handleToggle}
+                className={`relative inline-flex w-8 h-[18px] rounded-[20px] p-0.5 cursor-pointer transition-colors duration-300 ${
+                  isTestnet === 'true' ? 'bg-purple_medium' : 'bg-[#5F5C6E]'
+                }`}
+              >
+                <span
+                  className={`absolute top-[2px] bottom-0 h-3.5 w-3.5 rounded-full bg-white shadow-md transform transition-transform duration-300 ${
+                    isTestnet === 'true' ? 'translate-x-3.5' : 'translate-x-0'
+                  }`}
+                />
+              </div>
+              <BodySmall>Testnet</BodySmall>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
 };
 
 export default PillarXLogo;
diff --git a/src/apps/pillarx-app/components/PillarXLogo/test/__snapshots__/PillarXLogo.test.tsx.snap b/src/apps/pillarx-app/components/PillarXLogo/test/__snapshots__/PillarXLogo.test.tsx.snap
index 86354477..6f7a3a4a 100644
--- a/src/apps/pillarx-app/components/PillarXLogo/test/__snapshots__/PillarXLogo.test.tsx.snap
+++ b/src/apps/pillarx-app/components/PillarXLogo/test/__snapshots__/PillarXLogo.test.tsx.snap
@@ -5,11 +5,13 @@ exports[`<PillarXLogo /> renders correctly and matches snapshot 1`] = `
   <img
     alt="pillar-x-logo"
     className="w-min undefined"
+    onClick={[Function]}
     src="https://example.com/logo.png"
   />,
   <img
     alt="pillar-x-logo"
     className="w-min custom-class"
+    onClick={[Function]}
     src="https://example.com/logo.png"
   />,
 ]
diff --git a/src/apps/pillarx-app/images/add.png b/src/apps/pillarx-app/images/add.png
new file mode 100644
index 0000000000000000000000000000000000000000..8ab472f2790dc6c679c71cabc1582f154ea19f14
GIT binary patch
literal 323
zcmeAS@N?(olHy`uVBq!ia0vp^+91rq1|%QG79IdnoCO|{#S9GG!XV7ZFl&wkP>``W
z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eB{tZtT$B+ufw^twX9#RlseXzQ)p^VwRfYrQ+
zd3R&sWUEGHi>A8_5et6kE$p=SP}LMox;K5oq%HPw{CqAQAn>X1T&$tq{e8yAWY%u=
zw~3BSRM+;o{AADfzd;GSw@l75UpDJ05?JPbwMM64#fpO!iFFgCjxgm5mgq~C#9mjP
z;8*JX;@gh)rQ2_)sqc|rYF6C3J?d8|ub5#=diN>5o!YZ>-?(4zkN72h%<^f(@0}6G
zx^sn&>Xg=oHU{@C&tiHlI_uKc;)K7Jny${v?tOP{77`Q`ytu!Ld4|d}ldW8Czkq&Z
N@O1TaS?83{1OTx9d0YSh

literal 0
HcmV?d00001

diff --git a/src/apps/token-atlas/api/token.ts b/src/apps/token-atlas/api/token.ts
index 50fbe6ee..97482e38 100644
--- a/src/apps/token-atlas/api/token.ts
+++ b/src/apps/token-atlas/api/token.ts
@@ -14,19 +14,23 @@ import {
 // utils
 import { CompatibleChains } from '../../../utils/blockchain';
 
-const chainIds =
-  process.env.REACT_APP_USE_TESTNETS === 'true'
-    ? [11155111]
-    : CompatibleChains.map((chain) => chain.chainId);
+const isTestnet =
+  (localStorage.getItem('isTestnet') === 'true' &&
+    process.env.REACT_APP_USE_TESTNETS === 'true') ||
+  (localStorage.getItem('isTestnet') === 'true' &&
+    process.env.REACT_APP_USE_TESTNETS === 'false');
+
+const chainIds = isTestnet
+  ? [11155111]
+  : CompatibleChains.map((chain) => chain.chainId);
 const chainIdsQuery = chainIds.map((id) => `chainIds=${id}`).join('&');
 
 export const tokenInfoApi = createApi({
   reducerPath: 'tokenInfoApi',
   baseQuery: fetchBaseQuery({
-    baseUrl:
-      process.env.REACT_APP_USE_TESTNETS === 'true'
-        ? 'https://token-nubpgwxpiq-uc.a.run.app'
-        : 'https://token-7eu4izffpa-uc.a.run.app',
+    baseUrl: isTestnet
+      ? 'https://token-nubpgwxpiq-uc.a.run.app'
+      : 'https://token-7eu4izffpa-uc.a.run.app',
   }),
   endpoints: (builder) => ({
     getTokenInfo: builder.query<
@@ -36,7 +40,7 @@ export const tokenInfoApi = createApi({
       query: ({ asset, blockchain, symbol }) => {
         const blockchainParam =
           blockchain !== undefined ? `&blockchain=${blockchain}` : '';
-        return `?asset=${asset}&symbol=${symbol}${blockchainParam}&${chainIdsQuery}&testnets=${process.env.REACT_APP_USE_TESTNETS || 'true'}`;
+        return `?asset=${asset}&symbol=${symbol}${blockchainParam}&${chainIdsQuery}&testnets=${String(isTestnet)}`;
       },
     }),
   }),
@@ -45,10 +49,9 @@ export const tokenInfoApi = createApi({
 export const tokenGraphApi = createApi({
   reducerPath: 'tokenGraphApi',
   baseQuery: fetchBaseQuery({
-    baseUrl:
-      process.env.REACT_APP_USE_TESTNETS === 'true'
-        ? 'https://tokenpricehistory-nubpgwxpiq-uc.a.run.app'
-        : 'https://tokenpricehistory-7eu4izffpa-uc.a.run.app',
+    baseUrl: isTestnet
+      ? 'https://tokenpricehistory-nubpgwxpiq-uc.a.run.app'
+      : 'https://tokenpricehistory-7eu4izffpa-uc.a.run.app',
   }),
   endpoints: (builder) => ({
     getTokenGraph: builder.query<
@@ -60,7 +63,7 @@ export const tokenGraphApi = createApi({
         const blockchainParam =
           blockchain !== undefined ? `&blockchain=${blockchain}` : '';
         const assetParam = asset.split(' ')[0];
-        return `?asset=${assetParam}&from=${from * 1000}${toParam}${blockchainParam}&${chainIdsQuery}&testnets=${process.env.REACT_APP_USE_TESTNETS || 'true'}`;
+        return `?asset=${assetParam}&from=${from * 1000}${toParam}${blockchainParam}&${chainIdsQuery}&testnets=${String(isTestnet)}`;
       },
     }),
   }),
@@ -69,15 +72,13 @@ export const tokenGraphApi = createApi({
 export const trendingTokensApi = createApi({
   reducerPath: 'trendingTokensApi',
   baseQuery: fetchBaseQuery({
-    baseUrl:
-      process.env.REACT_APP_USE_TESTNETS === 'true'
-        ? 'https://trendingtokens-nubpgwxpiq-uc.a.run.app'
-        : 'https://trendingtokens-7eu4izffpa-uc.a.run.app',
+    baseUrl: isTestnet
+      ? 'https://trendingtokens-nubpgwxpiq-uc.a.run.app'
+      : 'https://trendingtokens-7eu4izffpa-uc.a.run.app',
   }),
   endpoints: (builder) => ({
     getTrendingTokens: builder.query<TrendingTokens, void>({
-      query: () =>
-        `?${chainIdsQuery}&testnets=${process.env.REACT_APP_USE_TESTNETS || 'true'}`,
+      query: () => `?${chainIdsQuery}&testnets=${String(isTestnet)}`,
     }),
   }),
 });
@@ -85,15 +86,13 @@ export const trendingTokensApi = createApi({
 export const blockchainsListApi = createApi({
   reducerPath: 'blockchainsListApi',
   baseQuery: fetchBaseQuery({
-    baseUrl:
-      process.env.REACT_APP_USE_TESTNETS === 'true'
-        ? 'https://blockchains-nubpgwxpiq-uc.a.run.app'
-        : 'https://blockchains-7eu4izffpa-uc.a.run.app',
+    baseUrl: isTestnet
+      ? 'https://blockchains-nubpgwxpiq-uc.a.run.app'
+      : 'https://blockchains-7eu4izffpa-uc.a.run.app',
   }),
   endpoints: (builder) => ({
     getBlockchainsList: builder.query<BlockchainList, void>({
-      query: () =>
-        `?${chainIdsQuery}&testnets=${process.env.REACT_APP_USE_TESTNETS || 'true'}`,
+      query: () => `?${chainIdsQuery}&testnets=${String(isTestnet)}`,
     }),
   }),
 });
diff --git a/src/containers/Main.tsx b/src/containers/Main.tsx
index 9e266c49..2e452843 100644
--- a/src/containers/Main.tsx
+++ b/src/containers/Main.tsx
@@ -258,7 +258,12 @@ const Main = () => {
           config={{
             appearance: { theme: 'dark' },
             defaultChain:
-              process.env.REACT_APP_USE_TESTNETS === 'true' ? sepolia : polygon,
+              (localStorage.getItem('isTestnet') === 'true' &&
+                process.env.REACT_APP_USE_TESTNETS === 'true') ||
+              (localStorage.getItem('isTestnet') === 'true' &&
+                process.env.REACT_APP_USE_TESTNETS === 'false')
+                ? sepolia
+                : polygon,
             embeddedWallets: {
               createOnLogin: 'users-without-wallets',
             },
diff --git a/src/providers/AllowedAppsProvider.tsx b/src/providers/AllowedAppsProvider.tsx
index 705944e8..cca29660 100644
--- a/src/providers/AllowedAppsProvider.tsx
+++ b/src/providers/AllowedAppsProvider.tsx
@@ -24,24 +24,29 @@ const AllowedAppsProvider = ({ children }: { children: React.ReactNode }) => {
   const [isLoading, setIsLoading] = React.useState<boolean>(true);
   const [allowed, setAllowed] = React.useState<string[]>([]);
 
+  const isTestnet =
+    (localStorage.getItem('isTestnet') === 'true' &&
+      process.env.REACT_APP_USE_TESTNETS === 'true') ||
+    (localStorage.getItem('isTestnet') === 'true' &&
+      process.env.REACT_APP_USE_TESTNETS === 'false');
+
   useEffect(() => {
     let expired = false;
 
     (async () => {
       try {
-        const chainIds =
-          process.env.REACT_APP_USE_TESTNETS === 'true'
-            ? [11155111]
-            : CompatibleChains.map((chain) => chain.chainId);
+        const chainIds = isTestnet
+          ? [11155111]
+          : CompatibleChains.map((chain) => chain.chainId);
         const chainIdsQuery = chainIds.map((id) => `chainIds=${id}`).join('&');
 
         const { data } = await axios.get(
-          process.env.REACT_APP_USE_TESTNETS === 'true'
+          isTestnet
             ? 'https://apps-nubpgwxpiq-uc.a.run.app'
             : 'https://apps-7eu4izffpa-uc.a.run.app',
           {
             params: {
-              testnets: process.env.REACT_APP_USE_TESTNETS || 'true',
+              testnets: String(isTestnet),
             },
             paramsSerializer: () => `${chainIdsQuery}`,
           }
@@ -60,7 +65,7 @@ const AllowedAppsProvider = ({ children }: { children: React.ReactNode }) => {
     return () => {
       expired = true;
     };
-  }, []);
+  }, [isTestnet]);
 
   const contextData = useMemo(
     () => ({
diff --git a/src/services/pillarXApiPresence.ts b/src/services/pillarXApiPresence.ts
index 3d808203..1681d25c 100644
--- a/src/services/pillarXApiPresence.ts
+++ b/src/services/pillarXApiPresence.ts
@@ -4,25 +4,29 @@ import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 // utils
 import { CompatibleChains } from '../utils/blockchain';
 
+const isTestnet =
+  (localStorage.getItem('isTestnet') === 'true' &&
+    process.env.REACT_APP_USE_TESTNETS === 'true') ||
+  (localStorage.getItem('isTestnet') === 'true' &&
+    process.env.REACT_APP_USE_TESTNETS === 'false');
+
 export const pillarXApiPresence = createApi({
   reducerPath: 'pillarXApiPresence',
   baseQuery: fetchBaseQuery({
-    baseUrl:
-      process.env.REACT_APP_USE_TESTNETS === 'true'
-        ? 'https://activity-nubpgwxpiq-uc.a.run.app'
-        : 'https://activity-7eu4izffpa-uc.a.run.app',
+    baseUrl: isTestnet
+      ? 'https://activity-nubpgwxpiq-uc.a.run.app'
+      : 'https://activity-7eu4izffpa-uc.a.run.app',
   }),
   endpoints: (builder) => ({
     recordPresence: builder.mutation({
       query: (payload = {}) => {
-        const chainIds =
-          process.env.REACT_APP_USE_TESTNETS === 'true'
-            ? [11155111]
-            : CompatibleChains.map((chain) => chain.chainId);
+        const chainIds = isTestnet
+          ? [11155111]
+          : CompatibleChains.map((chain) => chain.chainId);
         const chainIdsQuery = chainIds.map((id) => `chainIds=${id}`).join('&');
 
         return {
-          url: `?${chainIdsQuery}&testnets=${process.env.REACT_APP_USE_TESTNETS || 'true'}`,
+          url: `?${chainIdsQuery}&testnets=${String(isTestnet)}`,
           method: 'POST',
           body: payload,
         };
diff --git a/src/services/pillarXApiTransactionsHistory.tsx b/src/services/pillarXApiTransactionsHistory.tsx
index d6f28ef1..515add46 100644
--- a/src/services/pillarXApiTransactionsHistory.tsx
+++ b/src/services/pillarXApiTransactionsHistory.tsx
@@ -4,25 +4,29 @@ import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 // utils
 import { CompatibleChains } from '../utils/blockchain';
 
+const isTestnet =
+  (localStorage.getItem('isTestnet') === 'true' &&
+    process.env.REACT_APP_USE_TESTNETS === 'true') ||
+  (localStorage.getItem('isTestnet') === 'true' &&
+    process.env.REACT_APP_USE_TESTNETS === 'false');
+
 // Define a service using a base URL and expected endpoints
 export const pillarXApiTransactionsHistory = createApi({
   reducerPath: 'pillarXApiTransactionsHistory',
   baseQuery: fetchBaseQuery({
-    baseUrl:
-      process.env.REACT_APP_USE_TESTNETS === 'true'
-        ? 'https://transactions-nubpgwxpiq-uc.a.run.app'
-        : 'https://transactions-7eu4izffpa-uc.a.run.app',
+    baseUrl: isTestnet
+      ? 'https://transactions-nubpgwxpiq-uc.a.run.app'
+      : 'https://transactions-7eu4izffpa-uc.a.run.app',
   }),
   endpoints: (builder) => ({
     getTransactionsHistory: builder.query({
       query: ({ address }) => {
-        const chainIds =
-          process.env.REACT_APP_USE_TESTNETS === 'true'
-            ? [11155111]
-            : CompatibleChains.map((chain) => chain.chainId);
+        const chainIds = isTestnet
+          ? [11155111]
+          : CompatibleChains.map((chain) => chain.chainId);
         const chainIdsQuery = chainIds.map((id) => `chainIds=${id}`).join('&');
 
-        return `?address=${address}&${chainIdsQuery}&testnets=${process.env.REACT_APP_USE_TESTNETS || 'true'}`;
+        return `?address=${address}&${chainIdsQuery}&testnets=${String(isTestnet)}`;
       },
     }),
   }),
diff --git a/src/services/pillarXApiWaitlist.ts b/src/services/pillarXApiWaitlist.ts
index e9c9d009..7234db0f 100644
--- a/src/services/pillarXApiWaitlist.ts
+++ b/src/services/pillarXApiWaitlist.ts
@@ -4,24 +4,28 @@ import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 // utils
 import { CompatibleChains } from '../utils/blockchain';
 
+const isTestnet =
+  (localStorage.getItem('isTestnet') === 'true' &&
+    process.env.REACT_APP_USE_TESTNETS === 'true') ||
+  (localStorage.getItem('isTestnet') === 'true' &&
+    process.env.REACT_APP_USE_TESTNETS === 'false');
+
 // Define a service using a base URL and expected endpoints
 export const pillarXApiWaitlist = createApi({
   reducerPath: 'pillarXApiWaitlistWaitlist',
   baseQuery: fetchBaseQuery({
-    baseUrl:
-      process.env.REACT_APP_USE_TESTNETS === 'true'
-        ? 'https://waitlist-nubpgwxpiq-uc.a.run.app'
-        : 'https://waitlist-7eu4izffpa-uc.a.run.app',
+    baseUrl: isTestnet
+      ? 'https://waitlist-nubpgwxpiq-uc.a.run.app'
+      : 'https://waitlist-7eu4izffpa-uc.a.run.app',
   }),
   endpoints: (builder) => ({
     getWaitlist: builder.query({
       query: ({ address }) => {
-        const chainIds =
-          process.env.REACT_APP_USE_TESTNETS === 'true'
-            ? [11155111]
-            : CompatibleChains.map((chain) => chain.chainId);
+        const chainIds = isTestnet
+          ? [11155111]
+          : CompatibleChains.map((chain) => chain.chainId);
         const chainIdsQuery = chainIds.map((id) => `chainIds=${id}`).join('&');
-        return `?address=${address}&${chainIdsQuery}&testnets=${process.env.REACT_APP_USE_TESTNETS || 'true'}`;
+        return `?address=${address}&${chainIdsQuery}&testnets=${String(isTestnet)}`;
       },
     }),
   }),
diff --git a/src/utils/blockchain.ts b/src/utils/blockchain.ts
index 3c9bd83a..9c83e7ad 100644
--- a/src/utils/blockchain.ts
+++ b/src/utils/blockchain.ts
@@ -118,7 +118,12 @@ export const getNativeAssetForChainId = (chainId: number): TokenListToken => {
 export const supportedChains = [mainnet, polygon, gnosis, base, sepolia];
 
 export const visibleChains = supportedChains.filter((chain) =>
-  process.env.REACT_APP_USE_TESTNETS === 'true' ? chain.testnet : !chain.testnet
+  (localStorage.getItem('isTestnet') === 'true' &&
+    process.env.REACT_APP_USE_TESTNETS === 'true') ||
+  (localStorage.getItem('isTestnet') === 'true' &&
+    process.env.REACT_APP_USE_TESTNETS === 'false')
+    ? chain.testnet
+    : !chain.testnet
 );
 
 export const parseNftTitle = (collection: NftCollection, nft: Nft): string => {

From a2f88996e96850c9d8f10bba67f4475881c3a1df Mon Sep 17 00:00:00 2001
From: RanaBug <rana.khy@gmail.com>
Date: Wed, 22 Jan 2025 14:16:44 +0000
Subject: [PATCH 2/3] updates on checking if is testnet

---
 src/apps/pillarx-app/api/homeFeed.ts          |  8 +-
 .../DisplayCollectionImage.test.tsx.snap      | 82 +++++++++----------
 .../components/PillarXLogo/PillarXLogo.tsx    | 26 +++---
 src/apps/pillarx-app/index.tsx                |  6 ++
 src/apps/token-atlas/api/token.ts             |  8 +-
 src/containers/Main.tsx                       | 10 +--
 src/providers/AllowedAppsProvider.tsx         | 10 +--
 src/services/pillarXApiPresence.ts            |  8 +-
 .../pillarXApiTransactionsHistory.tsx         |  8 +-
 src/services/pillarXApiWaitlist.ts            |  8 +-
 src/utils/blockchain.ts                       | 15 ++--
 11 files changed, 79 insertions(+), 110 deletions(-)

diff --git a/src/apps/pillarx-app/api/homeFeed.ts b/src/apps/pillarx-app/api/homeFeed.ts
index 23f5b322..717e3468 100644
--- a/src/apps/pillarx-app/api/homeFeed.ts
+++ b/src/apps/pillarx-app/api/homeFeed.ts
@@ -8,13 +8,7 @@ import { addMiddleware } from '../../../store';
 import { ApiResponse, WalletData } from '../../../types/api';
 
 // utils
-import { CompatibleChains } from '../../../utils/blockchain';
-
-const isTestnet =
-  (localStorage.getItem('isTestnet') === 'true' &&
-    process.env.REACT_APP_USE_TESTNETS === 'true') ||
-  (localStorage.getItem('isTestnet') === 'true' &&
-    process.env.REACT_APP_USE_TESTNETS === 'false');
+import { CompatibleChains, isTestnet } from '../../../utils/blockchain';
 
 const chainIds = isTestnet
   ? [11155111]
diff --git a/src/apps/pillarx-app/components/MediaGridCollection/tests/__snapshots__/DisplayCollectionImage.test.tsx.snap b/src/apps/pillarx-app/components/MediaGridCollection/tests/__snapshots__/DisplayCollectionImage.test.tsx.snap
index 596b96d8..6db6fbf1 100644
--- a/src/apps/pillarx-app/components/MediaGridCollection/tests/__snapshots__/DisplayCollectionImage.test.tsx.snap
+++ b/src/apps/pillarx-app/components/MediaGridCollection/tests/__snapshots__/DisplayCollectionImage.test.tsx.snap
@@ -23,69 +23,67 @@ exports[`<DisplayCollectionImage /> renders correctly and matches snapshot witho
     data-testid="random-avatar"
     fill="none"
     role="img"
-    viewBox="0 0 80 80"
+    viewBox="0 0 36 36"
     xmlns="http://www.w3.org/2000/svg"
   >
     <mask
-      height={80}
+      height={36}
       id=":r0:"
       maskUnits="userSpaceOnUse"
-      width={80}
+      width={36}
       x={0}
       y={0}
     >
       <rect
         fill="#FFFFFF"
-        height={80}
-        width={80}
+        height={36}
+        width={36}
       />
     </mask>
     <g
       mask="url(#:r0:)"
     >
-      <path
-        d="M0 0h80v40H0z"
-        fill="url(#gradient_paint0_linear_image-name)"
+      <rect
+        fill="#92A1C6"
+        height={36}
+        width={36}
       />
-      <path
-        d="M0 40h80v40H0z"
-        fill="url(#gradient_paint1_linear_image-name)"
+      <rect
+        fill="#F0AB3D"
+        height={36}
+        rx={36}
+        transform="translate(-3 7) rotate(307 18 18) scale(1.1)"
+        width={36}
+        x="0"
+        y="0"
       />
-    </g>
-    <defs>
-      <linearGradient
-        gradientUnits="userSpaceOnUse"
-        id="gradient_paint0_linear_image-name"
-        x1={40}
-        x2={40}
-        y1={0}
-        y2={40}
+      <g
+        transform="translate(-3 3.5) rotate(-7 18 18)"
       >
-        <stop
-          stopColor="#F0AB3D"
+        <path
+          d="M13,20 a1,0.75 0 0,0 10,0"
+          fill="#000000"
         />
-        <stop
-          offset={1}
-          stopColor="#C271B4"
+        <rect
+          fill="#000000"
+          height={2}
+          rx={1}
+          stroke="none"
+          width={1.5}
+          x={12}
+          y={14}
         />
-      </linearGradient>
-      <linearGradient
-        gradientUnits="userSpaceOnUse"
-        id="gradient_paint1_linear_image-name"
-        x1={40}
-        x2={40}
-        y1={40}
-        y2={80}
-      >
-        <stop
-          stopColor="#C20D90"
-        />
-        <stop
-          offset={1}
-          stopColor="#92A1C6"
+        <rect
+          fill="#000000"
+          height={2}
+          rx={1}
+          stroke="none"
+          width={1.5}
+          x={22}
+          y={14}
         />
-      </linearGradient>
-    </defs>
+      </g>
+    </g>
   </svg>
 </div>
 `;
diff --git a/src/apps/pillarx-app/components/PillarXLogo/PillarXLogo.tsx b/src/apps/pillarx-app/components/PillarXLogo/PillarXLogo.tsx
index 0187ff6a..8abaa7eb 100644
--- a/src/apps/pillarx-app/components/PillarXLogo/PillarXLogo.tsx
+++ b/src/apps/pillarx-app/components/PillarXLogo/PillarXLogo.tsx
@@ -5,6 +5,7 @@ import { useEffect, useState } from 'react';
 import CloseIcon from '../../images/add.png';
 
 // components
+import { isTestnet } from '../../../../utils/blockchain';
 import Body from '../Typography/Body';
 import BodySmall from '../Typography/BodySmall';
 
@@ -17,22 +18,21 @@ export const PillarXLogo = ({ src, className }: PillarXLogoProps) => {
   const [clickCount, setClickCount] = useState(0);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [timer, setTimer] = useState<NodeJS.Timeout | null>(null);
-  const [isTestnet, setIsTestnet] = useState<string>(() => {
-    const savedState = localStorage.getItem('isTestnet');
-    return savedState || process.env.REACT_APP_USE_TESTNETS || 'false';
-  });
+  const [isTestnetSwitch, setIsTestnetSwitch] = useState<string>(
+    String(isTestnet)
+  );
 
   const handleLogoClick = () => {
     if (clickCount === 0) {
       const newTimer = setTimeout(() => {
         setClickCount(0);
-      }, 1000);
+      }, 4000);
       setTimer(newTimer);
     }
 
     setClickCount((prevCount) => prevCount + 1);
 
-    if (clickCount + 1 === 3) {
+    if (clickCount + 1 === 7) {
       setIsModalOpen(true);
       setClickCount(0);
       if (timer) clearTimeout(timer);
@@ -44,11 +44,11 @@ export const PillarXLogo = ({ src, className }: PillarXLogoProps) => {
   };
 
   useEffect(() => {
-    localStorage.setItem('isTestnet', isTestnet);
-  }, [isTestnet]);
+    localStorage.setItem('isTestnet', isTestnetSwitch);
+  }, [isTestnetSwitch]);
 
   const handleToggle = () => {
-    setIsTestnet((prevState) => {
+    setIsTestnetSwitch((prevState) => {
       const newState = prevState === 'true' ? 'false' : 'true';
       setTimeout(() => {
         window.location.reload();
@@ -80,12 +80,16 @@ export const PillarXLogo = ({ src, className }: PillarXLogoProps) => {
               <div
                 onClick={handleToggle}
                 className={`relative inline-flex w-8 h-[18px] rounded-[20px] p-0.5 cursor-pointer transition-colors duration-300 ${
-                  isTestnet === 'true' ? 'bg-purple_medium' : 'bg-[#5F5C6E]'
+                  isTestnetSwitch === 'true'
+                    ? 'bg-purple_medium'
+                    : 'bg-[#5F5C6E]'
                 }`}
               >
                 <span
                   className={`absolute top-[2px] bottom-0 h-3.5 w-3.5 rounded-full bg-white shadow-md transform transition-transform duration-300 ${
-                    isTestnet === 'true' ? 'translate-x-3.5' : 'translate-x-0'
+                    isTestnetSwitch === 'true'
+                      ? 'translate-x-3.5'
+                      : 'translate-x-0'
                   }`}
                 />
               </div>
diff --git a/src/apps/pillarx-app/index.tsx b/src/apps/pillarx-app/index.tsx
index d5f71769..efe822af 100644
--- a/src/apps/pillarx-app/index.tsx
+++ b/src/apps/pillarx-app/index.tsx
@@ -180,6 +180,12 @@ const App = () => {
   return (
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
     <Wrapper>
+      <button
+        type="button"
+        onClick={() => localStorage.removeItem('isTestnet')}
+      >
+        Hey
+      </button>
       <PillarXLogo
         src={pillarLogoLight}
         className="object-contain h-[20px] mb-[70px] mobile:h-[18px] mobile:mb-[58px] self-center"
diff --git a/src/apps/token-atlas/api/token.ts b/src/apps/token-atlas/api/token.ts
index 97482e38..5060979a 100644
--- a/src/apps/token-atlas/api/token.ts
+++ b/src/apps/token-atlas/api/token.ts
@@ -12,13 +12,7 @@ import {
 } from '../../../types/api';
 
 // utils
-import { CompatibleChains } from '../../../utils/blockchain';
-
-const isTestnet =
-  (localStorage.getItem('isTestnet') === 'true' &&
-    process.env.REACT_APP_USE_TESTNETS === 'true') ||
-  (localStorage.getItem('isTestnet') === 'true' &&
-    process.env.REACT_APP_USE_TESTNETS === 'false');
+import { CompatibleChains, isTestnet } from '../../../utils/blockchain';
 
 const chainIds = isTestnet
   ? [11155111]
diff --git a/src/containers/Main.tsx b/src/containers/Main.tsx
index 2e452843..d566c094 100644
--- a/src/containers/Main.tsx
+++ b/src/containers/Main.tsx
@@ -32,7 +32,7 @@ import Lobby from '../pages/Lobby';
 import Login from '../pages/Login';
 import NotFound from '../pages/NotFound';
 import Waitlist from '../pages/WaitList';
-import { visibleChains } from '../utils/blockchain';
+import { isTestnet, visibleChains } from '../utils/blockchain';
 import Authorized from './Authorized';
 
 /**
@@ -257,13 +257,7 @@ const Main = () => {
           appId={process.env.REACT_APP_PRIVY_APP_ID as string}
           config={{
             appearance: { theme: 'dark' },
-            defaultChain:
-              (localStorage.getItem('isTestnet') === 'true' &&
-                process.env.REACT_APP_USE_TESTNETS === 'true') ||
-              (localStorage.getItem('isTestnet') === 'true' &&
-                process.env.REACT_APP_USE_TESTNETS === 'false')
-                ? sepolia
-                : polygon,
+            defaultChain: isTestnet ? sepolia : polygon,
             embeddedWallets: {
               createOnLogin: 'users-without-wallets',
             },
diff --git a/src/providers/AllowedAppsProvider.tsx b/src/providers/AllowedAppsProvider.tsx
index cca29660..182c86d8 100644
--- a/src/providers/AllowedAppsProvider.tsx
+++ b/src/providers/AllowedAppsProvider.tsx
@@ -3,7 +3,7 @@ import axios from 'axios';
 import React, { createContext, useEffect, useMemo } from 'react';
 
 // utils
-import { CompatibleChains } from '../utils/blockchain';
+import { CompatibleChains, isTestnet } from '../utils/blockchain';
 
 export interface AllowedAppsContextProps {
   data: {
@@ -24,12 +24,6 @@ const AllowedAppsProvider = ({ children }: { children: React.ReactNode }) => {
   const [isLoading, setIsLoading] = React.useState<boolean>(true);
   const [allowed, setAllowed] = React.useState<string[]>([]);
 
-  const isTestnet =
-    (localStorage.getItem('isTestnet') === 'true' &&
-      process.env.REACT_APP_USE_TESTNETS === 'true') ||
-    (localStorage.getItem('isTestnet') === 'true' &&
-      process.env.REACT_APP_USE_TESTNETS === 'false');
-
   useEffect(() => {
     let expired = false;
 
@@ -65,7 +59,7 @@ const AllowedAppsProvider = ({ children }: { children: React.ReactNode }) => {
     return () => {
       expired = true;
     };
-  }, [isTestnet]);
+  }, []);
 
   const contextData = useMemo(
     () => ({
diff --git a/src/services/pillarXApiPresence.ts b/src/services/pillarXApiPresence.ts
index 1681d25c..5e287e0d 100644
--- a/src/services/pillarXApiPresence.ts
+++ b/src/services/pillarXApiPresence.ts
@@ -2,13 +2,7 @@
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 
 // utils
-import { CompatibleChains } from '../utils/blockchain';
-
-const isTestnet =
-  (localStorage.getItem('isTestnet') === 'true' &&
-    process.env.REACT_APP_USE_TESTNETS === 'true') ||
-  (localStorage.getItem('isTestnet') === 'true' &&
-    process.env.REACT_APP_USE_TESTNETS === 'false');
+import { CompatibleChains, isTestnet } from '../utils/blockchain';
 
 export const pillarXApiPresence = createApi({
   reducerPath: 'pillarXApiPresence',
diff --git a/src/services/pillarXApiTransactionsHistory.tsx b/src/services/pillarXApiTransactionsHistory.tsx
index 515add46..d66200ac 100644
--- a/src/services/pillarXApiTransactionsHistory.tsx
+++ b/src/services/pillarXApiTransactionsHistory.tsx
@@ -2,13 +2,7 @@
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 
 // utils
-import { CompatibleChains } from '../utils/blockchain';
-
-const isTestnet =
-  (localStorage.getItem('isTestnet') === 'true' &&
-    process.env.REACT_APP_USE_TESTNETS === 'true') ||
-  (localStorage.getItem('isTestnet') === 'true' &&
-    process.env.REACT_APP_USE_TESTNETS === 'false');
+import { CompatibleChains, isTestnet } from '../utils/blockchain';
 
 // Define a service using a base URL and expected endpoints
 export const pillarXApiTransactionsHistory = createApi({
diff --git a/src/services/pillarXApiWaitlist.ts b/src/services/pillarXApiWaitlist.ts
index 7234db0f..5394834c 100644
--- a/src/services/pillarXApiWaitlist.ts
+++ b/src/services/pillarXApiWaitlist.ts
@@ -2,13 +2,7 @@
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 
 // utils
-import { CompatibleChains } from '../utils/blockchain';
-
-const isTestnet =
-  (localStorage.getItem('isTestnet') === 'true' &&
-    process.env.REACT_APP_USE_TESTNETS === 'true') ||
-  (localStorage.getItem('isTestnet') === 'true' &&
-    process.env.REACT_APP_USE_TESTNETS === 'false');
+import { CompatibleChains, isTestnet } from '../utils/blockchain';
 
 // Define a service using a base URL and expected endpoints
 export const pillarXApiWaitlist = createApi({
diff --git a/src/utils/blockchain.ts b/src/utils/blockchain.ts
index 9c83e7ad..56bfd60b 100644
--- a/src/utils/blockchain.ts
+++ b/src/utils/blockchain.ts
@@ -23,6 +23,14 @@ import logoEvm from '../assets/images/logo-evm.png';
 import logoGnosis from '../assets/images/logo-gnosis.png';
 import logoPolygon from '../assets/images/logo-polygon.png';
 
+export const isTestnet = (() => {
+  const storedIsTestnet = localStorage.getItem('isTestnet');
+  if (storedIsTestnet === null || storedIsTestnet === undefined) {
+    return process.env.REACT_APP_USE_TESTNETS === 'true';
+  }
+  return storedIsTestnet === 'true';
+})();
+
 export const isValidEthereumAddress = (
   address: string | undefined
 ): boolean => {
@@ -118,12 +126,7 @@ export const getNativeAssetForChainId = (chainId: number): TokenListToken => {
 export const supportedChains = [mainnet, polygon, gnosis, base, sepolia];
 
 export const visibleChains = supportedChains.filter((chain) =>
-  (localStorage.getItem('isTestnet') === 'true' &&
-    process.env.REACT_APP_USE_TESTNETS === 'true') ||
-  (localStorage.getItem('isTestnet') === 'true' &&
-    process.env.REACT_APP_USE_TESTNETS === 'false')
-    ? chain.testnet
-    : !chain.testnet
+  isTestnet ? chain.testnet : !chain.testnet
 );
 
 export const parseNftTitle = (collection: NftCollection, nft: Nft): string => {

From 3ae0c572d950ec90e3f2dcfe1426b632794b0c78 Mon Sep 17 00:00:00 2001
From: RanaBug <rana.khy@gmail.com>
Date: Wed, 22 Jan 2025 14:51:19 +0000
Subject: [PATCH 3/3] remove test button

---
 src/apps/pillarx-app/index.tsx | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/apps/pillarx-app/index.tsx b/src/apps/pillarx-app/index.tsx
index efe822af..d5f71769 100644
--- a/src/apps/pillarx-app/index.tsx
+++ b/src/apps/pillarx-app/index.tsx
@@ -180,12 +180,6 @@ const App = () => {
   return (
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
     <Wrapper>
-      <button
-        type="button"
-        onClick={() => localStorage.removeItem('isTestnet')}
-      >
-        Hey
-      </button>
       <PillarXLogo
         src={pillarLogoLight}
         className="object-contain h-[20px] mb-[70px] mobile:h-[18px] mobile:mb-[58px] self-center"