From 9e81779cfa2d91144f7a63ab1b05dc273f578380 Mon Sep 17 00:00:00 2001
From: Dimitri POSTOLOV <dmytropostolov@gmail.com>
Date: Sun, 27 Oct 2024 13:30:55 +0300
Subject: [PATCH] Avoid make stripe API calls on `development`. Update
 stripe.tsx (#5743)

---
 packages/web/app/src/lib/billing/stripe.tsx | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/web/app/src/lib/billing/stripe.tsx b/packages/web/app/src/lib/billing/stripe.tsx
index 976b0f7c5..c28823b31 100644
--- a/packages/web/app/src/lib/billing/stripe.tsx
+++ b/packages/web/app/src/lib/billing/stripe.tsx
@@ -1,21 +1,22 @@
-import { ReactElement, ReactNode, Suspense, useRef } from 'react';
+import { FC, ReactNode, Suspense, useState } from 'react';
+import { env } from '@/env/frontend';
 import { Elements as ElementsProvider } from '@stripe/react-stripe-js';
 import { loadStripe } from '@stripe/stripe-js';
 import { getStripePublicKey } from './stripe-public-key';
 
-export const HiveStripeWrapper = ({ children }: { children: ReactNode }): ReactElement => {
-  const stripeRef = useRef<ReturnType<typeof loadStripe> | null>(null);
-
-  if (!stripeRef.current) {
+export const HiveStripeWrapper: FC<{ children: ReactNode }> = ({ children }) => {
+  // eslint-disable-next-line react/hook-use-state -- we don't need setter
+  const [stripe] = useState<ReturnType<typeof loadStripe> | void>(() => {
+    if (env.nodeEnv !== 'production') {
+      return;
+    }
     const stripePublicKey = getStripePublicKey();
     if (stripePublicKey) {
-      stripeRef.current = loadStripe(stripePublicKey);
+      return loadStripe(stripePublicKey);
     }
-  }
+  });
 
-  const stripe = stripeRef.current;
-
-  if (stripe === null) {
+  if (!stripe) {
     return children as any;
   }