feat: move to @brixtol/currency-symbols for currency symbols

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",

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) {
         <Icon.Loading sx={{ mt: 4 }} />
       ) : (
         <Text variant={"body"} fontSize="title" mt={4}>
-          Starting from {getSymbolFromCurrency(plan.currency)}
+          Starting from {getCurrencySymbol(plan.currency)}
           {plan.price.gross}
           {formatPeriod(plan.period)}
         </Text>
@@ -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}`;
 }

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;
+}

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}
         </Text>
       )}
       <Text>
         <Text as="span" fontSize="subtitle">
-          {getSymbolFromCurrency(plan.currency)}
+          {getCurrencySymbol(plan.currency)}
           {plan.price.gross}
         </Text>
         {formatPeriod(plan.period)}