diff --git a/src/App.tsx b/src/App.tsx index 176d140..9e14601 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -144,6 +144,7 @@ import { isRunningGateway } from "./qortalRequests"; import { QMailStatus } from "./components/QMailStatus"; import { GlobalActions } from "./components/GlobalActions/GlobalActions"; import { useBlockedAddresses } from "./components/Group/useBlockUsers"; +import { WalletIcon } from "./assets/Icons/WalletIcon"; type extStates = | "not-authenticated" @@ -1334,6 +1335,244 @@ function App() { } }; + const renderProfileLeft = ()=> { + + return + + + {authenticatedMode === "qort" && ( + LITECOIN WALLET} + placement="left" + arrow + sx={{ fontSize: "24" }} + slotProps={{ + tooltip: { + sx: { + color: "#ffffff", + backgroundColor: "#444444", + }, + }, + arrow: { + sx: { + color: "#444444", + }, + }, + }} + > + { + + setAuthenticatedMode("ltc"); + }} + src={ltcLogo} + style={{ + cursor: "pointer", + width: "20px", + height: "auto", + }} + /> + + )} + {authenticatedMode === "ltc" && ( + QORTAL WALLET} + placement="left" + arrow + sx={{ fontSize: "24" }} + slotProps={{ + tooltip: { + sx: { + color: "#ffffff", + backgroundColor: "#444444", + }, + }, + arrow: { + sx: { + color: "#444444", + }, + }, + }} + > + { + setAuthenticatedMode("qort"); + }} + src={qortLogo} + style={{ + cursor: "pointer", + width: "20px", + height: "auto", + }} + /> + + )} + + + + {authenticatedMode === "ltc" ? ( + <> + + + + + {rawWallet?.ltcAddress?.slice(0, 6)}... + {rawWallet?.ltcAddress?.slice(-4)} + + + + {ltcBalanceLoading && ( + + )} + {!isNaN(+ltcBalance) && !ltcBalanceLoading && ( + + + {ltcBalance} LTC + + + + )} + + + ) : ( + <> + + + + {userInfo?.name} + + + + + {rawWallet?.address0?.slice(0, 6)}... + {rawWallet?.address0?.slice(-4)} + + + + {qortBalanceLoading && ( + + )} + {!qortBalanceLoading && balance >= 0 && ( + + + {balance?.toFixed(2)} QORT + + + + )} + + + {userInfo && !userInfo?.name && ( + { + setOpenRegisterName(true); + }} + > + REGISTER NAME + + )} + + { + setIsOpenSendQort(true); + // setExtstate("send-qort"); + setIsOpenDrawerProfile(false); + }} + > + Transfer QORT + + + + )} + { + executeEvent("addTab", { + data: { service: "APP", name: "q-trade" }, + }); + executeEvent("open-apps-mode", {}); + }} + > + Get QORT at Q-Trade + + + } + const renderProfile = () => { return ( - - - {authenticatedMode === "ltc" ? ( - <> - - - - - {rawWallet?.ltcAddress?.slice(0, 6)}... - {rawWallet?.ltcAddress?.slice(-4)} - - - - {ltcBalanceLoading && ( - - )} - {!isNaN(+ltcBalance) && !ltcBalanceLoading && ( - - - {ltcBalance} LTC - - - - )} - - - ) : ( - <> - - - - {userInfo?.name} - - - - - {rawWallet?.address0?.slice(0, 6)}... - {rawWallet?.address0?.slice(-4)} - - - - {qortBalanceLoading && ( - - )} - {!qortBalanceLoading && balance >= 0 && ( - - - {balance?.toFixed(2)} QORT - - - - )} - - - {userInfo && !userInfo?.name && ( - { - setOpenRegisterName(true); - }} - > - REGISTER NAME - - )} - - { - setIsOpenSendQort(true); - // setExtstate("send-qort"); - setIsOpenDrawerProfile(false); - }} - > - Transfer QORT - - - - )} - { - executeEvent("addTab", { - data: { service: "APP", name: "q-trade" }, - }); - executeEvent("open-apps-mode", {}); - }} - > - Get QORT at Q-Trade - - + <> + {renderProfileLeft()} + )} - - {authenticatedMode === "qort" && ( + + {desktopViewMode !== 'home' && ( + <> + + + WALLET} + placement="left" + arrow + sx={{ fontSize: "24" }} + slotProps={{ + tooltip: { + sx: { + color: "#ffffff", + backgroundColor: "#444444", + }, + }, + arrow: { + sx: { + color: "#444444", + }, + }, + }} + > + { + setIsOpenDrawerProfile(true); + }}> + + + + + + + )} + + {/* {authenticatedMode === "qort" && ( LITECOIN WALLET} placement="left" @@ -1637,6 +1753,9 @@ function App() { > { + if(desktopViewMode !== 'home'){ + setIsOpenDrawerProfile((prev)=> !prev) + } setAuthenticatedMode("ltc"); }} src={ltcLogo} @@ -1680,7 +1799,7 @@ function App() { }} /> - )} + )} */} @@ -3514,7 +3633,7 @@ function App() { open={isOpenDrawerProfile} setOpen={setIsOpenDrawerProfile} > - {renderProfile()} + {renderProfileLeft()} diff --git a/src/assets/Icons/WalletIcon.tsx b/src/assets/Icons/WalletIcon.tsx index ff993d4..7a0cc58 100644 --- a/src/assets/Icons/WalletIcon.tsx +++ b/src/assets/Icons/WalletIcon.tsx @@ -2,7 +2,7 @@ import React from 'react'; export const WalletIcon= ({ color, height, width }) => { return ( - +