@wise/art 0.0.0-experimental-1d6d788

package/src/illustrations3d/models/Marble.tsx

@@ -0,0 +1,47 @@
+import { useGLTF } from '@react-three/drei';
+import { useFrame, useLoader } from '@react-three/fiber';
+import { ObjectLoader } from 'three';
+
+import { defineSrc } from '../utils';
+
+const Marble = () => {
+  const model = useGLTF(defineSrc('marble.glb'));
+
+  const lights = useLoader(ObjectLoader, defineSrc('marble-light.json'));
+
+  const sphere = model.scene.getObjectByName('Sphere1');
+  sphere.material.depthTest = true;
+
+  const stripeBottom = model.scene.getObjectByName('Strip_Center_Big_(4th_-_Bottom_Layer)');
+  stripeBottom.material.depthTest = false;
+  stripeBottom.renderOrder = 1;
+
+  const stripeLeft = model.scene.getObjectByName('Strip_Left_(3rd)');
+  stripeLeft.material.depthTest = false;
+  stripeLeft.renderOrder = 2;
+
+  const stripeRight = model.scene.getObjectByName('Strip_Left_(3rd)');
+  stripeRight.material.depthTest = false;
+  stripeRight.renderOrder = 3;
+
+  const stripeTop = model.scene.getObjectByName('Strip_Center_(1st_-_Top_Layer)');
+  stripeTop.material.depthTest = false;
+  stripeTop.renderOrder = 4;
+
+  const animatedMaps = [sphere, stripeTop, stripeBottom, stripeLeft, stripeRight].map(
+    (object) => object.material.map,
+  );
+
+  useFrame(() => {
+    animatedMaps.forEach((map) => (map.offset.y += -0.0015));
+  });
+
+  return (
+    <>
+      <primitive scale={1.4} position={[0, -11, 0]} object={model.scene} />
+      <primitive object={lights} />
+    </>
+  );
+};
+
+export default Marble;

package/src/illustrations3d/models/MarbleCard.tsx

@@ -0,0 +1,50 @@
+import { useGLTF } from '@react-three/drei';
+import { useFrame, useLoader } from '@react-three/fiber';
+import { ObjectLoader } from 'three';
+
+import { defineSrc } from '../utils';
+
+const MarbleCard = () => {
+  const model = useGLTF(defineSrc('marble-card.glb'));
+
+  const lights = useLoader(ObjectLoader, defineSrc('marble-card-light.json'));
+  const sphere = model.scene.getObjectByName('Sphere1');
+  sphere.material.depthTest = true;
+
+  const stripeBottom = model.scene.getObjectByName('Strip_Center_Big_(4th_-_Bottom_Layer)');
+  stripeBottom.material.depthTest = false;
+  stripeBottom.renderOrder = 1;
+
+  const stripeLeft = model.scene.getObjectByName('Strip_Left_(3rd)');
+  stripeLeft.material.depthTest = false;
+  stripeLeft.renderOrder = 2;
+
+  const stripeRight = model.scene.getObjectByName('Strip_Right_(2nd)');
+  stripeRight.material.depthTest = false;
+  stripeRight.renderOrder = 3;
+
+  const stripeTop = model.scene.getObjectByName('Strip_Center_(1st_-_Top_Layer)');
+  stripeTop.material.depthTest = false;
+  stripeTop.renderOrder = 4;
+
+  const card = model.scene.getObjectByName('Plane');
+  card.material.depthTest = false;
+  card.material.metalness = 0;
+
+  const animatedMaps = [sphere, stripeTop, stripeBottom, stripeLeft, stripeRight].map(
+    (object) => object.material.map,
+  );
+
+  useFrame(() => {
+    animatedMaps.forEach((map) => (map.offset.y += -0.0015));
+  });
+
+  return (
+    <>
+      <primitive scale={1.4} position={[0, -10, 0]} object={model.scene} />
+      <primitive object={lights} />
+    </>
+  );
+};
+
+export default MarbleCard;

package/src/illustrations3d/models/MultiCurrency.tsx

