[CS-5121]: Fix crash on wallet connect (#1168)

Author: danibonilha

src/components/coin-icon/RequestVendorLogoIcon.js

@@ -5,7 +5,7 @@ import { Container } from '@cardstack/components';
 
 import { ImgixImage } from '@rainbow-me/images';
 import { position } from '@rainbow-me/styles';
-import colors from '@rainbow-me/styles/colors';
+import colors, { getFallbackTextColor } from '@rainbow-me/styles/colors';
 
 import { initials } from '../../utils';
 import { Centered } from '../layout';
@@ -60,7 +60,7 @@ export default function RequestVendorLogoIcon({
         ) : (
           <Text
             align="center"
-            color={colors.getFallbackTextColor(bgColor)}
+            color={getFallbackTextColor(bgColor)}
             size="smedium"
             weight="semibold"
           >

src/components/collectible/CollectibleImage.js

@@ -2,18 +2,12 @@ import React, { memo, useCallback, useState } from 'react';
 
 import { ImageWithCachedMetadata, ImgixImage } from '@rainbow-me/images';
 import { position } from '@rainbow-me/styles';
-import colors from '@rainbow-me/styles/colors';
+import { getFallbackTextColor } from '@rainbow-me/styles/colors';
 
 import { buildCollectibleName } from '../../helpers/assets';
 import { Centered } from '../layout';
 import { Monospace } from '../text';
 
-const getFallbackTextColor = bg =>
-  colors.getTextColorForBackground(bg, {
-    dark: colors.alpha(colors.blueGreyDark, 0.5),
-    light: colors.white,
-  });
-
 const CollectibleImage = ({
   backgroundColor = 'white',
   imageUrl,

src/styles/colors.js src/styles/colors.tssrc/styles/colors.js renamed to src/styles/colors.ts

@@ -2,7 +2,8 @@ import chroma from 'chroma-js';
 
 import { avatarColor } from '@cardstack/theme';
 
-const buildRgba = (color, alpha = 1) => `rgba(${chroma(color).rgb()},${alpha})`;
+const buildRgba = (color: string, alpha = 1) =>
+  `rgba(${chroma(color).rgb()},${alpha})`;
 
 const colors = {
   appleBlue: '#0E76FD', // '14, 118, 253'
@@ -34,27 +35,16 @@ const colors = {
   alpha: buildRgba,
 };
 
-const isColorLight = targetColor =>
-  chroma(targetColor || colors.white).luminance() > 0.5;
+export const getFallbackTextColor = (backgroundColor?: string) => {
+  const dark = colors.alpha(colors.blueGreyDark, 0.5);
+  const light = colors.whiteLabel;
+  const isColorLight =
+    chroma(backgroundColor || colors.white).luminance() > 0.5;
 
-const getTextColorForBackground = (targetColor, textColors = {}) => {
-  const { dark = colors.black, light = colors.white } = textColors;
-
-  return isColorLight(targetColor) ? dark : light;
+  return isColorLight ? dark : light;
 };
 
-const getFallbackTextColor = bg =>
-  colors.getTextColorForBackground(bg, {
-    dark: colors.alpha(colors.blueGreyDark, 0.5),
-    light: colors.whiteLabel,
-  });
-
 export const getRandomColor = () =>
   Math.floor(Math.random() * avatarColor.length);
 
-export default {
-  ...colors,
-  getTextColorForBackground,
-  getFallbackTextColor,
-  getRandomColor,
-};
+export default colors;