update reducers + few changes

Author: 0xbuidler

packages/app/src/_3d/scenes/skate_1.tsx

@@ -0,0 +1,47 @@
+import { FC } from "react";
+
+import { OrbitControls } from "@react-three/drei";
+
+import ModelSkate from "@/_3d/models/skate";
+import LoaderScene from "@/_3d/utils/loaderScene";
+import useTexture from "@/_3d/utils/loaderTexture";
+
+export type props = {
+  deckTexture: string;
+  placeholderTexture: string;
+  _id: number;
+};
+
+const Scene: FC<props> = (props) => {
+  const deckTexs = useTexture(props.deckTexture);
+  const placeholderTexs = useTexture(props.placeholderTexture);
+
+  return (
+    <>
+      <ambientLight intensity={0.95} />
+      <ModelSkate
+        {...props}
+        deckTexture={deckTexs}
+        placeholderTexture={placeholderTexs}
+        _id={props._id}
+      />
+      <OrbitControls
+        autoRotate={true}
+        autoRotateSpeed={7.5}
+        enableZoom={false}
+        enableRotate={false}
+        target={[0, 40, 0]}
+      />
+    </>
+  );
+};
+
+const SceneLoader: FC<props> = (props) => {
+  return (
+    <LoaderScene camera={[0, 40, -60]}>
+      <Scene {...props} />
+    </LoaderScene>
+  );
+};
+
+export default SceneLoader;

packages/app/src/dapp/dapp.tsx

@@ -32,6 +32,7 @@ import ModelSkate from "@/_3d/scenes/skate_0";
 import ClickAwayListener from "@mui/material/ClickAwayListener";
 import Clickable from "../_utils/components/stateless/clickable";
 import { useSelector } from "./store/hooks";
+import SceneLoader from "@/_3d/scenes/skate_1";
 
 const pastilles = [
   {
@@ -52,39 +53,11 @@ const pastilles = [
   },
 ];
 
-const deckTextures = ["/models/skate/Tex/Deck_Sublimes.png"];
-const placeholderTextures = ["/models/skate/Tex/imgForMiddle.png"];
-export const My3DScene: FC = () => {
-  return (
-    <Canvas
-      flat={true}
-      linear={true}
-      camera={{ position: [0, 40, -60] }}
-      style={{ height: "100%", width: "100%" }}
-    >
-      {/*  */}
-      <ambientLight intensity={0.95} />
-      <ModelSkate
-        _id={0}
-        deckTextures={deckTextures}
-        deckIndex={0}
-        placeholderTextures={placeholderTextures}
-        placeholderIndex={0}
-      />
-      <OrbitControls
-        target={[0, 40, 0]}
-        autoRotate={true}
-        autoRotateSpeed={7.5}
-        enableZoom={false}
-        enableRotate={false}
-      />
-    </Canvas>
-  );
-};
-
 const Drop: FC = () => {
   const state = useSelector((state) => state.appState);
 
+  const nfts = state.walletAssets.nfts;
+
   const [currentItem, setItem] = React.useState(undefined as any);
   const [checked, setChecked] = React.useState(false);
 
@@ -96,15 +69,17 @@ const Drop: FC = () => {
     }
   };
 
+  const deckTexture = "/models/skate/textures/sublime-deck.png";
+  const placeholderTexture = "/models/skate/textures/imgForMiddle.png";
+
   //
   return (
     <Fade duration={1500} triggerOnce>
       <Style.Root>
         <Style.Header></Style.Header>
         <Style.Part1>
-          {/* 3D */}
-          {/* <Suspense fallback={null}>{<My3DScene />}</Suspense> */}
-
+          <SceneLoader deckTexture={deckTexture} placeholderTexture={placeholderTexture} _id={1} />
+          {/* <My3DScene /> */}
           <Style.LeftSide>
             <Style.HeaderLeftSide container spacing={0} alignItems="center">
               <Grid item xs={6}>
@@ -137,8 +112,8 @@ const Drop: FC = () => {
             <Style.BodyLeftSide>
               {/*  */}
               <Style.InnerLeftSide>
-                {state.nfts.length ? (
-                  state.nfts.map((list, index1) => (
+                {nfts.length ? (
+                  nfts.map((list, index1) => (
                     <div key={index1}>
                       <Style.CollectionName>{list.collection}</Style.CollectionName>
                       <ImageList cols={4} gap={4} style={{ marginBottom: "20px" }}>
@@ -173,8 +148,10 @@ const Drop: FC = () => {
                       </ImageList>
                     </div>
                   ))
-                ) : (
+                ) : state.signedIn ? (
                   <Style.InnerLeftSideNoNfts>You do not own any NFTs :'(</Style.InnerLeftSideNoNfts>
+                ) : (
+                  <Style.InnerLeftSideNoNfts>You are not connected :'(</Style.InnerLeftSideNoNfts>
                 )}
               </Style.InnerLeftSide>
             </Style.BodyLeftSide>

packages/app/src/dapp/navbar/index.tsx

@@ -17,6 +17,8 @@ export const NavbarComponent: FC = () => {
   const state = useSelector((state) => state.appState);
   const dispatch = useDispatch();
 
+  const drips = state.walletAssets.drips;
+
   const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
   const handlePopoverOpen = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
@@ -77,9 +79,9 @@ export const NavbarComponent: FC = () => {
                   >
                     <ClickAwayListener onClickAway={handlePopoverClose}>
                       <Style.WalletView>
-                        {state.drips.length ? (
+                        {drips.length ? (
                           <Grid container>
-                            {state.drips.map((drip, index) => (
+                            {drips.map((drip, index) => (
                               <Grid item key={index}>
                                 <Grid container>
                                   <Grid item xs={2}>

packages/app/src/dapp/store/reducers/app.reducer.tsx

@@ -7,18 +7,20 @@ export type appState = {
   address: string;
   reducedAddress: string;
 
-  // drips owned
-  drips: {
-    collection: string;
-    id: number;
-    img: string;
-  }[];
+  walletAssets: {
+    //
+    drips: {
+      collection: string;
+      id: number;
+      img: string;
+    }[];
 
-  // nfts
-  nfts: {
-    collection: string;
-    list: { img: string; title: string; id: number }[];
-  }[];
+    //
+    nfts: {
+      collection: string;
+      list: { img: string; title: string; id: number }[];
+    }[];
+  };
 };
 
 const appStateReducer = (
@@ -28,10 +30,10 @@ const appStateReducer = (
     reducedAddress: "",
 
     //
-    drips: [],
-
-    //
-    nfts: [],
+    walletAssets: {
+      drips: [],
+      nfts: [],
+    },
   },
   action: AppActionTypes
 ): appState => {