Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor: connect wallet toast simplify #1343

Merged
merged 2 commits into from
Dec 20, 2023
Merged

refactor: connect wallet toast simplify #1343

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e24eb50
refactor: connect wallet toast simplify
kalashshah Dec 18, 2023
d2af0fd
fix: bg flur for onboard modal
kalashshah Dec 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
145 changes: 72 additions & 73 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,80 +214,79 @@ export default function App() {

return (
<ThemeProvider theme={darkMode ? themeDark : themeLight}>
{(!isActive || !allowedChain) && (
<SectionV2 minHeight="100vh">
<AppLogin toggleDarkMode={toggleDarkMode} />
</SectionV2>
)}


{isActive && !authError && (
<>
<GlobalStyle />
<InitState />
<NavigationContextProvider>
<SpaceContextProvider>
<SpaceComponentContextProvider spaceUI={spaceUI}>
{/* <AppContextProvider> */}
<Joyride
run={run}
steps={steps}
continuous={tutorialContinous}
stepIndex={stepIndex}
// hideFooter={true}
// primaryProps={false}
hideBackButton={true}
hideCloseButton={false}
disableScrolling={true}
disableScrollParentFix={true}
// disableFlip={true}
// showNextButton={false}
showSkipButton={false}
disableOverlayClose={true}
callback={handleJoyrideCallback}
styles={{
options: {
arrowColor: darkMode ? themeDark.dynamicTutsBg : themeLight.dynamicTutsBg,
backgroundColor: darkMode ? themeDark.dynamicTutsBg : themeLight.dynamicTutsBg,
overlayColor: darkMode ? themeDark.dynamicTutsBgOverlay : themeLight.dynamicTutsBgOverlay,
primaryColor: darkMode ? themeDark.dynamicTutsPrimaryColor : themeLight.dynamicTutsPrimaryColor,
textColor: darkMode ? themeDark.dynamicTutsFontColor : themeLight.dynamicTutsFontColor,
zIndex: 1000,
},
}}
/>

<HeaderContainer>
<Header
isDarkMode={darkMode}
darkModeToggle={toggleDarkMode}
<AppContextProvider>
{(!isActive || !allowedChain) && (
<SectionV2 minHeight="100vh">
<AppLogin toggleDarkMode={toggleDarkMode} />
</SectionV2>
)}


{isActive && !authError && (
<>
<GlobalStyle />
<InitState />
<NavigationContextProvider>
<SpaceContextProvider>
<SpaceComponentContextProvider spaceUI={spaceUI}>
<Joyride
run={run}
steps={steps}
continuous={tutorialContinous}
stepIndex={stepIndex}
// hideFooter={true}
// primaryProps={false}
hideBackButton={true}
hideCloseButton={false}
disableScrolling={true}
disableScrollParentFix={true}
// disableFlip={true}
// showNextButton={false}
showSkipButton={false}
disableOverlayClose={true}
callback={handleJoyrideCallback}
styles={{
options: {
arrowColor: darkMode ? themeDark.dynamicTutsBg : themeLight.dynamicTutsBg,
backgroundColor: darkMode ? themeDark.dynamicTutsBg : themeLight.dynamicTutsBg,
overlayColor: darkMode ? themeDark.dynamicTutsBgOverlay : themeLight.dynamicTutsBgOverlay,
primaryColor: darkMode ? themeDark.dynamicTutsPrimaryColor : themeLight.dynamicTutsPrimaryColor,
textColor: darkMode ? themeDark.dynamicTutsFontColor : themeLight.dynamicTutsFontColor,
zIndex: 1000,
},
}}
/>
</HeaderContainer>

<ParentContainer
bg={darkMode ? themeDark.backgroundBG : !isActive ? themeLight.connectWalletBg : themeLight.backgroundBG}
headerHeight={GLOBALS.CONSTANTS.HEADER_HEIGHT}
>
{!isSnapPage && <LeftBarContainer leftBarWidth={GLOBALS.CONSTANTS.LEFT_BAR_WIDTH}>
<Navigation />
</LeftBarContainer>}

<ContentContainer leftBarWidth={isSnapPage ? 0 : GLOBALS.CONSTANTS.LEFT_BAR_WIDTH}>
{/* Shared among all pages, load universal things here */}
<SpacesUIProvider spaceUI={spaceUI} theme={darkMode ? darkTheme : lightTheme}>
<MasterInterfacePage />
<SpaceWidgetSection />
</SpacesUIProvider>
</ContentContainer>
</ParentContainer>
{/* </AppContextProvider> */}
</SpaceComponentContextProvider>
</SpaceContextProvider>
</NavigationContextProvider>
</>
)}



<HeaderContainer>
<Header
isDarkMode={darkMode}
darkModeToggle={toggleDarkMode}
/>
</HeaderContainer>

<ParentContainer
bg={darkMode ? themeDark.backgroundBG : !isActive ? themeLight.connectWalletBg : themeLight.backgroundBG}
headerHeight={GLOBALS.CONSTANTS.HEADER_HEIGHT}
>
{!isSnapPage && <LeftBarContainer leftBarWidth={GLOBALS.CONSTANTS.LEFT_BAR_WIDTH}>
<Navigation />
</LeftBarContainer>}

<ContentContainer leftBarWidth={isSnapPage ? 0 : GLOBALS.CONSTANTS.LEFT_BAR_WIDTH}>
{/* Shared among all pages, load universal things here */}
<SpacesUIProvider spaceUI={spaceUI} theme={darkMode ? darkTheme : lightTheme}>
<MasterInterfacePage />
<SpaceWidgetSection />
</SpacesUIProvider>
</ContentContainer>
</ParentContainer>
</SpaceComponentContextProvider>
</SpaceContextProvider>
</NavigationContextProvider>
</>
)}

</AppContextProvider>
</ThemeProvider>
);
}
Expand Down
21 changes: 6 additions & 15 deletions src/AppLogin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,12 @@ import BlurBGClouds from 'components/reusables/blurs/BlurBGClouds';
import {
AInlineV2,
ButtonV2,
H2V2,
ImageV2,
ItemHV2,
ItemVV2,
SectionV2,
SpanV2
} from 'components/reusables/SharedStylingV2';
import { useAccount, useDeviceWidthCheck } from 'hooks';
import { useAccount } from 'hooks';
import styled, { keyframes, useTheme } from 'styled-components';
import { ReactComponent as PushLogoDark } from './assets/pushDark.svg';
import { ReactComponent as PushLogoLight } from './assets/pushLight.svg';
Expand All @@ -27,10 +25,9 @@ import { ReactComponent as InfoLogo } from "./assets/inforWithoutBG.svg";
// Internal Configs
import GLOBALS, { device } from 'config/Globals';
import { H2 } from 'components/SharedStyling';
import { Button, Input, Span } from 'primaries/SharedStyling';
import { Input, Span } from 'primaries/SharedStyling';
import { AppContext } from 'contexts/AppContext';
import { ethers } from 'ethers';
import { useResolveWeb3Name } from 'hooks/useResolveWeb3Name';
import { GlobalContext, ReadOnlyWalletMode } from 'contexts/GlobalContext';

