bunch of shit

sshmaxime · May 18, 2022 · f5e2013 · f5e2013
1 parent c547134
commit f5e2013
Show file tree

Hide file tree

Showing 14 changed files with 161 additions and 146 deletions.
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -17,6 +17,7 @@
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "axios": "^0.27.2",
     "history": "5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

diff --git a/packages/app/src/_3d/scenes/skate_1.tsx b/packages/app/src/_3d/scenes/skate_1.tsx
@@ -28,8 +28,10 @@ const Scene: FC<props> = (props) => {
       <OrbitControls
         autoRotate={true}
         autoRotateSpeed={7.5}
+        minPolarAngle={Math.PI / 2}
+        maxPolarAngle={Math.PI / 2}
         enableZoom={false}
-        enableRotate={false}
+        enableRotate={true}
         target={[0, 40, 0]}
       />
     </>

diff --git a/packages/app/src/dapp/dapp.tsx b/packages/app/src/dapp/dapp.tsx
@@ -25,9 +25,9 @@ import Pastille from "../_utils/components/stateless/pastille";
 
 import ClickAwayListener from "@mui/material/ClickAwayListener";
 import Clickable from "../_utils/components/stateless/clickable";
-import { useSelector } from "./store/hooks";
+import { useDispatch, useSelector } from "./store/hooks";
 import SceneLoader from "@/_3d/scenes/skate_1";
-import { useGetNFTsForDropByAddressQuery } from "./store/services/drop";
+import { getAssetsOwned } from "./store/actions/app.actions";
 
 const pastilles = [
   {
@@ -48,40 +48,35 @@ const pastilles = [
   },
 ];
 
-const Drop: FC = () => {
-  const state = useSelector((state) => state.appState);
-  const isConnected = state.signedIn;
-  const nfts = state.walletAssets.nfts;
+const Drop: FC<{ dropId: number }> = ({ dropId }) => {
+  // store
+  const dispatch = useDispatch();
+  const { auth, wallet } = useSelector((state) => state.appState);
 
-  const [currentItem, setItem] = React.useState(undefined as any);
+  // fc state
+  const [currentItem, setItem] = React.useState<{ collection: string; id: number; img: string }>();
   const [checked, setChecked] = React.useState(false);
+  const handleChange = () => setChecked(!checked);
 
-  const handleChange = () => {
-    if (checked === false) {
-      setChecked(true);
-    } else {
-      setChecked(false);
+  useEffect(() => {
+    if (auth.signedIn) {
+      dispatch(getAssetsOwned(dropId, auth.address));
     }
-  };
+  }, [auth.signedIn]);
 
   const deckTexture = "/models/skate/textures/sublime-deck.png";
   const placeholderTexture = "/models/skate/textures/imgForMiddle.png";
 
-  const { data, error, isLoading } = useGetNFTsForDropByAddressQuery({
-    dropId: 0,
-    address: "0xcadaA91596F3E2aFA69a37F47a5C70a4e3765c00",
-  });
-
-  console.log(data);
-
-  //
   return (
     <Fade duration={1500} triggerOnce>
       <Style.Root>
         <Style.Header></Style.Header>
-        <Style.Part1>
-          <SceneLoader deckTexture={deckTexture} placeholderTexture={placeholderTexture} _id={1} />
-          {/* <My3DScene /> */}
+        <Style.Body>
+          <SceneLoader
+            deckTexture={deckTexture}
+            placeholderTexture={currentItem?.img || placeholderTexture}
+            _id={1}
+          />
           <Style.LeftSide>
             <Style.HeaderLeftSide container spacing={0} alignItems="center">
               <Grid item xs={6}>
@@ -112,29 +107,29 @@ const Drop: FC = () => {
               </Grid>
             </Style.HeaderLeftSide>
             {/*  */}
-            <Style.BodyLeftSide connected={state.signedIn}>
+            <Style.BodyLeftSide connected={auth.signedIn}>
               {/*  */}
               <Style.InnerLeftSide>
-                {nfts.length ? (
-                  nfts.map((list, index1) => (
+                {wallet.nfts.length ? (
+                  wallet.nfts.map((collection, index1) => (
                     <div key={index1}>
-                      <Style.CollectionName>{list.collection}</Style.CollectionName>
+                      <Style.CollectionName>{collection.collectionName}</Style.CollectionName>
                       <ImageList cols={4} gap={4} style={{ marginBottom: "20px" }}>
-                        {list.list.map((item, index) => (
+                        {collection.assets.map((item, index) => (
                           <ImageListItem
                             key={index}
                             style={{
                               border:
                                 currentItem &&
-                                currentItem.collection === list.collection &&
+                                currentItem.collection === collection.collectionName &&
                                 currentItem.id === item.id
                                   ? "3px solid #2AFE00"
                                   : "3px solid white",
                               cursor: "pointer",
                             }}
                             onClick={() => {
                               setItem({
-                                collection: list.collection,
+                                collection: collection.collectionName,
                                 id: item.id,
                                 img: item.img,
                               });
@@ -143,15 +138,15 @@ const Drop: FC = () => {
                             <img
                               src={`${item.img}?w=248&fit=crop&auto=format`}
                               srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
-                              alt={item.title}
+                              alt={"item.id"}
                               loading="lazy"
                             />
                           </ImageListItem>
                         ))}
                       </ImageList>
                     </div>
                   ))
-                ) : state.signedIn ? (
+                ) : auth.signedIn ? (
                   <Style.InnerLeftSideNoNfts>You do not own any NFTs :'(</Style.InnerLeftSideNoNfts>
                 ) : (
                   <Style.InnerLeftSideNoNfts>You are not connected :'(</Style.InnerLeftSideNoNfts>
@@ -248,14 +243,8 @@ const Drop: FC = () => {
               </Style.InnerContainerInfo>
             </Style.ContainerInfo>
           </ClickAwayListener>
-        </Style.Part1>
-        <Style.Overlay>
-          <Style.InnerOverlay container justifyContent="space-evenly">
-            <Style.InnerOverlayLeft item></Style.InnerOverlayLeft>
-            <Style.InnerOverlayCenter item></Style.InnerOverlayCenter>
-            <Style.InnerOverlayRight item></Style.InnerOverlayRight>
-          </Style.InnerOverlay>
-        </Style.Overlay>
+        </Style.Body>
+        <Style.Footer></Style.Footer>
       </Style.Root>
     </Fade>
   );

diff --git a/packages/app/src/dapp/index.tsx b/packages/app/src/dapp/index.tsx
@@ -12,7 +12,9 @@ const Index: FC<props> = ({ children }) => {
   return (
     <Provider store={store}>
       <Navbar />
-      <DApp />
+
+      {/*  */}
+      <DApp dropId={0} />
     </Provider>
   );
 };

diff --git a/packages/app/src/dapp/navbar/index.tsx b/packages/app/src/dapp/navbar/index.tsx
@@ -14,11 +14,9 @@ import { useDispatch, useSelector } from "../store/hooks";
 import { signIn } from "../store/actions/app.actions";
 
 export const NavbarComponent: FC = () => {
-  const state = useSelector((state) => state.appState);
+  const { auth, wallet } = 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);
@@ -57,7 +55,7 @@ export const NavbarComponent: FC = () => {
                 alignItems="center"
               >
                 <Grid item>
-                  <Clickable activated={state.signedIn} onClick={handlePopoverOpen}>
+                  <Clickable activated={auth.signedIn} onClick={handlePopoverOpen}>
                     <AccountBalanceWalletIcon
                       style={{
                         fontSize: "40px",
@@ -79,9 +77,9 @@ export const NavbarComponent: FC = () => {
                   >
                     <ClickAwayListener onClickAway={handlePopoverClose}>
                       <Style.WalletView>
-                        {drips.length ? (
+                        {wallet.drips.length ? (
                           <Grid container>
-                            {drips.map((drip, index) => (
+                            {wallet.drips.map((drip, index) => (
                               <Grid item key={index}>
                                 <Grid container>
                                   <Grid item xs={2}>
@@ -171,7 +169,7 @@ export const NavbarComponent: FC = () => {
                   </Popover>
                 </Grid>
                 <Grid item>
-                  {state.signedIn ? (
+                  {auth.signedIn ? (
                     <Style.Wallet container>
                       <Grid
                         item
@@ -191,7 +189,7 @@ export const NavbarComponent: FC = () => {
                             <Style.WalletENS>bonjour.eth</Style.WalletENS>
                           </Grid>
                           <Grid item xs={12}>
-                            <Style.WalletAddy>{state.reducedAddress}</Style.WalletAddy>
+                            <Style.WalletAddy>{auth.reducedAddress}</Style.WalletAddy>
                           </Grid>
                         </Grid>
                       </Grid>

diff --git a/packages/app/src/dapp/store/actions/app.actions.tsx b/packages/app/src/dapp/store/actions/app.actions.tsx
@@ -1,37 +1,56 @@
 import { RootState } from "..";
 import { sdk } from "../../sdk";
+import { AssetsOwned } from "@sshlabs/typings";
+import axios from "axios";
 
-/////////////
-// SIGN_IN //
-/////////////
 export const SIGN_IN = "SIGN_IN";
-export interface ActionInit {
+export interface ActionSignIn {
   type: typeof SIGN_IN;
   payload: {
     signedIn: boolean;
     address: string;
   };
 }
 
+export const GET_ASSETS_OWNED = "GET_ASSETS_OWNED";
+export interface ActionGetAssetOwned {
+  type: typeof GET_ASSETS_OWNED;
+  payload: AssetsOwned;
+}
+export const getAssetsOwned = (dropId: number, address: string) => {
+  const toDispatch = (payload: ActionGetAssetOwned["payload"]): ActionGetAssetOwned => {
+    return {
+      type: GET_ASSETS_OWNED,
+      payload: payload,
+    };
+  };
+
+  return async (dispatch: any, getState: () => RootState) => {
+    try {
+      const result = (await axios.get(`http://localhost:3001/drop/${dropId}/${address}`))
+        .data as AssetsOwned;
+
+      return dispatch(toDispatch(result));
+    } catch (e) {}
+  };
+};
+
 export const signIn = () => {
-  const toDispatch = (payload: ActionInit["payload"]): ActionInit => {
+  const toDispatch = (payload: ActionSignIn["payload"]): ActionSignIn => {
     return {
       type: SIGN_IN,
       payload: payload,
     };
   };
 
-  //
   return async (dispatch: any, getState: () => RootState) => {
     try {
       await sdk.connect();
       const { address } = sdk.getInfo();
 
       return dispatch(toDispatch({ signedIn: true, address: address }));
-    } catch (e) {
-      return dispatch(toDispatch({ signedIn: false, address: "" }));
-    }
+    } catch (e) {}
   };
 };
 
-export type AppActionTypes = ActionInit;
+export type AppActionTypes = ActionSignIn | ActionGetAssetOwned;
diff --git a/packages/app/src/dapp/store/index.tsx b/packages/app/src/dapp/store/index.tsx
@@ -1,14 +1,11 @@
 import { configureStore } from "@reduxjs/toolkit";
 import { IAppState, reducers } from "./reducers/index";
-import { dropApi } from "./services/drop";
 import { combineReducers } from "redux";
 
 export const store = configureStore({
   reducer: combineReducers({
-    [dropApi.reducerPath]: dropApi.reducer,
     ...reducers,
   }),
-  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(dropApi.middleware),
 });
 
 export type RootState = IAppState;

diff --git a/packages/app/src/dapp/store/reducers/app.reducer.tsx b/packages/app/src/dapp/store/reducers/app.reducer.tsx
@@ -1,52 +1,48 @@
-import { AppActionTypes } from "../actions/app.actions";
-import { SIGN_IN } from "../actions/app.actions";
+import { AppActionTypes, SIGN_IN, GET_ASSETS_OWNED } from "../actions/app.actions";
+import { NFTs, NFTsByCollection } from "@sshlabs/typings";
 
-export type appState = {
-  // login info
-  signedIn: boolean;
-  address: string;
-  reducedAddress: string;
+const defaultAuthState = { signedIn: false, address: "", reducedAddress: "" };
+type authState = typeof defaultAuthState;
 
-  walletAssets: {
-    //
-    drips: {
-      collection: string;
-      id: number;
-      img: string;
-    }[];
+const defaultWalletState: { nfts: NFTsByCollection; drips: NFTs } = { nfts: [], drips: [] };
+type walletState = typeof defaultWalletState;
 
-    //
-    nfts: {
-      collection: string;
-      list: { img: string; title: string; id: number }[];
-    }[];
-  };
+export type appState = {
+  auth: authState;
+  wallet: walletState;
 };
 
 const appStateReducer = (
   state: appState = {
-    signedIn: false,
-    address: "",
-    reducedAddress: "",
-
-    //
-    walletAssets: {
-      drips: [],
-      nfts: [],
-    },
+    auth: defaultAuthState,
+    wallet: defaultWalletState,
   },
   action: AppActionTypes
 ): appState => {
   switch (action.type) {
     case SIGN_IN:
       return {
         ...state,
+        auth: {
+          ...state.auth,
+          signedIn: action.payload.signedIn,
+          address: action.payload.address,
+          reducedAddress:
+            action.payload.address.slice(0, 6) + "..." + action.payload.address.slice(-4),
+        },
+      };
 
-        signedIn: action.payload.signedIn,
-        address: action.payload.address,
-        reducedAddress:
-          action.payload.address.slice(0, 6) + "..." + action.payload.address.slice(-4),
+    case GET_ASSETS_OWNED:
+      console.log(action.payload);
+      return {
+        ...state,
+        wallet: {
+          ...state.wallet,
+          drips: action.payload.drips,
+          nfts: action.payload.nfts,
+        },
       };
+
     default:
       return {
         ...state,