@wise/art 2.6.0 → 2.7.0-beta.1

package/src/illustrations/Illustration.css

@@ -6,3 +6,22 @@ img.wds-illustration {
 .wds-illustration-padding {
   padding: 24px;
 }
+
+.wds-illustration-3d {
+  display: inline-flex;
+}
+
+.wds-illustration-3d-small {
+  width: 200px;
+  height: 200px;
+}
+
+.wds-illustration-3d-medium {
+  width: 300px;
+  height: 300px;
+}
+
+.wds-illustration-3d-large {
+  width: 500px;
+  height: 500px;
+}

package/src/illustrations3d/Illustration3d.stories.tsx

@@ -0,0 +1,89 @@
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+import React, { useEffect } from 'react';
+
+import { Sizes } from '../common';
+import { Assets } from '../illustrations/metadata';
+
+import Illustration3d from './Illustration3d';
+
+export default {
+  title: '3D Illustrations',
+};
+
+export const Confetti = () => {
+  return (
+    <>
+      <Illustration3d name={Assets.CONFETTI} size={Sizes.LARGE} />
+    </>
+  );
+};
+
+export const Globe = () => {
+  return (
+    <>
+      <Illustration3d name={Assets.GLOBE} size={Sizes.LARGE} />
+    </>
+  );
+};
+
+export const Lock = () => {
+  return <Illustration3d name={Assets.LOCK} size={Sizes.LARGE} />;
+};
+
+export const CheckMark = () => {
+  return <Illustration3d name={Assets.CHECK_MARK} size={Sizes.LARGE} />;
+};
+
+export const Flower = () => {
+  return <Illustration3d name={Assets.FLOWER} size={Sizes.LARGE} />;
+};
+
+export const Plane = () => {
+  return <Illustration3d name={Assets.PLANE} size={Sizes.LARGE} />;
+};
+
+export const Graph = () => {
+  return <Illustration3d name={Assets.GRAPH} size={Sizes.LARGE} />;
+};
+
+export const Marble = () => {
+  return <Illustration3d name={Assets.MARBLE} size={Sizes.LARGE} />;
+};
+
+export const MarbleCard = () => {
+  return <Illustration3d name={Assets.MARBLE_CARD} size={Sizes.LARGE} />;
+};
+
+export const MagnifyingGlass = () => {
+  return <Illustration3d name={Assets.MAGNIFYING_GLASS} size={Sizes.LARGE} />;
+};
+
+export const Jars = () => {
+  return <Illustration3d name={Assets.JARS} size={Sizes.LARGE} />;
+};
+
+export const MultiCurrency = () => {
+  return <Illustration3d name={Assets.MULTI_CURRENCY} size={Sizes.LARGE} />;
+};
+
+export const Fallback = () => {
+  // @ts-expect-error navigator has connection property
+  const originalNavigator = window.navigator.connection;
+  // mock slow internet connection
+  // @ts-expect-error navigator has connection property
+  window.navigator.connection = { effectiveType: 'slow-2g' };
+
+  useEffect(() => {
+    // cleanup mock on unmount
+    // @ts-expect-error navigator has connection property
+    return () => (window.navigator.connection = originalNavigator);
+  }, [originalNavigator]);
+
+  return (
+    <>
+      <Illustration3d name={Assets.LOCK} />
+      <br />
+      Mock slow internet connection so it fallback to static illustration
+    </>
+  );
+};

package/src/illustrations3d/Illustration3d.tsx

@@ -0,0 +1,133 @@
+/* eslint-disable fp/no-mutation */
+import { clsx } from 'clsx';
+import { lazy, Suspense, useEffect, useState, LazyExoticComponent } from 'react';
+
+import { LargeSize, MediumSize, SmallSize, Sizes } from '../common';
+
+import Illustration, { Assets } from './../illustrations';
+import { useBattery, isConnectionSlow, isBatteryLow } from './utils';
+
+export type Illustration3dNames =
+  | 'lock'
+  | 'globe'
+  | 'confetti'
+  | 'check-mark'
+  | 'flower'
+  | 'graph'
+  | 'jars'
+  | 'magnifying-glass'
+  | 'marble'
+  | 'marble-card'
+  | 'multi-currency'
+  | 'plane';
+
+export type Props = {
+  name: Illustration3dNames;
+  size?: SmallSize | MediumSize | LargeSize;
+  className?: string;
+};
+
+enum RenderMode {
+  INIT,
+  FALLBACK,
+  ASSET_3D,
+}
+
+const Illustration3d = ({ name, size = Sizes.MEDIUM, className }: Props) => {
+  const [renderMode, setRenderMode] = useState<RenderMode>(RenderMode.INIT);
+  const [inintrinsicSize, setInintrinsicSize] = useState<Props['size']>(size);
+  const batteryData = useBattery();
+
+  useEffect(() => {
+    setRenderMode(
+      isConnectionSlow() || isBatteryLow(batteryData.level)
+        ? RenderMode.FALLBACK
+        : RenderMode.ASSET_3D,
+    );
+    const isMobile: boolean =
+      (typeof window !== undefined && window?.matchMedia('(max-width: 575px)')?.matches) ?? false;
+    if (isMobile) {
+      setInintrinsicSize(Sizes.SMALL);
+    }
+  }, [batteryData]);
+
+  return (
+    <div
+      className={clsx(
+        'wds-illustration-3d',
+        `wds-illustration-3d-${name}`,
+        `wds-illustration-3d-${inintrinsicSize as string}`,
+        className,
+      )}
+    >
+      {renderMode === RenderMode.INIT ? null : renderMode === RenderMode.ASSET_3D ? (
+        <Suspense fallback={null}>{getModel({ name, size: inintrinsicSize })}</Suspense>
+      ) : (
+        <Illustration name={name} size={size} alt="" />
+      )}
+    </div>
+  );
+};
+
+function getModel({ name, size }: Props) {
+  // @ts-expect-error unknown generic
+  let Model: LazyExoticComponent = <></>;
+  const Scene = lazy(() => import('./Scene'));
+  switch (name) {
+    case Assets.LOCK: {
+      Model = lazy(() => import('./models/Lock'));
+      break;
+    }
+    case Assets.GLOBE: {
+      Model = lazy(() => import('./models/Globe'));
+      break;
+    }
+    case Assets.CONFETTI: {
+      Model = lazy(() => import('./models/Confetti'));
+      break;
+    }
+    case Assets.CHECK_MARK: {
+      Model = lazy(() => import('./models/CheckMark'));
+      break;
+    }
+    case Assets.FLOWER: {
+      Model = lazy(() => import('./models/Flower'));
+      break;
+    }
+    case Assets.PLANE: {
+      Model = lazy(() => import('./models/Plane'));
+      break;
+    }
+    case Assets.GRAPH: {
+      Model = lazy(() => import('./models/Graph'));
+      break;
+    }
+    case Assets.MARBLE: {
+      Model = lazy(() => import('./models/Marble'));
+      break;
+    }
+    case Assets.MARBLE_CARD: {
+      Model = lazy(() => import('./models/MarbleCard'));
+      break;
+    }
+    case Assets.MAGNIFYING_GLASS: {
+      Model = lazy(() => import('./models/MagnifyingGlass'));
+      break;
+    }
+    case Assets.JARS: {
+      Model = lazy(() => import('./models/Jars'));
+      break;
+    }
+    case Assets.MULTI_CURRENCY: {
+      Model = lazy(() => import('./models/MultiCurrency'));
+      break;
+    }
+  }
+  return (
+    <Scene assetName={name} size={size}>
+      <Model />
+    </Scene>
+  );
+}
+
+export default Illustration3d;

package/src/illustrations3d/Scene.tsx

@@ -0,0 +1,54 @@
+/* eslint-disable react/forbid-dom-props */
+/* eslint-disable react/function-component-definition */
+import { PerspectiveCamera } from '@react-three/drei';
+import { Canvas } from '@react-three/fiber';
+import type { PropsWithChildren } from 'react';
+import { PCFShadowMap, LinearToneMapping, SRGBColorSpace } from 'three';
+
+import { ImageSizes, LargeSize, MediumSize, Sizes, SmallSize } from '../common';
+import { Assets } from '../illustrations/metadata';
+
+import type { Illustration3dNames } from './Illustration3d';
+
+export type Props = PropsWithChildren<{
+  assetName: Illustration3dNames;
+  size?: SmallSize | MediumSize | LargeSize;
+}>;
+
+export default function Scene({ children, assetName, size = Sizes.MEDIUM }: Props) {
+  const castShadows: boolean = [
+    Assets.LOCK as string,
+    Assets.MULTI_CURRENCY as string,
+    Assets.MAGNIFYING_GLASS as string,
+  ].includes(assetName);
+  return (
+    <Canvas
+      onCreated={({ gl }) => {
+        gl.setClearColor(0x000000, 0);
+        gl.setSize(ImageSizes[size], ImageSizes[size]);
+        gl.clearDepth();
+      }}
+      gl={{
+        alpha: true,
+        antialias: true,
+        pixelRatio: window.devicePixelRatio * 1,
+        toneMapping: LinearToneMapping,
+        outputColorSpace: SRGBColorSpace,
+      }}
+      shadows={{
+        type: PCFShadowMap,
+        enabled: castShadows,
+      }}
+    >
+      <PerspectiveCamera
+        makeDefault
+        far={1000000000000}
+        near={0.1}
+        fov={10.29}
+        aspect={window.innerWidth / window.innerHeight}
+        position={[0, 0, 100]}
+      />
+      {children}
+    </Canvas>
+  );
+}

package/src/illustrations3d/index.ts

@@ -0,0 +1,6 @@
+export { default } from './Illustration3d';
+export type { Props as Illustration3dProps } from './Illustration3d';
+
+export type { Illustration3dNames } from './Illustration3d';
+
+export { is3dIllustrationSupported } from './utils';

package/src/illustrations3d/models/CheckMark.tsx

@@ -0,0 +1,30 @@
+import { useGLTF, useAnimations } from '@react-three/drei';
+import { useFrame, useLoader } from '@react-three/fiber';
+import { useRef } from 'react';
+import { ObjectLoader, LoopOnce } from 'three';
+
+import { defineSrc } from '../utils';
+
+const CheckMark = () => {
+  const modelRef = useRef();
+  const model = useGLTF(defineSrc('check-mark.gltf'));
+  const { animations, scene } = model;
+
+  const lights = useLoader(ObjectLoader, defineSrc('check-mark-light.json'));
+
+  const { mixer, clips } = useAnimations(animations, modelRef);
+  useFrame(() => {
+    model.materials['Standard'].map.offset.x += -0.0025;
+
+    mixer.clipAction(clips[0]).play().setLoop(LoopOnce, 1);
+  });
+
+  return (
+    <>
+      <primitive ref={modelRef} scale={1.4} object={scene} />
+      <primitive object={lights} />
+    </>
+  );
+};
+
+export default CheckMark;

package/src/illustrations3d/models/Confetti.tsx

@@ -0,0 +1,29 @@
+import { useGLTF, useAnimations } from '@react-three/drei';
+import { useFrame, useLoader } from '@react-three/fiber';
+import { useRef } from 'react';
+import { ObjectLoader, LoopOnce } from 'three';
+
+import { defineSrc } from '../utils';
+
+const Confetti = () => {
+  const ref = useRef();
+  const model = useGLTF(defineSrc('confetti.gltf'));
+
+  const lights = useLoader(ObjectLoader, defineSrc('confetti-light.json'));
+
+  const { mixer, clips } = useAnimations(model.animations, ref);
+  useFrame(() => {
+    model.materials['Tapestry WebGL'].map.offset.x += -0.0015;
+
+    mixer.clipAction(clips[0]).play().setLoop(LoopOnce, 1);
+  });
+
+  return (
+    <>
+      <primitive ref={ref} scale={1.5} position={[0, 1.5, 0]} object={model.scene} />
+      <primitive object={lights} />
+    </>
+  );
+};
+
+export default Confetti;

package/src/illustrations3d/models/Flower.tsx

@@ -0,0 +1,24 @@
+import { useGLTF } from '@react-three/drei';
+import { useFrame, useLoader } from '@react-three/fiber';
+import { ObjectLoader } from 'three';
+
+import { defineSrc } from '../utils';
+
+const Flower = () => {
+  const model = useGLTF(defineSrc('flower.gltf'));
+
+  const lights = useLoader(ObjectLoader, defineSrc('flower-light.json'));
+
+  useFrame(() => {
+    model.materials['Tapestry WebGL'].map.offset.x += -0.001;
+  });
+
+  return (
+    <>
+      <primitive scale={1.3} position={[0, -9, 0]} object={model.scene} />
+      <primitive object={lights} />
+    </>
+  );
+};
+
+export default Flower;

package/src/illustrations3d/models/Globe.tsx

@@ -0,0 +1,41 @@
+import { useGLTF } from '@react-three/drei';
+import { useFrame, useLoader } from '@react-three/fiber';
+import { TextureLoader, ObjectLoader } from 'three';
+
+import { defineSrc } from '../utils';
+
+const Globe = () => {
+  const { scene } = useGLTF(defineSrc('globe.gltf'));
+
+  const lights = useLoader(ObjectLoader, defineSrc('globe-light.json'));
+  const wiseLogo = useLoader(TextureLoader, defineSrc('wise-flag-map-bump.jpg'));
+  const planet = scene.getObjectByName('Globe');
+  const orbit = scene.getObjectByName('Coins_Axis_Rotation_Animate');
+
+  scene.traverse((child) => {
+    if (child.name.startsWith('Coin_')) {
+      const mesh = child;
+
+      const material = mesh.material;
+      material.bumpMap = wiseLogo;
+      material.bumpMap.flipY = false;
+      mesh.castShadow = false;
+      mesh.receiveShadow = false;
+    }
+  });
+
+  useFrame(() => {
+    orbit.rotation.y += 0.002;
+
+    planet.material.map.offset.x += -0.0002;
+  });
+
+  return (
+    <>
+      <primitive position={[0, -10, 0]} scale={1.3} object={scene} />
+      <primitive object={lights} />
+    </>
+  );
+};
+
+export default Globe;

package/src/illustrations3d/models/Graph.tsx

@@ -0,0 +1,26 @@
+import { useGLTF } from '@react-three/drei';
+import { useFrame, useLoader } from '@react-three/fiber';
+import { ObjectLoader } from 'three';
+
+import { defineSrc } from '../utils';
+
+const Graph = () => {
+  const model = useGLTF(defineSrc(`graph.gltf`));
+
+  const lights = useLoader(ObjectLoader, defineSrc('graph-light.json'));
+
+  useFrame(() => {
+    const { offset } = model.materials['Standard '].map;
+    offset.x += -0.0015;
+    offset.y += 0.0015;
+  });
+
+  return (
+    <>
+      <primitive scale={1.3} position={[0, -10, 0]} object={model.scene} />
+      <primitive object={lights} />
+    </>
+  );
+};
+
+export default Graph;

package/src/illustrations3d/models/Jars.tsx

@@ -0,0 +1,47 @@
+import { useGLTF, useAnimations } from '@react-three/drei';
+import { useFrame, useLoader } from '@react-three/fiber';
+import { useRef } from 'react';
+import { TextureLoader, ObjectLoader } from 'three';
+
+import { defineSrc } from '../utils';
+
+const Jars = () => {
+  const ref = useRef();
+  const model = useGLTF(defineSrc('jars.gltf'));
+  const lights = useLoader(ObjectLoader, defineSrc('jars-light.json'));
+  const wiseLogo = useLoader(TextureLoader, defineSrc('wise-flag-map-bump.jpg'));
+  const jars = [];
+
+  model.scene.traverse((child) => {
+    if (child.name.startsWith('Coin_')) {
+      child.material.bumpMap = wiseLogo;
+
+      child.material.bumpMap.flipY = false;
+      child.castShadow = false;
+      child.receiveShadow = false;
+    }
+    if (child.name.startsWith('Jar_')) {
+      jars.push(child);
+    }
+  });
+
+  const { mixer, clips } = useAnimations(model.animations, ref);
+
+  useFrame(() => {
+    mixer.clipAction(clips[0]).play();
+
+    jars.forEach((jar) => {
+      jar.material.map.offset.x += 0.001;
+      jar.material.map.offset.y += 0.0;
+    });
+  });
+
+  return (
+    <>
+      <primitive ref={ref} scale={1.3} position={[0, -10, 0]} object={model.scene} />
+      <primitive object={lights} />
+    </>
+  );
+};
+
+export default Jars;

package/src/illustrations3d/models/Lock.tsx

@@ -0,0 +1,38 @@
+import { useGLTF, useAnimations } from '@react-three/drei';
+import { useFrame, useLoader } from '@react-three/fiber';
+import { useRef } from 'react';
+import { LoopOnce, ObjectLoader } from 'three';
+
+import { defineSrc } from '../utils';
+
+const Lock = () => {
+  const ref = useRef();
+  const model = useGLTF(defineSrc('lock.gltf'));
+
+  const lights = useLoader(ObjectLoader, defineSrc('lock-light.json'));
+
+  model.scene.traverse((node) => {
+    if (node.isMesh) {
+      node.castShadow = true;
+      node.receiveShadow = true;
+    }
+  });
+
+  const { clips, mixer } = useAnimations(model.animations, ref);
+  let frame = 0;
+  useFrame(() => {
+    mixer.clipAction(clips[0]).play().setLoop(LoopOnce, 1);
+    model.scene.position.y = Math.sin(frame++ * 0.04) * 0.2;
+
+    model.materials.Standard.map.offset.x += -0.001;
+  });
+
+  return (
+    <>
+      <primitive ref={ref} scale={1.4} object={model.scene} />
+      <primitive object={lights} />
+    </>
+  );
+};
+
+export default Lock;

package/src/illustrations3d/models/MagnifyingGlass.tsx

@@ -0,0 +1,30 @@
+import { useGLTF } from '@react-three/drei';
+import { useFrame, useLoader } from '@react-three/fiber';
+import { ObjectLoader } from 'three';
+
+import { defineSrc } from '../utils';
+
+const MagnifyingGlass = () => {
+  const model = useGLTF(defineSrc(`magnifying-glass.gltf`));
+
+  const lights = useLoader(ObjectLoader, defineSrc('magnifying-glass-light.json'));
+
+  const lens = model.scene.getObjectByName('Optimised_lens');
+
+  useFrame(() => {
+    lens.material.transparent = true;
+
+    lens.material.opacity = 0.8;
+
+    model.materials['Tapestry WebGL'].map.offset.x += -0.0006;
+  });
+
+  return (
+    <>
+      <primitive scale={1.5} position={[0, -12, 0]} object={model.scene} />
+      <primitive object={lights} />
+    </>
+  );
+};
+
+export default MagnifyingGlass;

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.gltf'));
+
+  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.gltf'));
+
+  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;