Skip to content

Commit 2e28553

Browse files
0xbuidler0xbuidler
committed
add service and types to dapp + add server new functions and mocking
1 parent 37ccd37 commit 2e28553

File tree

10 files changed

+30121
-30811
lines changed

10 files changed

+30121
-30811
lines changed

‎packages/app/src/dapp/dapp.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,26 +18,21 @@ import ArrowRightAltIcon from "@mui/icons-material/ArrowRightAlt";
1818
import SearchIcon from "@mui/icons-material/Search";
1919
import FilterListIcon from "@mui/icons-material/FilterList";
2020
import { Fade } from "react-awesome-reveal";
21-
import { useParams } from "react-router-dom";
2221

2322
import logoeth from "../_utils/assets/images/logoeth.svg";
2423
import af1x_exemple from "../_utils/assets/images/Punk_7804.png";
2524
import Pastille from "../_utils/components/stateless/pastille";
2625

27-
import { Canvas } from "@react-three/fiber";
28-
import { OrbitControls } from "@react-three/drei";
29-
30-
import ModelSkate from "@/_3d/scenes/skate_0";
31-
3226
import ClickAwayListener from "@mui/material/ClickAwayListener";
3327
import Clickable from "../_utils/components/stateless/clickable";
3428
import { useSelector } from "./store/hooks";
3529
import SceneLoader from "@/_3d/scenes/skate_1";
30+
import { useGetNFTsForDropByAddressQuery } from "./store/services/drop";
3631

