/
modal.ts
124 lines (113 loc) · 3.09 KB
/
modal.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
import { useCallback, useEffect, useState } from 'react';
export const useModal = (
isLoggedIn?: boolean,
isConnected?: boolean,
areScopesFullfiled?: boolean
): {
isModalOpen: boolean;
closeModal: (forceCallback?: boolean) => void;
setModalOpen: (modalOpen: boolean) => void;
modalCallback: (() => void) | null;
setModalCallback: (callback: () => void) => void;
forcedPage: string | null;
setForcedPage?: (page: null | string) => void;
openMintSoulnameModal: (mintCallback?: () => void) => void;
openMintMasaGreen: (mintCallback?: () => void) => void;
modalSize: {
width: number;
height: number;
} | null;
setModalSize: (size: { width: number; height: number }) => void;
useModalSize: (size: { width: number; height: number }) => void;
openGallery: (callback?: () => void) => void;
} => {
const [isModalOpen, setModalOpen] = useState(false);
const [modalCallback, setModalCallback] = useState<(() => void) | null>(null);
const [forcedPage, setForcedPage] = useState<null | string>(null);
const [modalSize, setModalSize] = useState<{
width: number;
height: number;
} | null>(null);
const closeModal = useCallback(
(forceCallback?: boolean) => {
setModalOpen(false);
if (
!forcedPage &&
areScopesFullfiled &&
!!modalCallback &&
isLoggedIn &&
isConnected
) {
modalCallback();
console.log(modalCallback.name);
} else if (forceCallback && modalCallback) {
modalCallback();
}
},
[
modalCallback,
setModalOpen,
isLoggedIn,
isConnected,
areScopesFullfiled,
forcedPage,
]
);
const useModalSize = (newSize: { width: number; height: number }) => {
useEffect(() => {
setModalSize(newSize);
return () => setModalSize(null);
}, []);
};
const openMintSoulnameModal = useCallback(
(mintCallback?: () => void) => {
setForcedPage?.('createSoulname');
setModalOpen(true);
const cb = () => {
setForcedPage?.(null);
if (mintCallback) mintCallback();
};
setModalCallback(() => cb);
},
[setForcedPage, setModalOpen, setModalCallback]
);
const openMintMasaGreen = useCallback(
(mintCallback?: () => void) => {
setForcedPage?.('masaGreen');
setModalOpen(true);
const cb = () => {
setForcedPage?.(null);
if (mintCallback) mintCallback();
};
setModalCallback(() => cb);
},
[setForcedPage, setModalOpen, setModalCallback]
);
const openGallery = useCallback(
(mintCallback?: () => void) => {
setForcedPage?.('gallery');
setModalOpen(true);
const cb = () => {
setForcedPage?.(null);
if (mintCallback) mintCallback();
};
setModalCallback(() => cb);
},
[setForcedPage, setModalOpen, setModalCallback]
);
return {
isModalOpen,
closeModal,
setModalOpen,
setModalCallback,
modalCallback,
forcedPage,
setForcedPage,
openMintSoulnameModal,
openMintMasaGreen,
modalSize,
setModalSize,
useModalSize,
openGallery,
};
};