Skip to content

Commit

Permalink
feat: implement connect wallet
Browse files Browse the repository at this point in the history
  • Loading branch information
Hemanthghs committed May 23, 2024
1 parent 2059709 commit 3d920ab
Show file tree
Hide file tree
Showing 13 changed files with 360 additions and 38 deletions.
1 change: 1 addition & 0 deletions frontend/next.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ const nextConfig = {
},
],
},
output: 'standalone',
};

module.exports = nextConfig;
13 changes: 3 additions & 10 deletions frontend/public/drop-down-icon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions frontend/src/app/fixed-layout.css
Original file line number Diff line number Diff line change
Expand Up @@ -66,3 +66,11 @@
.top-bar nav {
@apply px-6 w-full max-w-[1512px] flex justify-between items-center;
}

.profile-section {
@apply w-[472px] h-full px-6 pt-10 pb-[60px];
}

.connect-wallet-popup {
@apply max-w-[1000px] w-full p-4 space-y-10;
}
33 changes: 33 additions & 0 deletions frontend/src/app/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,45 @@
@tailwind components;
@tailwind utilities;

:root {
--primary-text-color: '#FFFFFF';
--secondary-text-color: #ffffff80;
}

::-webkit-scrollbar {
width: 0;
background: transparent;
}

*,
*::before,
*::after {
@apply box-border;
}

body {
color: var(--primary-text-color);
font-family: 'Libre Franklin', sans-serif !important;
font-optical-sizing: auto !important;
}

