@web3jskit/walletkit 0.0.1

package/src/components/Modal/WalletInfoModal.tsx

@@ -0,0 +1,82 @@
+import Modal from './index';
+import { useTranslation } from 'react-i18next';
+import ModalHeader from '../Header/ModalHeader';
+import { useWalletKit } from '../../hooks/useWalletKit';
+import { formatAddress } from '../../utils/formatter';
+import { InfoModalContainer } from './style';
+import CopySvg from '../SVGs/copySvg';
+import CopiedSvg from '../SVGs/copiedSvg';
+import ExitSvg from '../SVGs/exitSvg';
+import copyToClipboard from 'copy-to-clipboard';
+import { useEffect, useState } from 'react';
+import { generateRandomAvatar } from '../../utils/generateAvatar';
+
+interface ModalProps {
+	isOpen: boolean;
+}
+
+export function WalletInfoModal({ isOpen }: ModalProps) {
+	const { t } = useTranslation();
+	const { walletAddress, closeModal, currentConnector, avatar, setAvatar } = useWalletKit();
+
+	const [copied, setCopied] = useState(false);
+
+	const generateAvatar = () => {
+		const newAvatar = generateRandomAvatar();
+		setAvatar(newAvatar);
+	};
+
+	useEffect(() => {
+		generateAvatar();
+	}, []);
+
+	return (
+		<Modal isOpen={isOpen}>
+			<InfoModalContainer>
+				<ModalHeader />
+				<div className="avatarBox" onClick={() => generateAvatar()}>
+					<div
+						className="avatar"
+						style={{
+							backgroundColor: avatar?.bg
+						}}
+					>
+						{avatar?.text}
+					</div>
+				</div>
+				<div className="accountInfo">
+					<div className="address">{formatAddress(walletAddress)}</div>
+					{/* <div className="tokenAmount">{'0 ETH'}</div> */}
+				</div>
+				<div className="btnGroup">
+					<div
+						className="button"
+						onClick={() => {
+							copyToClipboard(walletAddress);
+							if (copied) return;
+							setCopied(true);
+							setTimeout(() => {
+								setCopied(false);
+							}, 1000);
+						}}
+					>
+						<div className="btnIcon">{copied ? <CopiedSvg /> : <CopySvg />}</div>
+						<div className="btnText">{t(copied ? 'copied' : 'copyAddress')}</div>
+					</div>
+					<div
+						className="button"
+						onClick={() => {
+							currentConnector?.disconnect();
+							closeModal();
+						}}
+					>
+						<div className="btnIcon">
+							<ExitSvg />
+						</div>
+						<div className="btnText">{t('disConnect')}</div>
+					</div>
+				</div>
+			</InfoModalContainer>
+		</Modal>
+	);
+}

package/src/components/Modal/index.tsx

@@ -0,0 +1,80 @@
+import { type ReactNode, type RefObject } from 'react';
+import { styled } from 'styled-components';
+import { animated, useTransition } from '@react-spring/web';
+import { DialogOverlay, DialogContent } from '@reach/dialog';
+import '@reach/dialog/styles.css';
+import { useWalletKit } from '../../hooks/useWalletKit';
+
+const AnimatedDialogOverlay = animated(DialogOverlay);
+
+const AnimatedDialogContent = animated(DialogContent);
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const StyledDialogOverlay = styled(AnimatedDialogOverlay)`
+	&[data-reach-dialog-overlay] {
+		width: 100vw;
+		z-index: 99;
+	}
+`;
+
+const StyledDialogContent = styled(({ ...rest }) => <AnimatedDialogContent {...rest} />).attrs({
+	'aria-label': 'dialog'
+})`
+	position: fixed;
+	left: 50%;
+	bottom: 50%;
+	transform: translate(-50%, 50%);
+	border-radius: 12px;
+	box-shadow: rgb(47 128 237 / 5%) 0 4px 8px 0;
+	overflow: hidden;
+	align-self: center;
+	padding: 0;
+	margin: 0;
+	outline: none;
+	width: auto;
+	background-color: ${({ theme }) => theme.modalBg};
+
+	@media (max-width: 768px) {
+		left: 0;
+		bottom: 0;
+		transform: none;
+		border-bottom-right-radius: 0;
+		border-bottom-left-radius: 0;
+	}
+`;
+
+interface ModalProps {
+	isOpen: boolean;
+	minHeight?: number | false;
+	maxHeight?: number;
+	initialFocusRef?: RefObject<any>;
+	children?: ReactNode;
+	closeAble?: boolean;
+}
+
+export default function Modal({ isOpen, children, closeAble = true }: ModalProps) {
+	const transitions = useTransition(isOpen, {
+		from: { opacity: 0 },
+		enter: { opacity: 1 },
+		leave: { opacity: 0 },
+		config: { duration: 150 }
+	});
+	const { closeModal } = useWalletKit();
+	return (
+		<>
+			{transitions((styles: any, item: any) => {
+				return (
+					item && (
+						<StyledDialogOverlay
+							style={{ opacity: styles.opacity }}
+							onDismiss={closeAble ? closeModal : () => {}}
+							isOpen={isOpen}
+						>
+							<StyledDialogContent className={'dialog-content-style'}>{children}</StyledDialogContent>
+						</StyledDialogOverlay>
+					)
+				);
+			})}
+		</>
+	);
+}