@@ -0,0 +1,58 @@
+import { useGLTF, useAnimations } from '@react-three/drei';
+import { useFrame, useLoader } from '@react-three/fiber';
+import { useRef } from 'react';
+import { ObjectLoader, TextureLoader, Color } from 'three';
+
+import { defineSrc } from '../utils';
+
+const MultiCurrency = () => {
+  const ref = useRef();
+  const model = useGLTF(defineSrc('multi-currency.glb'));
+
+  const lights = useLoader(ObjectLoader, defineSrc('multi-currency-light.json'));
+  const wiseLogo = useLoader(TextureLoader, defineSrc('wise-flag-map-bump.jpg'));
+
+  const animatedMaps = [];
+
+  model.scene.traverse((child) => {
+    if (child.name.includes('Note')) {
+      child.castShadow = true;
+      child.receiveShadow = true;
+    }
+
+    if (child.name.startsWith('Coin_') && child.isMesh) {
+      const { material } = child;
+      material.bumpMap = wiseLogo;
+      material.bumpMap.flipY = false;
+      material.bumpScale = 1;
+      material.color = new Color(0.49, 0.49, 0.49);
+      child.castShadow = false;
+      child.receiveShadow = false;
+    }
+
+    if (child.name.startsWith('NoteBase_') && child.isMesh) {
+      animatedMaps.push(child.material.map);
+    }
+
+    if (child.name.includes('Wise') && child.isMesh) {
+      animatedMaps.push(child.material.map);
+    }
+  });
+
+  const { mixer, clips } = useAnimations(model.animations, ref);
+  useFrame(() => {
+    animatedMaps.forEach((animatedMap) => {
+      animatedMap.offset.x += 0.001;
+    });
+    mixer.clipAction(clips[0]).play();
+  });
+
+  return (
+    <>
+      <primitive ref={ref} position={[-0.5, -10, 0]} scale={1.3} object={model.scene} />
+      <primitive object={lights} />
+    </>
+  );
+};
+
+export default MultiCurrency;

package/src/illustrations3d/models/Plane.tsx

@@ -0,0 +1,33 @@
+import { useGLTF, useAnimations } from '@react-three/drei';
+import { useFrame, useLoader } from '@react-three/fiber';
+import { useRef } from 'react';
+import { ObjectLoader } from 'three';
+
+import { defineSrc } from '../utils';
+
+const Plane = () => {
+  const ref = useRef();
+  const model = useGLTF(defineSrc('plane.glb'));
+
+  const lights = useLoader(ObjectLoader, defineSrc('plane-light.json'));
+  const plane = model.scene.getObjectByName('Plane_6_update');
+
+  const { mixer, clips } = useAnimations(model.animations, ref);
+  useFrame(() => {
+    model.materials['Tapestry WebGL'].map.offset.y += 0.018;
+
+    plane.position.x = 0.45;
+
+    plane.position.y = 7.5;
+    mixer.clipAction(clips[0]).play();
+  });
+
+  return (
+    <>
+      <primitive ref={ref} scale={1.3} position={[0, -7, 0]} object={model.scene} />
+      <primitive object={lights} />
+    </>
+  );
+};
+
+export default Plane;

package/src/illustrations3d/utils.spec.tsx

@@ -0,0 +1,36 @@
+/* eslint-disable testing-library/await-async-utils */
+import '@testing-library/jest-dom';
+import { waitFor, renderHook } from '@testing-library/react';
+
+import { useBattery } from './utils';
+
+describe('utils for 3D', () => {
+  describe('useBattery hook', () => {
+    it('returns default value when navigator#getBattery not implemented', () => {
+      const { result } = renderHook(() => useBattery());
+
+      expect(result.current).not.toBeNull();
+    });
+
+    it('returns device battery data when navigator#getBattery is implemented (mocked)', () => {
+      const testBatteryData = { level: 0.792 };
+      // eslint-disable-next-line jest/prefer-spy-on
+      navigator.getBattery = jest.fn().mockReturnValue(testBatteryData);
+      const { result } = renderHook(() => useBattery());
+
+      void waitFor(() => {
+        expect(result.current).toBe(testBatteryData);
+      });
+    });
+
+    it('returns default value when navigator#getBattery is implemented but not function', () => {
+      // eslint-disable-next-line jest/prefer-spy-on
+      navigator.getBattery = { level: 0.792 };
+      const { result } = renderHook(() => useBattery());
+
+      void waitFor(() => {
+        expect(result.current).toBe({ level: 1 });
+      });
+    });
+  });
+});

package/src/illustrations3d/utils.ts

@@ -0,0 +1,73 @@
+import { useState, useEffect } from 'react';
+
+import type { IllustrationNames } from '../illustrations/metadata';
+
+export function useBattery() {
+  const [batteryData, setBatteryData] = useState<{ level: number }>({ level: 1.0 });
+
+  useEffect(() => {
+    const getBatteryData = async () => {
+      // @ts-expect-error .getBattery exists in Navigator interface
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      const battery = await navigator.getBattery();
+
+      setBatteryData({
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        level: battery?.level,
+      });
+    };
+    // Check if the browser supports the Battery API
+    if (
+      'getBattery' in navigator &&
+      navigator.getBattery !== undefined &&
+      typeof navigator.getBattery === 'function'
+    ) {
+      void getBatteryData();
+    }
+  }, []);
+
+  return batteryData;
+}
+
+export function isBatteryLow(batteryLevel: number): boolean {
+  return batteryLevel < 0.2;
+}
+
+export function isConnectionSlow(): boolean {
+  // @ts-expect-error .connection prop exists in Navigator interface
+  const { connection } = window.navigator;
+  if (connection === undefined) {
+    return false;
+  }
+  return (
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    ['slow-2g', '2g'].includes(connection?.effectiveType as string) ||
+    // @ts-expect-error Property 'connection' does exist on type 'Navigator'
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    navigator?.connection?.saveData === true
+  );
+}
+
+export function defineSrc(asset: string): string {
+  return `https://wise.com/web-art/assets/illustrations3d/${asset}`;
+}
+
+const illustration3DNames = [
+  'lock',
+  'globe',
+  'confetti',
+  'check-mark',
+  'flower',
+  'graph',
+  'jars',
+  'magnifying-glass',
+  'marble',
+  'marble-card',
+  'multi-currency',
+  'plane',
+  'interest',
+];
+
+export function isIllustrationSupport3D(asset: IllustrationNames): boolean {
+  return illustration3DNames.includes(asset);
+}