const AppLogin = ({ toggleDarkMode }) => {
Expand All @@ -44,16 +41,10 @@ const AppLogin = ({ toggleDarkMode }) => {
const { authError, setAuthError } = useContext(ErrorContext);
const [errorMessage, setErrorMessage] = React.useState(undefined);
const [modalHeight, setModalHeight] = React.useState(0);
const [modalWidth, setModalWidth] = React.useState(0);

const isMobile = useDeviceWidthCheck(600);

// theme context
const theme = useTheme();

// SET LOADING
const [loading, setLoading] = useState(true);

// handle error functions
function handleErrorMessage(error: Error) {
setErrorMessage(error);
Expand All @@ -67,12 +58,12 @@ const AppLogin = ({ toggleDarkMode }) => {

useEffect(() => {
let observer: ResizeObserver | undefined;
let onboardModal: HTMLElement;
try {
setAuthError(undefined);
const onboardModal = document.getElementById("onboard-container");
const observer = new ResizeObserver(() => {
onboardModal = document.getElementById("onboard-container");
observer = new ResizeObserver(() => {
setModalHeight(onboardModal.offsetHeight);
setModalWidth(onboardModal.offsetWidth);
});
if (!readOnlyWallet) {
onboardModal.style.display = 'block';
Expand All @@ -86,14 +77,14 @@ const AppLogin = ({ toggleDarkMode }) => {
if(!readOnlyWallet) {
connect();
setModalHeight(0);
setModalWidth(0);
}
}
catch (error) {
console.log("Error !!!!! >>>>>>>", error);
setAuthError(error);
}
return () => {
onboardModal && observer?.unobserve(onboardModal);
observer?.disconnect();
}
}, [isActive]);
Expand Down
12 changes: 0 additions & 12 deletions src/components/ChannelDetails.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,12 +80,6 @@ export default function ChannelDetails({ isChannelExpired, setIsChannelExpired,

const handleDelegateModal = () => {
if (!userPushSDKInstance.signer) {
addDelegateToast.showMessageToast({
toastTitle: 'Error',
toastMessage: 'Your wallet is not connected.Please Connect.',
toastType: 'ERROR',
getToastIcon: (size) => <MdError size={size} color="red" />,
});
handleConnectWallet();
return;
}
Expand Down Expand Up @@ -170,12 +164,6 @@ export default function ChannelDetails({ isChannelExpired, setIsChannelExpired,
const navigateToNotifSettings = () => {

if (!userPushSDKInstance.signer) {
addDelegateToast.showMessageToast({
toastTitle: 'Error',
toastMessage: 'Your wallet is not connected.Please Connect.',
toastType: 'ERROR',
getToastIcon: (size) => <MdError size={size} color="red" />,
});
handleConnectWallet();
return;
}
Expand Down
6 changes: 0 additions & 6 deletions src/components/ChannelSettingsDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,12 +129,6 @@ function ChannelSettings({ DropdownRef, isDropdownOpen, closeDropdown }: Channel
const toggleChannelActivationState = () => {
if (isChannelBlocked) return;
if (!userPushSDKInstance.signer) {
userSignerToast.showMessageToast({
toastTitle: 'Error',
toastMessage: 'Please Connect your wallet',
toastType: 'ERROR',
getToastIcon: (size) => <MdError size={size} color="red" />,
});
handleConnectWallet();
return;
}
Expand Down
14 changes: 2 additions & 12 deletions src/components/NavigationButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,18 +59,8 @@ function NavigationButton({ item, data, sectionID, active, bg = 'none' }) {
RouteLogic = ProtectedRoute;
}

const showNavError = () => {
const handleDisallowedNav = () => {
handleConnectWallet();
navigationToast.showMessageToast({
toastMessage: `${data.name} is not available in ${mode.slice(1, -1)}`,
toastTitle: 'Please connect your wallet',
toastType: 'ERROR',
getToastIcon: () =>
<MdError
color='red'
size={24}
/>
});
}

return (
Expand Down Expand Up @@ -102,7 +92,7 @@ function NavigationButton({ item, data, sectionID, active, bg = 'none' }) {
margin={definedMargin}
bg={bg}
active={active?1:0}
onClick={disallowNavigation && showNavError}
onClick={disallowNavigation && handleDisallowedNav}
className={data?.name?.toLowerCase()}>
{data.iconFactory ? (
<ItemHV2 justifyContent="flex-start" padding="0 2rem">
Expand Down
6 changes: 0 additions & 6 deletions src/components/SendNotifications.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -300,12 +300,6 @@ const {handleConnectWallet} = useContext(AppContext);
console.log("User push sdk instance",userPushSDKInstance);

if (!userPushSDKInstance.signer) {
notificationToast.showMessageToast({
toastTitle: 'Error',
toastMessage: 'Your wallet is not connected.Please Connect.',
toastType: 'ERROR',
getToastIcon: (size) => <MdError size={size} color="red" />,
});
handleConnectWallet();
return;
}
Expand Down
6 changes: 0 additions & 6 deletions src/components/channel/NotificationSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,12 +134,6 @@ function NotificationSettings() {
try {

if (!userPushSDKInstance.signer) {
notificationToast.showMessageToast({
toastTitle: 'Error',
toastMessage: 'Your wallet is not connected.Please Connect.',
toastType: 'ERROR',
getToastIcon: (size) => <MdError size={size} color="red" />,
});
handleConnectWallet();
return;
}
Expand Down
6 changes: 0 additions & 6 deletions src/components/dropdowns/ManageNotifSettingDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,12 +135,6 @@ const ManageNotifSettingDropdown: React.FC<ManageNotifSettingDropdownProps> = (o
const setLoadingFunc = setLoading || (() => {});

if (!userPushSDKInstance.signer) {
unsubscribeToast.showMessageToast({
toastTitle: 'Error',
toastMessage: 'Your wallet is not connected.Please Connect.',
toastType: 'ERROR',
getToastIcon: (size) => <MdError size={size} color="red" />,
});
handleConnectWallet();
return;
}
Expand Down
11 changes: 0 additions & 11 deletions src/components/dropdowns/OptinNotifSettingDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,17 +155,6 @@ const OptinNotifSettingDropdown: React.FC<OptinNotifSettingDropdownProps> = (opt
const setLoadingFunc = setLoading || (options && options.setLoading) || (() => { });

if (!userPushSDKInstance.signer) {
subscribeToast.showMessageToast({
toastTitle: 'Error',
toastMessage: `You need to connect your wallet. Please Connect your wallet.`,
toastType: 'ERROR',
getToastIcon: (size) => (
<MdError
size={size}
color="red"
/>
),
});
handleConnectWallet();
return;
}
Expand Down
11 changes: 0 additions & 11 deletions src/components/dropdowns/UpdateNotifSettingDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,17 +156,6 @@ const UpdateNotifSettingDropdown: React.FC<UpdateNotifSettingDropdownProps> = ({
const saveOnSuccessSettingFunc = onSuccessSave || (() => {});

if (!userPushSDKInstance.signer) {
subscribeToast.showMessageToast({
toastTitle: 'Error',
toastMessage: `You need to connect your wallet. Please Connect your wallet.`,
toastType: 'ERROR',
getToastIcon: (size) => (
<MdError
size={size}
color="red"
/>
),
});
handleConnectWallet();
return;
}
Expand Down
12 changes: 0 additions & 12 deletions src/components/yield/StakingModalComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,12 +95,6 @@ const StakingModalComponent = ({ onClose, InnerComponentProps, toastObject }) =>

const approveDeposit = async () => {
if(!userPushSDKInstance.signer) {
toastObject.showMessageToast({
toastTitle: 'Error',
toastMessage: `Please connect your wallet`,
toastType: 'ERROR',
getToastIcon: (size) => <MdError size={size} color="red" />,
});
handleConnectWallet();
return;
}
Expand Down Expand Up @@ -176,12 +170,6 @@ const StakingModalComponent = ({ onClose, InnerComponentProps, toastObject }) =>

const depositAmountTokenFarmSingleTx = async () => {
if(!userPushSDKInstance.signer) {
toastObject.showMessageToast({
toastTitle: 'Error',
toastMessage: `Please connect your wallet`,
toastType: 'ERROR',
getToastIcon: (size) => <MdError size={size} color="red" />,
});
handleConnectWallet();
return;
}
Expand Down
Loading