✨ bump lumen

Author: LucasWerey

.github/workflows/verify.yml

@@ -35,6 +35,9 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
+      - name: Knip
+        run: pnpm knip
+
       - name: Lint
         run: pnpm lint
 

lib/__mocks__/lumen-ui-react.tsx

@@ -5,6 +5,9 @@ type MediaImageProps = {
   size?: number;
   shape?: string;
   alt?: string;
+  loading?: boolean;
+  fallback?: string;
+  imgLoading?: string;
 } & ComponentPropsWithRef<'div'>;
 
 type DotSymbolProps = {
@@ -18,8 +21,19 @@ type SkeletonProps = {
   component?: string;
 } & ComponentPropsWithRef<'div'>;
 
-export const MediaImage = ({ src, alt }: MediaImageProps) =>
-  src ? <img src={src} alt={alt} role="img" /> : <div role="img" />;
+export const MediaImage = ({ src, alt, loading, fallback }: MediaImageProps) => {
+  if (loading) {
+    return (
+      <div role="img">
+        <Skeleton />
+      </div>
+    );
+  }
+  if (src) {
+    return <img src={src} alt={alt} role="img" />;
+  }
+  return <div role="img">{fallback ? fallback[0]?.toUpperCase() : null}</div>;
+};
 
 export const DotSymbol = ({ children, src }: DotSymbolProps) => (
   <div>

lib/__tests__/CryptoIcon.test.tsx

@@ -28,10 +28,8 @@ describe('CryptoIcon', () => {
       render(<CryptoIcon ledgerId="bitcoin" ticker="BTC" />);
 
       await waitFor(() => {
-        expect(screen.getByRole('img')).toBeInTheDocument();
+        expect(screen.getByRole('img')).toHaveAttribute('src', `${CRYPTO_ICONS_CDN_BASE}/BTC.png`);
       });
-
-      expect(screen.getByRole('img')).toHaveAttribute('src', `${CRYPTO_ICONS_CDN_BASE}/BTC.png`);
     });
   });
 
@@ -46,26 +44,22 @@ describe('CryptoIcon', () => {
       render(<CryptoIcon ledgerId="bitcoin" ticker="BTC" />);
 
       await waitFor(() => {
-        expect(screen.getByRole('img')).toBeInTheDocument();
+        expect(screen.getByRole('img')).toHaveAttribute(
+          'src',
+          coinGeckoMock?.find((i) => i.ledgerId === 'bitcoin')?.data.img
+        );
       });
-
-      expect(screen.getByRole('img')).toHaveAttribute(
-        'src',
-        coinGeckoMock?.find((i) => i.ledgerId === 'bitcoin')?.data.img
-      );
     });
 
     it('renders CoinGecko icon when ledgerId not in CDN', async () => {
       render(<CryptoIcon ledgerId="decred" ticker="DCR" />);
 
       await waitFor(() => {
-        expect(screen.getByRole('img')).toBeInTheDocument();
+        expect(screen.getByRole('img')).toHaveAttribute(
+          'src',
+          coinGeckoMock?.find((i) => i.ledgerId === 'decred')?.data.img
+        );
       });
-
-      expect(screen.getByRole('img')).toHaveAttribute(
-        'src',
-        coinGeckoMock?.find((i) => i.ledgerId === 'decred')?.data.img
-      );
     });
   });
 
@@ -83,10 +77,8 @@ describe('CryptoIcon', () => {
       render(<CryptoIcon ledgerId="bitcoin" ticker="BTC" />);
 
       await waitFor(() => {
-        expect(screen.getByRole('img')).toBeInTheDocument();
+        expect(screen.getByRole('img')).toHaveTextContent('B');
       });
-
-      expect(screen.getByRole('img')).toHaveTextContent('B');
     });
 
     it('renders ? when ticker is empty', async () => {
@@ -102,10 +94,8 @@ describe('CryptoIcon', () => {
       render(<CryptoIcon ledgerId="bitcoin" ticker="" />);
 
       await waitFor(() => {
-        expect(screen.getByRole('img')).toBeInTheDocument();
+        expect(screen.getByRole('img')).toHaveTextContent('?');
       });
-
-      expect(screen.getByRole('img')).toHaveTextContent('?');
     });
   });
 

lib/knip.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://unpkg.com/knip@6/schema.json",
+  "entry": ["src/index.native.ts", "scripts/*.{ts,js}"],
+  "project": ["src/**/*.{ts,tsx}"],
+  "ignoreDependencies": [
+    "@storybook/addon-controls",
+    "@storybook/addon-react-native-web",
+    "@typescript-eslint/parser",
+    "babel-loader",
+    "css-loader",
+    "postcss-loader",
+    "react-native-web",
+    "style-loader",
+    "zopflipng-bin"
+  ],
+  "ignoreBinaries": ["sb-rn-get-stories"],
+  "rules": {
+    "optionalPeerDependencies": "off"
+  }
+}

lib/package.json

@@ -37,6 +37,7 @@
     "compress": "bash ../compress/compress.sh",
     "generate:index:help": "echo \"Generates the index.json file from the '_record.json' file\"",
     "generate:index": "tsx scripts/generate_index.ts",
+    "knip": "knip",
     "lint:fix": "eslint 'src/**/*.{ts,tsx}' --fix",
     "lint": "eslint 'src/**/*.{ts,tsx}'",
     "storybook-generate": "sb-rn-get-stories",
@@ -46,9 +47,9 @@
     "test": "jest"
   },
   "devDependencies": {
-    "@ledgerhq/lumen-design-core": "^0.1.11",
-    "@ledgerhq/lumen-ui-react": "^0.1.24",
-    "@ledgerhq/lumen-ui-rnative": "^0.1.25",
+    "@ledgerhq/lumen-design-core": "^0.1.13",
+    "@ledgerhq/lumen-ui-react": "^0.1.31",
+    "@ledgerhq/lumen-ui-rnative": "^0.1.32",
     "@ledgerhq/wallet-api-client": "^1.5.9",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
@@ -80,6 +81,7 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jsonfile": "^6.2.0",
+    "knip": "^6.12.2",
     "msw": "1.3.3",
     "postcss": "^8.4.0",
     "postcss-loader": "^8.0.0",