.primary-btn {
@apply border-[1px] text-white text-[16px] rounded-full px-4 py-[10.5px] border-[#4453DF] leading-[19px] h-10 flex justify-center items-center;
background: linear-gradient(
180deg,
rgba(68, 83, 223, 0.1) 12.5%,
rgba(127, 92, 237, 0.1) 87.5%
);
}

.secondary-text {
@apply text-[var(--secondary-text-color)] font-extralight text-[14px];
}

.secondary-btn {
@apply text-[var(--secondary-text-color)] font-extralight text-[14px] underline underline-offset-[2px];
}

.divider-line {
@apply w-full bg-[#FFFFFF80] h-[0.25px] opacity-20;
}
15 changes: 7 additions & 8 deletions frontend/src/components/LandingPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import {
} from '../store/features/wallet/walletSlice';
import { setAllNetworksInfo } from '@/store/features/common/commonSlice';
import { useAppDispatch, useAppSelector } from '@/custom-hooks/StateHooks';
import Loading from './Loading';
declare let window: WalletWindow;

import {
Expand All @@ -24,10 +23,7 @@ import {

export const Landingpage = ({ children }: { children: React.ReactNode }) => {
const dispatch = useAppDispatch();

const isLoading = useAppSelector((state) => state.wallet.isLoading);


const walletLoading = useAppSelector((state) => state.wallet.isLoading);
const tryConnectWallet = async (walletName: string) => {
if (walletName === 'metamask') {
try {
Expand Down Expand Up @@ -88,9 +84,12 @@ export const Landingpage = ({ children }: { children: React.ReactNode }) => {
};
}, []);

if (isLoading) {
return <Loading />;
if (walletLoading) {
return (
<div className="h-screen w-screen flex justify-center items-center">
Loading...
</div>
);
}

return <>{children}</>;
};
128 changes: 128 additions & 0 deletions frontend/src/components/main-layout/ConnectWallet.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
import { useAppDispatch, useAppSelector } from '@/custom-hooks/StateHooks';
import {
establishWalletConnection,
setConnectWalletOpen,
} from '@/store/features/wallet/walletSlice';
import { networks } from '@/utils/chainsInfo';
import { SUPPORTED_WALLETS } from '@/utils/constants';
import { getLocalNetworks } from '@/utils/localStorage';
import {
connectSnap,
experimentalSuggestChain,
getSnap,
} from '@leapwallet/cosmos-snap-provider';
import { Dialog, DialogContent, Slide, SlideProps } from '@mui/material';
import Image from 'next/image';
import React, { forwardRef } from 'react';

/* eslint-disable @typescript-eslint/no-explicit-any */
const Transition = forwardRef(function Transition(
props: SlideProps & { children: React.ReactElement<any, any> },
ref: React.Ref<any>
) {
return <Slide direction="down" ref={ref} {...props} timeout={500} />;
});

const ConnectWallet = () => {
const dispatch = useAppDispatch();
const open = useAppSelector((state) => state.wallet.connectWalletOpen);
const connectWalletClose = () => {
dispatch(setConnectWalletOpen(false));
};

const selectWallet = (walletName: string) => {
tryConnectWallet(walletName.toLowerCase());
connectWalletClose();
};

const tryConnectWallet = async (walletName: string) => {
if (walletName === 'metamask') {
try {
for (let i = 0; i < networks.length; i++) {
const chainId: string = networks[i].config.chainId;
const snapInstalled = await getSnap();
if (!snapInstalled) {
await connectSnap(); // Initiates installation if not already present
}

try {
await experimentalSuggestChain(networks[i].config, {
force: false,
});
} catch (error) {
console.log('Error while connecting ', chainId);
}
}
} catch (error) {
console.log('trying to connect wallet ', error);
}
}

dispatch(
establishWalletConnection({
walletName,
networks: [...networks, ...getLocalNetworks()],
})
);
};

return (
<Dialog
open={open}
maxWidth="lg"
TransitionComponent={Transition}
sx={{
'& .MuiDialog-paper': {
color: 'white',
},
}}
PaperProps={{
sx: {
borderRadius: '16px',
background: '#1c1c1d',
},
}}
onClose={connectWalletClose}
>
<DialogContent sx={{ padding: 0 }}>
<div className="connect-wallet-popup">
<div className="flex justify-end p-6">
<button onClick={connectWalletClose} className="secondary-btn">
Close
</button>
</div>
<div className="text-center">
<div className="font-bold text-[28px] leading-normal">
Connect Wallet
</div>
<div className="secondary-text">
Connect your wallet now to access all the modules on Resolute
</div>
</div>
<div className="grid grid-cols-4 gap-10 px-10">
{SUPPORTED_WALLETS.map((wallet, index) => (
<div
className="w-[200px] border-[0.25px] border-[#ffffff2f] py-6 flex flex-col gap-4 items-center justify-center rounded-2xl cursor-pointer hover:scale-[1.1] transition-all delay-75"
onClick={() => {
selectWallet(wallet.name);
}}
key={index}
>
<Image
src={wallet.logo}
width={100}
height={100}
alt={wallet.name}
/>
<p className="text-[14px] leading-[24px]">{wallet.name}</p>
</div>
))}
<div className="p-6 h-[18px]"></div>
</div>
</div>
</DialogContent>
</Dialog>
);
};

export default ConnectWallet;
36 changes: 35 additions & 1 deletion frontend/src/components/main-layout/ExitSession.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,44 @@
import { useAppDispatch } from '@/custom-hooks/StateHooks';
import {
resetError,
resetTxAndHash,
} from '@/store/features/common/commonSlice';
import { resetWallet } from '@/store/features/wallet/walletSlice';
import { resetState as bankReset } from '@/store/features/bank/bankSlice';
import { resetState as rewardsReset } from '@/store/features/distribution/distributionSlice';
import { resetCompleteState as stakingReset } from '@/store/features/staking/stakeSlice';
import { resetState as authzReset } from '@/store/features/authz/authzSlice';
import { resetState as feegrantReset } from '@/store/features/feegrant/feegrantSlice';
import Image from 'next/image';
import React from 'react';
import useAuthzGrants from '@/custom-hooks/useAuthzGrants';
import useFeeGrants from '@/custom-hooks/useFeeGrants';
import { logout } from '@/utils/localStorage';

const ExitSession = () => {
const dispatch = useAppDispatch();
const { disableAuthzMode } = useAuthzGrants();
const { disableFeegrantMode } = useFeeGrants();

const onExitSession = () => {
dispatch(resetWallet());
dispatch(resetError());
dispatch(resetTxAndHash());
dispatch(bankReset());
dispatch(rewardsReset());
dispatch(stakingReset());
dispatch(authzReset());
dispatch(feegrantReset());
disableAuthzMode();
disableFeegrantMode();
logout();
};
return (
<div className="fixed-bottom w-full">
<button className="flex gap-2 h-10 items-center pl-3 pr-6 w-full font-medium rounded-full hover:bg-[#FFFFFF0A]">
<button
onClick={() => onExitSession()}
className="flex gap-2 h-10 items-center pl-3 pr-6 w-full font-medium rounded-full hover:bg-[#FFFFFF0A]"
>
<Image
src="sidebar-menu-icons/logout-icon.svg"
height={20}
Expand Down
77 changes: 77 additions & 0 deletions frontend/src/components/main-layout/ProfileDialog.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import { useAppSelector } from '@/custom-hooks/StateHooks';
import { getConnectWalletLogo } from '@/utils/util';
import { Dialog, DialogContent, Slide, SlideProps } from '@mui/material';
import Image from 'next/image';
import React, { forwardRef } from 'react';

/* eslint-disable @typescript-eslint/no-explicit-any */
const Transition = forwardRef(function Transition(
props: SlideProps & { children: React.ReactElement<any, any> },
ref: React.Ref<any>
) {
return <Slide direction="left" ref={ref} {...props} timeout={500} />;
});

const ProfileDialog = ({
onClose,
open,
}: {
open: boolean;
onClose: () => void;
}) => {
const connnectedWalletLogo = getConnectWalletLogo();
const walletUserName = useAppSelector((state) => state.wallet.name);

return (
<Dialog
open={open}
maxWidth="lg"
TransitionComponent={Transition}
sx={{
'& .MuiDialog-paper': {
position: 'absolute',
right: '30px',
left: 'auto',
height: 'calc(100% - 60px)',
margin: 0,
color: 'white',
},
}}
PaperProps={{
sx: {
borderRadius: '16px',
background: '#1c1c1d',
},
}}
onClose={onClose}
>
<DialogContent sx={{ padding: 0 }}>
<div className="profile-section">
<div className="space-y-6">
<div className="space-y-2">
<div className="text-[20px] font-bold leading-[27px]">
Profile
</div>
<div className="secondary-text">
Connect your wallet now to access all the modules on resolute
</div>
<div className="divider-line"></div>
</div>
<div className="flex flex-col items-center gap-2 px-6 py-[10px]">
<Image src={connnectedWalletLogo} height={40} width={40} alt="" />
<div className="font-medium">{walletUserName}</div>
</div>
<div>
<button className="primary-btn w-full">Logout</button>
</div>
<button onClick={onClose} className="secondary-btn w-full">
Close Tab
</button>
</div>
</div>
</DialogContent>
</Dialog>
);
};

export default ProfileDialog;
2 changes: 2 additions & 0 deletions frontend/src/components/main-layout/SideBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,15 @@ import React from 'react';
import ExitSession from './ExitSession';
import SideMenu from './SideMenu';
import SelectNetwork from './SelectNetwork';
import ConnectWallet from './ConnectWallet';

const SideBar = () => {
return (
<section className="sidebar">
<SelectNetwork />
<SideMenu />
<ExitSession />
<ConnectWallet />
</section>
);
};
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/main-layout/SideMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const SideMenu = () => {
// TODO: Add more option for Transfers and Settings MenuItem
return (
<div className="scrollable-content w-full">
<div className="flex flex-col gap-1">
<div className="flex flex-col gap-2">
{SIDEBAR_MENU_OPTIONS.map((item) => (
<MenuItem key={item.name} itemData={item} pathName={pathName} />
))}
Expand Down
Loading

0 comments on commit 3d920ab

Please sign in to comment.