Skip to content

Commit

Permalink
know why bottom sheet update
Browse files Browse the repository at this point in the history
Arunpandiaraja committed Oct 20, 2023
1 parent 034c136 commit 9971b50
Showing 6 changed files with 55 additions and 151 deletions.
8 changes: 3 additions & 5 deletions pages/index.tsx
Original file line number Diff line number Diff line change
@@ -329,11 +329,9 @@ export default function Home() {
onClose={() => {
setOpenBottomSheet(false);
}}
walletAddress={walletAddress}
signOut={signOut}
signIn={signIn}
handleSteps={handleSteps}
/>
>
Test
</BottomSheet>
{pathname !== "/" ? <Footer /> : null}
</AnonAadhaarProvider>
</div>
3 changes: 3 additions & 0 deletions public/assets/images/close.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
144 changes: 7 additions & 137 deletions ui_components/bottom-sheet/index.tsx
Original file line number Diff line number Diff line change
@@ -1,55 +1,18 @@
import { Dialog, Transition } from "@headlessui/react";
import Image from "next/image";
import Link from "next/link";
import { FC, Fragment, ReactNode, useContext, useState } from "react";

import { ACTIONS, GlobalContext } from "../../context/GlobalContext";
import { ESTEPS, LOGGED_IN } from "../../pages";
import { trimAddress } from "../../utils";
import { icons } from "../../utils/images";
import { useWagmi } from "../../utils/wagmi/WagmiContext";
import React, { FC, Fragment } from "react";

type TProps = {
isOpen: boolean;
onClose: () => void;
walletAddress?: string;
handleSteps: (step: number) => void;
signOut: () => Promise<void>;
signIn: () => Promise<void>;
children: React.ReactNode;
};
const BottomSheet: FC<TProps> = (props) => {
const { isOpen, onClose, walletAddress, signOut, signIn, handleSteps } =
props;
const [copyText, setCopyText] = useState("Copy Address");
const { disconnect } = useWagmi();
const {
dispatch,
state: { googleUserInfo, address, isConnected, loggedInVia },
} = useContext(GlobalContext);
const copyToClipBoard = (e: any) => {
e.preventDefault();
e.stopPropagation();
navigator.clipboard.writeText(address);
setCopyText("Address copied");
setTimeout(() => {
setCopyText("Copy Address");
}, 4000);
};
const handleDisConnect = async () => {
await disconnect();
handleSteps(ESTEPS.ONE);
dispatch({
type: ACTIONS.LOGOUT,
payload: "",
});
};
const { isOpen, onClose, children } = props;

return (
<Transition.Root show={isOpen} as={Fragment}>
<Dialog
as="div"
className="relative z-20 block lg:hidden"
onClose={onClose}
>
<Dialog as="div" className="relative z-20 block" onClose={onClose}>
<Transition.Child
as={Fragment}
enter="ease-in-out duration-500"
@@ -75,103 +38,10 @@ const BottomSheet: FC<TProps> = (props) => {
leaveFrom="translate-y-0"
leaveTo="translate-y-full"
>
{/* ${
isFullscreen === "true" ? "" : "grow"
} */}
<Dialog.Panel
className={`pointer-events-auto w-full max-w-[600px] bg-[#f5f5f5] rounded-t-2xl dark:bg-neutralDark-50`}
className={`pointer-events-auto w-full max-w-[420px] bg-[#f5f5f5] rounded-t-3xl dark:bg-neutralDark-50`}
>
<div className="w-full">
{address ? (
<>
<div className="flex justify-between items-center px-4 py-3">
<div>
<p className="text-[12px] font-medium text-[#555555]">
ACCOUNT OVERVIEW
</p>
<p className="text-black text-left">
{address ? trimAddress(address) : ""}
</p>
</div>
</div>
<div
className="w-[95%] h-[52px] bg-white rounded-lg mx-auto flex justify-between items-center px-4 mb-6 cursor-pointer"
role="presentation"
onClick={copyToClipBoard}
>
<p className="text-black">{copyText}</p>
<Image src={icons.copyBlack} alt="copy icon" />
</div>
{isConnected &&
loggedInVia === LOGGED_IN.EXTERNAL_WALLET && (
<div
className="w-[95%] h-[52px] bg-white rounded-lg mx-auto flex justify-between items-center px-4 mb-6"
role="presentation"
onClick={() => {
handleDisConnect();
}}
>
<p className="text-[#E11900]">
Disconnect Wallet
</p>
</div>
)}
</>
) : null}

<div className="bg-white w-full px-4">
{!isConnected ? (
<div
className="flex justify-between items-center py-6 border-b-2 cursor-pointer"
role="presentation"
onClick={signIn}
>
<div className="flex gap-2 items-center">
<Image
src={icons.googleIcon}
alt="login with google"
/>
<p className="text-black">Login with Google</p>
</div>
<Image
src={icons.chevronRight}
alt="login with google"
/>
</div>
) : null}
<Link
href="mailto:contact@blocktheory.com"
target="_blank"
>
<div className="flex justify-between items-center py-6 border-b-2">
<div className="flex gap-2 items-center">
<Image src={icons.helpIcon} alt="help" />
<p className="text-black">Help</p>
</div>
<Image
src={icons.chevronRight}
alt="login with google"
/>
</div>
</Link>
{isConnected && loggedInVia === LOGGED_IN.GOOGLE ? (
<div
className="flex justify-between items-center py-6 cursor-pointer"
role="presentation"
onClick={signOut}
>
<div className="flex gap-2 items-center">
<Image
src={icons.googleIcon}
alt="login with google"
/>
<p className="text-black">Logout</p>
</div>
<Image src={icons.logoutIcon} alt="logout" />
</div>
) : null}
</div>
</div>
<div className="w-full">{children}</div>
</Dialog.Panel>
</Transition.Child>
</div>
4 changes: 2 additions & 2 deletions ui_components/header/index.tsx
Original file line number Diff line number Diff line change
@@ -36,7 +36,7 @@ const Header = (props: IHeader) => {
<button
type="button"
onClick={signOut}
className="h-[40px] rounded-2xl bg-secondary-600 flex items-center px-3 py-2 justify-center gap-2"
className="h-[40px] rounded-3xl bg-secondary-600 flex items-center px-3 py-2 justify-center gap-2"
>
<Image src={icons.logOut} alt="logout" className="w-6 " />
{/* <svg
@@ -61,7 +61,7 @@ const Header = (props: IHeader) => {
<button
type="button"
onClick={signIn}
className="h-[40px] rounded-2xl bg-secondary-600 flex items-center px-3 py-2 justify-center gap-2"
className="h-[40px] rounded-3xl bg-secondary-600 flex items-center px-3 py-2 justify-center gap-2"
>
<Image src={icons.googleIcon} alt="login" className="w-6 " />
<p className="supportText_medium text-white">Login</p>
44 changes: 37 additions & 7 deletions ui_components/home/KYCStatus.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,18 @@
import Image from "next/image";
import { icons } from "../../utils/images";
import { LogInWithAnonAadhaar } from "anon-aadhaar-react";
import BottomSheet from "../bottom-sheet";
import { useState } from "react";

export default function KYCStatus(props: any) {
const [openBottomSheet, setOpenBottomSheet] = useState(false);

const handleOpenBottomSheet = () => {
setOpenBottomSheet(true);
};
const handleCloseBottomSheet = () => {
setOpenBottomSheet(false);
};
return (
<>
<div className="text-center">
@@ -17,21 +27,41 @@ export default function KYCStatus(props: any) {
<p className="supportText_regular text-text-500 mb-4">
To get full access to our wallet, verify your KYC now.
</p>
<p className="supportText_medium text-primary-800 cursor-pointer mb-4">
<p
className="supportText_medium text-primary-800 cursor-pointer mb-4"
onClick={handleOpenBottomSheet}
>
Know why?
</p>
<LogInWithAnonAadhaar />
</div>
{/* <BottomSheet
<BottomSheet
isOpen={openBottomSheet}
onClose={() => {
setOpenBottomSheet(false);
}}
walletAddress={walletAddress}
signOut={signOut}
signIn={signIn}
handleSteps={handleSteps}
/> */}
>
<div className="px-4 py-5">
<div className="flex items-center justify-between mb-5">
<p className="paragraph_semibold text-text-900">Why KYC?</p>
<Image
onClick={handleCloseBottomSheet}
src={icons.close}
alt="close"
className="cursor-pointer"
/>
</div>
<p className="supportText_regular text-text-500">
We believe regulatory compliance is essential for building trust in
DeFi and bringing it to the masses. We invite builders to create a
web3 wallet that combines security, convenience, and regulatory
oversight to prevent illicit activity. KYC, privacy, and tax
compliance are key elements that regulators are focused on. We aim
to integrate compliance into DeFi to facilitate a seamless and
legally compliant financial experience for all.
</p>
</div>
</BottomSheet>
</>
);
}
3 changes: 3 additions & 0 deletions utils/images/index.ts
Original file line number Diff line number Diff line change
@@ -23,6 +23,7 @@ import swapIcon from "../../public/assets/images/swap_icon.svg";
import buyIcon from "../../public/assets/images/buy_icon.svg";
import logOut from "../../public/assets/images/log_out.svg";
import notVerified from "../../public/assets/images/not_verified.svg";
import close from "../../public/assets/images/close.svg";

export type TImages =
| "logo"
@@ -49,6 +50,7 @@ export type TImages =
| "buyIcon"
| "logOut"
| "notVerified"
| "close"
| "arrowDownCircle";

export type TNextImage = {
@@ -84,4 +86,5 @@ export const icons: Record<TImages, TNextImage> = {
buyIcon,
logOut,
notVerified,
close,
};

0 comments on commit 9971b50

Please sign in to comment.