Skip to content

Commit bf1ea0e

Browse files
0xbuidler0xbuidler
committed
setup all for redux
1 parent be37e25 commit bf1ea0e

File tree

6 files changed

+75
-37
lines changed

6 files changed

+75
-37
lines changed

‎packages/app/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,11 @@
2020
"history": "5",
2121
"react": "^17.0.2",
2222
"react-dom": "^17.0.2",
23+
"react-redux": "^8.0.1",
2324
"react-router-dom": "6",
2425
"react-scripts": "4.0.3",
2526
"react-transition-group": "^4.4.2",
27+
"redux": "^4.2.0",
2628
"styled-components": "^5.3.3",
2729
"three": "^0.136.0",
2830
"typescript": "^4.1.2",

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,17 @@ import { FC } from "react";
33
import Navbar from "./navbar";
44
import DApp from "./dapp";
55

6+
import { store } from "./store";
7+
import { Provider } from "react-redux";
8+
69
type props = {};
710

811
const Index: FC<props> = ({ children }) => {
912
return (
10-
<>
13+
<Provider store={store}>
1114
<Navbar />
1215
<DApp />
13-
</>
16+
</Provider>
1417
);
1518
};
1619

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

Lines changed: 31 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import Popover from "@mui/material/Popover";
1010
import ClickAwayListener from "@mui/material/ClickAwayListener";
1111
import VerifiedIcon from "@mui/icons-material/Verified";
1212
import OpenseaIcon from "../../_utils/assets/icons/opensea.svg";
13+
import { useDispatch, useSelector } from "../store/hooks";
14+
import { signIn } from "../store/actions/app.actions";
1315

