fix: curreny and text color display

apps/storefront/src/App.tsx

@@ -59,8 +59,6 @@ export default function App() {
   // isLoadComplete
   const isLoadComplete = useSelector(globalStateSelector)
 
-  console.log(isLoadComplete, 'isLoadComplete')
-
   const [{ isOpen, openUrl, params }, setOpenPage] = useB3AppOpen({
     isOpen: false,
     isLoaddingComplete: isLoadComplete,

apps/storefront/src/components/outSideComponents/utils/b3CustomStyles.ts

@@ -1,6 +1,13 @@
 import { SnackbarOrigin, SxProps } from '@mui/material'
+import { grey } from '@mui/material/colors'
 import { trim } from 'lodash'
 
+interface RGBColor {
+  r: number
+  g: number
+  b: number
+}
+
 export const getLocation = (location: string): SnackbarOrigin => ({
   vertical: location.includes('top') ? 'top' : 'bottom',
   horizontal: location.includes('Left') ? 'left' : 'right',
@@ -24,15 +31,64 @@ export const getStyles = (customCss: string): SxProps => {
   return sx
 }
 
-export const getContrastColor = (color: string) => {
-  const hex = color.replace('#', '')
-  const r = parseInt(hex.slice(0, 2), 16)
-  const g = parseInt(hex.slice(2, 4), 16)
-  const b = parseInt(hex.slice(4, 6), 16)
+const decomposeColor = (color: string): RGBColor => {
+  let hex = color.slice(1)
+
+  if (hex.length === 3) {
+    hex = hex
+      .split('')
+      .map((char) => char + char)
+      .join('')
+  }
 
-  const brightness = (r * 299 + g * 587 + b * 114) / 1000
+  const rgb = {
+    r: parseInt(hex.slice(0, 2), 16),
+    g: parseInt(hex.slice(2, 4), 16),
+    b: parseInt(hex.slice(4, 6), 16),
+  }
+
+  return rgb
+}
+
+const getLuminance = (color: string): number => {
+  const rgb = decomposeColor(color)
+  const lumR =
+    rgb.r / 255 <= 0.03928
+      ? rgb.r / 255 / 12.92
+      : ((rgb.r / 255 + 0.055) / 1.055) ** 2.4
+  const lumG =
+    rgb.g / 255 <= 0.03928
+      ? rgb.g / 255 / 12.92
+      : ((rgb.g / 255 + 0.055) / 1.055) ** 2.4
+  const lumB =
+    rgb.b / 255 <= 0.03928
+      ? rgb.b / 255 / 12.92
+      : ((rgb.b / 255 + 0.055) / 1.055) ** 2.4
+  return 0.2126 * lumR + 0.7152 * lumG + 0.0722 * lumB
+}
+
+const getContrastRatio = (foreground: string, background: string): number => {
+  const lumA = getLuminance(foreground)
+  const lumB = getLuminance(background)
+  return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05)
+}
+
+export const getContrastColor = (color: string) => {
+  let brightness: string | undefined
+  const res = Object.keys(grey).find(
+    (key) => getContrastRatio(grey[key as keyof typeof grey], color) > 4.5
+  )
+  if (res) {
+    brightness = grey[res as keyof typeof grey]
+  } else {
+    const hex = color.replace('#', '')
+    const r = parseInt(hex.slice(0, 2), 16)
+    const g = parseInt(hex.slice(2, 4), 16)
+    const b = parseInt(hex.slice(4, 6), 16)
+    brightness = (r * 299 + g * 587 + b * 114) / 1000 >= 150 ? '#000' : '#fff'
+  }
 
-  return brightness >= 128 ? '#000' : '#fff'
+  return brightness || '#fff'
 }
 
 export const b3HexToRgb = (color: string, transparency?: number) => {

apps/storefront/src/utils/currencyUtils.ts

@@ -41,19 +41,9 @@ const getDefaultCurrencyInfo = () => {
   const currencies = B3SStorage.get('currencies')
   const { currencies: currencyArr } = currencies
 
-  const activeCurrency = getActiveCurrencyInfo()
-
-  let defaultCurrency: CurrencyProps
-  if (activeCurrency.enabled) {
-    defaultCurrency = currencyArr.find(
-      (currency: CurrencyProps) => +currency.id === +activeCurrency.id
-    )
-  } else {
-    defaultCurrency = currencyArr.find(
-      (currency: CurrencyProps) => currency.is_default
-    )
-  }
-
+  const defaultCurrency: CurrencyProps = currencyArr.find(
+    (currency: CurrencyProps) => currency.is_default
+  )
   return defaultCurrency
 }