diff --git a/apps/voucher/app/layout.tsx b/apps/voucher/app/layout.tsx
index 7ae36c20b2e..dcc8c6d5441 100644
--- a/apps/voucher/app/layout.tsx
+++ b/apps/voucher/app/layout.tsx
@@ -12,23 +12,26 @@ const { NEXT_PUBLIC_CORE_URL, NEXT_PUBLIC_VOUCHER_URL } = env
const inter = Inter_Tight({ subsets: ["latin"], display: "auto" })
-export default async function RootLayout({ children }: { children: React.ReactNode }) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+ const coreGqlUrl = NEXT_PUBLIC_CORE_URL
+ const voucherUrl = NEXT_PUBLIC_VOUCHER_URL
+
return (
-
-
+
+
{children}
-
-
+
+
)
diff --git a/apps/voucher/components/nav-bar/navigation.tsx b/apps/voucher/components/nav-bar/navigation.tsx
index 31df9d04423..6719dee9658 100644
--- a/apps/voucher/components/nav-bar/navigation.tsx
+++ b/apps/voucher/components/nav-bar/navigation.tsx
@@ -26,7 +26,6 @@ import {
import { Separator } from "@/components/separator"
-import { useDisplayCurrency } from "@/hooks/useDisplayCurrency"
import { useCurrency } from "@/context/currency-context"
const Navigation: React.FC = () => {
@@ -121,8 +120,7 @@ const NavMenu = ({ username }: { username: string }) => {
}
export const CurrencySwitcher = () => {
- const currencies = useDisplayCurrency()
- const { currency: selectedCurrency, changeCurrency } = useCurrency()
+ const { currency: selectedCurrency, changeCurrency, currencyList } = useCurrency()
return (
@@ -132,7 +130,7 @@ export const CurrencySwitcher = () => {
- {currencies.currencyList.map((currency) => (
+ {currencyList.map((currency) => (
{currency.name} ({currency.id})
diff --git a/apps/voucher/context/currency-context.tsx b/apps/voucher/context/currency-context.tsx
index f822647879c..ea04850c6ec 100644
--- a/apps/voucher/context/currency-context.tsx
+++ b/apps/voucher/context/currency-context.tsx
@@ -1,9 +1,20 @@
"use client"
-import React, { createContext, useContext, useState, useEffect, ReactNode } from "react"
+import React, {
+ createContext,
+ useContext,
+ useState,
+ useEffect,
+ useCallback,
+ useMemo,
+ ReactNode,
+} from "react"
-interface CurrencyContextProps {
+import { useDisplayCurrency } from "@/hooks/useDisplayCurrency"
+
+type CurrencyContextProps = {
currency: string
changeCurrency: (newCurrency: string) => void
+ currencyList: { id: string; name: string }[]
}
const defaultCurrencyState: CurrencyContextProps = {
@@ -11,6 +22,7 @@ const defaultCurrencyState: CurrencyContextProps = {
changeCurrency: (newCurrency: string) => {
console.log(newCurrency)
},
+ currencyList: [],
}
const CurrencyContext = createContext(defaultCurrencyState)
@@ -21,23 +33,36 @@ interface CurrencyProviderProps {
export const CurrencyProvider = ({ children }: CurrencyProviderProps) => {
const [currency, setCurrency] = useState("USD")
+ const { currencyList } = useDisplayCurrency()
useEffect(() => {
const storedCurrency = localStorage.getItem("currency")
- if (storedCurrency) {
+ if (storedCurrency && currencyList.some((c) => c.id === storedCurrency)) {
setCurrency(storedCurrency)
}
- }, [])
+ }, [currencyList])
+
+ const changeCurrency = useCallback(
+ (newCurrency: string) => {
+ if (currencyList.some((c) => c.id === newCurrency)) {
+ setCurrency(newCurrency)
+ localStorage.setItem("currency", newCurrency)
+ }
+ },
+ [currencyList],
+ )
- const changeCurrency = (newCurrency: string) => {
- setCurrency(newCurrency)
- localStorage.setItem("currency", newCurrency)
- }
+ const providerValue = useMemo(
+ () => ({
+ currency,
+ changeCurrency,
+ currencyList,
+ }),
+ [currency, currencyList, changeCurrency],
+ )
return (
-
- {children}
-
+ {children}
)
}