1416
const dripsOwned = [
1517
{
@@ -40,7 +42,8 @@ const dripsOwned = [
4042
];
4143

4244
export const NavbarComponent: FC = () => {
43-
const [connected, setConnected] = useState(false);
45+
const state = useSelector((state) => state.appState);
46+
const dispatch = useDispatch();
4447

4548
const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
4649
const handlePopoverOpen = (event: React.MouseEvent<HTMLElement>) => {
@@ -80,7 +83,7 @@ export const NavbarComponent: FC = () => {
8083
alignItems="center"
8184
>
8285
<Grid item>
83-
<Clickable activated={connected} onClick={handlePopoverOpen}>
86+
<Clickable activated={state.signedIn} onClick={handlePopoverOpen}>
8487
<AccountBalanceWalletIcon
8588
style={{
8689
fontSize: "40px",
@@ -104,8 +107,8 @@ export const NavbarComponent: FC = () => {
104107
<Style.WalletView>
105108
{dripsOwned.length ? (
106109
<Grid container>
107-
{dripsOwned.map((drip) => (
108-
<Grid item>
110+
{dripsOwned.map((drip, index) => (
111+
<Grid item key={index}>
109112
<Grid container>
110113
<Grid item xs={2}>
111114
<img src={drip.img} style={{ width: "100%" }} alt="" />
@@ -194,35 +197,33 @@ export const NavbarComponent: FC = () => {
194197
</Popover>
195198
</Grid>
196199
<Grid item>
197-
{connected ? (
198-
<Clickable onClick={() => setConnected(false)}>
199-
<Style.Wallet container>
200-
<Grid
201-
item
202-
xs={1}
203-
style={{ display: "flex", justifyContent: "center", marginRight: "5px" }}
204-
>
205-
<img
206-
src="https://avatars.githubusercontent.com/u/96990732"
207-
alt=""
208-
style={{ width: "40px", borderRadius: "20px" }}
209-
/>
210-
</Grid>
211-
<Grid item xs={1} />
212-
<Grid item xs={7}>
213-
<Grid container>
214-
<Grid item xs={12}>
215-
<Style.WalletENS>bonjour.eth</Style.WalletENS>
216-
</Grid>
217-
<Grid item xs={12}>
218-
<Style.WalletAddy>0x1234...5678</Style.WalletAddy>
219-
</Grid>
200+
{state.signedIn ? (
201+
<Style.Wallet container>
202+
<Grid
203+
item
204+
xs={1}
205+
style={{ display: "flex", justifyContent: "center", marginRight: "5px" }}
206+
>
207+
<img
208+
src="https://avatars.githubusercontent.com/u/96990732"
209+
alt=""
210+
style={{ width: "40px", borderRadius: "20px" }}
211+
/>
212+
</Grid>
213+
<Grid item xs={1} />
214+
<Grid item xs={7}>
215+
<Grid container>
216+
<Grid item xs={12}>
217+
<Style.WalletENS>bonjour.eth</Style.WalletENS>
218+
</Grid>
219+
<Grid item xs={12}>
220+
<Style.WalletAddy>0x1234...5678</Style.WalletAddy>
220221
</Grid>
221222
</Grid>
222-
</Style.Wallet>
223-
</Clickable>
223+
</Grid>
224+
</Style.Wallet>
224225
) : (
225-
<Clickable onClick={() => setConnected(true)}>
226+
<Clickable onClick={() => dispatch(signIn())}>
226227
<Style.GoToAppButton>Connect Wallet</Style.GoToAppButton>
227228
</Clickable>
228229
)}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ const style = {
9595
color: "grey",
9696
fontSize: "0.8em",
9797
})),
98-
WalletTypoCollection: styled(Typography)(({ theme }) => ({
98+
WalletTypoCollection: styled("div")(({ theme }) => ({
9999
fontFamily: theme.fontFamily.primary,
100100
fontWeight: 600,
101101
letterSpacing: "0.5px",

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import { configureStore } from "@reduxjs/toolkit";
2-
import thunk from "redux-thunk";
32
import { reducers } from "./reducers/index";
43

54
export const store = configureStore({
65
reducer: reducers,
7-
middleware: [thunk],
86
});
97

108
export type RootState = ReturnType<typeof store.getState>;

‎packages/app/yarn.lock‎

Lines changed: 36 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1382,6 +1382,13 @@
13821382
dependencies:
13831383
regenerator-runtime "^0.13.4"
13841384

1385+
"@babel/runtime@^7.12.1":
1386+
version "7.17.9"
1387+
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72"
1388+
integrity sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==
1389+
dependencies:
1390+
regenerator-runtime "^0.13.4"
1391+
13851392
"@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.15.4", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
13861393
version "7.16.0"
13871394
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.0.tgz#e27b977f2e2088ba24748bf99b5e1dece64e4f0b"
@@ -3071,7 +3078,7 @@
30713078
dependencies:
30723079
"@types/node" "*"
30733080

3074-
"@types/hoist-non-react-statics@*", "@types/hoist-non-react-statics@^3.3.0":
3081+
"@types/hoist-non-react-statics@*", "@types/hoist-non-react-statics@^3.3.0", "@types/hoist-non-react-statics@^3.3.1":
30753082
version "3.3.1"
30763083
resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
30773084
integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
@@ -3295,6 +3302,11 @@
32953302
dependencies:
32963303
source-map "^0.6.1"
32973304

3305+
"@types/use-sync-external-store@^0.0.3":
3306+
version "0.0.3"
3307+
resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43"
3308+
integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==
3309+
32983310
"@types/webpack-sources@*":
32993311
version "2.1.0"
33003312
resolved "https://registry.yarnpkg.com/@types/webpack-sources/-/webpack-sources-2.1.0.tgz#8882b0bd62d1e0ce62f183d0d01b72e6e82e8c10"
@@ -11680,6 +11692,11 @@ react-is@^17.0.2:
1168011692
resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
1168111693
integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
1168211694

11695+
react-is@^18.0.0:
11696+
version "18.1.0"
11697+
resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.1.0.tgz#61aaed3096d30eacf2a2127118b5b41387d32a67"
11698+
integrity sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==
11699+
1168311700
react-merge-refs@^1.1.0:
1168411701
version "1.1.0"
1168511702
resolved "https://registry.yarnpkg.com/react-merge-refs/-/react-merge-refs-1.1.0.tgz#73d88b892c6c68cbb7a66e0800faa374f4c38b06"
@@ -11705,6 +11722,18 @@ react-reconciler@^0.26.2:
1170511722
object-assign "^4.1.1"
1170611723
scheduler "^0.20.2"
1170711724

11725+
react-redux@^8.0.1:
11726+
version "8.0.1"
11727+
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.0.1.tgz#2bc029f5ada9b443107914c373a2750f6bc0f40c"
11728+
integrity sha512-LMZMsPY4DYdZfLJgd7i79n5Kps5N9XVLCJJeWAaPYTV+Eah2zTuBjTxKtNEbjiyitbq80/eIkm55CYSLqAub3w==
11729+
dependencies:
11730+
"@babel/runtime" "^7.12.1"
11731+
"@types/hoist-non-react-statics" "^3.3.1"
11732+
"@types/use-sync-external-store" "^0.0.3"
11733+
hoist-non-react-statics "^3.3.2"
11734+
react-is "^18.0.0"
11735+
use-sync-external-store "^1.0.0"
11736+
1170811737
react-refresh@^0.8.3:
1170911738
version "0.8.3"
1171011739
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
@@ -11972,7 +12001,7 @@ redux-thunk@^2.4.1:
1197212001
resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.4.1.tgz#0dd8042cf47868f4b29699941de03c9301a75714"
1197312002
integrity sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==
1197412003

11975-
redux@^4.0.0, redux@^4.1.2:
12004+
redux@^4.0.0, redux@^4.1.2, redux@^4.2.0:
1197612005
version "4.2.0"
1197712006
resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.0.tgz#46f10d6e29b6666df758780437651eeb2b969f13"
1197812007
integrity sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==
@@ -13913,6 +13942,11 @@ [email protected]:
1391313942
resolved "https://registry.yarnpkg.com/use-error-boundary/-/use-error-boundary-2.0.6.tgz#10f0cd45f6e53cedca8a567fa2b7bc8c709e4420"
1391413943
integrity sha512-AWCVKSAanLe6R/on/ZkHYtGKfXs8BQX6z/TUGYqtvkajLqQyrGKJJscbahtq8OyN8L3LqTRjJWx4gCOLmfIObw==
1391513944

13945+
use-sync-external-store@^1.0.0:
13946+
version "1.1.0"
13947+
resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.1.0.tgz#3343c3fe7f7e404db70f8c687adf5c1652d34e82"
13948+
integrity sha512-SEnieB2FPKEVne66NpXPd1Np4R1lTNKfjuy3XdIoPQKYBAFdzbzSZlSn1KJZUiihQLQC5Znot4SBz1EOTBwQAQ==
13949+
1391613950
use@^3.1.0:
1391713951
version "3.1.1"
1391813952
resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"

0 commit comments

Comments
 (0)