package/src/components/Modal/style.ts

@@ -0,0 +1,160 @@
+import { styled } from 'styled-components';
+
+export const ModalContainer = styled.div`
+	display: flex;
+	width: 720px;
+	height: 506px;
+
+	@media (max-width: 768px) {
+		flex-direction: column;
+		width: 100vw;
+		height: 454px;
+	}
+`;
+
+export const ModalAside = styled.div`
+	width: 200px;
+	display: flex;
+	flex-direction: column;
+	border-right: 1px solid ${({ theme }) => theme.borderColor};
+	padding-top: 16px;
+	box-sizing: border-box;
+
+	@media (max-width: 768px) {
+		width: 100%;
+		border-right: none;
+		padding-top: 0;
+		padding-bottom: 24px;
+		background-color: ${({ theme }) => theme.modalSideBg};
+
+		&.hidden {
+			display: none;
+		}
+	}
+`;
+
+export const AsideList = styled.div`
+	overflow: auto;
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	padding: 0 20px;
+
+	@media (max-width: 768px) {
+		flex-direction: row;
+
+		// &::-webkit-scrollbar {
+		// 	display: none;
+		// }
+	}
+`;
+
+export const ModalMain = styled.div`
+	flex: 1;
+	height: 100%;
+`;
+
+export const InfoModalContainer = styled.div`
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	width: 360px;
+	height: 240px;
+	text-align: center;
+
+	.avatarBox {
+		margin-top: -28px;
+		font-size: 41px;
+
+		.avatar {
+			width: 74px;
+			height: 74px;
+			line-height: 74px;
+			border-radius: 50%;
+			user-select: none;
+			cursor: pointer;
+		}
+	}
+
+	.accountInfo {
+		margin-top: 12px;
+		color: ${({ theme }) => theme.textColor};
+
+		.address {
+			font-size: 18px;
+			font-weight: 800;
+			line-height: 24px;
+		}
+
+		.tokenAmount {
+			font-size: 14px;
+			font-weight: 600;
+			line-height: 18px;
+			color: ${({ theme }) => theme.textColor3};
+		}
+	}
+
+	.btnGroup {
+		display: flex;
+		gap: 8px;
+		margin-top: 16px;
+		width: 100%;
+		justify-content: center;
+		padding: 0 16px 16px;
+		box-sizing: border-box;
+
+		.button {
+			padding: 8px;
+			color: ${({ theme }) => theme.textColor};
+			width: 100%;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			cursor: pointer;
+			border-radius: 12px;
+			background-color: ${({ theme }) => theme.infoBtnBg};
+
+			&:hover {
+				background-color: ${({ theme }) => theme.infoBtnHoverBg};
+			}
+		}
+
+		.btnIcon {
+			height: 18px;
+		}
+		.btnText {
+			font-size: 13px;
+			font-weight: 600;
+			line-height: 18px;
+		}
+	}
+
+	@media (max-width: 768px) {
+		width: 100vw;
+		height: 280px;
+
+		.avatarBox {
+			margin-top: -4px;
+			font-size: 45px;
+
+			.avatar {
+				width: 82px;
+				height: 82px;
+				line-height: 82px;
+			}
+		}
+
+		.accountInfo {
+			margin-top: 16px;
+
+			.address {
+				font-size: 20px;
+			}
+
+			.tokenAmount {
+				font-size: 16px;
+				line-height: 20px;
+			}
+		}
+	}
+`;

