@wise/art 2.7.0-beta.1 → 2.7.0

package/dist/index-76341731.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index-76341731.esm.js","sources":["../src/flags/Flag.tsx","../src/common.ts","../src/illustrations/Illustration.tsx","../src/illustrations/metadata.ts","../src/illustrations3d/utils.ts","../src/illustrations3d/Illustration3d.tsx"],"sourcesContent":[null,null,null,null,null,null],"names":["unknownFlagName","Flag","code","intrinsicSize","useEffect","setFallback","name","fallback","toLowerCase","detailed","_jsx","src","height","onError","Sizes","LARGE","imageSizes","SMALL","MEDIUM","Illustration","forwardRef","id","alt","loading","className","size","disablePadding","ref","_jsxs","children","_Fragment","width","media","srcSet","defineSrc","descriptor","Assets","useBattery","batteryData","setBatteryData","useState","level","getBatteryData","battery","RenderMode"],"mappings":"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"}

package/src/illustrations3d/Illustration3d.stories.tsx

@@ -1,89 +0,0 @@
-/* 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

@@ -1,133 +0,0 @@
-/* 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

@@ -1,54 +0,0 @@
-/* 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

@@ -1,6 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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;