Skip to content

Commit 84ee7ff

Browse files
0xbuidler0xbuidler
committed
add store value to dapp
1 parent bf1ea0e commit 84ee7ff

File tree

5 files changed

+75
-140
lines changed

5 files changed

+75
-140
lines changed

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

Lines changed: 41 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -31,75 +31,7 @@ import ModelSkate from "@/_3d/scenes/skate_0";
3131

3232
import ClickAwayListener from "@mui/material/ClickAwayListener";
3333
import Clickable from "../_utils/components/stateless/clickable";
34-
35-
//
36-
const listItems = [
37-
{
38-
collection: "BAYC",
39-
list: [{ img: af1x_exemple, title: "hello", id: 0 }],
40-
},
41-
{
42-
collection: "CryptoPunks",
43-
list: [
44-
{ img: af1x_exemple, title: "hello", id: 0 },
45-
{ img: af1x_exemple, title: "hello", id: 1 },
46-
{ img: af1x_exemple, title: "hello", id: 2 },
47-
{ img: af1x_exemple, title: "hello", id: 3 },
48-
{ img: af1x_exemple, title: "hello", id: 4 },
49-
{ img: af1x_exemple, title: "hello", id: 5 },
50-
{ img: af1x_exemple, title: "hello", id: 6 },
51-
{ img: af1x_exemple, title: "hello", id: 7 },
52-
],
53-
},
54-
{
55-
collection: "Isotile",
56-
list: [
57-
{
58-
img: "https://lh3.googleusercontent.com/BBj09xD7R4bBtg1lgnAAS9_TfoYXKwMtudlk-0fVljlURaK7BWcARCpkM-1LGNGTAcsGO6V1TgrtmQFvCo8uVYW_QEfASK-9j6Nr=s300",
59-
title: "hello",
60-
id: 0,
61-
},
62-
{
63-
img: "https://lh3.googleusercontent.com/BBj09xD7R4bBtg1lgnAAS9_TfoYXKwMtudlk-0fVljlURaK7BWcARCpkM-1LGNGTAcsGO6V1TgrtmQFvCo8uVYW_QEfASK-9j6Nr=s300",
64-
title: "hello",
65-
id: 1,
66-
},
67-
{
68-
img: "https://lh3.googleusercontent.com/BBj09xD7R4bBtg1lgnAAS9_TfoYXKwMtudlk-0fVljlURaK7BWcARCpkM-1LGNGTAcsGO6V1TgrtmQFvCo8uVYW_QEfASK-9j6Nr=s300",
69-
title: "hello",
70-
id: 2,
71-
},
72-
{
73-
img: "https://lh3.googleusercontent.com/BBj09xD7R4bBtg1lgnAAS9_TfoYXKwMtudlk-0fVljlURaK7BWcARCpkM-1LGNGTAcsGO6V1TgrtmQFvCo8uVYW_QEfASK-9j6Nr=s300",
74-
title: "hello",
75-
id: 3,
76-
},
77-
],
78-
},
79-
{
80-
collection: "Cool Cats",
81-
list: [
82-
{ img: af1x_exemple, title: "hello", id: 0 },
83-
{ img: af1x_exemple, title: "hello", id: 1 },
84-
{ img: af1x_exemple, title: "hello", id: 2 },
85-
{ img: af1x_exemple, title: "hello", id: 3 },
86-
{ img: af1x_exemple, title: "hello", id: 4 },
87-
{ img: af1x_exemple, title: "hello", id: 5 },
88-
{ img: af1x_exemple, title: "hello", id: 6 },
89-
{ img: af1x_exemple, title: "hello", id: 7 },
90-
{ img: af1x_exemple, title: "hello", id: 8 },
91-
],
92-
},
93-
];
94-
95-
const fakeDrop = {
96-
id: "0",
97-
collections: [
98-
{ name: "alpha", contract: "0x" },
99-
{ name: "alpha", contract: "0x" },
100-
{ name: "alpha", contract: "0x" },
101-
],
102-
};
34+
import { useSelector } from "./store/hooks";
10335

