diff --git a/apps/web/package.json b/apps/web/package.json
index 3bebdc0bb..3c3eff92c 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -7,6 +7,7 @@
"homepage": "https://notesnook.com/",
"repository": "https://github.com/streetwriters/notesnook",
"dependencies": {
+ "@brixtol/currency-symbols": "^1.1.1",
"@mdi/js": "^6.5.95",
"@mdi/react": "^1.4.0",
"@notesnook/crypto": "^1.0.0",
@@ -20,7 +21,6 @@
"clipboard-polyfill": "^3.0.3",
"cogo-toast": "^4.2.3",
"compressorjs": "^1.0.7",
- "currency-symbol-map": "^5.0.1",
"dayjs": "^1.10.4",
"emotion-theming": "^10.0.19",
"event-source-polyfill": "^1.0.25",
diff --git a/apps/web/src/components/dialogs/buy-dialog/buy-dialog.tsx b/apps/web/src/components/dialogs/buy-dialog/buy-dialog.tsx
index 136f4c6ef..034c7329b 100644
--- a/apps/web/src/components/dialogs/buy-dialog/buy-dialog.tsx
+++ b/apps/web/src/components/dialogs/buy-dialog/buy-dialog.tsx
@@ -3,7 +3,6 @@ import { Text, Flex, Button } from "rebass";
import * as Icon from "../../icons";
import { useStore as useUserStore } from "../../../stores/user-store";
import { useStore as useThemeStore } from "../../../stores/theme-store";
-import getSymbolFromCurrency from "currency-symbol-map";
import Modal from "react-modal";
import { useTheme } from "emotion-theming";
import { ReactComponent as Rocket } from "../../../assets/rocket.svg";
@@ -20,6 +19,7 @@ import { showToast } from "../../../utils/toast";
import { TaskManager } from "../../../common/task-manager";
import { db } from "../../../common/db";
import { useCheckoutStore } from "./store";
+import { getCurrencySymbol } from "./helpers";
type BuyDialogProps = {
couponCode?: string;
@@ -251,7 +251,7 @@ function TrialOrUpgrade(props: TrialOrUpgradeProps) {
) : (
- Starting from {getSymbolFromCurrency(plan.currency)}
+ Starting from {getCurrencySymbol(plan.currency)}
{plan.price.gross}
{formatPeriod(plan.period)}
@@ -523,7 +523,7 @@ function formatPrice(
negative = false
) {
const formattedPeriod = period ? formatPeriod(period) : "";
- const currencySymbol = getSymbolFromCurrency(currency);
+ const currencySymbol = getCurrencySymbol(currency);
const prefix = negative ? "-" : "";
return `${prefix}${currencySymbol}${price}${formattedPeriod}`;
}
diff --git a/apps/web/src/components/dialogs/buy-dialog/helpers.ts b/apps/web/src/components/dialogs/buy-dialog/helpers.ts
new file mode 100644
index 000000000..0523f46a7
--- /dev/null
+++ b/apps/web/src/components/dialogs/buy-dialog/helpers.ts
@@ -0,0 +1,8 @@
+import {
+ getCurrencySymbol as _getSymbol,
+ ICurrencySymbols,
+} from "@brixtol/currency-symbols";
+
+export function getCurrencySymbol(currency: string) {
+ return _getSymbol(currency as keyof ICurrencySymbols) || currency;
+}
diff --git a/apps/web/src/components/dialogs/buy-dialog/plan-list.tsx b/apps/web/src/components/dialogs/buy-dialog/plan-list.tsx
index 4221fd31a..8e6f8ee9d 100644
--- a/apps/web/src/components/dialogs/buy-dialog/plan-list.tsx
+++ b/apps/web/src/components/dialogs/buy-dialog/plan-list.tsx
@@ -1,10 +1,10 @@
import { Text, Flex, Button } from "rebass";
import * as Icon from "../../icons";
-import getSymbolFromCurrency from "currency-symbol-map";
import { ReactComponent as Nomad } from "../../../assets/nomad.svg";
import { Period, Plan } from "./types";
import { PLAN_METADATA, usePlans } from "./plans";
import { useEffect } from "react";
+import { getCurrencySymbol } from "./helpers";
type PlansListProps = {
onPlanSelected: (plan: Plan) => void;
@@ -92,13 +92,13 @@ function RecurringPricing(props: RecurringPricingProps) {
fontSize={"body"}
sx={{ textDecorationLine: "line-through" }}
>
- {getSymbolFromCurrency(plan.currency)}
+ {getCurrencySymbol(plan.currency)}
{plan.originalPrice.gross}
)}
- {getSymbolFromCurrency(plan.currency)}
+ {getCurrencySymbol(plan.currency)}
{plan.price.gross}
{formatPeriod(plan.period)}