3732
const pastilles = [
3833
{
3934
title: "KEY",
40-
description: "Minting this NFT gives your a free SSH Key.",
35+
description: "Minting this NFT gives your a free SSH-KEY.",
4136
},
4237
{
4338
title: "IRL",
@@ -72,6 +67,10 @@ const Drop: FC = () => {
7267
const deckTexture = "/models/skate/textures/sublime-deck.png";
7368
const placeholderTexture = "/models/skate/textures/imgForMiddle.png";
7469

70+
const { data, error, isLoading } = useGetNFTsForDropByAddressQuery({ dropId: 0, address: "0x" });
71+
72+
console.log(data);
73+
7574
//
7675
return (
7776
<Fade duration={1500} triggerOnce>
@@ -109,7 +108,8 @@ const Drop: FC = () => {
109108
</Style.SearchBar>
110109
</Grid>
111110
</Style.HeaderLeftSide>
112-
<Style.BodyLeftSide>
111+
{/* */}
112+
<Style.BodyLeftSide connected={state.signedIn}>
113113
{/* */}
114114
<Style.InnerLeftSide>
115115
{nfts.length ? (

‎packages/app/src/dapp/store/actions/app.actions.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { IAppState } from "../reducers/index";
1+
import { RootState } from "..";
22
import { sdk } from "../../sdk";
33

44
/////////////
@@ -21,13 +21,16 @@ export const signIn = () => {
2121
};
2222
};
2323

24-
return async (dispatch: any, getState: () => IAppState) => {
24+
//
25+
return async (dispatch: any, getState: () => RootState) => {
2526
try {
2627
await sdk.connect();
2728
const { address } = sdk.getInfo();
2829

2930
return dispatch(toDispatch({ signedIn: true, address: address }));
30-
} catch (e) {}
31+
} catch (e) {
32+
return dispatch(toDispatch({ signedIn: false, address: "" }));
33+
}
3134
};
3235
};
3336

‎packages/app/src/dapp/store/hooks.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,5 @@ import {
55
} from "react-redux";
66
import type { RootState, AppDispatch } from ".";
77

8-
// Use throughout your app instead of plain `useDispatch` and `useSelector`
98
export const useDispatch = () => useAppDispatch<AppDispatch>();
109
export const useSelector: TypedUseSelectorHook<RootState> = useAppSelector;

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

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
import { configureStore } from "@reduxjs/toolkit";
2-
import { reducers } from "./reducers/index";
2+
import { IAppState, reducers } from "./reducers/index";
3+
import { dropApi } from "./services/drop";
4+
import { combineReducers } from "redux";
35

46
export const store = configureStore({
5-
reducer: reducers,
7+
reducer: combineReducers({
8+
[dropApi.reducerPath]: dropApi.reducer,
9+
...reducers,
10+
}),
11+
middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(dropApi.middleware),
612
});
713

8-
export type RootState = ReturnType<typeof store.getState>;
14+
export type RootState = IAppState;
915
export type AppDispatch = typeof store.dispatch;

‎packages/app/src/dapp/store/reducers/index.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import { combineReducers, Reducer } from "redux";
2-
import { appStateReducer, appState } from "./app.reducer";
1+
import { appState, appStateReducer } from "./app.reducer";
32

43
export interface IAppState {
54
appState: appState;
65
}
76

8-
export const reducers: Reducer<IAppState> = combineReducers<IAppState>({
7+
export const reducers = {
98
appState: appStateReducer,
10-
});
9+
};

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
2+
import { NFTsForDropByAddress } from "../types";
3+
4+
export const dropApi = createApi({
5+
reducerPath: "dropApi",
6+
baseQuery: fetchBaseQuery({ baseUrl: "http://localhost:3001/" }),
7+
endpoints: (builder) => ({
8+
getNFTsForDropByAddress: builder.query<
9+
NFTsForDropByAddress,
10+
{ dropId: number; address: string }
11+
>({
12+
query: ({ dropId, address }) => `drop/${dropId}/${address}`,
13+
}),
14+
}),
15+
});
16+
17+
export const { useGetNFTsForDropByAddressQuery } = dropApi;

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export type Collection = {
2+
name: string;
3+
contract: string;
4+
};
5+
6+
export type Drop = {
7+
name: string;
8+
collections: Collection[];
9+
};
10+
11+
export type Drops = Drop[];
12+
13+
export type NFTsForDropByAddress = { [collectionName: string]: { id: number; img: string }[] };

‎packages/app/src/dapp/style.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,11 +41,14 @@ const style = {
4141
})),
4242
InnerOverlay: styled(Grid)(({ theme }) => ({})),
4343
InnerOverlayCenter: styled(Grid)(({ theme }) => ({
44-
color: "grey",
4544
fontFamily: theme.fontFamily.primary,
4645
fontSize: "0.75em",
4746
})),
48-
InnerOverlayLeft: styled(Grid)(({ theme }) => ({})),
47+
InnerOverlayLeft: styled(Grid)(({ theme }) => ({
48+
fontFamily: theme.fontFamily.primary,
49+
fontSize: "0.75em",
50+
fontWeight: 900,
51+
})),
4952
InnerOverlayRight: styled(Grid)(({ theme }) => ({})),
5053
LeftSide: styled("div")(({ theme }) => ({
5154
position: "absolute",
@@ -70,12 +73,12 @@ const style = {
7073
padding: "10px",
7174
height: "50px",
7275
})),
73-
BodyLeftSide: styled("div")(({ theme }) => ({
76+
BodyLeftSide: styled("div")<{ connected: boolean }>(({ theme, connected }) => ({
7477
backgroundColor: theme.backgroundColor.primary,
7578
borderRadius: "5px",
7679
overflowY: "scroll",
7780
height: `calc(100vh - ${headerHeight} - ${bottomOverlayHeight} - 50px - ${sizeWidthLeft})`,
78-
opacity: 0.25,
81+
opacity: connected ? 0.25 : 1,
7982
transition: "all 1s",
8083
":hover": {
8184
opacity: 1,

‎packages/server/src/index.ts‎

Lines changed: 52 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -9,52 +9,68 @@ app.use(express.json());
99
app.use(express.urlencoded({ extended: true }));
1010
app.use(express.static(__dirname + "/../public"));
1111

12+
type Collection = {
13+
name: string;
14+
contract: string;
15+
};
16+
17+
const COLLECTIONS: { [collectionName: string]: Collection } = {
18+
Sublimes: {
19+
name: "Sublimes",
20+
contract: "0x116aebbad1c8226c80f9f0cb4e255540a0f7afd9",
21+
},
22+
};
23+
1224
const DROPS = [
1325
{
14-
id: 0,
15-
collections: [
16-
{
17-
name: "Isotile",
18-
contract: "0x31eaa2e93d7afd237f87f30c0dbd3adeb9934f1b",
19-
},
20-
],
26+
name: "#DROP 0",
27+
collections: [COLLECTIONS.Sublimes],
2128
},
2229
];
2330

24-
app.get(
25-
"/drop/:drop",
26-
async (req: Request, res: Response): Promise<Response> => {
27-
const drop = DROPS[req.params.drop];
31+
const fakeAnswer = {
32+
Sublimes: [
33+
{
34+
id: 825,
35+
img: "https://lh3.googleusercontent.com/iUN-rqbSEW97A_YNFiUeKuIoQRtIP08w8st9GnBqsQiydLaiF68pGDP4gx-URYmEph_SqXumjZj3TRGxPIFQBR9ZWxDZicur50a8hA=s0",
36+
},
37+
{
38+
id: 437,
39+
img: "https://lh3.googleusercontent.com/nlO5vgcrUqgqPlHHrQHrlA5ZsXg2hIxkJkzr72oK9KU9cNojTO8HAxWCOH06xNw0R5_ZocxNuXhLHwbHC282uz63pNnjfQd-mABKEA=s0",
40+
},
41+
{
42+
id: 108,
43+
img: "https://lh3.googleusercontent.com/-JDl1IBKkvQtOJKApygolCMXCV09SDAftc5IhqO585oFXvV-XhpaOFEI_WJFJdTJT6l8ypxMb-FlkQGPRNNPN4enIFJoAIpDA2Y7=s0",
44+
},
45+
],
46+
};
47+
48+
app.get("/drop/:drop", async (req: Request, res: Response): Promise<Response> => {
49+
const drop = DROPS[req.params.drop];
2850

29-
return res.status(200).send({
30-
...drop,
31-
});
32-
}
33-
);
51+
return res.status(200).send({
52+
...drop,
53+
});
54+
});
3455

35-
app.get(
36-
"/drop/:drop/:address",
37-
async (req: Request, res: Response): Promise<Response> => {
38-
const drop = DROPS[req.params.drop as any as number];
39-
const address = req.params.address;
56+
app.get("/drop/:drop/:address", async (req: Request, res: Response): Promise<Response> => {
57+
const drop = DROPS[req.params.drop as any as number];
58+
const address = req.params.address;
4059

41-
let data = {};
42-
for (let collection of drop.collections) {
43-
const resq = await axios.get(
44-
`https://api.opensea.io/api/v1/assets?owner=${address}&asset_contract_address=${collection.contract}&order_direction=desc&offset=0&limit=20`
45-
);
60+
// let data = {};
61+
// for (let collection of drop.collections) {
62+
// const resq = await axios.get(
63+
// `https://api.opensea.io/api/v1/assets?owner=${address}&asset_contract_address=${collection.contract}&order_direction=desc&offset=0&limit=20`
64+
// );
4665

47-
data[collection.name] = {
48-
...data[collection.name],
49-
...resq.data.assets,
50-
};
51-
}
66+
// data[collection.name] = {
67+
// ...data[collection.name],
68+
// ...resq.data.assets,
69+
// };
70+
// }
5271

53-
return res.status(200).send({
54-
...data,
55-
});
56-
}
57-
);
72+
return res.status(200).send(fakeAnswer);
73+
});
5874

5975
app.get("/", async (req: Request, res: Response): Promise<Response> => {
6076
return res.status(200).send({

0 commit comments

Comments
 (0)