package/src/components/SVGs/backArrowSvg.tsx

@@ -0,0 +1,10 @@
+const BackArrowSvg = (props: any) => (
+	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
+		<path
+			d="M3.05505 12.2283C3.08043 12.2779 3.11445 12.3238 3.15686 12.3637C3.16913 12.3753 3.18186 12.3862 3.195 12.3963L9.18767 17.3904C9.4033 17.5629 9.71795 17.528 9.89045 17.3124C10.063 17.0967 10.028 16.7821 9.81237 16.6096L4.92541 12.5H19.5C19.7762 12.5 20 12.2761 20 12C20 11.7239 19.7762 11.5 19.5 11.5H4.803L9.8345 6.87165C10.0398 6.68692 10.0564 6.37078 9.87167 6.16552C9.68694 5.96027 9.37079 5.94363 9.16554 6.12836L3.17252 11.6221C3.15999 11.633 3.14791 11.6445 3.13633 11.6568C3.09631 11.6992 3.06501 11.747 3.04255 11.7979C3.01196 11.867 2.99805 11.9411 3.00022 12.0145C3.00231 12.0879 3.02049 12.1611 3.05505 12.2283Z"
+			fill="#161617"
+		/>
+	</svg>
+);
+
+export default BackArrowSvg;

package/src/components/SVGs/closeSvg.tsx

@@ -0,0 +1,11 @@
+const CloseSvg = () => (
+	<svg aria-hidden="true" fill="none" height="10" viewBox="0 0 10 10" width="10" xmlns="http://www.w3.org/2000/svg">
+		<title>Close</title>
+		<path
+			d="M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L3.58579 5L0.292893 8.29289C-0.0976311 8.68342 -0.0976311 9.31658 0.292893 9.70711C0.683417 10.0976 1.31658 10.0976 1.70711 9.70711L5 6.41421L8.29289 9.70711C8.68342 10.0976 9.31658 10.0976 9.70711 9.70711C10.0976 9.31658 10.0976 8.68342 9.70711 8.29289L6.41421 5L9.70711 1.70711C10.0976 1.31658 10.0976 0.683417 9.70711 0.292893C9.31658 -0.0976311 8.68342 -0.0976311 8.29289 0.292893L5 3.58579L1.70711 0.292893Z"
+			fill="currentColor"
+		></path>
+	</svg>
+);
+
+export default CloseSvg;

package/src/components/SVGs/copiedSvg.tsx

@@ -0,0 +1,11 @@
+const CopiedSvg = () => (
+	<svg fill="none" height="13" viewBox="0 0 13 13" width="13" xmlns="http://www.w3.org/2000/svg">
+		<title>Copied</title>
+		<path
+			d="M4.94568 12.2646C5.41052 12.2646 5.77283 12.0869 6.01892 11.7109L12.39 1.96973C12.5677 1.69629 12.6429 1.44336 12.6429 1.2041C12.6429 0.561523 12.1644 0.0966797 11.5082 0.0966797C11.057 0.0966797 10.7767 0.260742 10.5033 0.691406L4.9115 9.50977L2.07458 5.98926C1.82166 5.68848 1.54822 5.55176 1.16541 5.55176C0.502319 5.55176 0.0238037 6.02344 0.0238037 6.66602C0.0238037 6.95312 0.112671 7.20605 0.358765 7.48633L3.88611 11.7588C4.18005 12.1074 4.50818 12.2646 4.94568 12.2646Z"
+			fill="currentColor"
+		></path>
+	</svg>
+);
+
+export default CopiedSvg;

