mirror of
https://github.com/Qortal/chrome-extension.git
synced 2025-02-11 17:55:49 +00:00
add more mobile styles
This commit is contained in:
parent
a7ccaf53e0
commit
f9c6f4c5fd
17
src/App.tsx
17
src/App.tsx
@ -129,7 +129,7 @@ const defaultValues: MyContextInterface = {
|
||||
message: "",
|
||||
},
|
||||
};
|
||||
export let isMobile = false
|
||||
export let isMobile = true
|
||||
|
||||
const isMobileDevice = () => {
|
||||
const userAgent = navigator.userAgent || navigator.vendor || window.opera;
|
||||
@ -1192,7 +1192,7 @@ function App() {
|
||||
|
||||
const renderProfile = ()=> {
|
||||
return (
|
||||
<AuthenticatedContainer sx={{ width:"350px", display: 'flex' }}>
|
||||
<AuthenticatedContainer sx={{ width: isMobile ? '100vw' : "350px", display: 'flex', backgroundColor: 'var(--bg-2)' }}>
|
||||
{isMobile && (
|
||||
<Box sx={{
|
||||
padding: '10px',
|
||||
@ -1349,7 +1349,7 @@ function App() {
|
||||
textDecoration: "underline",
|
||||
}}
|
||||
onClick={() => {
|
||||
chrome.tabs.create({ url: "https://www.qort.trade" });
|
||||
chrome.tabs.create({ url: "https://www.qort.trade", active: true });
|
||||
}}
|
||||
>
|
||||
Get QORT at qort.trade
|
||||
@ -1367,7 +1367,9 @@ function App() {
|
||||
cursor: "pointer",
|
||||
}}
|
||||
/>
|
||||
<Spacer height="20px" />
|
||||
{!isMobile && (
|
||||
<>
|
||||
<Spacer height="20px" />
|
||||
<img
|
||||
src={Logout}
|
||||
onClick={()=> {
|
||||
@ -1378,6 +1380,9 @@ function App() {
|
||||
cursor: "pointer",
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Spacer height="20px" />
|
||||
{authenticatedMode === "qort" && (
|
||||
<img
|
||||
@ -1621,10 +1626,12 @@ function App() {
|
||||
width: "100vw",
|
||||
height: isMobile ? '100%' : "100vh",
|
||||
display: "flex",
|
||||
flexDirection: isMobile ? 'column' : 'row'
|
||||
flexDirection: isMobile ? 'column' : 'row',
|
||||
overflow: isMobile && 'hidden'
|
||||
}}
|
||||
>
|
||||
<Group
|
||||
logoutFunc={logoutFunc}
|
||||
balance={balance}
|
||||
userInfo={userInfo}
|
||||
myAddress={address}
|
||||
|
||||
14
src/assets/Icons/ArrowDownIcon.tsx
Normal file
14
src/assets/Icons/ArrowDownIcon.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
import React from 'react';
|
||||
|
||||
export const ArrowDownIcon= ({ color = 'white', height, width }) => {
|
||||
return (
|
||||
<svg width="10" height="9" viewBox="0 0 10 9" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.7" d="M4.944 8.12L-1.86823e-07 0.992L0.648 0.536L4.944 6.776L9.24 0.536L9.888 0.992L4.944 8.12Z" fill={color}/>
|
||||
</svg>
|
||||
|
||||
|
||||
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
12
src/assets/Icons/ChatIcon.tsx
Normal file
12
src/assets/Icons/ChatIcon.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
|
||||
export const ChatIcon= ({ color = 'white', height, width }) => {
|
||||
return (
|
||||
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.5 0C3.35915 0 0 3.35915 0 7.5V13.8169C0 14.4718 0.528169 15 1.1831 15H7.5C11.6408 15 15 11.6408 15 7.5C15 3.35915 11.6408 0 7.5 0ZM11.0915 10.669H3.90845C3.67606 10.669 3.48592 10.4789 3.48592 10.2465C3.48592 10.0141 3.67606 9.82394 3.90845 9.82394H11.0915C11.3239 9.82394 11.5141 10.0141 11.5141 10.2465C11.5141 10.4789 11.3239 10.669 11.0915 10.669ZM11.0915 8.34507H3.90845C3.67606 8.34507 3.48592 8.15493 3.48592 7.92254C3.48592 7.69014 3.67606 7.5 3.90845 7.5H11.0915C11.3239 7.5 11.5141 7.69014 11.5141 7.92254C11.5141 8.15493 11.3239 8.34507 11.0915 8.34507ZM11.0915 6.02113H3.90845C3.67606 6.02113 3.48592 5.83099 3.48592 5.59859C3.48592 5.3662 3.67606 5.17606 3.90845 5.17606H11.0915C11.3239 5.17606 11.5141 5.3662 11.5141 5.59859C11.5141 5.83099 11.3239 6.02113 11.0915 6.02113Z" fill={color}/>
|
||||
</svg>
|
||||
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
12
src/assets/Icons/HomeIcon.tsx
Normal file
12
src/assets/Icons/HomeIcon.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
|
||||
export const HomeIcon= ({ color, height = 20, width = 23 }) => {
|
||||
return (
|
||||
<svg width={width} height={height} viewBox="0 0 23 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M22.936 11.9842C22.8122 12.2972 22.5127 12.502 22.1801 12.5008H19.7155V19.1668C19.714 19.6263 19.3471 19.9985 18.8939 20H14.7862V14.1673C14.7862 12.3265 13.3149 10.8343 11.5 10.8343C9.68509 10.8343 8.21381 12.3265 8.21381 14.1673V20H4.10607C3.65294 19.9985 3.28596 19.6263 3.28452 19.1668V12.5008H0.819874C0.487346 12.502 0.187777 12.2972 0.0640491 11.9842C-0.0642812 11.6739 0.00375033 11.3157 0.236574 11.076L10.9167 0.243778C11.2395 -0.0812593 11.7605 -0.0812593 12.0833 0.243778L22.7634 11.076C22.9963 11.3157 23.0643 11.6739 22.936 11.9842Z" fill={color}/>
|
||||
</svg>
|
||||
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
12
src/assets/Icons/HubsIcon.tsx
Normal file
12
src/assets/Icons/HubsIcon.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
|
||||
export const HubsIcon= ({ color, height, width }) => {
|
||||
return (
|
||||
<svg width="32" height="31" viewBox="0 0 32 31" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M24.5333 30H22.4C22.3987 28.1694 20.9667 26.6856 19.2 26.6842H12.8C11.0333 26.6856 9.60133 28.1694 9.6 30H7.46667C7.468 28.5355 8.03065 27.1305 9.03066 26.0943C10.0307 25.0581 11.3866 24.4751 12.8 24.4737H19.2C20.6133 24.4751 21.9693 25.0581 22.9693 26.0943C23.9693 27.1305 24.532 28.5355 24.5333 30ZM11.7333 17.8422C11.7333 16.0545 12.7733 14.4422 14.3667 13.7583C15.9613 13.073 17.7974 13.4516 19.0173 14.7157C20.2373 15.9798 20.6026 17.8822 19.9413 19.5346C19.2813 21.1856 17.7253 22.2632 15.9999 22.2632C13.6439 22.2604 11.7361 20.2834 11.7333 17.8422ZM13.8667 17.8422C13.8667 18.7361 14.3867 19.5429 15.184 19.8842C15.9813 20.2268 16.8987 20.0375 17.508 19.4048C18.1187 18.7734 18.3013 17.8228 17.9707 16.9967C17.6414 16.1705 16.8627 15.6317 16 15.6317C14.8227 15.6331 13.868 16.6223 13.8667 17.8422ZM26.6667 20.0527H22.4V22.2632H26.6667C28.4333 22.2646 29.8653 23.7484 29.8667 25.579H32C31.9987 24.1145 31.436 22.7095 30.436 21.6733C29.436 20.6371 28.08 20.0541 26.6667 20.0527ZM21.3333 13.4212C21.3333 11.6335 22.3733 10.0212 23.9667 9.33727C25.5613 8.65201 27.3974 9.03056 28.6173 10.2947C29.8373 11.5588 30.2026 13.4612 29.5413 15.1136C28.8813 16.7646 27.3253 17.8422 25.5999 17.8422C23.2439 17.8394 21.3361 15.8624 21.3333 13.4212ZM23.4667 13.4212C23.4667 14.3151 23.9867 15.1219 24.784 15.4632C25.5813 15.8058 26.4987 15.6165 27.108 14.9837C27.7187 14.3524 27.9013 13.4018 27.5707 12.5757C27.2414 11.7495 26.4627 11.2107 25.6 11.2107C24.4227 11.2121 23.468 12.2013 23.4667 13.4212ZM9.6 20.0527H5.33333C3.92001 20.0541 2.56399 20.6371 1.56399 21.6733C0.563985 22.7095 0.0013312 24.1145 0 25.579H2.13333C2.13467 23.7484 3.56666 22.2646 5.33333 22.2632H9.6V20.0527ZM2.13333 13.4212C2.13333 11.6335 3.17334 10.0212 4.76665 9.33727C6.36133 8.65201 8.19739 9.03056 9.41732 10.2947C10.6373 11.5588 11.0026 13.4612 10.3413 15.1136C9.6813 16.7646 8.1253 17.8422 6.39993 17.8422C4.04395 17.8394 2.13606 15.8624 2.13333 13.4212ZM4.26667 13.4212C4.26667 14.3151 4.78665 15.1219 5.58401 15.4632C6.38133 15.8058 7.29866 15.6165 7.90801 14.9837C8.51869 14.3524 8.70134 13.4018 8.37069 12.5757C8.04136 11.7495 7.26269 11.2107 6.40003 11.2107C5.22271 11.2121 4.268 12.2013 4.26667 13.4212Z" fill={color}/>
|
||||
</svg>
|
||||
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
12
src/assets/Icons/LogoutIcon.tsx
Normal file
12
src/assets/Icons/LogoutIcon.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
|
||||
export const LogoutIcon= ({ color, height = 20, width = 18}) => {
|
||||
return (
|
||||
<svg width={width} height={height} viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.4351 0H1.63891C0.733765 0 0 0.727797 0 1.62558V18.3744C0 19.2722 0.733765 20 1.63891 20H10.4351C11.3403 20 12.0741 19.2722 12.0741 18.3744V12.6013H7.38321C6.54312 12.6013 5.85964 11.9039 5.85964 11.0467V8.87329C5.85964 8.01613 6.54312 7.31875 7.38323 7.31875H12.0741V1.62558C12.0741 0.727797 11.3403 0 10.4351 0ZM6.83334 11.0467C6.83334 11.3719 7.07952 11.6354 7.38321 11.6354H13.1856C13.2548 11.6354 13.3109 11.6955 13.3109 11.7696V12.8632C13.3109 13.3492 13.8299 13.6259 14.1922 13.3329L17.7816 10.4298C18.0728 10.1942 18.0728 9.72579 17.7816 9.49024L14.1922 6.58709C13.8299 6.29409 13.3109 6.57077 13.3109 7.05684V8.1504C13.3109 8.2245 13.2548 8.28454 13.1856 8.28454H7.38322C7.07952 8.28454 6.83334 8.54813 6.83334 8.87329V11.0467Z" fill={color} />
|
||||
</svg>
|
||||
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
19
src/assets/Icons/MembersIcon.tsx
Normal file
19
src/assets/Icons/MembersIcon.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import React from 'react';
|
||||
|
||||
export const MembersIcon= ({ color = 'white', height, width }) => {
|
||||
return (
|
||||
<svg width="15" height="9" viewBox="0 0 15 9" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.49996 4.9293C8.77012 4.9293 9.79978 3.94984 9.79978 2.74163C9.79978 1.53341 8.77012 0.553955 7.49996 0.553955C6.2298 0.553955 5.20013 1.53341 5.20013 2.74163C5.20013 3.94984 6.2298 4.9293 7.49996 4.9293Z" fill={color}/>
|
||||
<path d="M9.30277 4.64917C8.82468 5.05863 8.19406 5.30992 7.50002 5.30992C6.80598 5.30992 6.17536 5.05863 5.69727 4.64917C4.97694 5.02944 4.31037 5.23459 3.95385 6.59055C3.794 7.19904 3.63416 8.18808 3.63416 8.18808C3.63416 8.18808 5.12685 9.00005 7.50031 9.00005C9.87349 9.00005 11.3662 8.18808 11.3662 8.18808C11.3662 8.18808 11.2063 7.19904 11.0465 6.59055C10.6897 5.23487 10.0231 5.02944 9.30277 4.64917Z" fill={color}/>
|
||||
<path d="M10.0088 3.65572C10.3802 3.94092 10.8519 4.11243 11.3662 4.11243C12.5602 4.11243 13.5278 3.19205 13.5278 2.05652C13.5278 0.920989 12.5599 0.000610352 11.3662 0.000610352C10.5649 0.000610352 9.86676 0.416185 9.49359 1.03301C9.92404 1.48639 10.1882 2.08432 10.1882 2.74201C10.1879 3.06363 10.1239 3.37107 10.0088 3.65572Z" fill={color}/>
|
||||
<path d="M14.6993 5.67372C14.3644 4.39948 13.7378 4.20712 13.0608 3.84937C12.6116 4.23408 12.0187 4.47009 11.3661 4.47009C10.7954 4.47009 10.2697 4.2894 9.84627 3.98613C9.76707 4.12095 9.6756 4.24937 9.57245 4.36807C9.61599 4.39058 9.66012 4.41338 9.70337 4.43534C10.3705 4.77419 11.0608 5.12416 11.4231 6.50098C11.5429 6.95797 11.6601 7.60649 11.7159 7.93144C13.7419 7.85834 15 7.1759 15 7.1759C15 7.1759 14.8495 6.24607 14.6993 5.67372Z" fill={color}/>
|
||||
<path d="M3.63377 4.1121C4.14809 4.1121 4.62003 3.94087 4.99116 3.65538C4.87632 3.37102 4.81203 3.0633 4.81203 2.7414C4.81203 2.08371 5.07649 1.4855 5.50665 1.0324C5.13348 0.415574 4.43535 0 3.63377 0C2.44002 0 1.47217 0.920657 1.47217 2.05591C1.47217 3.192 2.44002 4.1121 3.63377 4.1121Z" fill={color}/>
|
||||
<path d="M5.29632 4.43534C5.33956 4.41338 5.38369 4.39058 5.42753 4.36807C5.32437 4.24937 5.23319 4.12095 5.15371 3.98613C4.73027 4.2894 4.20456 4.47009 3.63384 4.47009C2.98159 4.47009 2.38866 4.23381 1.93922 3.84937C1.26213 4.20712 0.635593 4.39948 0.300701 5.67372C0.150497 6.24635 0 7.17563 0 7.17563C0 7.17563 1.25833 7.85806 3.28404 7.93116C3.33986 7.60621 3.45733 6.95769 3.57715 6.5007C3.93921 5.12388 4.62916 4.77391 5.29632 4.43534Z" fill={color}/>
|
||||
</svg>
|
||||
|
||||
|
||||
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
13
src/assets/Icons/MessagingIcon.tsx
Normal file
13
src/assets/Icons/MessagingIcon.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
|
||||
export const MessagingIcon= ({ color, height = 31, width = 31 }) => {
|
||||
return (
|
||||
<svg width={width} height={height} viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M26.3937 4.49877C23.6712 1.56681 3.1922 8.74911 3.20912 11.3714C3.22829 14.345 11.2067 15.2597 13.4181 15.8802C14.748 16.2532 15.1041 16.6357 15.4107 18.0302C16.7995 24.3457 17.4967 27.487 19.0859 27.5571C21.6189 27.6691 29.0507 7.36011 26.3937 4.49877Z" stroke={color} stroke-width="2"/>
|
||||
<path d="M14.4591 16.3076L18.8341 11.9326" stroke={color} stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
13
src/assets/Icons/NotificationIcon.tsx
Normal file
13
src/assets/Icons/NotificationIcon.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
|
||||
export const NotificationIcon= ({ color, height, width }) => {
|
||||
return (
|
||||
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.55681 1.32222C6.55681 0.591749 7.20253 0 7.99963 0C8.79673 0 9.44245 0.591749 9.44245 1.32222V1.35911C12.663 1.9634 15.0849 4.57455 15.0849 7.70462V10.394C15.0849 10.6213 15.13 10.847 15.2169 11.0595L15.8997 12.7234C16.2797 13.6501 15.5326 14.6389 14.4529 14.6389H10.7749C10.6694 15.9589 9.46735 17 7.99955 17C6.53175 17 5.32972 15.9589 5.22418 14.6389H1.54706C0.485079 14.6389 -0.260488 13.6804 0.0857267 12.7603L0.729843 11.0485C0.804721 10.8493 0.842564 10.6398 0.842564 10.4288V7.80284C0.842564 4.63009 3.29495 1.98282 6.55675 1.3644L6.55681 1.32222ZM6.67597 14.6388C6.775 15.2269 7.32975 15.6777 7.99963 15.6777C8.66951 15.6777 9.22426 15.2269 9.3233 14.6388H6.67597ZM8.01734 2.54999C4.85241 2.54999 2.28543 4.90146 2.28543 7.80278V10.4287C2.28543 10.7866 2.22102 11.1415 2.0938 11.4794L1.44969 13.1912C1.42714 13.2524 1.47626 13.3166 1.54711 13.3166H14.4527C14.5252 13.3166 14.5743 13.251 14.5493 13.189L13.8666 11.5251C13.7184 11.1636 13.6419 10.7807 13.6419 10.394V7.70463C13.6419 4.85809 11.1243 2.54999 8.01734 2.54999Z" fill={color}/>
|
||||
</svg>
|
||||
|
||||
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
11
src/assets/Icons/NotificationIcon2.tsx
Normal file
11
src/assets/Icons/NotificationIcon2.tsx
Normal file
@ -0,0 +1,11 @@
|
||||
import React from 'react';
|
||||
|
||||
export const NotificationIcon2= ({ color = 'white', height, width }) => {
|
||||
return (
|
||||
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.50253 0.80505C8.50253 0.360285 8.14231 0 7.69818 0C7.25348 0 6.89325 0.36027 6.89325 0.80505V1.6142C6.89325 2.05896 7.25346 2.41866 7.69818 2.41866C8.14229 2.41866 8.50253 2.05839 8.50253 1.61361V0.80505ZM7.06691 3.12343C7.45178 2.90163 7.944 3.03366 8.16577 3.41857L12.3049 10.5872C12.5231 10.9715 12.3905 11.4603 12.0074 11.6815C11.6243 11.9027 11.1344 11.773 10.9109 11.3916L10.8517 11.2884L7.53454 12.0588C7.73401 12.7922 7.56388 13.5767 7.07751 14.1606C6.59173 14.7444 5.85192 15.0548 5.09454 14.992C4.33771 14.9286 3.65892 14.5009 3.27588 13.8443L3.27353 13.8414L2.86989 13.1431L1.30986 13.5046L1.31045 13.504C1.08047 13.5574 0.842856 13.4547 0.724941 13.2499L0.0713702 12.118C-0.0459665 11.9138 -0.0166327 11.6562 0.144705 11.4837L6.83346 4.32684L6.77245 4.22298C6.66567 4.03814 6.63633 3.8187 6.69207 3.61216C6.74722 3.40561 6.8821 3.23022 7.06691 3.12343ZM4.50841 12.7617L5.96397 12.4237C6.09539 12.7746 5.9364 13.1683 5.59729 13.3279C5.25819 13.4875 4.85338 13.3602 4.66623 13.0351L4.50841 12.7617ZM15 7.30235C15 7.51593 14.9155 7.72072 14.7647 7.87152C14.614 8.02232 14.4092 8.1074 14.1957 8.1074H13.3866C12.9419 8.1074 12.5823 7.74713 12.5823 7.30235C12.5823 6.85817 12.9425 6.49788 13.3872 6.49788H14.1951C14.6398 6.49788 15 6.85815 15 7.30235ZM2.01088 8.10681C2.45558 8.10681 2.81582 7.74713 2.81582 7.30235C2.81582 6.85817 2.4556 6.49788 2.01088 6.49788H1.20185C0.757149 6.49788 0.397502 6.85815 0.397502 7.30235C0.397502 7.74711 0.75772 8.1074 1.20244 8.1074H2.01147L2.01088 8.10681ZM4.35176 3.95659C4.03789 4.2705 3.52864 4.27109 3.21477 3.95717L2.53481 3.27712C2.37465 3.12808 2.28253 2.92036 2.27843 2.70209C2.27491 2.48381 2.35998 2.27374 2.51428 2.11884C2.66857 1.96453 2.8792 1.87943 3.09744 1.88355C3.31568 1.88766 3.52278 1.97978 3.6718 2.13937L4.35295 2.81826C4.50431 2.96906 4.58879 3.17443 4.58879 3.38802C4.58879 3.60161 4.50431 3.80639 4.35295 3.95719L4.35176 3.95659ZM12.861 3.27653L12.8616 3.27712C13.1567 2.95967 13.1479 2.46562 12.8416 2.15932C12.5354 1.85302 12.0414 1.84422 11.724 2.13937L11.0352 2.82589C10.7214 3.1398 10.7214 3.6503 11.0352 3.9648C11.3497 4.27872 11.8595 4.27872 12.1734 3.9648L12.861 3.27829V3.27653Z" fill={color}/>
|
||||
</svg>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
13
src/assets/Icons/ThreadsIcon.tsx
Normal file
13
src/assets/Icons/ThreadsIcon.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
|
||||
export const ThreadsIcon= ({ color = 'white', height, width }) => {
|
||||
return (
|
||||
<svg width="8" height="9" viewBox="0 0 8 9" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.51017 1.80943H7.76526H8V0.982675C8 0.440572 7.62128 0 7.1518 0H0.8482C0.380282 0 0 0.440572 0 0.982675V5.84347C0 6.38558 0.380282 6.82615 0.8482 6.82615H2.00782L1.90297 9L4 6.82615H5.42723V6.55419V3.06406C5.42723 2.37147 5.91236 1.80943 6.51017 1.80943Z" fill={color}/>
|
||||
</svg>
|
||||
|
||||
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
11
src/assets/Icons/TradingIcon.tsx
Normal file
11
src/assets/Icons/TradingIcon.tsx
Normal file
@ -0,0 +1,11 @@
|
||||
import React from 'react';
|
||||
|
||||
export const TradingIcon= ({ color, height, width }) => {
|
||||
return (
|
||||
<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M29.6627 28.5686H5.6079C5.06735 28.5647 4.53939 28.4034 4.08736 28.104L8.41371 24.3903C8.68787 24.1495 9.01146 23.9731 9.36122 23.8737C9.71097 23.7744 10.0782 23.7546 10.4364 23.8157L18.8398 25.2345C19.5576 25.3564 20.294 25.3032 20.9873 25.0792C21.6806 24.8552 22.3109 24.467 22.8255 23.947L29.617 17.1085C29.8031 16.9068 29.9044 16.64 29.8996 16.3643C29.8948 16.0886 29.7842 15.8256 29.5912 15.6307C29.3982 15.4357 29.1378 15.324 28.8649 15.3192C28.5919 15.3143 28.3278 15.4166 28.1281 15.6046L21.3225 22.4537C21.047 22.7365 20.7084 22.9485 20.3351 23.0719C19.9618 23.1953 19.5646 23.2266 19.1769 23.1631L10.7876 21.7195C10.1245 21.6058 9.44477 21.6422 8.79738 21.8263C8.15 22.0103 7.55117 22.3373 7.04417 22.7836L2.87233 26.3624C2.82441 26.1554 2.79968 25.9437 2.79859 25.7311V24.3123L7.18463 16.8389C7.44944 16.3923 7.84654 16.041 8.3198 15.8348C8.79305 15.6286 9.31851 15.5778 9.82188 15.6897L17.5299 17.3745C18.1946 17.5208 18.8833 17.5152 19.5455 17.358C20.2078 17.2009 20.8269 16.8963 21.3576 16.4665L29.5327 9.8408C29.6456 9.75519 29.7402 9.64756 29.8111 9.52429C29.8819 9.40103 29.9275 9.26464 29.9452 9.12323C29.9629 8.98181 29.9522 8.83826 29.9139 8.70108C29.8756 8.5639 29.8104 8.4359 29.7221 8.32467C29.6339 8.21344 29.5244 8.12125 29.4002 8.05357C29.276 7.98589 29.1396 7.9441 28.9991 7.93069C28.8587 7.91727 28.7169 7.9325 28.5824 7.97547C28.4478 8.01844 28.3232 8.08828 28.2159 8.18084L20.0408 14.8065C19.755 15.0381 19.4216 15.2023 19.065 15.2869C18.7083 15.3716 18.3374 15.3747 17.9794 15.296L10.2714 13.597C9.33145 13.387 8.34986 13.4825 7.46689 13.8698C6.58392 14.2571 5.84477 14.9164 5.35506 15.7535L2.79859 20.1411V1.74669C2.79859 1.46448 2.68759 1.19383 2.49003 0.994272C2.29246 0.794718 2.0245 0.68261 1.74509 0.68261C1.46569 0.68261 1.19773 0.794718 1.00016 0.994272C0.802591 1.19383 0.691598 1.46448 0.691598 1.74669V25.7311C0.689568 26.7954 1.02832 27.8318 1.6573 28.6857C1.6573 28.707 1.68539 28.7318 1.70295 28.7531C2.1613 29.3522 2.74923 29.8376 3.42178 30.172C4.09433 30.5064 4.83369 30.6811 5.58332 30.6826H29.6381C29.9175 30.6826 30.1855 30.5705 30.383 30.3709C30.5806 30.1714 30.6916 29.9007 30.6916 29.6185C30.6916 29.3363 30.5806 29.0657 30.383 28.8661C30.1855 28.6666 29.9175 28.5544 29.6381 28.5544L29.6627 28.5686Z" fill={color}/>
|
||||
</svg>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
12
src/assets/Icons/WalletIcon.tsx
Normal file
12
src/assets/Icons/WalletIcon.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
|
||||
export const WalletIcon= ({ color, height, width }) => {
|
||||
return (
|
||||
<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19.0118 22.0891C18.0124 22.8671 16.6997 23.3391 15.2618 23.3391C13.8241 23.3391 12.5113 22.8671 11.5118 22.0891" stroke={color} stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M3.20108 17.356C2.7598 14.4844 2.53917 13.0486 3.08205 11.7758C3.62493 10.503 4.82938 9.63215 7.23827 7.89044L9.03808 6.58911C12.0347 4.42245 13.5331 3.33911 15.2618 3.33911C16.9907 3.33911 18.4889 4.42245 21.4856 6.58911L23.2854 7.89044C25.6943 9.63215 26.8988 10.503 27.4417 11.7758C27.9846 13.0486 27.7639 14.4844 27.3226 17.356L26.9463 19.8046C26.3208 23.8752 26.0079 25.9106 24.5481 27.1249C23.0882 28.3391 20.9539 28.3391 16.6853 28.3391H13.8383C9.56977 28.3391 7.43548 28.3391 5.97559 27.1249C4.5157 25.9106 4.20293 23.8752 3.57738 19.8046L3.20108 17.356Z" stroke={color} stroke-width="2" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
9
src/assets/svgs/BottomLogo.svg
Normal file
9
src/assets/svgs/BottomLogo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 561 KiB |
9
src/assets/svgs/BottomLogo2.svg
Normal file
9
src/assets/svgs/BottomLogo2.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 562 KiB |
9
src/assets/svgs/BottomLogo3.svg
Normal file
9
src/assets/svgs/BottomLogo3.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 562 KiB |
9
src/assets/svgs/BottomLogo4.svg
Normal file
9
src/assets/svgs/BottomLogo4.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 821 KiB |
9
src/assets/svgs/BottomLogo5.svg
Normal file
9
src/assets/svgs/BottomLogo5.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 508 KiB |
17
src/common/CustomSvg.tsx
Normal file
17
src/common/CustomSvg.tsx
Normal file
@ -0,0 +1,17 @@
|
||||
import React from 'react';
|
||||
|
||||
export const CustomSvg = ({ src, color = 'black', size = 24 }) => {
|
||||
return (
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
style={{ fill: color }}
|
||||
>
|
||||
{src}
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
@ -269,7 +269,9 @@ export const AnnouncementDiscussion = ({
|
||||
flexShrink: 0,
|
||||
}}>
|
||||
|
||||
<AuthenticatedContainerInnerTop>
|
||||
<AuthenticatedContainerInnerTop sx={{
|
||||
height: '20px'
|
||||
}}>
|
||||
<ArrowBackIcon onClick={()=> setSelectedAnnouncement(null)} sx={{
|
||||
cursor: 'pointer'
|
||||
}} />
|
||||
|
||||
@ -32,6 +32,7 @@ import { MyContext, getArbitraryEndpointReact, getBaseApiReact, isMobile, pauseA
|
||||
import { RequestQueueWithPromise } from "../../utils/queue/queue";
|
||||
import { CustomizedSnackbars } from "../Snackbar/Snackbar";
|
||||
import { addDataPublishesFunc, getDataPublishesFunc } from "../Group/Group";
|
||||
import { getRootHeight } from "../../utils/mobile/mobileUtils";
|
||||
|
||||
export const requestQueueCommentCount = new RequestQueueWithPromise(3)
|
||||
export const requestQueuePublishedAccouncements = new RequestQueueWithPromise(3)
|
||||
@ -489,7 +490,7 @@ export const GroupAnnouncements = ({
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
height: isMobile ? '100%' : "100vh",
|
||||
height: isMobile ? `calc(${getRootHeight()} - 83px` : "100vh",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
width: "100%",
|
||||
@ -508,7 +509,7 @@ export const GroupAnnouncements = ({
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
height: isMobile ? '100%' : "100vh",
|
||||
height: isMobile ? `calc(${getRootHeight()} - 83px` : "100vh",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
width: "100%",
|
||||
@ -524,23 +525,26 @@ export const GroupAnnouncements = ({
|
||||
flexDirection: "column",
|
||||
flexShrink: 0,
|
||||
}}>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
padding: isMobile ? '8px' : "25px",
|
||||
fontSize: isMobile ? '16px' : "20px",
|
||||
gap: '20px',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
>
|
||||
<CampaignIcon sx={{
|
||||
fontSize: isMobile ? '16px' : '30px'
|
||||
}} />
|
||||
Group Announcements
|
||||
</Box>
|
||||
<Spacer height={isMobile ? "10px" : "25px"} />
|
||||
{!isMobile && (
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
padding: isMobile ? '8px' : "25px",
|
||||
fontSize: isMobile ? '16px' : "20px",
|
||||
gap: '20px',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
>
|
||||
<CampaignIcon sx={{
|
||||
fontSize: isMobile ? '16px' : '30px'
|
||||
}} />
|
||||
Group Announcements
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Spacer height={isMobile ? "0px" : "25px"} />
|
||||
|
||||
</div>
|
||||
{!isLoading && combinedListTempAndReal?.length === 0 && (
|
||||
|
||||
@ -77,6 +77,11 @@ import { useMessageQueue } from "../../MessageQueueContext";
|
||||
import { DrawerComponent } from "../Drawer/Drawer";
|
||||
import { isExtMsg } from "../../background";
|
||||
import { ContextMenu } from "../ContextMenu";
|
||||
import { MobileFooter } from "../Mobile/MobileFooter";
|
||||
import Header from "../Mobile/MobileHeader";
|
||||
import { Home } from "./Home";
|
||||
import { GroupMenu } from "./GroupMenu";
|
||||
import { getRootHeight } from "../../utils/mobile/mobileUtils";
|
||||
|
||||
// let touchStartY = 0;
|
||||
// let disablePullToRefresh = false;
|
||||
@ -364,6 +369,7 @@ export const Group = ({
|
||||
balance,
|
||||
isOpenDrawerProfile,
|
||||
setIsOpenDrawerProfile,
|
||||
logoutFunc
|
||||
}: GroupProps) => {
|
||||
const [secretKey, setSecretKey] = useState(null);
|
||||
const [secretKeyPublishDate, setSecretKeyPublishDate] = useState(null);
|
||||
@ -407,6 +413,8 @@ export const Group = ({
|
||||
const [isLoadingGroupMessage, setIsLoadingGroupMessage] = React.useState('')
|
||||
const [drawerMode, setDrawerMode] = React.useState("groups");
|
||||
const [mutedGroups, setMutedGroups] = useState([])
|
||||
const [mobileViewMode, setMobileViewMode] = useState('home')
|
||||
const [mobileViewModeKeepOpen, setMobileViewModeKeepOpen] = useState('')
|
||||
|
||||
const isFocusedRef = useRef(true);
|
||||
const selectedGroupRef = useRef(null);
|
||||
@ -1266,7 +1274,7 @@ export const Group = ({
|
||||
setGroupSection("home");
|
||||
setGroupAnnouncements({});
|
||||
setDefaultThread(null);
|
||||
|
||||
setMobileViewMode('home')
|
||||
// Reset all useRef values to their initial states
|
||||
hasInitialized.current = false;
|
||||
hasInitializedWebsocket.current = false;
|
||||
@ -1333,7 +1341,7 @@ export const Group = ({
|
||||
|
||||
setTimeout(() => {
|
||||
setSelectedGroup(findGroup);
|
||||
|
||||
setMobileViewMode('group')
|
||||
getTimestampEnterChat();
|
||||
isLoadingOpenSectionFromNotification.current = false;
|
||||
}, 200);
|
||||
@ -1378,6 +1386,7 @@ export const Group = ({
|
||||
});
|
||||
setTimeout(() => {
|
||||
setSelectedGroup(findGroup);
|
||||
setMobileViewMode('group')
|
||||
|
||||
getGroupAnnouncements();
|
||||
}, 200);
|
||||
@ -1430,7 +1439,7 @@ export const Group = ({
|
||||
|
||||
setTimeout(() => {
|
||||
setSelectedGroup(findGroup);
|
||||
|
||||
setMobileViewMode('group')
|
||||
getGroupAnnouncements();
|
||||
}, 200);
|
||||
}
|
||||
@ -1449,6 +1458,12 @@ export const Group = ({
|
||||
};
|
||||
|
||||
const goToHome = async () => {
|
||||
if(isMobile){
|
||||
setMobileViewMode('home')
|
||||
}
|
||||
if(!isMobile){
|
||||
|
||||
}
|
||||
setGroupSection("default");
|
||||
clearAllQueues();
|
||||
await new Promise((res) => {
|
||||
@ -1494,6 +1509,17 @@ export const Group = ({
|
||||
}, 200);
|
||||
};
|
||||
|
||||
const openDrawerGroups = ()=> {
|
||||
setIsOpenDrawer(true);
|
||||
setDrawerMode("groups");
|
||||
}
|
||||
|
||||
const goToThreads = ()=> {
|
||||
setSelectedDirect(null);
|
||||
setNewChat(false)
|
||||
setGroupSection("forum")
|
||||
}
|
||||
|
||||
const goToChat = async () => {
|
||||
setGroupSection("default");
|
||||
await new Promise((res) => {
|
||||
@ -1519,18 +1545,175 @@ export const Group = ({
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const renderDirects = ()=> {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
width: isMobile ? '100%' : "300px",
|
||||
flexDirection: "column",
|
||||
alignItems: "flex-start",
|
||||
height: isMobile ? `calc(${getRootHeight()} - 30px)` : "100%"
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
width: "100%",
|
||||
flexDirection: "column",
|
||||
alignItems: "flex-start",
|
||||
flexGrow: 1,
|
||||
overflowY: "auto",
|
||||
// visibility: chatMode === "groups" && "hidden",
|
||||
// position: chatMode === "groups" && "fixed",
|
||||
// left: chatMode === "groups" && "-1000px",
|
||||
}}
|
||||
>
|
||||
{directs.map((direct: any) => (
|
||||
<List sx={{
|
||||
width: '100%'
|
||||
}} className="group-list" dense={true}>
|
||||
<ListItem
|
||||
// secondaryAction={
|
||||
// <IconButton edge="end" aria-label="delete">
|
||||
// <SettingsIcon />
|
||||
// </IconButton>
|
||||
// }
|
||||
onClick={() => {
|
||||
setSelectedDirect(null);
|
||||
setNewChat(false);
|
||||
// setSelectedGroup(null);
|
||||
setIsOpenDrawer(false);
|
||||
chrome?.runtime?.sendMessage({
|
||||
action: "addTimestampEnterChat",
|
||||
payload: {
|
||||
timestamp: Date.now(),
|
||||
groupId: direct.address,
|
||||
},
|
||||
});
|
||||
setTimeout(() => {
|
||||
setSelectedDirect(direct);
|
||||
|
||||
getTimestampEnterChat();
|
||||
}, 200);
|
||||
}}
|
||||
sx={{
|
||||
display: "flex",
|
||||
width: "100%",
|
||||
flexDirection: "column",
|
||||
cursor: "pointer",
|
||||
border: "1px #232428 solid",
|
||||
padding: "2px",
|
||||
borderRadius: "2px",
|
||||
background:
|
||||
direct?.address === selectedDirect?.address && "white",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
width: "100%",
|
||||
alignItems: 'center'
|
||||
}}
|
||||
>
|
||||
<ListItemAvatar>
|
||||
<Avatar
|
||||
sx={{
|
||||
background: "#232428",
|
||||
color: "white",
|
||||
}}
|
||||
alt={direct?.name || direct?.address}
|
||||
// src={`${getBaseApiReact()}/arbitrary/THUMBNAIL/${groupOwner?.name}/qortal_group_avatar_${group.groupId}?async=true`}
|
||||
>
|
||||
{(direct?.name || direct?.address)?.charAt(0)}
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primary={direct?.name || direct?.address}
|
||||
primaryTypographyProps={{
|
||||
style: {
|
||||
color:
|
||||
direct?.address === selectedDirect?.address &&
|
||||
"black",
|
||||
textWrap: "wrap",
|
||||
overflow: "hidden",
|
||||
},
|
||||
}} // Change the color of the primary text
|
||||
secondaryTypographyProps={{
|
||||
style: {
|
||||
color:
|
||||
direct?.address === selectedDirect?.address &&
|
||||
"black",
|
||||
},
|
||||
}}
|
||||
sx={{
|
||||
width: "150px",
|
||||
fontFamily: "Inter",
|
||||
fontSize: "16px",
|
||||
}}
|
||||
/>
|
||||
{direct?.sender !== myAddress &&
|
||||
direct?.timestamp &&
|
||||
((!timestampEnterData[direct?.address] &&
|
||||
Date.now() - direct?.timestamp <
|
||||
timeDifferenceForNotificationChats) ||
|
||||
timestampEnterData[direct?.address] <
|
||||
direct?.timestamp) && (
|
||||
<MarkChatUnreadIcon
|
||||
sx={{
|
||||
color: "red",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</ListItem>
|
||||
</List>
|
||||
))}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
width: "100%",
|
||||
justifyContent: "center",
|
||||
padding: "10px",
|
||||
}}
|
||||
>
|
||||
|
||||
<CustomButton
|
||||
onClick={() => {
|
||||
setNewChat(true);
|
||||
setSelectedDirect(null);
|
||||
// setSelectedGroup(null);
|
||||
setIsOpenDrawer(false);
|
||||
}}
|
||||
>
|
||||
<CreateIcon
|
||||
sx={{
|
||||
color: "white",
|
||||
}}
|
||||
/>
|
||||
New Chat
|
||||
</CustomButton>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const renderGroups = () => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
width: "300px",
|
||||
width: isMobile ? '100%' : "300px",
|
||||
flexDirection: "column",
|
||||
alignItems: "flex-start",
|
||||
height: "100%",
|
||||
height: isMobile ? 'calc(100% - 30px)' : "100%"
|
||||
}}
|
||||
>
|
||||
<div
|
||||
|
||||
{/* <div
|
||||
style={{
|
||||
display: "flex",
|
||||
width: "100%",
|
||||
@ -1582,11 +1765,11 @@ export const Group = ({
|
||||
|
||||
{chatMode === "directs" ? "Switch to groups" : "Direct msgs"}
|
||||
</CustomButton>
|
||||
</div>
|
||||
<div
|
||||
</div> */}
|
||||
{/* <div
|
||||
style={{
|
||||
display: "flex",
|
||||
width: "300px",
|
||||
width: "100%",
|
||||
flexDirection: "column",
|
||||
alignItems: "flex-start",
|
||||
flexGrow: 1,
|
||||
@ -1597,7 +1780,9 @@ export const Group = ({
|
||||
}}
|
||||
>
|
||||
{directs.map((direct: any) => (
|
||||
<List className="group-list" dense={true}>
|
||||
<List sx={{
|
||||
width: '100%'
|
||||
}} className="group-list" dense={true}>
|
||||
<ListItem
|
||||
// secondaryAction={
|
||||
// <IconButton edge="end" aria-label="delete">
|
||||
@ -1693,11 +1878,11 @@ export const Group = ({
|
||||
</ListItem>
|
||||
</List>
|
||||
))}
|
||||
</div>
|
||||
</div> */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
width: "300px",
|
||||
width: "100%",
|
||||
flexDirection: "column",
|
||||
alignItems: "flex-start",
|
||||
flexGrow: 1,
|
||||
@ -1708,7 +1893,9 @@ export const Group = ({
|
||||
}}
|
||||
>
|
||||
{groups.map((group: any) => (
|
||||
<List className="group-list" dense={true}>
|
||||
<List sx={{
|
||||
width: '100%'
|
||||
}} className="group-list" dense={true}>
|
||||
<ListItem
|
||||
// secondaryAction={
|
||||
// <IconButton edge="end" aria-label="delete">
|
||||
@ -1716,6 +1903,7 @@ export const Group = ({
|
||||
// </IconButton>
|
||||
// }
|
||||
onClick={() => {
|
||||
setMobileViewMode('group')
|
||||
clearAllQueues();
|
||||
setSelectedDirect(null);
|
||||
setTriedToFetchSecretKey(false);
|
||||
@ -1783,6 +1971,7 @@ export const Group = ({
|
||||
sx={{
|
||||
display: "flex",
|
||||
width: "100%",
|
||||
alignItems: 'center'
|
||||
}}
|
||||
>
|
||||
<ListItemAvatar>
|
||||
@ -1887,6 +2076,7 @@ export const Group = ({
|
||||
</CustomButton>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -1903,12 +2093,13 @@ export const Group = ({
|
||||
info={infoSnack}
|
||||
setInfo={setInfoSnack}
|
||||
/>
|
||||
|
||||
<Header setMobileViewModeKeepOpen={setMobileViewModeKeepOpen} isThin={mobileViewMode === 'groups' || mobileViewMode === 'group' || mobileViewModeKeepOpen === 'messaging'} logoutFunc={logoutFunc} goToHome={goToHome} setIsOpenDrawerProfile={setIsOpenDrawerProfile} />
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
width: "100%",
|
||||
height: isMobile ? "calc(100% - 75px)" : "100%",
|
||||
height: isMobile ? "100%" : "100%",
|
||||
flexDirection: "row",
|
||||
alignItems: "flex-start",
|
||||
}}
|
||||
@ -1924,6 +2115,14 @@ export const Group = ({
|
||||
open={openAddGroup}
|
||||
setOpen={setOpenAddGroup}
|
||||
/>
|
||||
|
||||
{mobileViewMode === 'groups' && (
|
||||
renderGroups()
|
||||
)}
|
||||
|
||||
{mobileViewModeKeepOpen === 'messaging' && (
|
||||
renderDirects()
|
||||
)}
|
||||
{newChat && (
|
||||
<>
|
||||
<Box
|
||||
@ -1934,7 +2133,8 @@ export const Group = ({
|
||||
bottom: '0px',
|
||||
top: '0px',
|
||||
background: '#27282c',
|
||||
zIndex: 5
|
||||
zIndex: 5,
|
||||
height: isMobile && 'calc(100% - 30px)'
|
||||
}}
|
||||
>
|
||||
<ChatDirect
|
||||
@ -1957,12 +2157,17 @@ export const Group = ({
|
||||
)}
|
||||
{selectedGroup && (
|
||||
<>
|
||||
{mobileViewMode === 'group' && (
|
||||
<GroupMenu setGroupSection={setGroupSection} groupSection={groupSection}
|
||||
/>
|
||||
)}
|
||||
<Box
|
||||
sx={{
|
||||
position: "relative",
|
||||
flexGrow: 1,
|
||||
display: "flex",
|
||||
height: "100%",
|
||||
height: isMobile ? 'calc(100% - 53px)' : "100%",
|
||||
|
||||
}}
|
||||
>
|
||||
{triedToFetchSecretKey && (
|
||||
@ -2139,7 +2344,8 @@ export const Group = ({
|
||||
bottom: '0px',
|
||||
top: '0px',
|
||||
background: '#27282c',
|
||||
zIndex: 5
|
||||
zIndex: 5,
|
||||
height: isMobile && 'calc(100% - 30px)'
|
||||
}}
|
||||
>
|
||||
|
||||
@ -2173,71 +2379,41 @@ export const Group = ({
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
{
|
||||
|
||||
{mobileViewMode === 'home' && (
|
||||
<Home
|
||||
refreshHomeDataFunc={refreshHomeDataFunc}
|
||||
myAddress={myAddress}
|
||||
isLoadingGroups={isLoadingGroups}
|
||||
balance={balance}
|
||||
userInfo={userInfo}
|
||||
groups={groups}
|
||||
setGroupSection={setGroupSection}
|
||||
setSelectedGroup={setSelectedGroup}
|
||||
getTimestampEnterChat={getTimestampEnterChat}
|
||||
setOpenManageMembers={setOpenManageMembers}
|
||||
setOpenAddGroup={setOpenAddGroup}
|
||||
setMobileViewMode={setMobileViewMode}
|
||||
/>
|
||||
)}
|
||||
{/* {
|
||||
!selectedGroup &&
|
||||
groupSection === "home" && (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
width: "100%",
|
||||
flexDirection: "column",
|
||||
gap: "20px",
|
||||
height: "100%",
|
||||
overflow: "auto",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
width: "100%",
|
||||
justifyContent: "flex-start",
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant="outlined"
|
||||
startIcon={<RefreshIcon />}
|
||||
onClick={refreshHomeDataFunc}
|
||||
sx={{
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
Refresh home data
|
||||
</Button>
|
||||
</Box>
|
||||
{!isLoadingGroups && (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
gap: "40px",
|
||||
flexWrap: "wrap",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<ListOfThreadPostsWatched />
|
||||
|
||||
<ThingsToDoInitial
|
||||
balance={balance}
|
||||
myAddress={myAddress}
|
||||
name={userInfo?.name}
|
||||
hasGroups={groups?.length !== 0}
|
||||
/>
|
||||
<GroupJoinRequests
|
||||
setGroupSection={setGroupSection}
|
||||
setSelectedGroup={setSelectedGroup}
|
||||
getTimestampEnterChat={getTimestampEnterChat}
|
||||
setOpenManageMembers={setOpenManageMembers}
|
||||
myAddress={myAddress}
|
||||
groups={groups}
|
||||
/>
|
||||
<GroupInvites
|
||||
setOpenAddGroup={setOpenAddGroup}
|
||||
myAddress={myAddress}
|
||||
groups={groups}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Home
|
||||
refreshHomeDataFunc={refreshHomeDataFunc}
|
||||
myAddress={myAddress}
|
||||
isLoadingGroups={isLoadingGroups}
|
||||
balance={balance}
|
||||
userInfo={userInfo}
|
||||
groups={groups}
|
||||
setGroupSection={setGroupSection}
|
||||
setSelectedGroup={setSelectedGroup}
|
||||
getTimestampEnterChat={getTimestampEnterChat}
|
||||
setOpenManageMembers={setOpenManageMembers}
|
||||
setOpenAddGroup={setOpenAddGroup}
|
||||
/>
|
||||
)} */}
|
||||
</Box>
|
||||
<AuthenticatedContainerInnerRight
|
||||
sx={{
|
||||
@ -2443,243 +2619,264 @@ export const Group = ({
|
||||
/>
|
||||
|
||||
</div>
|
||||
<DrawerComponent open={isOpenDrawer} setOpen={setIsOpenDrawer}>
|
||||
{mobileViewMode === 'home' && !mobileViewModeKeepOpen && (
|
||||
<>
|
||||
<div style={{
|
||||
height: '66px',
|
||||
width: '100%',
|
||||
backgroundColor: 'var(--bg-primary)',
|
||||
borderTopRightRadius: '25px',
|
||||
borderTopLeftRadius: '25px'
|
||||
}} />
|
||||
{/* <DrawerComponent open={isOpenDrawer} setOpen={setIsOpenDrawer}>
|
||||
{renderGroups()}
|
||||
</DrawerComponent>
|
||||
|
||||
</DrawerComponent> */}
|
||||
{isMobile && (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
flexDirection: "column",
|
||||
width: "100%",
|
||||
height: "75px", // Keep the height at 75px
|
||||
background: "rgba(0, 0, 0, 0.1)",
|
||||
padding: "0px", // Remove unnecessary padding
|
||||
}}
|
||||
>
|
||||
<Grid
|
||||
container
|
||||
spacing={0.5}
|
||||
sx={{ width: "100%", justifyContent: "space-around" }}
|
||||
>
|
||||
{selectedGroup && (
|
||||
<>
|
||||
<Grid item xs={4} sx={{
|
||||
display: 'flex'
|
||||
}}>
|
||||
<Button
|
||||
fullWidth
|
||||
size="small"
|
||||
variant="contained"
|
||||
startIcon={<AnnouncementsIcon />}
|
||||
sx={{
|
||||
padding: "4px 6px",
|
||||
color:
|
||||
groupSection === "announcement" ? "black" : "white",
|
||||
backgroundColor: isUnread
|
||||
? "red"
|
||||
: groupSection === "announcement"
|
||||
? "white"
|
||||
: "black",
|
||||
"&:hover": {
|
||||
backgroundColor: isUnread
|
||||
? "red"
|
||||
: groupSection === "announcement"
|
||||
? "white"
|
||||
: "black",
|
||||
},
|
||||
"&:active": {
|
||||
backgroundColor: isUnread
|
||||
? "red"
|
||||
: groupSection === "announcement"
|
||||
? "white"
|
||||
: "black",
|
||||
},
|
||||
"&:focus": {
|
||||
backgroundColor: isUnread
|
||||
? "red"
|
||||
: groupSection === "announcement"
|
||||
? "white"
|
||||
: "black",
|
||||
},
|
||||
}}
|
||||
onClick={goToAnnouncements}
|
||||
>
|
||||
ANN
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid item xs={4} sx={{
|
||||
display: 'flex'
|
||||
}}>
|
||||
<Button
|
||||
fullWidth
|
||||
size="small"
|
||||
variant="contained"
|
||||
startIcon={<ChatIcon />}
|
||||
sx={{
|
||||
padding: "4px 6px",
|
||||
color: groupSection === "chat" ? "black" : "white",
|
||||
backgroundColor: isUnreadChat
|
||||
? "red"
|
||||
: groupSection === "chat"
|
||||
? "white"
|
||||
: "black",
|
||||
"&:hover": {
|
||||
backgroundColor: isUnreadChat
|
||||
? "red"
|
||||
: groupSection === "chat"
|
||||
? "white"
|
||||
: "black", // Same logic for hover
|
||||
},
|
||||
"&:active": {
|
||||
backgroundColor: isUnreadChat
|
||||
? "red"
|
||||
: groupSection === "chat"
|
||||
? "white"
|
||||
: "black", // Same logic for active
|
||||
},
|
||||
"&:focus": {
|
||||
backgroundColor: isUnreadChat
|
||||
? "red"
|
||||
: groupSection === "chat"
|
||||
? "white"
|
||||
: "black", // Same logic for focus
|
||||
},
|
||||
}}
|
||||
onClick={goToChat}
|
||||
>
|
||||
Chat
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid item xs={4} sx={{
|
||||
display: 'flex'
|
||||
}}>
|
||||
<Button
|
||||
fullWidth
|
||||
size="small"
|
||||
variant="contained"
|
||||
startIcon={<ForumIcon />}
|
||||
sx={{
|
||||
padding: "4px 6px",
|
||||
color: groupSection === "forum" ? "black" : "white",
|
||||
backgroundColor:
|
||||
groupSection === "forum" ? "white" : "black",
|
||||
"&:hover": {
|
||||
backgroundColor: groupSection === "forum" ? "white" : "black", // Hover state
|
||||
},
|
||||
"&:active": {
|
||||
backgroundColor: groupSection === "forum" ? "white" : "black", // Active state
|
||||
},
|
||||
"&:focus": {
|
||||
backgroundColor: groupSection === "forum" ? "white" : "black", // Focus state
|
||||
},
|
||||
}}
|
||||
onClick={() => {
|
||||
setSelectedDirect(null);
|
||||
setNewChat(false)
|
||||
setGroupSection("forum")
|
||||
} }
|
||||
>
|
||||
Forum
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid item xs={4} sx={{
|
||||
display: 'flex'
|
||||
}}>
|
||||
<Button
|
||||
fullWidth
|
||||
size="small"
|
||||
variant="contained"
|
||||
startIcon={<GroupIcon />}
|
||||
sx={{ padding: "4px 6px", backgroundColor: "black", "&:hover": {
|
||||
backgroundColor: "black", // Hover state
|
||||
},
|
||||
"&:active": {
|
||||
backgroundColor: "black", // Active state
|
||||
},
|
||||
"&:focus": {
|
||||
backgroundColor: "black", // Focus state
|
||||
}, }}
|
||||
onClick={() => setOpenManageMembers(true)}
|
||||
>
|
||||
Members
|
||||
</Button>
|
||||
</Grid>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Second row: Groups, Home, Profile */}
|
||||
<Grid item xs={4} sx={{
|
||||
display: 'flex',
|
||||
}}>
|
||||
<Button
|
||||
fullWidth
|
||||
size="small"
|
||||
variant="contained"
|
||||
startIcon={<GroupIcon />}
|
||||
sx={{
|
||||
padding: "2px 4px",
|
||||
backgroundColor:
|
||||
groupChatHasUnread ||
|
||||
groupsAnnHasUnread ||
|
||||
directChatHasUnread
|
||||
? "red"
|
||||
: "black",
|
||||
"&:hover": {
|
||||
backgroundColor:
|
||||
groupChatHasUnread || groupsAnnHasUnread || directChatHasUnread
|
||||
? "red"
|
||||
: "black", // Hover state follows the same logic
|
||||
},
|
||||
"&:active": {
|
||||
backgroundColor:
|
||||
groupChatHasUnread || groupsAnnHasUnread || directChatHasUnread
|
||||
? "red"
|
||||
: "black", // Active state follows the same logic
|
||||
},
|
||||
"&:focus": {
|
||||
backgroundColor:
|
||||
groupChatHasUnread || groupsAnnHasUnread || directChatHasUnread
|
||||
? "red"
|
||||
: "black", // Focus state follows the same logic
|
||||
},
|
||||
}}
|
||||
onClick={() => {
|
||||
setIsOpenDrawer(true);
|
||||
setDrawerMode("groups");
|
||||
}}
|
||||
>
|
||||
{chatMode === "groups" ? "Groups" : "Direct"}
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid item xs={2} sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center'
|
||||
}}>
|
||||
<IconButton
|
||||
sx={{ padding: "0", color: "white" }} // Reduce padding for icons
|
||||
onClick={goToHome}
|
||||
>
|
||||
<HomeIcon />
|
||||
</IconButton>
|
||||
</Grid>
|
||||
<Grid item xs={2} sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center'
|
||||
}}>
|
||||
<IconButton
|
||||
sx={{ padding: "0", color: "white" }} // Reduce padding for icons
|
||||
onClick={() => setIsOpenDrawerProfile(true)}
|
||||
>
|
||||
<PersonIcon />
|
||||
</IconButton>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
<MobileFooter selectedGroup={selectedGroup} groupSection={groupSection} isUnread={isUnread} goToAnnouncements={goToAnnouncements} isUnreadChat={isUnreadChat} goToChat={goToChat} goToThreads={goToThreads} setOpenManageMembers={setOpenManageMembers} groupChatHasUnread={groupChatHasUnread} groupsAnnHasUnread={groupsAnnHasUnread} directChatHasUnread={directChatHasUnread} chatMode={chatMode} openDrawerGroups={openDrawerGroups} goToHome={goToHome} setIsOpenDrawerProfile={setIsOpenDrawerProfile}
|
||||
mobileViewMode={mobileViewMode} setMobileViewMode={setMobileViewMode} setMobileViewModeKeepOpen={setMobileViewModeKeepOpen}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
|
||||
// {isMobile && (
|
||||
// <Box
|
||||
// sx={{
|
||||
// display: "flex",
|
||||
// alignItems: "center",
|
||||
// justifyContent: "center",
|
||||
// flexDirection: "column",
|
||||
// width: "100%",
|
||||
// height: "75px", // Keep the height at 75px
|
||||
// background: "rgba(0, 0, 0, 0.1)",
|
||||
// padding: "0px", // Remove unnecessary padding
|
||||
// }}
|
||||
// >
|
||||
// <Grid
|
||||
// container
|
||||
// spacing={0.5}
|
||||
// sx={{ width: "100%", justifyContent: "space-around" }}
|
||||
// >
|
||||
// {selectedGroup && (
|
||||
// <>
|
||||
// <Grid item xs={4} sx={{
|
||||
// display: 'flex'
|
||||
// }}>
|
||||
// <Button
|
||||
// fullWidth
|
||||
// size="small"
|
||||
// variant="contained"
|
||||
// startIcon={<AnnouncementsIcon />}
|
||||
// sx={{
|
||||
// padding: "4px 6px",
|
||||
// color:
|
||||
// groupSection === "announcement" ? "black" : "white",
|
||||
// backgroundColor: isUnread
|
||||
// ? "red"
|
||||
// : groupSection === "announcement"
|
||||
// ? "white"
|
||||
// : "black",
|
||||
// "&:hover": {
|
||||
// backgroundColor: isUnread
|
||||
// ? "red"
|
||||
// : groupSection === "announcement"
|
||||
// ? "white"
|
||||
// : "black",
|
||||
// },
|
||||
// "&:active": {
|
||||
// backgroundColor: isUnread
|
||||
// ? "red"
|
||||
// : groupSection === "announcement"
|
||||
// ? "white"
|
||||
// : "black",
|
||||
// },
|
||||
// "&:focus": {
|
||||
// backgroundColor: isUnread
|
||||
// ? "red"
|
||||
// : groupSection === "announcement"
|
||||
// ? "white"
|
||||
// : "black",
|
||||
// },
|
||||
// }}
|
||||
// onClick={goToAnnouncements}
|
||||
// >
|
||||
// ANN
|
||||
// </Button>
|
||||
// </Grid>
|
||||
// <Grid item xs={4} sx={{
|
||||
// display: 'flex'
|
||||
// }}>
|
||||
// <Button
|
||||
// fullWidth
|
||||
// size="small"
|
||||
// variant="contained"
|
||||
// startIcon={<ChatIcon />}
|
||||
// sx={{
|
||||
// padding: "4px 6px",
|
||||
// color: groupSection === "chat" ? "black" : "white",
|
||||
// backgroundColor: isUnreadChat
|
||||
// ? "red"
|
||||
// : groupSection === "chat"
|
||||
// ? "white"
|
||||
// : "black",
|
||||
// "&:hover": {
|
||||
// backgroundColor: isUnreadChat
|
||||
// ? "red"
|
||||
// : groupSection === "chat"
|
||||
// ? "white"
|
||||
// : "black", // Same logic for hover
|
||||
// },
|
||||
// "&:active": {
|
||||
// backgroundColor: isUnreadChat
|
||||
// ? "red"
|
||||
// : groupSection === "chat"
|
||||
// ? "white"
|
||||
// : "black", // Same logic for active
|
||||
// },
|
||||
// "&:focus": {
|
||||
// backgroundColor: isUnreadChat
|
||||
// ? "red"
|
||||
// : groupSection === "chat"
|
||||
// ? "white"
|
||||
// : "black", // Same logic for focus
|
||||
// },
|
||||
// }}
|
||||
// onClick={goToChat}
|
||||
// >
|
||||
// Chat
|
||||
// </Button>
|
||||
// </Grid>
|
||||
// <Grid item xs={4} sx={{
|
||||
// display: 'flex'
|
||||
// }}>
|
||||
// <Button
|
||||
// fullWidth
|
||||
// size="small"
|
||||
// variant="contained"
|
||||
// startIcon={<ForumIcon />}
|
||||
// sx={{
|
||||
// padding: "4px 6px",
|
||||
// color: groupSection === "forum" ? "black" : "white",
|
||||
// backgroundColor:
|
||||
// groupSection === "forum" ? "white" : "black",
|
||||
// "&:hover": {
|
||||
// backgroundColor: groupSection === "forum" ? "white" : "black", // Hover state
|
||||
// },
|
||||
// "&:active": {
|
||||
// backgroundColor: groupSection === "forum" ? "white" : "black", // Active state
|
||||
// },
|
||||
// "&:focus": {
|
||||
// backgroundColor: groupSection === "forum" ? "white" : "black", // Focus state
|
||||
// },
|
||||
// }}
|
||||
// onClick={() => {
|
||||
// setSelectedDirect(null);
|
||||
// setNewChat(false)
|
||||
// setGroupSection("forum")
|
||||
// } }
|
||||
// >
|
||||
// Forum
|
||||
// </Button>
|
||||
// </Grid>
|
||||
// <Grid item xs={4} sx={{
|
||||
// display: 'flex'
|
||||
// }}>
|
||||
// <Button
|
||||
// fullWidth
|
||||
// size="small"
|
||||
// variant="contained"
|
||||
// startIcon={<GroupIcon />}
|
||||
// sx={{ padding: "4px 6px", backgroundColor: "black", "&:hover": {
|
||||
// backgroundColor: "black", // Hover state
|
||||
// },
|
||||
// "&:active": {
|
||||
// backgroundColor: "black", // Active state
|
||||
// },
|
||||
// "&:focus": {
|
||||
// backgroundColor: "black", // Focus state
|
||||
// }, }}
|
||||
// onClick={() => setOpenManageMembers(true)}
|
||||
// >
|
||||
// Members
|
||||
// </Button>
|
||||
// </Grid>
|
||||
// </>
|
||||
// )}
|
||||
|
||||
// {/* Second row: Groups, Home, Profile */}
|
||||
// <Grid item xs={4} sx={{
|
||||
// display: 'flex',
|
||||
// }}>
|
||||
// <Button
|
||||
// fullWidth
|
||||
// size="small"
|
||||
// variant="contained"
|
||||
// startIcon={<GroupIcon />}
|
||||
// sx={{
|
||||
// padding: "2px 4px",
|
||||
// backgroundColor:
|
||||
// groupChatHasUnread ||
|
||||
// groupsAnnHasUnread ||
|
||||
// directChatHasUnread
|
||||
// ? "red"
|
||||
// : "black",
|
||||
// "&:hover": {
|
||||
// backgroundColor:
|
||||
// groupChatHasUnread || groupsAnnHasUnread || directChatHasUnread
|
||||
// ? "red"
|
||||
// : "black", // Hover state follows the same logic
|
||||
// },
|
||||
// "&:active": {
|
||||
// backgroundColor:
|
||||
// groupChatHasUnread || groupsAnnHasUnread || directChatHasUnread
|
||||
// ? "red"
|
||||
// : "black", // Active state follows the same logic
|
||||
// },
|
||||
// "&:focus": {
|
||||
// backgroundColor:
|
||||
// groupChatHasUnread || groupsAnnHasUnread || directChatHasUnread
|
||||
// ? "red"
|
||||
// : "black", // Focus state follows the same logic
|
||||
// },
|
||||
// }}
|
||||
// onClick={() => {
|
||||
// setIsOpenDrawer(true);
|
||||
// setDrawerMode("groups");
|
||||
// }}
|
||||
// >
|
||||
// {chatMode === "groups" ? "Groups" : "Direct"}
|
||||
// </Button>
|
||||
// </Grid>
|
||||
// <Grid item xs={2} sx={{
|
||||
// display: 'flex',
|
||||
// justifyContent: 'center'
|
||||
// }}>
|
||||
// <IconButton
|
||||
// sx={{ padding: "0", color: "white" }} // Reduce padding for icons
|
||||
// onClick={goToHome}
|
||||
// >
|
||||
// <HomeIcon />
|
||||
// </IconButton>
|
||||
// </Grid>
|
||||
// <Grid item xs={2} sx={{
|
||||
// display: 'flex',
|
||||
// justifyContent: 'center'
|
||||
// }}>
|
||||
// <IconButton
|
||||
// sx={{ padding: "0", color: "white" }} // Reduce padding for icons
|
||||
// onClick={() => setIsOpenDrawerProfile(true)}
|
||||
// >
|
||||
// <PersonIcon />
|
||||
// </IconButton>
|
||||
// </Grid>
|
||||
// </Grid>
|
||||
// </Box>
|
||||
// )}
|
||||
@ -8,7 +8,7 @@ import Checkbox from "@mui/material/Checkbox";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import CommentIcon from "@mui/icons-material/Comment";
|
||||
import InfoIcon from "@mui/icons-material/Info";
|
||||
import GroupAddIcon from '@mui/icons-material/GroupAdd';
|
||||
import GroupAddIcon from "@mui/icons-material/GroupAdd";
|
||||
import { executeEvent } from "../../utils/events";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import { Spacer } from "../../common/Spacer";
|
||||
@ -17,98 +17,155 @@ import { CustomLoader } from "../../common/CustomLoader";
|
||||
import { getBaseApiReact } from "../../App";
|
||||
|
||||
export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
|
||||
const [groupsWithJoinRequests, setGroupsWithJoinRequests] = React.useState([])
|
||||
const [loading, setLoading] = React.useState(true)
|
||||
const [groupsWithJoinRequests, setGroupsWithJoinRequests] = React.useState(
|
||||
[]
|
||||
);
|
||||
const [loading, setLoading] = React.useState(true);
|
||||
|
||||
const getJoinRequests = async ()=> {
|
||||
const getJoinRequests = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
const response = await fetch(`${getBaseApiReact()}/groups/invites/${myAddress}/?limit=0`);
|
||||
setLoading(true);
|
||||
const response = await fetch(
|
||||
`${getBaseApiReact()}/groups/invites/${myAddress}/?limit=0`
|
||||
);
|
||||
const data = await response.json();
|
||||
const resMoreData = await getGroupNames(data)
|
||||
const resMoreData = await getGroupNames(data);
|
||||
|
||||
setGroupsWithJoinRequests(resMoreData)
|
||||
setGroupsWithJoinRequests(resMoreData);
|
||||
} catch (error) {
|
||||
|
||||
} finally {
|
||||
setLoading(false)
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
React.useEffect(() => {
|
||||
if (myAddress) {
|
||||
getJoinRequests()
|
||||
getJoinRequests();
|
||||
}
|
||||
}, [myAddress]);
|
||||
|
||||
|
||||
return (
|
||||
<Box sx={{
|
||||
width: '360px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
bgcolor: "background.paper",
|
||||
padding: '20px'
|
||||
}}>
|
||||
<Typography sx={{
|
||||
fontSize: '14px'
|
||||
}}>Group Invites</Typography>
|
||||
<Spacer height="10px" />
|
||||
{loading && groupsWithJoinRequests.length === 0 && (
|
||||
<Box sx={{
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
justifyContent: 'center'
|
||||
}}>
|
||||
<CustomLoader />
|
||||
</Box>
|
||||
)}
|
||||
{!loading && groupsWithJoinRequests.length === 0 && (
|
||||
<Box sx={{
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
justifyContent: 'center'
|
||||
}}>
|
||||
<Typography sx={{
|
||||
fontSize: '12px'
|
||||
}}>No invites</Typography>
|
||||
</Box>
|
||||
)}
|
||||
<List sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper", maxHeight: '300px', overflow: 'auto' }}>
|
||||
{groupsWithJoinRequests?.map((group)=> {
|
||||
return (
|
||||
<ListItem
|
||||
key={group?.groupId}
|
||||
onClick={()=> {
|
||||
setOpenAddGroup(true)
|
||||
setTimeout(() => {
|
||||
executeEvent("openGroupInvitesRequest", {});
|
||||
|
||||
}, 300);
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: "322px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
padding: "0px 20px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "13px",
|
||||
fontWeight: 600,
|
||||
}}
|
||||
disablePadding
|
||||
secondaryAction={
|
||||
<IconButton edge="end" aria-label="comments">
|
||||
<GroupAddIcon
|
||||
sx={{
|
||||
color: "white",
|
||||
}}
|
||||
/>
|
||||
</IconButton>
|
||||
}
|
||||
>
|
||||
<ListItemButton disableRipple role={undefined} dense>
|
||||
|
||||
<ListItemText primary={`${group?.groupName} has invited you`} />
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
)
|
||||
Hub Invites:
|
||||
</Typography>
|
||||
<Spacer height="10px" />
|
||||
</Box>
|
||||
|
||||
})}
|
||||
|
||||
|
||||
|
||||
</List>
|
||||
<Box
|
||||
sx={{
|
||||
width: "322px",
|
||||
height: "165px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
bgcolor: "background.paper",
|
||||
padding: "20px",
|
||||
borderRadius: "19px",
|
||||
}}
|
||||
>
|
||||
{loading && groupsWithJoinRequests.length === 0 && (
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<CustomLoader />
|
||||
</Box>
|
||||
)}
|
||||
{!loading && groupsWithJoinRequests.length === 0 && (
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: 'center',
|
||||
height: '100%',
|
||||
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "11px",
|
||||
fontWeight: 400,
|
||||
color: 'rgba(255, 255, 255, 0.2)'
|
||||
}}
|
||||
>
|
||||
Nothing to display
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
<List
|
||||
sx={{
|
||||
width: "100%",
|
||||
maxWidth: 360,
|
||||
bgcolor: "background.paper",
|
||||
maxHeight: "300px",
|
||||
overflow: "auto",
|
||||
}}
|
||||
>
|
||||
{groupsWithJoinRequests?.map((group) => {
|
||||
return (
|
||||
<ListItem
|
||||
sx={{
|
||||
marginBottom: "20px",
|
||||
}}
|
||||
key={group?.groupId}
|
||||
onClick={() => {
|
||||
setOpenAddGroup(true);
|
||||
setTimeout(() => {
|
||||
executeEvent("openGroupInvitesRequest", {});
|
||||
}, 300);
|
||||
}}
|
||||
disablePadding
|
||||
secondaryAction={
|
||||
<IconButton edge="end" aria-label="comments">
|
||||
<GroupAddIcon
|
||||
sx={{
|
||||
color: "white",
|
||||
fontSize: "18px",
|
||||
}}
|
||||
/>
|
||||
</IconButton>
|
||||
}
|
||||
>
|
||||
<ListItemButton disableRipple role={undefined} dense>
|
||||
<ListItemText
|
||||
sx={{
|
||||
"& .MuiTypography-root": {
|
||||
fontSize: "13px",
|
||||
fontWeight: 400,
|
||||
},
|
||||
}}
|
||||
primary={`${group?.groupName} has invited you`}
|
||||
/>
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
);
|
||||
})}
|
||||
</List>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
@ -18,7 +18,7 @@ import { getBaseApi } from "../../background";
|
||||
import { getBaseApiReact } from "../../App";
|
||||
export const requestQueueGroupJoinRequests = new RequestQueueWithPromise(2)
|
||||
|
||||
export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, getTimestampEnterChat, setSelectedGroup, setGroupSection }) => {
|
||||
export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, getTimestampEnterChat, setSelectedGroup, setGroupSection, setMobileViewMode }) => {
|
||||
const [groupsWithJoinRequests, setGroupsWithJoinRequests] = React.useState([])
|
||||
const [loading, setLoading] = React.useState(true)
|
||||
|
||||
@ -95,17 +95,43 @@ export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, get
|
||||
|
||||
|
||||
return (
|
||||
<Box sx={{
|
||||
width: '360px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
bgcolor: "background.paper",
|
||||
padding: '20px'
|
||||
<Box sx={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: 'center'
|
||||
}}>
|
||||
<Typography sx={{
|
||||
fontSize: '14px'
|
||||
}}>Join Requests</Typography>
|
||||
<Spacer height="10px" />
|
||||
<Box
|
||||
sx={{
|
||||
width: "322px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
padding: '0px 20px',
|
||||
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "13px",
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
Join Requests:
|
||||
</Typography>
|
||||
<Spacer height="10px" />
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
width: "322px",
|
||||
height: '165px',
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
bgcolor: "background.paper",
|
||||
padding: "20px",
|
||||
borderRadius: '19px'
|
||||
}}
|
||||
>
|
||||
{loading && groupsWithJoinRequests.length === 0 && (
|
||||
<Box sx={{
|
||||
width: '100%',
|
||||
@ -116,15 +142,26 @@ export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, get
|
||||
</Box>
|
||||
)}
|
||||
{!loading && groupsWithJoinRequests.length === 0 && (
|
||||
<Box sx={{
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
justifyContent: 'center'
|
||||
}}>
|
||||
<Typography sx={{
|
||||
fontSize: '12px'
|
||||
}}>No join requests</Typography>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: 'center',
|
||||
height: '100%',
|
||||
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "11px",
|
||||
fontWeight: 400,
|
||||
color: 'rgba(255, 255, 255, 0.2)'
|
||||
}}
|
||||
>
|
||||
Nothing to display
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
<List sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper", maxHeight: '300px', overflow: 'auto' }}>
|
||||
{groupsWithJoinRequests?.map((group)=> {
|
||||
@ -134,6 +171,7 @@ export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, get
|
||||
key={group?.groupId}
|
||||
onClick={()=> {
|
||||
setSelectedGroup(group?.group)
|
||||
setMobileViewMode('group')
|
||||
getTimestampEnterChat()
|
||||
setGroupSection("announcement")
|
||||
setOpenManageMembers(true)
|
||||
@ -142,20 +180,31 @@ export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, get
|
||||
|
||||
}, 300);
|
||||
}}
|
||||
sx={{
|
||||
marginBottom: '20px'
|
||||
}}
|
||||
disablePadding
|
||||
secondaryAction={
|
||||
<IconButton edge="end" aria-label="comments">
|
||||
<GroupAddIcon
|
||||
sx={{
|
||||
color: "white",
|
||||
fontSize: '18px'
|
||||
}}
|
||||
/>
|
||||
</IconButton>
|
||||
}
|
||||
>
|
||||
<ListItemButton disableRipple role={undefined} dense>
|
||||
<ListItemButton sx={{
|
||||
padding: "0px",
|
||||
}} disableRipple role={undefined} dense>
|
||||
|
||||
<ListItemText primary={`${group?.group?.groupName} has ${group?.data?.length} pending join requests.`} />
|
||||
<ListItemText sx={{
|
||||
"& .MuiTypography-root": {
|
||||
fontSize: "13px",
|
||||
fontWeight: 400,
|
||||
},
|
||||
}} primary={`${group?.group?.groupName} has ${group?.data?.length} pending join requests.`} />
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
)
|
||||
@ -166,5 +215,6 @@ export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, get
|
||||
|
||||
</List>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
200
src/components/Group/GroupMenu.tsx
Normal file
200
src/components/Group/GroupMenu.tsx
Normal file
@ -0,0 +1,200 @@
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
Button,
|
||||
Menu,
|
||||
MenuItem,
|
||||
ListItemIcon,
|
||||
ListItemText,
|
||||
Badge,
|
||||
Box,
|
||||
} from "@mui/material";
|
||||
import ForumIcon from "@mui/icons-material/Forum";
|
||||
import GroupIcon from "@mui/icons-material/Group";
|
||||
import { ArrowDownIcon } from "../../assets/Icons/ArrowDownIcon";
|
||||
import { NotificationIcon2 } from "../../assets/Icons/NotificationIcon2";
|
||||
import { ChatIcon } from "../../assets/Icons/ChatIcon";
|
||||
import { ThreadsIcon } from "../../assets/Icons/ThreadsIcon";
|
||||
import { MembersIcon } from "../../assets/Icons/MembersIcon";
|
||||
|
||||
export const GroupMenu = ({ setGroupSection, groupSection }) => {
|
||||
const [anchorEl, setAnchorEl] = useState(null);
|
||||
const open = Boolean(anchorEl);
|
||||
|
||||
const handleClick = (event) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
marginTop: '14px',
|
||||
marginBottom: '14px'
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
aria-controls={open ? "home-menu" : undefined}
|
||||
aria-haspopup="true"
|
||||
aria-expanded={open ? "true" : undefined}
|
||||
onClick={handleClick}
|
||||
variant="contained"
|
||||
sx={{
|
||||
backgroundColor: "var(--bg-primary)",
|
||||
width: "148px",
|
||||
borderRadius: "5px",
|
||||
fontSize: "12px",
|
||||
fontWeight: 600,
|
||||
color: "#fff",
|
||||
textTransform: "none",
|
||||
padding: '5px',
|
||||
height: '25px'
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
gap: "6px",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
width: '100%'
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
gap: "6px",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
{groupSection === "announcement" &&(
|
||||
<> <NotificationIcon2 /> {" Announcements"}</>
|
||||
)}
|
||||
{groupSection === "chat" &&(
|
||||
<> <ChatIcon /> {" Hub Chats"}</>
|
||||
)}
|
||||
{groupSection === "forum" &&(
|
||||
<> <ThreadsIcon /> {" Threads"}</>
|
||||
)}
|
||||
</Box>
|
||||
<ArrowDownIcon color="white" />
|
||||
</Box>
|
||||
</Button>
|
||||
<Menu
|
||||
id="home-menu"
|
||||
anchorEl={anchorEl}
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
MenuListProps={{
|
||||
"aria-labelledby": "basic-button",
|
||||
}}
|
||||
anchorOrigin={{
|
||||
vertical: 'bottom',
|
||||
horizontal: 'center',
|
||||
|
||||
}}
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'center',
|
||||
}}
|
||||
slotProps={{
|
||||
paper: {
|
||||
sx: {
|
||||
backgroundColor: 'var(--bg-primary)',
|
||||
color: '#fff',
|
||||
width: '148px',
|
||||
borderRadius: '5px'
|
||||
},
|
||||
},
|
||||
|
||||
}}
|
||||
sx={{
|
||||
marginTop: '10px'
|
||||
}}
|
||||
|
||||
>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
setGroupSection("chat");
|
||||
handleClose();
|
||||
}}
|
||||
>
|
||||
<ListItemIcon sx={{
|
||||
|
||||
minWidth: '24px !important'
|
||||
}}>
|
||||
<ChatIcon sx={{ color: "#fff" }} />
|
||||
</ListItemIcon>
|
||||
<ListItemText sx={{
|
||||
"& .MuiTypography-root": {
|
||||
fontSize: "12px",
|
||||
fontWeight: 600,
|
||||
},
|
||||
}} primary="Chat" />
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
setGroupSection("announcement");
|
||||
handleClose();
|
||||
}}
|
||||
>
|
||||
<ListItemIcon sx={{
|
||||
|
||||
minWidth: '24px !important'
|
||||
}}>
|
||||
<NotificationIcon2 sx={{ color: "#fff" }} />
|
||||
</ListItemIcon>
|
||||
<ListItemText sx={{
|
||||
"& .MuiTypography-root": {
|
||||
fontSize: "12px",
|
||||
fontWeight: 600,
|
||||
},
|
||||
}} primary="Announcements" />
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
setGroupSection("forum");
|
||||
handleClose();
|
||||
}}
|
||||
>
|
||||
<ListItemIcon sx={{
|
||||
minWidth: '24px !important'
|
||||
}}>
|
||||
<ThreadsIcon sx={{ color: "#fff" }} />
|
||||
|
||||
</ListItemIcon>
|
||||
<ListItemText sx={{
|
||||
"& .MuiTypography-root": {
|
||||
fontSize: "12px",
|
||||
fontWeight: 600,
|
||||
},
|
||||
}} primary="Forum" />
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
// setGroupSection("")
|
||||
handleClose();
|
||||
}}
|
||||
>
|
||||
<ListItemIcon sx={{
|
||||
minWidth: '24px !important'
|
||||
}}>
|
||||
<MembersIcon sx={{ color: "#fff" }} />
|
||||
|
||||
</ListItemIcon>
|
||||
<ListItemText sx={{
|
||||
"& .MuiTypography-root": {
|
||||
fontSize: "12px",
|
||||
fontWeight: 600,
|
||||
},
|
||||
}} primary="Members" />
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
85
src/components/Group/Home.tsx
Normal file
85
src/components/Group/Home.tsx
Normal file
@ -0,0 +1,85 @@
|
||||
import { Box, Button, Typography } from '@mui/material'
|
||||
import React from 'react'
|
||||
import { Spacer } from '../../common/Spacer'
|
||||
import { ListOfThreadPostsWatched } from './ListOfThreadPostsWatched'
|
||||
import { ThingsToDoInitial } from './ThingsToDoInitial'
|
||||
import { GroupJoinRequests } from './GroupJoinRequests'
|
||||
import { GroupInvites } from './GroupInvites'
|
||||
import RefreshIcon from "@mui/icons-material/Refresh";
|
||||
|
||||
export const Home = ({refreshHomeDataFunc, myAddress, isLoadingGroups, balance, userInfo, groups, setGroupSection, setSelectedGroup, getTimestampEnterChat, setOpenManageMembers, setOpenAddGroup, setMobileViewMode}) => {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
width: "100%",
|
||||
flexDirection: "column",
|
||||
height: "100%",
|
||||
overflow: "auto",
|
||||
alignItems: "center"
|
||||
}}
|
||||
>
|
||||
<Spacer height="20px" />
|
||||
<Typography sx={{ color: 'rgba(255, 255, 255, 1)', fontWeight: 400, fontSize: '24px'}}>
|
||||
<Spacer height="16px" />
|
||||
Welcome
|
||||
</Typography>
|
||||
<Spacer height="26px" />
|
||||
|
||||
{/* <Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
width: "100%",
|
||||
justifyContent: "flex-start",
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant="outlined"
|
||||
startIcon={<RefreshIcon />}
|
||||
onClick={refreshHomeDataFunc}
|
||||
sx={{
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
Refresh home data
|
||||
</Button>
|
||||
</Box> */}
|
||||
{!isLoadingGroups && (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
gap: "15px",
|
||||
flexWrap: "wrap",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
|
||||
<ThingsToDoInitial
|
||||
balance={balance}
|
||||
myAddress={myAddress}
|
||||
name={userInfo?.name}
|
||||
hasGroups={groups?.length !== 0}
|
||||
/>
|
||||
<ListOfThreadPostsWatched />
|
||||
|
||||
<GroupJoinRequests
|
||||
setGroupSection={setGroupSection}
|
||||
setSelectedGroup={setSelectedGroup}
|
||||
getTimestampEnterChat={getTimestampEnterChat}
|
||||
setOpenManageMembers={setOpenManageMembers}
|
||||
myAddress={myAddress}
|
||||
groups={groups}
|
||||
setMobileViewMode={setMobileViewMode}
|
||||
/>
|
||||
<GroupInvites
|
||||
setOpenAddGroup={setOpenAddGroup}
|
||||
myAddress={myAddress}
|
||||
groups={groups}
|
||||
setMobileViewMode={setMobileViewMode}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
<Spacer height="180px" />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
@ -8,131 +8,173 @@ import Checkbox from "@mui/material/Checkbox";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import CommentIcon from "@mui/icons-material/Comment";
|
||||
import InfoIcon from "@mui/icons-material/Info";
|
||||
import GroupAddIcon from '@mui/icons-material/GroupAdd';
|
||||
import GroupAddIcon from "@mui/icons-material/GroupAdd";
|
||||
import { executeEvent } from "../../utils/events";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import { Spacer } from "../../common/Spacer";
|
||||
import { getGroupNames } from "./UserListOfInvites";
|
||||
import { CustomLoader } from "../../common/CustomLoader";
|
||||
import VisibilityIcon from '@mui/icons-material/Visibility';
|
||||
import VisibilityIcon from "@mui/icons-material/Visibility";
|
||||
|
||||
export const ListOfThreadPostsWatched = () => {
|
||||
const [posts, setPosts] = React.useState([])
|
||||
const [loading, setLoading] = React.useState(true)
|
||||
const [posts, setPosts] = React.useState([]);
|
||||
const [loading, setLoading] = React.useState(true);
|
||||
|
||||
const getPosts = async ()=> {
|
||||
const getPosts = async () => {
|
||||
try {
|
||||
await new Promise((res, rej) => {
|
||||
chrome?.runtime?.sendMessage(
|
||||
{
|
||||
action: "getThreadActivity",
|
||||
payload: {
|
||||
|
||||
},
|
||||
payload: {},
|
||||
},
|
||||
(response) => {
|
||||
|
||||
if (!response?.error) {
|
||||
if(!response) {
|
||||
res(null)
|
||||
return
|
||||
if (!response) {
|
||||
res(null);
|
||||
return;
|
||||
}
|
||||
const uniquePosts = response.reduce((acc, current) => {
|
||||
const x = acc.find(item => item?.thread?.threadId === current?.thread?.threadId);
|
||||
const x = acc.find(
|
||||
(item) => item?.thread?.threadId === current?.thread?.threadId
|
||||
);
|
||||
if (!x) {
|
||||
return acc.concat([current]);
|
||||
} else {
|
||||
return acc;
|
||||
}
|
||||
}, []);
|
||||
setPosts(uniquePosts)
|
||||
setPosts(uniquePosts);
|
||||
res(uniquePosts);
|
||||
return
|
||||
return;
|
||||
}
|
||||
rej(response.error);
|
||||
}
|
||||
);
|
||||
});
|
||||
} catch (error) {
|
||||
|
||||
} finally {
|
||||
setLoading(false)
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
React.useEffect(() => {
|
||||
|
||||
getPosts()
|
||||
|
||||
getPosts();
|
||||
}, []);
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<Box sx={{
|
||||
width: '360px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
bgcolor: "background.paper",
|
||||
padding: '20px'
|
||||
<Box sx={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: 'center'
|
||||
}}>
|
||||
<Typography sx={{
|
||||
fontSize: '14px'
|
||||
}}>New Thread Posts</Typography>
|
||||
<Spacer height="10px" />
|
||||
{loading && posts.length === 0 && (
|
||||
<Box sx={{
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
justifyContent: 'center'
|
||||
}}>
|
||||
<CustomLoader />
|
||||
</Box>
|
||||
)}
|
||||
{!loading && posts.length === 0 && (
|
||||
<Box sx={{
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
justifyContent: 'center'
|
||||
}}>
|
||||
<Typography sx={{
|
||||
fontSize: '12px'
|
||||
}}>No thread post notifications</Typography>
|
||||
</Box>
|
||||
)}
|
||||
<List sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper", maxHeight: '300px', overflow: 'auto' }}>
|
||||
{posts?.map((post)=> {
|
||||
return (
|
||||
<ListItem
|
||||
key={post?.thread?.threadId}
|
||||
onClick={()=> {
|
||||
executeEvent("openThreadNewPost", {
|
||||
data: post
|
||||
});
|
||||
}}
|
||||
disablePadding
|
||||
secondaryAction={
|
||||
<IconButton edge="end" aria-label="comments">
|
||||
<VisibilityIcon
|
||||
sx={{
|
||||
color: "red",
|
||||
}}
|
||||
/>
|
||||
</IconButton>
|
||||
}
|
||||
>
|
||||
<ListItemButton disableRipple role={undefined} dense>
|
||||
|
||||
<ListItemText primary={`New post in ${post?.thread?.threadData?.title}`} />
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
)
|
||||
<Box
|
||||
sx={{
|
||||
width: "322px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
padding: '0px 20px',
|
||||
|
||||
})}
|
||||
|
||||
|
||||
|
||||
</List>
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "13px",
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
New Thread Posts:
|
||||
</Typography>
|
||||
<Spacer height="10px" />
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
width: "322px",
|
||||
height: '165px',
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
bgcolor: "background.paper",
|
||||
padding: "20px",
|
||||
borderRadius: '19px'
|
||||
}}
|
||||
>
|
||||
{loading && posts.length === 0 && (
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<CustomLoader />
|
||||
</Box>
|
||||
)}
|
||||
{!loading && posts.length === 0 && (
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: 'center',
|
||||
height: '100%',
|
||||
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "11px",
|
||||
fontWeight: 400,
|
||||
color: 'rgba(255, 255, 255, 0.2)'
|
||||
}}
|
||||
>
|
||||
Nothing to display
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
{posts?.length > 0 && (
|
||||
<List
|
||||
sx={{
|
||||
width: "100%",
|
||||
maxWidth: 360,
|
||||
bgcolor: "background.paper",
|
||||
maxHeight: "300px",
|
||||
overflow: "auto",
|
||||
}}
|
||||
>
|
||||
{posts?.map((post) => {
|
||||
return (
|
||||
<ListItem
|
||||
key={post?.thread?.threadId}
|
||||
onClick={() => {
|
||||
executeEvent("openThreadNewPost", {
|
||||
data: post,
|
||||
});
|
||||
}}
|
||||
disablePadding
|
||||
secondaryAction={
|
||||
<IconButton edge="end" aria-label="comments">
|
||||
<VisibilityIcon
|
||||
sx={{
|
||||
color: "red",
|
||||
}}
|
||||
/>
|
||||
</IconButton>
|
||||
}
|
||||
>
|
||||
<ListItemButton disableRipple role={undefined} dense>
|
||||
<ListItemText
|
||||
primary={`New post in ${post?.thread?.threadData?.title}`}
|
||||
/>
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
);
|
||||
})}
|
||||
</List>
|
||||
)}
|
||||
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
@ -16,151 +16,219 @@ export const ThingsToDoInitial = ({ myAddress, name, hasGroups, balance }) => {
|
||||
const [checked2, setChecked2] = React.useState(false);
|
||||
const [checked3, setChecked3] = React.useState(false);
|
||||
|
||||
// const getAddressInfo = async (address) => {
|
||||
// const response = await fetch(getBaseApiReact() + "/addresses/" + address);
|
||||
// const data = await response.json();
|
||||
// if (data.error && data.error === 124) {
|
||||
// setChecked1(false);
|
||||
// } else if (data.address) {
|
||||
// setChecked1(true);
|
||||
// }
|
||||
// };
|
||||
// const getAddressInfo = async (address) => {
|
||||
// const response = await fetch(getBaseApiReact() + "/addresses/" + address);
|
||||
// const data = await response.json();
|
||||
// if (data.error && data.error === 124) {
|
||||
// setChecked1(false);
|
||||
// } else if (data.address) {
|
||||
// setChecked1(true);
|
||||
// }
|
||||
// };
|
||||
|
||||
// const checkInfo = async () => {
|
||||
// try {
|
||||
// getAddressInfo(myAddress);
|
||||
// } catch (error) {}
|
||||
// };
|
||||
|
||||
|
||||
// const checkInfo = async () => {
|
||||
// try {
|
||||
// getAddressInfo(myAddress);
|
||||
// } catch (error) {}
|
||||
// };
|
||||
|
||||
React.useEffect(() => {
|
||||
if (balance && +balance >= 6) {
|
||||
setChecked1(true)
|
||||
setChecked1(true);
|
||||
}
|
||||
}, [balance]);
|
||||
|
||||
React.useEffect(()=> {
|
||||
if(hasGroups) setChecked3(true)
|
||||
}, [hasGroups])
|
||||
React.useEffect(() => {
|
||||
if (hasGroups) setChecked3(true);
|
||||
}, [hasGroups]);
|
||||
|
||||
React.useEffect(()=> {
|
||||
if(name) setChecked2(true)
|
||||
}, [name])
|
||||
React.useEffect(() => {
|
||||
if (name) setChecked2(true);
|
||||
}, [name]);
|
||||
|
||||
return (
|
||||
<Box sx={{
|
||||
width: '360px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
bgcolor: "background.paper",
|
||||
padding: '20px'
|
||||
}}>
|
||||
<Typography sx={{
|
||||
fontSize: '14px'
|
||||
}}>Suggestion: Complete the following</Typography>
|
||||
<Spacer height="10px" />
|
||||
<List sx={{ width: "100%", maxWidth: 360 }}>
|
||||
<ListItem
|
||||
// secondaryAction={
|
||||
// <IconButton edge="end" aria-label="comments">
|
||||
// <InfoIcon
|
||||
// sx={{
|
||||
// color: "white",
|
||||
// }}
|
||||
// />
|
||||
// </IconButton>
|
||||
// }
|
||||
disablePadding
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: "322px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
padding: "0px 20px",
|
||||
}}
|
||||
>
|
||||
<ListItemButton disableRipple role={undefined} dense>
|
||||
<ListItemIcon>
|
||||
<Checkbox
|
||||
edge="start"
|
||||
checked={checked1}
|
||||
tabIndex={-1}
|
||||
disableRipple
|
||||
disabled={true}
|
||||
sx={{
|
||||
"&.Mui-checked": {
|
||||
color: "white", // Customize the color when checked
|
||||
},
|
||||
"& .MuiSvgIcon-root": {
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={`Have at least 6 QORT in your wallet`} />
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
<ListItem
|
||||
// secondaryAction={
|
||||
// <IconButton edge="end" aria-label="comments">
|
||||
// <InfoIcon
|
||||
// sx={{
|
||||
// color: "white",
|
||||
// }}
|
||||
// />
|
||||
// </IconButton>
|
||||
// }
|
||||
disablePadding
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "13px",
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
Getting Started:
|
||||
</Typography>
|
||||
<Spacer height="10px" />
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
width: "322px",
|
||||
height: "165px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
bgcolor: "background.paper",
|
||||
padding: "20px",
|
||||
borderRadius: "19px",
|
||||
}}
|
||||
>
|
||||
<ListItemButton disableRipple role={undefined} dense>
|
||||
<ListItemIcon>
|
||||
<Checkbox
|
||||
edge="start"
|
||||
checked={checked2}
|
||||
tabIndex={-1}
|
||||
disableRipple
|
||||
disabled={true}
|
||||
<List sx={{ width: "100%", maxWidth: 360 }}>
|
||||
<ListItem
|
||||
// secondaryAction={
|
||||
// <IconButton edge="end" aria-label="comments">
|
||||
// <InfoIcon
|
||||
// sx={{
|
||||
// color: "white",
|
||||
// }}
|
||||
// />
|
||||
// </IconButton>
|
||||
// }
|
||||
disablePadding
|
||||
sx={{
|
||||
marginBottom: '20px'
|
||||
}}
|
||||
>
|
||||
<ListItemButton
|
||||
sx={{
|
||||
"&.Mui-checked": {
|
||||
color: "white", // Customize the color when checked
|
||||
},
|
||||
"& .MuiSvgIcon-root": {
|
||||
color: "white",
|
||||
},
|
||||
padding: "0px",
|
||||
}}
|
||||
/>
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={`Register a name`} />
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
<ListItem
|
||||
// secondaryAction={
|
||||
// <IconButton edge="end" aria-label="comments">
|
||||
// <InfoIcon
|
||||
// sx={{
|
||||
// color: "white",
|
||||
// }}
|
||||
// />
|
||||
// </IconButton>
|
||||
// }
|
||||
disablePadding
|
||||
>
|
||||
<ListItemButton disableRipple role={undefined} dense>
|
||||
<ListItemIcon>
|
||||
<Checkbox
|
||||
edge="start"
|
||||
checked={checked3}
|
||||
tabIndex={-1}
|
||||
disableRipple
|
||||
disabled={true}
|
||||
sx={{
|
||||
"&.Mui-checked": {
|
||||
color: "white", // Customize the color when checked
|
||||
},
|
||||
"& .MuiSvgIcon-root": {
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={`Join a group`} />
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
</List>
|
||||
role={undefined}
|
||||
dense
|
||||
>
|
||||
<ListItemText
|
||||
sx={{
|
||||
"& .MuiTypography-root": {
|
||||
fontSize: "13px",
|
||||
fontWeight: 400,
|
||||
},
|
||||
}}
|
||||
primary={`Have at least 6 QORT in your wallet`}
|
||||
/>
|
||||
<ListItemIcon
|
||||
sx={{
|
||||
justifyContent: "flex-end",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
height: "18px",
|
||||
width: "18px",
|
||||
borderRadius: "50%",
|
||||
backgroundColor: checked1 ? "rgba(9, 182, 232, 1)" : "transparent",
|
||||
outline: "1px solid rgba(9, 182, 232, 1)",
|
||||
}}
|
||||
/>
|
||||
{/* <Checkbox
|
||||
edge="start"
|
||||
checked={checked1}
|
||||
tabIndex={-1}
|
||||
disableRipple
|
||||
disabled={true}
|
||||
sx={{
|
||||
"&.Mui-checked": {
|
||||
color: "white", // Customize the color when checked
|
||||
},
|
||||
"& .MuiSvgIcon-root": {
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
/> */}
|
||||
</ListItemIcon>
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
<ListItem
|
||||
sx={{
|
||||
marginBottom: '20px'
|
||||
}}
|
||||
// secondaryAction={
|
||||
// <IconButton edge="end" aria-label="comments">
|
||||
// <InfoIcon
|
||||
// sx={{
|
||||
// color: "white",
|
||||
// }}
|
||||
// />
|
||||
// </IconButton>
|
||||
// }
|
||||
disablePadding
|
||||
>
|
||||
<ListItemButton sx={{
|
||||
padding: "0px",
|
||||
}} disableRipple role={undefined} dense>
|
||||
|
||||
<ListItemText sx={{
|
||||
"& .MuiTypography-root": {
|
||||
fontSize: "13px",
|
||||
fontWeight: 400,
|
||||
},
|
||||
}} primary={`Register a name`} />
|
||||
<ListItemIcon sx={{
|
||||
justifyContent: "flex-end",
|
||||
}}>
|
||||
<Box
|
||||
sx={{
|
||||
height: "18px",
|
||||
width: "18px",
|
||||
borderRadius: "50%",
|
||||
backgroundColor: checked2 ? "rgba(9, 182, 232, 1)" : "transparent",
|
||||
outline: "1px solid rgba(9, 182, 232, 1)",
|
||||
}}
|
||||
/>
|
||||
</ListItemIcon>
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
<ListItem
|
||||
// secondaryAction={
|
||||
// <IconButton edge="end" aria-label="comments">
|
||||
// <InfoIcon
|
||||
// sx={{
|
||||
// color: "white",
|
||||
// }}
|
||||
// />
|
||||
// </IconButton>
|
||||
// }
|
||||
disablePadding
|
||||
>
|
||||
<ListItemButton sx={{
|
||||
padding: "0px",
|
||||
}} disableRipple role={undefined} dense>
|
||||
|
||||
<ListItemText sx={{
|
||||
"& .MuiTypography-root": {
|
||||
fontSize: "13px",
|
||||
fontWeight: 400,
|
||||
},
|
||||
}} primary={`Join a group hub`} />
|
||||
<ListItemIcon sx={{
|
||||
justifyContent: "flex-end",
|
||||
}}>
|
||||
<Box
|
||||
sx={{
|
||||
height: "18px",
|
||||
width: "18px",
|
||||
borderRadius: "50%",
|
||||
backgroundColor: checked3 ? "rgba(9, 182, 232, 1)" : "transparent",
|
||||
outline: "1px solid rgba(9, 182, 232, 1)",
|
||||
}}
|
||||
/>
|
||||
</ListItemIcon>
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
</List>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
127
src/components/Mobile/MobileFooter.tsx
Normal file
127
src/components/Mobile/MobileFooter.tsx
Normal file
@ -0,0 +1,127 @@
|
||||
import * as React from 'react';
|
||||
import { BottomNavigation, BottomNavigationAction, Typography } from '@mui/material';
|
||||
import { Home, Groups, Message, ShowChart } from '@mui/icons-material';
|
||||
import Box from '@mui/material/Box';
|
||||
import BottomLogo from '../../assets/svgs/BottomLogo5.svg'
|
||||
import { CustomSvg } from '../../common/CustomSvg';
|
||||
import { WalletIcon } from '../../assets/Icons/WalletIcon';
|
||||
import { HubsIcon } from '../../assets/Icons/HubsIcon';
|
||||
import { TradingIcon } from '../../assets/Icons/TradingIcon';
|
||||
import { MessagingIcon } from '../../assets/Icons/MessagingIcon';
|
||||
|
||||
const IconWrapper = ({children, label, color})=> {
|
||||
|
||||
return <Box sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
gap: '5px',
|
||||
flexDirection: 'column'
|
||||
}}>
|
||||
{children}
|
||||
<Typography sx={{
|
||||
fontFamily: "Inter",
|
||||
fontSize: "12px",
|
||||
fontWeight: 500,
|
||||
color: color
|
||||
}}>{label}</Typography>
|
||||
</Box>
|
||||
}
|
||||
|
||||
export const MobileFooter =({
|
||||
selectedGroup,
|
||||
groupSection,
|
||||
isUnread,
|
||||
goToAnnouncements,
|
||||
isUnreadChat,
|
||||
goToChat,
|
||||
goToThreads,
|
||||
setOpenManageMembers,
|
||||
groupChatHasUnread,
|
||||
groupsAnnHasUnread,
|
||||
directChatHasUnread,
|
||||
chatMode,
|
||||
openDrawerGroups,
|
||||
goToHome,
|
||||
setIsOpenDrawerProfile,
|
||||
mobileViewMode,
|
||||
setMobileViewMode,
|
||||
setMobileViewModeKeepOpen
|
||||
}) => {
|
||||
const [value, setValue] = React.useState(0);
|
||||
return (
|
||||
<Box sx={{
|
||||
width: '100%',
|
||||
position: 'fixed',
|
||||
bottom: 0,
|
||||
backgroundColor: 'var(--bg-primary)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
height: '67px', // Footer height
|
||||
zIndex: 1,
|
||||
borderTopRightRadius: '25px',
|
||||
borderTopLeftRadius: '25px'
|
||||
|
||||
}}>
|
||||
<BottomNavigation
|
||||
showLabels
|
||||
value={value}
|
||||
onChange={(event, newValue) => setValue(newValue)}
|
||||
sx={{ backgroundColor: 'transparent', flexGrow: 1 }}
|
||||
>
|
||||
<BottomNavigationAction onClick={()=> {
|
||||
// setMobileViewMode('wallet')
|
||||
setIsOpenDrawerProfile(true)
|
||||
}} icon={<IconWrapper color="rgba(250, 250, 250, 0.5)" label="Wallet"><WalletIcon color="rgba(250, 250, 250, 0.5)" /></IconWrapper>} sx={{ color: value === 0 ? 'white' : 'gray', padding: '0px 10px' }} />
|
||||
<BottomNavigationAction onClick={()=> {
|
||||
setMobileViewMode('groups')
|
||||
}} icon={<IconWrapper color="rgba(250, 250, 250, 0.5)" label="Hubs"><HubsIcon color="rgba(250, 250, 250, 0.5)" /></IconWrapper>} sx={{ color: value === 0 ? 'white' : 'gray', paddingLeft: '10px', paddingRight: '42px' }} />
|
||||
|
||||
</BottomNavigation>
|
||||
|
||||
{/* Floating Center Button */}
|
||||
<Box sx={{
|
||||
position: 'absolute',
|
||||
bottom: '34px', // Adjusted to float properly based on footer height
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)', // Center horizontally
|
||||
width: '59px',
|
||||
height: '59px',
|
||||
backgroundColor: 'var(--bg-primary)',
|
||||
borderRadius: '50%',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
boxShadow: '0 4px 10px rgba(0, 0, 0, 0.3)', // Subtle shadow for the floating effect
|
||||
zIndex: 3,
|
||||
}}>
|
||||
<Box sx={{
|
||||
width: '49px', // Slightly smaller inner circle
|
||||
height: '49px',
|
||||
backgroundColor: 'var(--bg-primary)',
|
||||
borderRadius: '50%',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}>
|
||||
{/* Custom Center Icon */}
|
||||
<img src={BottomLogo} alt="center-icon" />
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<BottomNavigation
|
||||
showLabels
|
||||
value={value}
|
||||
onChange={(event, newValue) => setValue(newValue)}
|
||||
sx={{ backgroundColor: 'transparent', flexGrow: 1 }}
|
||||
>
|
||||
<BottomNavigationAction onClick={()=> {
|
||||
setMobileViewModeKeepOpen('messaging')
|
||||
}} icon={<IconWrapper label="Messaging" color="rgba(250, 250, 250, 0.5)"><MessagingIcon color="rgba(250, 250, 250, 0.5)" /></IconWrapper>} sx={{ color: value === 2 ? 'white' : 'gray', paddingLeft: '55px', paddingRight: '10px' }} />
|
||||
<BottomNavigationAction onClick={() => {
|
||||
chrome.tabs.create({ url: "https://www.qort.trade", active: true });
|
||||
}} icon={<IconWrapper label="Trading" color="rgba(250, 250, 250, 0.5)"><TradingIcon color="rgba(250, 250, 250, 0.5)" /></IconWrapper>} sx={{ color: value === 3 ? 'white' : 'gray' , padding: '0px 10px'}} />
|
||||
</BottomNavigation>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
186
src/components/Mobile/MobileHeader.tsx
Normal file
186
src/components/Mobile/MobileHeader.tsx
Normal file
@ -0,0 +1,186 @@
|
||||
import React from 'react';
|
||||
import { AppBar, Toolbar, IconButton, Typography, Box, MenuItem, Select, ButtonBase } from '@mui/material';
|
||||
import { HomeIcon } from '../../assets/Icons/HomeIcon';
|
||||
import { LogoutIcon } from '../../assets/Icons/LogoutIcon';
|
||||
import { NotificationIcon } from '../../assets/Icons/NotificationIcon';
|
||||
import { ArrowDownIcon } from '../../assets/Icons/ArrowDownIcon';
|
||||
import { MessagingIcon } from '../../assets/Icons/MessagingIcon';
|
||||
|
||||
const Header = ({
|
||||
logoutFunc,
|
||||
goToHome,
|
||||
setIsOpenDrawerProfile,
|
||||
isThin,
|
||||
setMobileViewModeKeepOpen
|
||||
// selectedGroup,
|
||||
// onHomeClick,
|
||||
// onLogoutClick,
|
||||
// onGroupChange,
|
||||
// onWalletClick,
|
||||
// onNotificationClick,
|
||||
}) => {
|
||||
if(isThin){
|
||||
|
||||
|
||||
return (
|
||||
<AppBar position="static" sx={{ backgroundColor: 'background: rgba(0, 0, 0, 0.2)', boxShadow: 'none' }}>
|
||||
<Toolbar sx={{ justifyContent: 'space-between', padding: '0 16px', height: '30px', minHeight: '30px' }}>
|
||||
{/* Left Home Icon */}
|
||||
<Box sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '18px',
|
||||
width: '75px'
|
||||
}}>
|
||||
<IconButton edge="start" color="inherit" aria-label="home"
|
||||
onClick={()=> {
|
||||
setMobileViewModeKeepOpen('')
|
||||
goToHome()
|
||||
}}
|
||||
// onClick={onHomeClick}
|
||||
>
|
||||
<HomeIcon height={16} width={18} color="rgba(145, 145, 147, 1)" />
|
||||
</IconButton>
|
||||
<IconButton edge="start" color="inherit" aria-label="home"
|
||||
onClick={()=> {
|
||||
setMobileViewModeKeepOpen()
|
||||
goToHome()
|
||||
}}
|
||||
// onClick={onHomeClick}
|
||||
>
|
||||
<NotificationIcon color="rgba(145, 145, 147, 1)" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
|
||||
|
||||
{/* Center Title */}
|
||||
<Typography variant="h6" sx={{ color: 'rgba(255, 255, 255, 1)', fontWeight: 700, letterSpacing: '2px' , fontSize: '13px'}}>
|
||||
QORTAL
|
||||
</Typography>
|
||||
<Box sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '18px',
|
||||
width: '75px',
|
||||
justifyContent: 'flex-end'
|
||||
}}>
|
||||
{/* Right Logout Icon */}
|
||||
|
||||
<IconButton onClick={()=> {
|
||||
setMobileViewModeKeepOpen('messaging')
|
||||
}} edge="end" color="inherit" aria-label="logout"
|
||||
|
||||
// onClick={onLogoutClick}
|
||||
>
|
||||
<MessagingIcon height={16} width={16} color="rgba(145, 145, 147, 1)" />
|
||||
</IconButton>
|
||||
<IconButton onClick={logoutFunc} edge="end" color="inherit" aria-label="logout"
|
||||
|
||||
// onClick={onLogoutClick}
|
||||
>
|
||||
<LogoutIcon height={16} width={14} color="rgba(145, 145, 147, 1)" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{/* Main Header */}
|
||||
<AppBar position="static" sx={{ backgroundColor: 'var(--bg-primary)', boxShadow: 'none' }}>
|
||||
<Toolbar sx={{ justifyContent: 'space-between', padding: '0 16px', height: '60px' }}>
|
||||
{/* Left Home Icon */}
|
||||
<IconButton edge="start" color="inherit" aria-label="home"
|
||||
onClick={goToHome}
|
||||
// onClick={onHomeClick}
|
||||
>
|
||||
<HomeIcon color="rgba(145, 145, 147, 1)" />
|
||||
</IconButton>
|
||||
|
||||
{/* Center Title */}
|
||||
<Typography variant="h6" sx={{ color: 'rgba(255, 255, 255, 1)', fontWeight: 700, letterSpacing: '2px' , fontSize: '13px'}}>
|
||||
QORTAL
|
||||
</Typography>
|
||||
|
||||
{/* Right Logout Icon */}
|
||||
<IconButton onClick={logoutFunc} edge="end" color="inherit" aria-label="logout"
|
||||
|
||||
// onClick={onLogoutClick}
|
||||
>
|
||||
<LogoutIcon color="rgba(145, 145, 147, 1)" />
|
||||
</IconButton>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
|
||||
{/* Secondary Section */}
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'var(--bg-3)',
|
||||
padding: '8px 16px',
|
||||
position: 'relative',
|
||||
height: '27px'
|
||||
}}
|
||||
>
|
||||
|
||||
<Box sx={{
|
||||
display: 'flex',
|
||||
gap: '10px',
|
||||
alignItems: 'center',
|
||||
userSelect: 'none'
|
||||
}}>
|
||||
<Typography sx={{ color: 'rgba(255, 255, 255, 1)', fontWeight: 400, fontSize: '11px'}}>
|
||||
Palmas
|
||||
</Typography>
|
||||
{/*
|
||||
<ArrowDownIcon /> */}
|
||||
</Box>
|
||||
|
||||
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, 50%)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
zIndex: 500,
|
||||
width: '30px', // Adjust as needed
|
||||
height: '30px', // Adjust as needed
|
||||
backgroundColor: '#232428', // Circle background
|
||||
borderRadius: '50%',
|
||||
boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.3)', // Optional shadow for the circle
|
||||
}}
|
||||
>
|
||||
<IconButton color="inherit">
|
||||
<NotificationIcon color="rgba(255, 255, 255, 1)" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
|
||||
{/* Right Dropdown */}
|
||||
<ButtonBase onClick={()=> {
|
||||
setIsOpenDrawerProfile(true)
|
||||
}}>
|
||||
<Box sx={{
|
||||
display: 'flex',
|
||||
gap: '10px',
|
||||
alignItems: 'center'
|
||||
}}>
|
||||
<Typography sx={{ color: 'rgba(255, 255, 255, 1)', fontWeight: 400, fontSize: '11px'}}>
|
||||
View Wallet
|
||||
</Typography>
|
||||
|
||||
<ArrowDownIcon />
|
||||
</Box>
|
||||
</ButtonBase>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
@ -29,6 +29,10 @@
|
||||
--color-instance-popover-bg: #222222;
|
||||
--Mail-Background: rgba(49, 51, 56, 1);
|
||||
--new-message-text: black;
|
||||
|
||||
--bg-primary : rgba(31, 32, 35, 1);
|
||||
--bg-2: #27282c;
|
||||
--bg-3: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
body {
|
||||
|
||||
5
src/utils/mobile/mobileUtils.ts
Normal file
5
src/utils/mobile/mobileUtils.ts
Normal file
@ -0,0 +1,5 @@
|
||||
|
||||
export const getRootHeight = ()=> {
|
||||
|
||||
return document?.getElementById('root')?.style?.height || '100%'
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user