package/src/index.css

@@ -0,0 +1,3 @@
+@import './illustrations/Illustration.css';
+@import './flags/Flag.css';
+@import './rive/RiveIllustration.css';

package/src/index.ts

@@ -0,0 +1,12 @@
+export { Flag } from './flags';
+export { default as Illustration } from './illustrations';
+export { default as Illustration3D } from './illustrations3d';
+
+export { Assets } from './illustrations';
+export { Sizes } from './common';
+
+export type { FlagProps } from './flags';
+export type { IllustrationNames, IllustrationProps } from './illustrations';
+export type { Illustration3DNames, Illustration3DProps } from './illustrations3d';
+
+export { isIllustrationSupport3D } from './illustrations3d';

package/src/rive/RiveIllustration.css

@@ -0,0 +1,18 @@
+.wds-illustration-rive {
+  display: inline-flex;
+}
+
+.wds-illustration-rive-small {
+  width: 200px;
+  height: 200px;
+}
+
+.wds-illustration-rive-medium {
+  width: 300px;
+  height: 300px;
+}
+
+.wds-illustration-rive-large {
+  width: 500px;
+  height: 500px;
+}

package/src/rive/RiveIllustration.stories.tsx

@@ -0,0 +1,20 @@
+import type { StoryObj } from '@storybook/react-vite';
+
+import RiveIllustrationExperimental from './RiveIllustration';
+
+export default {
+  component: RiveIllustrationExperimental,
+  title: 'Rive Illustrations (Experimental)',
+};
+
+type Story = StoryObj<typeof RiveIllustrationExperimental>;
+
+export const DocumentScan: Story = {
+  tags: ['autodocs'],
+  render: () => (
+    <>
+      <RiveIllustrationExperimental name="document-scan" />
+      <p>Note: This API is experimental and may be subject to changes or removal.</p>
+    </>
+  ),
+};

package/src/rive/RiveIllustration.tsx

@@ -0,0 +1,54 @@
+import { useRive } from "@rive-app/react-webgl2";
+import clsx from "clsx";
+import { useEffect, useState } from "react";
+
+import { Sizes } from "../common";
+import type { Illustration3DProps } from "../illustrations3d";
+
+export interface RiveProps {
+  src: string;
+  animationNames?: string | string[];
+}
+
+const Rive = ({ src, animationNames }: RiveProps) => {
+  const { RiveComponent } = useRive({
+    src,
+    animations: animationNames,
+    autoplay: true,
+  });
+
+  return (<RiveComponent />);
+};
+
+export type Props = {
+  name: 'document-scan';
+  size?: Illustration3DProps["size"];
+  className?: Illustration3DProps["className"];
+};
+
+const RiveIllustrationExperimental = ({ name, size: sizeProp = Sizes.MEDIUM, className }: Props) => {
+  const [size, setSize] = useState<Props['size']>(sizeProp);
+  useEffect(() => {
+    const isMobile: boolean =
+      (typeof window !== "undefined" && window?.matchMedia('(max-width: 575px)')?.matches) ?? false;
+    if (isMobile) {
+      setSize(Sizes.SMALL);
+    }
+  }, []);
+  return (
+    <div className={clsx('wds-illustration-rive', `wds-illustration-rive-${name}`, `wds-illustration-rive-${size}`, className)}>
+      {(() => {
+        if (name === 'document-scan') {
+          return (
+            <Rive
+              src="https://wise.com/web-art/assets/illustrations3d/rive/doc-scan.riv"
+              animationNames={["Scan Line Appearing", "Scan Line Moving"]}
+            />);
+        }
+        return null;
+      })()}
+    </div>
+  );
+};
+
+export default RiveIllustrationExperimental;

package/src/rive/index.ts

@@ -0,0 +1,2 @@
+export type { Props as RiveIllustrationExperimentalProps } from './RiveIllustration';
+export { default as RiveIllustrationExperimental } from './RiveIllustration';