add rtk query

Author: 0xbuidler

packages/app/src/dapp/dapp.tsx

@@ -50,7 +50,7 @@ const pastilles = [
 
 const Drop: FC = () => {
   const state = useSelector((state) => state.appState);
-
+  const isConnected = state.signedIn;
   const nfts = state.walletAssets.nfts;
 
   const [currentItem, setItem] = React.useState(undefined as any);
@@ -67,7 +67,10 @@ const Drop: FC = () => {
   const deckTexture = "/models/skate/textures/sublime-deck.png";
   const placeholderTexture = "/models/skate/textures/imgForMiddle.png";
 
-  const { data, error, isLoading } = useGetNFTsForDropByAddressQuery({ dropId: 0, address: "0x" });
+  const { data, error, isLoading } = useGetNFTsForDropByAddressQuery({
+    dropId: 0,
+    address: "0xcadaA91596F3E2aFA69a37F47a5C70a4e3765c00",
+  });
 
   console.log(data);
 

packages/app/src/dapp/store/services/drop.tsx

@@ -1,16 +1,16 @@
 import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
-import { NFTsForDropByAddress } from "../types";
+import { NFTsByCollection } from "../types";
 
 export const dropApi = createApi({
   reducerPath: "dropApi",
   baseQuery: fetchBaseQuery({ baseUrl: "http://localhost:3001/" }),
   endpoints: (builder) => ({
-    getNFTsForDropByAddress: builder.query<
-      NFTsForDropByAddress,
-      { dropId: number; address: string }
-    >({
+    getNFTsForDropByAddress: builder.query<NFTsByCollection, { dropId: number; address: string }>({
       query: ({ dropId, address }) => `drop/${dropId}/${address}`,
     }),
+    getDripsByAddress: builder.query<NFTsByCollection, { address: string }>({
+      query: ({ address }) => `drip/${address}`,
+    }),
   }),
 });
 

packages/app/src/dapp/store/types/index.tsx

@@ -1,3 +1,10 @@
+export type NFT = {
+  contract: string;
+  img: string;
+  id: number;
+};
+export type NFTs = NFT[];
+export type NFTsByCollection = { [collectionName: string]: NFTs };
 export type Collection = {
   name: string;
   contract: string;
@@ -9,5 +16,3 @@ export type Drop = {
 };
 
 export type Drops = Drop[];
-
-export type NFTsForDropByAddress = { [collectionName: string]: { id: number; img: string }[] };

packages/server/package.json

@@ -12,9 +12,11 @@
     "typescript": "^4.5.4"
   },
   "dependencies": {
+    "@types/cors": "^2.8.12",
     "@types/express": "^4.17.13",
     "@types/node": "^17.0.8",
     "axios": "^0.24.0",
+    "cors": "^2.8.5",
     "dotenv": "^16.0.0",
     "express": "^4.17.2",
     "ts-node-dev": "^1.1.8",

packages/server/src/index.ts

@@ -3,12 +3,14 @@ import "dotenv/config";
 import express, { Application, Request, Response } from "express";
 import axios from "axios";
 import { env } from "process";
+import cors from "cors";
 
 // Env setup
 const apiKey = env["apiKey"];
 
 // Express server
 const app: Application = express();
+app.use(cors());
 const port = 3001;
 
 // Axios setup
@@ -20,11 +22,14 @@ app.use(express.urlencoded({ extended: true }));
 app.use(express.static(__dirname + "/../public"));
 
 type NFT = {
+  contract: string;
   img: string;
   id: number;
 };
 
-type NFTs = { [contract: string]: NFT[] };
+type NFTs = NFT[];
+
+type NFTsByCollection = { [collectionName: string]: NFTs };
 
 type Collection = {
   name: string;
@@ -57,7 +62,7 @@ app.get("/drop/:drop/:address", async (req: Request, res: Response): Promise<Res
   const drop = DROPS[req.params.drop as any as number];
   const address = req.params.address;
 
-  let nftsForDropByAddress: NFTs = {};
+  let nftsForDropByAddress: NFTsByCollection = {};
 
   for (let collection of drop.collections) {
     const resq = await axios.get(
@@ -67,12 +72,13 @@ app.get("/drop/:drop/:address", async (req: Request, res: Response): Promise<Res
     let nfts: NFT[] = [];
     for (let asset of resq.data.assets) {
       nfts.push({
+        contract: collection.contract,
         img: asset.image_url,
         id: asset.token_id,
       });
     }
 
-    nftsForDropByAddress[collection.contract] = nfts;
+    nftsForDropByAddress[collection.name] = nfts;
   }
 
   return res.status(200).send(nftsForDropByAddress);

packages/server/yarn.lock

@@ -481,6 +481,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/cors@^2.8.12":
+  version "2.8.12"
+  resolved "https://registry.yarnpkg.com/@types/cors/-/cors-2.8.12.tgz#6b2c510a7ad7039e98e7b8d3d6598f4359e5c080"
+  integrity sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw==
+
 "@types/express-serve-static-core@^4.17.18":
   version "4.17.28"
   resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.28.tgz#c47def9f34ec81dc6328d0b1b5303d1ec98d86b8"
@@ -1340,7 +1345,7 @@ core-util-is@~1.0.0:
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
   integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
 
-cors@^2.8.1:
+cors@^2.8.1, cors@^2.8.5:
   version "2.8.5"
   resolved "https://registry.yarnpkg.com/cors/-/cors-2.8.5.tgz#eac11da51592dd86b9f06f6e7ac293b3df875d29"
   integrity sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==