fix: request wallet store ratings from client

haqq-network · Aug 23, 2024 · dfcbaf2 · dfcbaf2
1 parent 8c2267c
commit dfcbaf2
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 61 deletions.
diff --git a/e2e/src/e2e/app.cy.ts b/e2e/src/e2e/app.cy.ts
@@ -1,7 +1,9 @@
 import { getGreeting } from '../support/app.po';
 
 describe('e2e', () => {
-  beforeEach(() => cy.visit('/'));
+  beforeEach(() => {
+    return cy.visit('/');
+  });
 
   it('should display welcome message', () => {
     // Custom command example, see `../support/commands.ts` file

diff --git a/e2e/src/support/app.po.ts b/e2e/src/support/app.po.ts
@@ -1 +1,3 @@
-export const getGreeting = () => cy.get('h1');
+export const getGreeting = () => {
+  return cy.get('h1');
+};
diff --git a/src/app/[locale]/page.tsx b/src/app/[locale]/page.tsx
@@ -5,7 +5,6 @@ import { islamicOpenGraphImages } from '@/lib/shared-metadata';
 import { SupportedLocales } from '@/types';
 import { getChainStatsFromFalconer } from '@/utils/get-chain-stats-data';
 import { getHomePageDataFromFalconer } from '@/utils/get-home-page-data';
-import { getWalletRatings } from '@/utils/get-wallet-ratings';
 
 const title = 'IslamicCoin';
 const description =
@@ -32,7 +31,6 @@ export default async function Page({
   const stats = await getChainStatsFromFalconer();
   const { news, advisoryMembers, executiveMembers, shariahMembers } =
     await getHomePageDataFromFalconer(locale);
-  const storeRatings = await getWalletRatings();
 
   return (
     <MainPage
@@ -41,7 +39,6 @@ export default async function Page({
       advisoryMembers={advisoryMembers}
       executiveMembers={executiveMembers}
       shariahMembers={shariahMembers}
-      storeRatings={storeRatings}
     />
   );
 }
diff --git a/src/app/[locale]/wallet/page.tsx b/src/app/[locale]/wallet/page.tsx
@@ -2,7 +2,6 @@ import type { Metadata } from 'next';
 import { WalletPage } from '@/components/pages/wallet-page';
 import { DEPLOY_URL } from '@/constants';
 import { islamicOpenGraphImages } from '@/lib/shared-metadata';
-import { getWalletRatings } from '@/utils/get-wallet-ratings';
 
 const title = 'Wallet';
 const description =
@@ -20,7 +19,5 @@ export const metadata: Metadata = {
 };
 
 export default async function Page() {
-  const storeRatings = await getWalletRatings();
-
-  return <WalletPage storeRatings={storeRatings} />;
+  return <WalletPage />;
 }
diff --git a/src/components/pages/main-page/main-page.tsx b/src/components/pages/main-page/main-page.tsx
@@ -21,7 +21,7 @@ const WalletBlock = dynamic(
     const { WalletBlock } = await import('./wallet-block');
     return { default: WalletBlock };
   },
-  // { ssr: false },
+  { ssr: false },
 );
 
 export function MainPage({
@@ -30,19 +30,13 @@ export function MainPage({
   shariahMembers,
   executiveMembers,
   stats,
-  storeRatings,
 }: {
   news?: NewsPost[];
   advisoryMembers: Member[];
   shariahMembers: Member[];
   executiveMembers: Member[];
   stats: ChainStats;
-  storeRatings: {
-    appStore: number;
-    googlePlay: number;
-  };
 }) {
-  console.log({ storeRatings });
   return (
     <Fragment>
       <Hero stats={stats} />
@@ -54,7 +48,7 @@ export function MainPage({
         shariahMembers={shariahMembers}
         advisoryMembers={advisoryMembers}
       />
-      <WalletBlock storeRatings={storeRatings} />
+      <WalletBlock />
       <LearnAndGrowBlock />
       <JoinCommunityBlock />
     </Fragment>

diff --git a/src/components/pages/main-page/wallet-block.tsx b/src/components/pages/main-page/wallet-block.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useTranslations } from 'next-intl';
@@ -16,17 +16,17 @@ import {
 } from '@/components/ui/wallet-download-button';
 import { WALLET_LINK_APPLE, WALLET_LINK_GOOGLE } from '@/constants';
 import { getDynamicLink } from '@/utils/get-dynamic-link';
+import {
+  getWalletRatings,
+  WalletStoreRatings,
+} from '@/utils/get-wallet-ratings';
 
-export function WalletBlock({
-  storeRatings,
-}: {
-  storeRatings: {
-    appStore: number;
-    googlePlay: number;
-  };
-}) {
+export function WalletBlock() {
   const t = useTranslations('index-page');
   const posthog = usePostHog();
+  const [storeRatings, setStoreRatings] = useState<WalletStoreRatings | null>(
+    null,
+  );
 
   const { appStoreLink, playMarketLink } = useMemo(() => {
     const distinctId = posthog.get_distinct_id();
@@ -52,6 +52,12 @@ export function WalletBlock({
     };
   }, [posthog]);
 
+  useEffect(() => {
+    getWalletRatings().then((ratings) => {
+      setStoreRatings(ratings);
+    });
+  }, []);
+
   return (
     <section>
       <Container>
@@ -90,20 +96,22 @@ export function WalletBlock({
                 >
                   {t('portfolio-block.text')}
                 </Text>
-                <div className="mt-[24px] flex gap-x-[24px] gap-y-[20px] min-[375px]:gap-x-[32px] md:mt-[36px]">
-                  <div className="flex flex-col gap-y-[6px]">
-                    <span className="font-vcr text-[10px] uppercase leading-[16px] text-white/50 rtl:font-handjet">
-                      {t('portfolio-block.stores.app-store')}
-                    </span>
-                    <RatingBadge rating={storeRatings.appStore} />
+                {storeRatings && (
+                  <div className="mt-[24px] flex gap-x-[24px] gap-y-[20px] min-[375px]:gap-x-[32px] md:mt-[36px]">
+                    <div className="flex flex-col gap-y-[6px]">
+                      <span className="font-vcr text-[10px] uppercase leading-[16px] text-white/50 rtl:font-handjet">
+                        {t('portfolio-block.stores.app-store')}
+                      </span>
+                      <RatingBadge rating={storeRatings.appStore} />
+                    </div>
+                    <div className="flex flex-col gap-y-[6px]">
+                      <span className="font-vcr text-[10px] uppercase leading-[16px] text-white/50 rtl:font-handjet">
+                        {t('portfolio-block.stores.google-play')}
+                      </span>
+                      <RatingBadge rating={storeRatings.googlePlay} />
+                    </div>
                   </div>
-                  <div className="flex flex-col gap-y-[6px]">
-                    <span className="font-vcr text-[10px] uppercase leading-[16px] text-white/50 rtl:font-handjet">
-                      {t('portfolio-block.stores.google-play')}
-                    </span>
-                    <RatingBadge rating={storeRatings.googlePlay} />
-                  </div>
-                </div>
+                )}
                 <div className="hidden lg:mt-[24px] lg:flex lg:flex-row lg:gap-x-[16px]">
                   <div className="w-fit">
                     <Link

diff --git a/src/components/pages/wallet-page.tsx b/src/components/pages/wallet-page.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { Fragment, useMemo } from 'react';
+import { Fragment, useEffect, useMemo, useState } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useTranslations } from 'next-intl';
@@ -15,17 +15,17 @@ import {
 } from '@/components/ui/wallet-download-button';
 import { WALLET_LINK_APPLE, WALLET_LINK_GOOGLE } from '@/constants';
 import { getDynamicLink } from '@/utils/get-dynamic-link';
+import {
+  getWalletRatings,
+  WalletStoreRatings,
+} from '@/utils/get-wallet-ratings';
 
-export function WalletPage({
-  storeRatings,
-}: {
-  storeRatings: {
-    appStore: number;
-    googlePlay: number;
-  };
-}) {
+export function WalletPage() {
   const t = useTranslations('wallet-page');
   const posthog = usePostHog();
+  const [storeRatings, setStoreRatings] = useState<WalletStoreRatings | null>(
+    null,
+  );
 
   const { appStoreLink, playMarketLink } = useMemo(() => {
     const distinctId = posthog.get_distinct_id();
@@ -51,6 +51,12 @@ export function WalletPage({
     };
   }, [posthog]);
 
+  useEffect(() => {
+    getWalletRatings().then((ratings) => {
+      setStoreRatings(ratings);
+    });
+  }, []);
+
   const content = (
     <Fragment>
       <h1 className="text-[46px] font-[600] leading-[52px] md:text-[80px] md:leading-none lg:text-[80px] lg:leading-none">
@@ -65,20 +71,22 @@ export function WalletPage({
       <div className="mt-[20px] max-w-[600px] text-[13px] md:mt-[24px] md:text-[16px] lg:text-[#F5F5F580]">
         {t('text')}
       </div>
-      <div className="mt-[24px] flex gap-x-[24px] md:mt-[36px] md:gap-x-[38px]">
-        <div className="flex flex-col gap-y-[6px]">
-          <span className="text-[10px] uppercase leading-[16px] text-white/50 ltr:font-vcr rtl:font-handjet">
-            {t('stores.app-store')}
-          </span>
-          <RatingBadge rating={storeRatings.appStore} />
-        </div>
-        <div className="flex flex-col gap-y-[6px]">
-          <span className="text-[10px] uppercase leading-[16px] text-white/50 ltr:font-vcr rtl:font-handjet">
-            {t('stores.google-play')}
-          </span>
-          <RatingBadge rating={storeRatings.googlePlay} />
+      {storeRatings && (
+        <div className="mt-[24px] flex gap-x-[24px] md:mt-[36px] md:gap-x-[38px]">
+          <div className="flex flex-col gap-y-[6px]">
+            <span className="text-[10px] uppercase leading-[16px] text-white/50 ltr:font-vcr rtl:font-handjet">
+              {t('stores.app-store')}
+            </span>
+            <RatingBadge rating={storeRatings.appStore} />
+          </div>
+          <div className="flex flex-col gap-y-[6px]">
+            <span className="text-[10px] uppercase leading-[16px] text-white/50 ltr:font-vcr rtl:font-handjet">
+              {t('stores.google-play')}
+            </span>
+            <RatingBadge rating={storeRatings.googlePlay} />
+          </div>
         </div>
-      </div>
+      )}
       <div className="hidden lg:mt-[24px] lg:flex lg:flex-row lg:flex-wrap lg:gap-[16px]">
         <div className="w-fit">
           <Link