upgradin' Vite & its plugins 🎹

packages/ui/package.json

@@ -22,6 +22,8 @@
     "@chakra-ui/react": "^1.8.8",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
+    "@react-three/fiber": "^8.10.1",
+    "@types/three": "^0.149.0",
     "@walletconnect/web3-provider": "^1.8.0",
     "dotenv": "^16.0.0",
     "ethers": "^5.6.9",
@@ -36,14 +38,15 @@
     "react-hook-form": "^7.34.0",
     "react-markdown": "^8.0.3",
     "react-router-dom": "^6.3.0",
-    "util": "^0.12.4",
+    "three": "^0.149.0",
+    "util": "^0.12.5",
     "web3modal": "^1.9.8"
   },
   "devDependencies": {
     "@babel/core": "^7.18.10",
     "@babel/plugin-transform-modules-commonjs": "^7.18.6",
     "@babel/preset-flow": "^7.18.6",
-    "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
+    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@originjs/vite-plugin-commonjs": "^1.0.3",
     "@rollup/plugin-commonjs": "^22.0.1",
     "@rollup/plugin-inject": "^4.0.4",
@@ -81,8 +84,8 @@
     "ts-loader": "^9.3.1",
     "ts-node": "^10.9.1",
     "tsconfig-paths-webpack-plugin": "^4.0.0",
-    "typescript": "^4.7.4",
-    "vite": "^3.0.0",
+    "typescript": "^4.9.5",
+    "vite": "^4.0.4",
     "webpack": "^5.74.0",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-cli": "^4.10.0",

packages/ui/src/components/ThreeDScene.tsx

@@ -0,0 +1,30 @@
+import React, { Suspense } from 'react'
+import { Canvas } from '@react-three/fiber'
+import { Stage, OrbitControls, useGLTF } from '@react-three/drei'
+
+export const Model = ({ model }: { model: string }) => {
+  const { scene } = useGLTF(model)
+
+  return (
+    <primitive object={scene} />
+  )
+}
+
+export const ThreeDScene = ({ model }: { model: string }) => {
+
+  return (
+    <Canvas>
+      <Suspense fallback={null}>
+        <Model {...{ model }}/>
+        <OrbitControls
+          autoRotate
+          autoRotateSpeed={0.05}
+          enableZoom={false}
+          makeDefault
+          minPolarAngle={Math.PI / 2}
+          maxPolarAngle={Math.PI / 2}
+        />
+      </Suspense>
+    </Canvas>
+ )
+}

packages/ui/src/config.tsx

@@ -29,7 +29,7 @@ export const ipfsLinkPattern = (
     (typeof IPFS_LINK_PATTERN !== 'undefined') ? (
       IPFS_LINK_PATTERN
     ) : (
-      'https://{v1cid}.ipfs.nftstorage.link/{path}'
+      'https://nftstorage.link/{protocol}/{v1cid}/{path}'
     )
   )
 )

packages/ui/src/lib/helpers.ts

@@ -10,8 +10,8 @@ import JSON5 from 'json5'
 import { NFTStorage } from 'nft.storage'
 
 export const httpURL = (uri?: Maybe<string>) => {
-  const [, origCID, path] = (
-    uri?.match(/^(?:ipfs|dweb):(?:\/\/)?([^/]+)(?:\/(.*))?$/) ?? []
+  const [, protocol, origCID, path] = (
+    uri?.match(/^(ip[nf]s):(?:\/\/)?([^/]+)(?:\/(.*))?$/) ?? []
   )
 
   if(origCID) {
@@ -22,6 +22,7 @@ export const httpURL = (uri?: Maybe<string>) => {
     return (
       encodeURI(
         pattern
+        .replace(/{protocol}/g, protocol)
         .replace(/{cid}/g, origCID)
         .replace(/{v0cid}/g, v0CID)
         .replace(/{v1cid}/g, v1CID)