re-arrange profile

This commit is contained in:
PhilReact 2025-02-28 02:07:06 +02:00
parent 8513907566
commit bbad09b5f5
2 changed files with 284 additions and 165 deletions

View File

@ -144,6 +144,7 @@ import { isRunningGateway } from "./qortalRequests";
import { QMailStatus } from "./components/QMailStatus"; import { QMailStatus } from "./components/QMailStatus";
import { GlobalActions } from "./components/GlobalActions/GlobalActions"; import { GlobalActions } from "./components/GlobalActions/GlobalActions";
import { useBlockedAddresses } from "./components/Group/useBlockUsers"; import { useBlockedAddresses } from "./components/Group/useBlockUsers";
import { WalletIcon } from "./assets/Icons/WalletIcon";
type extStates = type extStates =
| "not-authenticated" | "not-authenticated"
@ -1334,6 +1335,244 @@ function App() {
} }
}; };
const renderProfileLeft = ()=> {
return <AuthenticatedContainerInnerLeft
sx={{
overflowY: isMobile && "auto",
padding: "0px 20px",
minWidth: "225px",
}}
>
<Spacer height="20px" />
<Box sx={{
width: '100%',
display: 'flex',
justifyContent: 'flex-start'
}}>
{authenticatedMode === "qort" && (
<Tooltip
title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>LITECOIN WALLET</span>}
placement="left"
arrow
sx={{ fontSize: "24" }}
slotProps={{
tooltip: {
sx: {
color: "#ffffff",
backgroundColor: "#444444",
},
},
arrow: {
sx: {
color: "#444444",
},
},
}}
>
<img
onClick={() => {
setAuthenticatedMode("ltc");
}}
src={ltcLogo}
style={{
cursor: "pointer",
width: "20px",
height: "auto",
}}
/>
</Tooltip>
)}
{authenticatedMode === "ltc" && (
<Tooltip
title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>QORTAL WALLET</span>}
placement="left"
arrow
sx={{ fontSize: "24" }}
slotProps={{
tooltip: {
sx: {
color: "#ffffff",
backgroundColor: "#444444",
},
},
arrow: {
sx: {
color: "#444444",
},
},
}}
>
<img
onClick={() => {
setAuthenticatedMode("qort");
}}
src={qortLogo}
style={{
cursor: "pointer",
width: "20px",
height: "auto",
}}
/>
</Tooltip>
)}
</Box>
<Spacer height="48px" />
{authenticatedMode === "ltc" ? (
<>
<img src={ltcLogo} />
<Spacer height="32px" />
<CopyToClipboard text={rawWallet?.ltcAddress}>
<AddressBox>
{rawWallet?.ltcAddress?.slice(0, 6)}...
{rawWallet?.ltcAddress?.slice(-4)} <img src={Copy} />
</AddressBox>
</CopyToClipboard>
<Spacer height="10px" />
{ltcBalanceLoading && (
<CircularProgress color="success" size={16} />
)}
{!isNaN(+ltcBalance) && !ltcBalanceLoading && (
<Box
sx={{
gap: "10px",
display: "flex",
alignItems: "center",
}}
>
<TextP
sx={{
textAlign: "center",
lineHeight: "24px",
fontSize: "20px",
fontWeight: 700,
}}
>
{ltcBalance} LTC
</TextP>
<RefreshIcon
onClick={getLtcBalanceFunc}
sx={{
fontSize: "16px",
color: "white",
cursor: "pointer",
}}
/>
</Box>
)}
<AddressQRCode targetAddress={rawWallet?.ltcAddress} />
</>
) : (
<>
<MainAvatar myName={userInfo?.name} />
<Spacer height="32px" />
<TextP
sx={{
textAlign: "center",
lineHeight: "24px",
fontSize: "20px",
}}
>
{userInfo?.name}
</TextP>
<Spacer height="10px" />
<CopyToClipboard text={rawWallet?.address0}>
<AddressBox>
{rawWallet?.address0?.slice(0, 6)}...
{rawWallet?.address0?.slice(-4)} <img src={Copy} />
</AddressBox>
</CopyToClipboard>
<Spacer height="10px" />
{qortBalanceLoading && (
<CircularProgress color="success" size={16} />
)}
{!qortBalanceLoading && balance >= 0 && (
<Box
sx={{
gap: "10px",
display: "flex",
alignItems: "center",
}}
>
<TextP
sx={{
textAlign: "center",
lineHeight: "24px",
fontSize: "20px",
fontWeight: 700,
}}
>
{balance?.toFixed(2)} QORT
</TextP>
<RefreshIcon
onClick={getBalanceFunc}
sx={{
fontSize: "16px",
color: "white",
cursor: "pointer",
}}
/>
</Box>
)}
<Spacer height="35px" />
{userInfo && !userInfo?.name && (
<TextP
ref={registerNamePopoverRef}
sx={{
textAlign: "center",
lineHeight: 1.2,
fontSize: "16px",
fontWeight: 500,
cursor: "pointer",
marginTop: "10px",
color: "red",
textDecoration: "underline",
}}
onClick={() => {
setOpenRegisterName(true);
}}
>
REGISTER NAME
</TextP>
)}
<Spacer height="20px" />
<CustomButton
onClick={() => {
setIsOpenSendQort(true);
// setExtstate("send-qort");
setIsOpenDrawerProfile(false);
}}
>
Transfer QORT
</CustomButton>
<AddressQRCode targetAddress={rawWallet?.address0} />
</>
)}
<TextP
sx={{
textAlign: "center",
lineHeight: "24px",
fontSize: "12px",
fontWeight: 500,
cursor: "pointer",
marginTop: "10px",
textDecoration: "underline",
}}
onClick={async () => {
executeEvent("addTab", {
data: { service: "APP", name: "q-trade" },
});
executeEvent("open-apps-mode", {});
}}
>
Get QORT at Q-Trade
</TextP>
</AuthenticatedContainerInnerLeft>
}
const renderProfile = () => { const renderProfile = () => {
return ( return (
<AuthenticatedContainer <AuthenticatedContainer
@ -1366,166 +1605,9 @@ function App() {
{desktopViewMode !== "apps" && {desktopViewMode !== "apps" &&
desktopViewMode !== "dev" && desktopViewMode !== "dev" &&
desktopViewMode !== "chat" && ( desktopViewMode !== "chat" && (
<AuthenticatedContainerInnerLeft <>
sx={{ {renderProfileLeft()}
overflowY: isMobile && "auto", </>
padding: "0px 20px",
minWidth: "225px",
}}
>
<Spacer height="48px" />
{authenticatedMode === "ltc" ? (
<>
<img src={ltcLogo} />
<Spacer height="32px" />
<CopyToClipboard text={rawWallet?.ltcAddress}>
<AddressBox>
{rawWallet?.ltcAddress?.slice(0, 6)}...
{rawWallet?.ltcAddress?.slice(-4)} <img src={Copy} />
</AddressBox>
</CopyToClipboard>
<Spacer height="10px" />
{ltcBalanceLoading && (
<CircularProgress color="success" size={16} />
)}
{!isNaN(+ltcBalance) && !ltcBalanceLoading && (
<Box
sx={{
gap: "10px",
display: "flex",
alignItems: "center",
}}
>
<TextP
sx={{
textAlign: "center",
lineHeight: "24px",
fontSize: "20px",
fontWeight: 700,
}}
>
{ltcBalance} LTC
</TextP>
<RefreshIcon
onClick={getLtcBalanceFunc}
sx={{
fontSize: "16px",
color: "white",
cursor: "pointer",
}}
/>
</Box>
)}
<AddressQRCode targetAddress={rawWallet?.ltcAddress} />
</>
) : (
<>
<MainAvatar myName={userInfo?.name} />
<Spacer height="32px" />
<TextP
sx={{
textAlign: "center",
lineHeight: "24px",
fontSize: "20px",
}}
>
{userInfo?.name}
</TextP>
<Spacer height="10px" />
<CopyToClipboard text={rawWallet?.address0}>
<AddressBox>
{rawWallet?.address0?.slice(0, 6)}...
{rawWallet?.address0?.slice(-4)} <img src={Copy} />
</AddressBox>
</CopyToClipboard>
<Spacer height="10px" />
{qortBalanceLoading && (
<CircularProgress color="success" size={16} />
)}
{!qortBalanceLoading && balance >= 0 && (
<Box
sx={{
gap: "10px",
display: "flex",
alignItems: "center",
}}
>
<TextP
sx={{
textAlign: "center",
lineHeight: "24px",
fontSize: "20px",
fontWeight: 700,
}}
>
{balance?.toFixed(2)} QORT
</TextP>
<RefreshIcon
onClick={getBalanceFunc}
sx={{
fontSize: "16px",
color: "white",
cursor: "pointer",
}}
/>
</Box>
)}
<Spacer height="35px" />
{userInfo && !userInfo?.name && (
<TextP
ref={registerNamePopoverRef}
sx={{
textAlign: "center",
lineHeight: 1.2,
fontSize: "16px",
fontWeight: 500,
cursor: "pointer",
marginTop: "10px",
color: "red",
textDecoration: "underline",
}}
onClick={() => {
setOpenRegisterName(true);
}}
>
REGISTER NAME
</TextP>
)}
<Spacer height="20px" />
<CustomButton
onClick={() => {
setIsOpenSendQort(true);
// setExtstate("send-qort");
setIsOpenDrawerProfile(false);
}}
>
Transfer QORT
</CustomButton>
<AddressQRCode targetAddress={rawWallet?.address0} />
</>
)}
<TextP
sx={{
textAlign: "center",
lineHeight: "24px",
fontSize: "12px",
fontWeight: 500,
cursor: "pointer",
marginTop: "10px",
textDecoration: "underline",
}}
onClick={async () => {
executeEvent("addTab", {
data: { service: "APP", name: "q-trade" },
});
executeEvent("open-apps-mode", {});
}}
>
Get QORT at Q-Trade
</TextP>
</AuthenticatedContainerInnerLeft>
)} )}
<AuthenticatedContainerInnerRight <AuthenticatedContainerInnerRight
@ -1614,8 +1696,42 @@ function App() {
/> />
</Tooltip> </Tooltip>
</ButtonBase> </ButtonBase>
<Spacer height="20px" />
{authenticatedMode === "qort" && ( {desktopViewMode !== 'home' && (
<>
<Spacer height="20px" />
<Tooltip
title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>WALLET</span>}
placement="left"
arrow
sx={{ fontSize: "24" }}
slotProps={{
tooltip: {
sx: {
color: "#ffffff",
backgroundColor: "#444444",
},
},
arrow: {
sx: {
color: "#444444",
},
},
}}
>
<ButtonBase onClick={() => {
setIsOpenDrawerProfile(true);
}}>
<WalletIcon width={25} color="rgba(250, 250, 250, 0.5)" />
</ButtonBase>
</Tooltip>
</>
)}
{/* {authenticatedMode === "qort" && (
<Tooltip <Tooltip
title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>LITECOIN WALLET</span>} title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>LITECOIN WALLET</span>}
placement="left" placement="left"
@ -1637,6 +1753,9 @@ function App() {
> >
<img <img
onClick={() => { onClick={() => {
if(desktopViewMode !== 'home'){
setIsOpenDrawerProfile((prev)=> !prev)
}
setAuthenticatedMode("ltc"); setAuthenticatedMode("ltc");
}} }}
src={ltcLogo} src={ltcLogo}
@ -1680,7 +1799,7 @@ function App() {
}} }}
/> />
</Tooltip> </Tooltip>
)} )} */}
<Spacer height="20px" /> <Spacer height="20px" />
<CoreSyncStatus /> <CoreSyncStatus />
<Spacer height="20px" /> <Spacer height="20px" />
@ -3514,7 +3633,7 @@ function App() {
open={isOpenDrawerProfile} open={isOpenDrawerProfile}
setOpen={setIsOpenDrawerProfile} setOpen={setIsOpenDrawerProfile}
> >
{renderProfile()} {renderProfileLeft()}
</DrawerComponent> </DrawerComponent>
</GlobalContext.Provider> </GlobalContext.Provider>

View File

@ -2,7 +2,7 @@ import React from 'react';
export const WalletIcon= ({ color, height, width }) => { export const WalletIcon= ({ color, height, width }) => {
return ( return (
<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width={width || 30} height={width || 30} 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="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"/> <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> </svg>