10436
const pastilles = [
10537
{
@@ -151,12 +83,9 @@ export const My3DScene: FC = () => {
15183
};
15284

15385
const Drop: FC = () => {
154-
const [activeStep, setActiveStep] = React.useState(0);
155-
156-
let params = useParams();
86+
const state = useSelector((state) => state.appState);
15787

15888
const [currentItem, setItem] = React.useState(undefined as any);
159-
16089
const [checked, setChecked] = React.useState(false);
16190

16291
const handleChange = () => {
@@ -208,41 +137,45 @@ const Drop: FC = () => {
208137
<Style.BodyLeftSide>
209138
{/* */}
210139
<Style.InnerLeftSide>
211-
{listItems.map((list, index1) => (
212-
<div key={index1}>
213-
<Style.CollectionName>{list.collection}</Style.CollectionName>
214-
<ImageList cols={4} gap={4} style={{ marginBottom: "20px" }}>
215-
{list.list.map((item, index) => (
216-
<ImageListItem
217-
key={index}
218-
style={{
219-
border:
220-
currentItem &&
221-
currentItem.collection === list.collection &&
222-
currentItem.id === item.id
223-
? "3px solid #2AFE00"
224-
: "3px solid white",
225-
cursor: "pointer",
226-
}}
227-
onClick={() => {
228-
setItem({
229-
collection: list.collection,
230-
id: item.id,
231-
img: item.img,
232-
});
233-
}}
234-
>
235-
<img
236-
src={`${item.img}?w=248&fit=crop&auto=format`}
237-
srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
238-
alt={item.title}
239-
loading="lazy"
240-
/>
241-
</ImageListItem>
242-
))}
243-
</ImageList>
244-
</div>
245-
))}
140+
{state.nfts.length ? (
141+
state.nfts.map((list, index1) => (
142+
<div key={index1}>
143+
<Style.CollectionName>{list.collection}</Style.CollectionName>
144+
<ImageList cols={4} gap={4} style={{ marginBottom: "20px" }}>
145+
{list.list.map((item, index) => (
146+
<ImageListItem
147+
key={index}
148+
style={{
149+
border:
150+
currentItem &&
151+
currentItem.collection === list.collection &&
152+
currentItem.id === item.id
153+
? "3px solid #2AFE00"
154+
: "3px solid white",
155+
cursor: "pointer",
156+
}}
157+
onClick={() => {
158+
setItem({
159+
collection: list.collection,
160+
id: item.id,
161+
img: item.img,
162+
});
163+
}}
164+
>
165+
<img
166+
src={`${item.img}?w=248&fit=crop&auto=format`}
167+
srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
168+
alt={item.title}
169+
loading="lazy"
170+
/>
171+
</ImageListItem>
172+
))}
173+
</ImageList>
174+
</div>
175+
))
176+
) : (
177+
<Style.InnerLeftSideNoNfts>You do not own any NFTs :'(</Style.InnerLeftSideNoNfts>
178+
)}
246179
</Style.InnerLeftSide>
247180
</Style.BodyLeftSide>
248181
</Style.LeftSide>

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

Lines changed: 3 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -13,34 +13,6 @@ import OpenseaIcon from "../../_utils/assets/icons/opensea.svg";
1313
import { useDispatch, useSelector } from "../store/hooks";
1414
import { signIn } from "../store/actions/app.actions";
1515

16-
const dripsOwned = [
17-
{
18-
collection: "alpha",
19-
id: 123,
20-
img: "https://avatars.githubusercontent.com/u/96990732",
21-
},
22-
{
23-
collection: "alpha",
24-
id: 123,
25-
img: "https://avatars.githubusercontent.com/u/96990732",
26-
},
27-
{
28-
collection: "alpha",
29-
id: 123,
30-
img: "https://avatars.githubusercontent.com/u/96990732",
31-
},
32-
{
33-
collection: "alpha",
34-
id: 123,
35-
img: "https://avatars.githubusercontent.com/u/96990732",
36-
},
37-
{
38-
collection: "alpha",
39-
id: 123,
40-
img: "https://avatars.githubusercontent.com/u/96990732",
41-
},
42-
];
43-
4416
export const NavbarComponent: FC = () => {
4517
const state = useSelector((state) => state.appState);
4618
const dispatch = useDispatch();
@@ -105,9 +77,9 @@ export const NavbarComponent: FC = () => {
10577
>
10678
<ClickAwayListener onClickAway={handlePopoverClose}>
10779
<Style.WalletView>
108-
{dripsOwned.length ? (
80+
{state.drips.length ? (
10981
<Grid container>
110-
{dripsOwned.map((drip, index) => (
82+
{state.drips.map((drip, index) => (
11183
<Grid item key={index}>
11284
<Grid container>
11385
<Grid item xs={2}>
@@ -217,7 +189,7 @@ export const NavbarComponent: FC = () => {
217189
<Style.WalletENS>bonjour.eth</Style.WalletENS>
218190
</Grid>
219191
<Grid item xs={12}>
220-
<Style.WalletAddy>0x1234...5678</Style.WalletAddy>
192+
<Style.WalletAddy>{state.reducedAddress}</Style.WalletAddy>
221193
</Grid>
222194
</Grid>
223195
</Grid>

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ export const signIn = () => {
2525
try {
2626
await sdk.connect();
2727
const { address } = sdk.getInfo();
28-
console.log(address);
2928

3029
return dispatch(toDispatch({ signedIn: true, address: address }));
3130
} catch (e) {}

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,36 @@ import { AppActionTypes } from "../actions/app.actions";
22
import { SIGN_IN } from "../actions/app.actions";
33

44
export type appState = {
5+
// login info
56
signedIn: boolean;
67
address: string;
8+
reducedAddress: string;
9+
10+
// drips owned
11+
drips: {
12+
collection: string;
13+
id: number;
14+
img: string;
15+
}[];
16+
17+
// nfts
18+
nfts: {
19+
collection: string;
20+
list: { img: string; title: string; id: number }[];
21+
}[];
722
};
823

924
const appStateReducer = (
1025
state: appState = {
1126
signedIn: false,
1227
address: "",
28+
reducedAddress: "",
29+
30+
//
31+
drips: [],
32+
33+
//
34+
nfts: [],
1335
},
1436
action: AppActionTypes
1537
): appState => {
@@ -20,6 +42,8 @@ const appStateReducer = (
2042

2143
signedIn: action.payload.signedIn,
2244
address: action.payload.address,
45+
reducedAddress:
46+
action.payload.address.slice(0, 6) + "..." + action.payload.address.slice(-4),
2347
};
2448
default:
2549
return {

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,13 @@ const style = {
5757
InnerLeftSide: styled("div")(({ theme }) => ({
5858
padding: "10px",
5959
})),
60+
InnerLeftSideNoNfts: styled("div")(({ theme }) => ({
61+
paddingTop: "25vh",
62+
textAlign: "center",
63+
fontFamily: theme.fontFamily.primary,
64+
fontWeight: 500,
65+
fontSize: "0.8em",
66+
})),
6067
HeaderLeftSide: styled(Grid)(({ theme }) => ({
6168
backgroundColor: "white",
6269
borderRadius: "5px",

0 commit comments

Comments
 (0)