package/src/components/SVGs/copySvg.tsx

@@ -0,0 +1,11 @@
+const CopySvg = () => (
+	<svg fill="none" height="16" viewBox="0 0 17 16" width="17" xmlns="http://www.w3.org/2000/svg">
+		<title>Copy</title>
+		<path
+			d="M3.04236 12.3027H4.18396V13.3008C4.18396 14.8525 5.03845 15.7002 6.59705 15.7002H13.6244C15.183 15.7002 16.0375 14.8525 16.0375 13.3008V6.24609C16.0375 4.69434 15.183 3.84668 13.6244 3.84668H12.4828V2.8418C12.4828 1.29688 11.6283 0.442383 10.0697 0.442383H3.04236C1.48376 0.442383 0.629272 1.29004 0.629272 2.8418V9.90332C0.629272 11.4551 1.48376 12.3027 3.04236 12.3027ZM3.23376 10.5391C2.68689 10.5391 2.39294 10.2656 2.39294 9.68457V3.06055C2.39294 2.47949 2.68689 2.21289 3.23376 2.21289H9.8783C10.4252 2.21289 10.7191 2.47949 10.7191 3.06055V3.84668H6.59705C5.03845 3.84668 4.18396 4.69434 4.18396 6.24609V10.5391H3.23376ZM6.78845 13.9365C6.24158 13.9365 5.94763 13.6699 5.94763 13.0889V6.45801C5.94763 5.87695 6.24158 5.61035 6.78845 5.61035H13.433C13.9799 5.61035 14.2738 5.87695 14.2738 6.45801V13.0889C14.2738 13.6699 13.9799 13.9365 13.433 13.9365H6.78845Z"
+			fill="currentColor"
+		></path>
+	</svg>
+);
+
+export default CopySvg;

package/src/components/SVGs/exitSvg.tsx

@@ -0,0 +1,11 @@
+const ExitSvg = () => (
+	<svg fill="none" height="16" viewBox="0 0 18 16" width="18" xmlns="http://www.w3.org/2000/svg">
+		<title>Disconnect</title>
+		<path
+			d="M2.67834 15.5908H9.99963C11.5514 15.5908 12.399 14.7432 12.399 13.1777V10.2656H10.6354V12.9863C10.6354 13.5332 10.3688 13.8271 9.78772 13.8271H2.89026C2.3092 13.8271 2.0426 13.5332 2.0426 12.9863V3.15625C2.0426 2.60254 2.3092 2.30859 2.89026 2.30859H9.78772C10.3688 2.30859 10.6354 2.60254 10.6354 3.15625V5.89746H12.399V2.95801C12.399 1.39941 11.5514 0.544922 9.99963 0.544922H2.67834C1.12659 0.544922 0.278931 1.39941 0.278931 2.95801V13.1777C0.278931 14.7432 1.12659 15.5908 2.67834 15.5908ZM7.43616 8.85059H14.0875L15.0924 8.78906L14.566 9.14453L13.6842 9.96484C13.5406 10.1016 13.4586 10.2861 13.4586 10.4844C13.4586 10.8398 13.7321 11.168 14.1217 11.168C14.3199 11.168 14.4635 11.0928 14.6002 10.9561L16.7809 8.68652C16.986 8.48145 17.0543 8.27637 17.0543 8.06445C17.0543 7.85254 16.986 7.64746 16.7809 7.43555L14.6002 5.17285C14.4635 5.03613 14.3199 4.9541 14.1217 4.9541C13.7321 4.9541 13.4586 5.27539 13.4586 5.6377C13.4586 5.83594 13.5406 6.02734 13.6842 6.15723L14.566 6.98438L15.0924 7.33984L14.0875 7.27148H7.43616C7.01917 7.27148 6.65686 7.62012 6.65686 8.06445C6.65686 8.50195 7.01917 8.85059 7.43616 8.85059Z"
+			fill="currentColor"
+		></path>
+	</svg>
+);
+
+export default ExitSvg;