Skip to content

Commit b8901b4

Browse files
author
VaithiDs
committed
Added lens sign in button in connect wallet page
1 parent 738fbfa commit b8901b4

File tree

4 files changed

+134
-114
lines changed

4 files changed

+134
-114
lines changed

‎pages/index.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -291,13 +291,14 @@ export default function Home() {
291291
const getUIComponent = (step: number) => {
292292
switch (step) {
293293
case ESTEPS.ONE:
294-
return <HomePage handleSetupChest={onLoginClick} loader={loader} />;
294+
return <HomePage handleSetupChest={handleSetupChest} loader={loader} />;
295295
case ESTEPS.TWO:
296296
return (
297297
<ConnectWallet
298298
signIn={signIn}
299299
handleSteps={handleSteps}
300300
loader={loader}
301+
handleLensLogin={onLoginClick}
301302
/>
302303
);
303304
case ESTEPS.THREE:

‎public/assets/images/lens_logo.png

9.49 KB
Loading

‎ui_components/connect_wallet/index.tsx

+68-52
Original file line numberDiff line numberDiff line change
@@ -6,68 +6,84 @@ import { icons } from "../../utils/images";
66
import SecondaryBtn from "../SecondaryBtn";
77

88
interface IConnectWallet extends THandleStep {
9-
signIn: () => Promise<void>;
10-
loader?: boolean;
9+
signIn: () => Promise<void>;
10+
handleLensLogin: () => void;
11+
loader?: boolean;
1112
}
1213

1314
export default function ConnectWallet(props: IConnectWallet) {
14-
const { signIn, loader } = props;
15-
return (
16-
<>
17-
<div className="w-full relative lg:pt-10">
18-
<div className="w-full text-center p-2 relative">
19-
<div className="mb-[30px] lg:mb-5">
20-
<p className="text-sm md:text-lg font-bold leading-1 text-white/50 mb-6 md:mb-10">
21-
STEP 1
22-
</p>
23-
<p className="text-lg md:text-xl font-bold leading-1 text-white mb-3 md:mb-5 lg:mb-10">
24-
Connect your wallet
25-
</p>
26-
<p className="text-sm md:text-lg font-regular leading-1 md:leading-[32px] text-white/50 md:mb-10">
27-
Enable access to your wallet to load <br /> your assets to the
28-
chest
29-
</p>
30-
</div>
31-
<Image
32-
className="m-auto mb-[30px] lg:mb-5"
33-
src={icons.tchest}
34-
alt="Chest"
35-
/>
15+
const { signIn, loader, handleLensLogin } = props;
16+
return (
17+
<>
18+
<div className="w-full relative lg:pt-10">
19+
<div className="w-full text-center p-2 relative">
20+
<div className="mb-[30px] lg:mb-5">
21+
<p className="text-sm md:text-lg font-bold leading-1 text-white/50 mb-6 md:mb-10">
22+
STEP 1
23+
</p>
24+
<p className="text-lg md:text-xl font-bold leading-1 text-white mb-3 md:mb-5 lg:mb-10">
25+
Connect your wallet
26+
</p>
27+
<p className="text-sm md:text-lg font-regular leading-1 md:leading-[32px] text-white/50 md:mb-10">
28+
Enable access to your wallet to load <br /> your assets to the
29+
chest
30+
</p>
31+
</div>
32+
<Image
33+
className="m-auto mb-[30px] lg:mb-5"
34+
src={icons.tchest}
35+
alt="Chest"
36+
/>
3637

37-
{/* <div className="flex gap-3 justify-center items-center w-[80%] md:w-[60%] lg:w-[360px] h-[64px] mx-auto rounded-lg mb-6 lg:mb-4">
38+
{/* <div className="flex gap-3 justify-center items-center w-[80%] md:w-[60%] lg:w-[360px] h-[64px] mx-auto rounded-lg mb-6 lg:mb-4">
3839
<SecondaryBtn
3940
leftImage={icons.walletIcon ?? ""}
4041
title={connecting ? "Connecting..." : "Connect your wallet"}
4142
onClick={connectWallet}
4243
/>
4344
</div> */}
44-
{loader ? (
45-
<div className="h-full flex flex-col items-center justify-center">
46-
<div className="spinnerLoader"></div>
45+
{loader ? (
46+
<div className="h-full flex flex-col items-center justify-center">
47+
<div className="spinnerLoader"></div>
4748

48-
<p className=" mt-5 opacity-50 mb-14 text-[16px] leading-14 text-white">
49-
Setting up Smart Account!
50-
</p>
51-
</div>
52-
) : (
53-
<div className="flex gap-3 justify-center items-center w-[80%] md:w-[60%] lg:w-[360px] mx-auto rounded-lg mt-10">
54-
<button
55-
className={`py-4 w-full rounded-lg bg-white flex gap-2 items-center justify-center max-w-[400px]`}
56-
onClick={signIn}
57-
>
58-
<Image
59-
src={icons.googleIcon}
60-
alt="google login"
61-
className="w-6"
62-
/>
63-
<span className="text-[16px] leading-1 font-medium text-black/50 self-center my-auto">
64-
{"Sign in with Google"}
65-
</span>
66-
</button>
67-
</div>
68-
)}
69-
</div>
49+
<p className=" mt-5 opacity-50 mb-14 text-[16px] leading-14 text-white">
50+
Setting up Smart Account!
51+
</p>
7052
</div>
71-
</>
72-
);
53+
) : (
54+
<div className="flex gap-3 justify-center items-center w-[80%] md:w-[60%] lg:w-[360px] mx-auto rounded-lg mt-10">
55+
<button
56+
className={`py-4 w-full rounded-lg bg-white flex gap-2 items-center justify-center max-w-[400px]`}
57+
onClick={signIn}
58+
>
59+
<Image
60+
src={icons.googleIcon}
61+
alt="google login"
62+
className="w-6"
63+
/>
64+
<span className="text-[16px] leading-1 font-medium text-black/50 self-center my-auto">
65+
{"Sign in with Google"}
66+
</span>
67+
</button>
68+
</div>
69+
)}
70+
<div className="flex gap-3 justify-center items-center w-[80%] md:w-[60%] lg:w-[360px] mx-auto rounded-lg mt-10">
71+
<button
72+
className={`py-4 w-full rounded-lg bg-white flex gap-2 items-center justify-center max-w-[400px]`}
73+
onClick={handleLensLogin}
74+
>
75+
<Image
76+
src={icons.lensLogo}
77+
alt="lens login"
78+
className="w-6 rounded-full"
79+
/>
80+
<span className="text-[16px] leading-1 font-medium text-black/50 self-center my-auto">
81+
{"Sign in with Lens"}
82+
</span>
83+
</button>
84+
</div>
85+
</div>
86+
</div>
87+
</>
88+
);
7389
}

‎utils/images/index.ts

+64-61
Original file line numberDiff line numberDiff line change
@@ -27,72 +27,75 @@ import tokensLoading from "../../public/assets/images/tokens_loading.png";
2727
import transferIcon from "../../public/assets/images/transfer_icon.svg";
2828
import walletIcon from "../../public/assets/images/wallet_btn_image.svg";
2929
import x from "../../public/assets/images/x.svg";
30+
import lensLogo from "../../public/assets/images/lens_logo.png";
3031

3132
export type TImages =
32-
| "logo"
33-
| "logo2"
34-
| "tchest"
35-
| "tchestopen"
36-
| "walletIcon"
37-
| "backIcon"
38-
| "shareBtnIcon"
39-
| "transferIcon"
40-
| "tokensLoading"
41-
| "hamburgerBlack"
42-
| "googleIcon"
43-
| "chevronRight"
44-
| "copyBlack"
45-
| "logoutIcon"
46-
| "helpIcon"
47-
| "downloadBtnIcon"
48-
| "downloadBtnIconBlack"
49-
| "shareBtnIconWhite"
50-
| "profileCardBg"
51-
| "x"
52-
| "telegramBlue"
53-
| "linkedinBlue"
54-
| "safeLogo"
55-
| "baseLogo"
56-
| "copyIconWhite"
57-
| "linkWhite"
58-
| "qrWhite"
59-
| "ethLogo"
60-
| "loadAvatar";
33+
| "logo"
34+
| "logo2"
35+
| "tchest"
36+
| "tchestopen"
37+
| "walletIcon"
38+
| "backIcon"
39+
| "shareBtnIcon"
40+
| "transferIcon"
41+
| "tokensLoading"
42+
| "hamburgerBlack"
43+
| "googleIcon"
44+
| "chevronRight"
45+
| "copyBlack"
46+
| "logoutIcon"
47+
| "helpIcon"
48+
| "downloadBtnIcon"
49+
| "downloadBtnIconBlack"
50+
| "shareBtnIconWhite"
51+
| "profileCardBg"
52+
| "x"
53+
| "telegramBlue"
54+
| "linkedinBlue"
55+
| "safeLogo"
56+
| "baseLogo"
57+
| "copyIconWhite"
58+
| "linkWhite"
59+
| "qrWhite"
60+
| "ethLogo"
61+
| "loadAvatar"
62+
| "lensLogo";
6163

6264
export type TNextImage = {
63-
src: string;
64-
height: number;
65-
width: number;
65+
src: string;
66+
height: number;
67+
width: number;
6668
};
6769

6870
export const icons: Record<TImages, TNextImage> = {
69-
logo,
70-
logo2,
71-
tchest,
72-
tchestopen,
73-
walletIcon,
74-
backIcon,
75-
shareBtnIcon,
76-
transferIcon,
77-
downloadBtnIcon,
78-
tokensLoading,
79-
hamburgerBlack,
80-
googleIcon,
81-
chevronRight,
82-
copyBlack,
83-
logoutIcon,
84-
helpIcon,
85-
ethLogo,
86-
downloadBtnIconBlack,
87-
shareBtnIconWhite,
88-
profileCardBg,
89-
x,
90-
linkedinBlue,
91-
telegramBlue,
92-
safeLogo,
93-
baseLogo,
94-
copyIconWhite,
95-
linkWhite,
96-
qrWhite,
97-
loadAvatar,
71+
logo,
72+
logo2,
73+
tchest,
74+
tchestopen,
75+
walletIcon,
76+
backIcon,
77+
shareBtnIcon,
78+
transferIcon,
79+
downloadBtnIcon,
80+
tokensLoading,
81+
hamburgerBlack,
82+
googleIcon,
83+
chevronRight,
84+
copyBlack,
85+
logoutIcon,
86+
helpIcon,
87+
ethLogo,
88+
downloadBtnIconBlack,
89+
shareBtnIconWhite,
90+
profileCardBg,
91+
x,
92+
linkedinBlue,
93+
telegramBlue,
94+
safeLogo,
95+
baseLogo,
96+
copyIconWhite,
97+
linkWhite,
98+
qrWhite,
99+
loadAvatar,
100+
lensLogo,
98101
};

0 commit comments

Comments
 (0)