@web3jskit/walletkit 0.0.3 → 0.0.5

package/src/components/Introduce/style.ts

@@ -1,73 +0,0 @@
-import { styled } from 'styled-components';
-
-const IntroduceContainer = styled.div`
-	display: flex;
-	flex-direction: column;
-	margin: 84px 50px 0 96px;
-	font-family: Manrope;
-	color: ${({ theme }) => theme.textColor1};
-
-	.title {
-		color: ${({ theme }) => theme.blue};
-		font-size: 18px;
-		font-weight: 700;
-		line-height: 18px;
-	}
-
-	.introduce {
-		margin-top: 24px;
-		font-size: 12px;
-		font-weight: 700;
-		line-height: 14px;
-	}
-
-	.detail {
-		margin-top: 16px;
-		font-size: 12px;
-		font-weight: 500;
-		line-height: 14px;
-	}
-
-	.footer {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		max-width: 120px;
-	}
-
-	.button {
-		width: 100%;
-		display: inline-block;
-		margin-top: 32px;
-		padding: 11px 16px;
-		color: ${({ theme }) => theme.buttonColor};
-		background: ${({ theme }) => theme.buttonBg};
-		font-size: 14px;
-		font-weight: 700;
-		line-height: 14px;
-		text-align: center;
-		border-radius: 8px;
-		box-sizing: border-box;
-		cursor: pointer;
-	}
-
-	.more {
-		margin-top: 8px;
-		font-size: 12px;
-		font-style: normal;
-		font-weight: 700;
-		cursor: pointer;
-	}
-
-	@media (max-width: 768px) {
-		padding: 40px 32px 0;
-		margin: 0;
-		align-items: center;
-
-		.detail {
-			text-align: center;
-		}
-	}
-`;
-
-export default IntroduceContainer;

package/src/components/Modal/ConnectModal.tsx

@@ -1,155 +0,0 @@
-import ModalHeader from '../Header/ModalHeader';
-import Modal from './index';
-import { SlotWrapper } from '../../styled';
-import { SupportWallets } from '@web3jskit/wallethelper';
-import { useTranslation } from 'react-i18next';
-import { useCallback, useEffect, useMemo, useState, type ReactNode } from 'react';
-import { WalletTriggerButton } from '../WalletTriggerButton';
-import { Introduce } from '../Introduce';
-import { WalletList } from '../WalletList';
-import { GetWallet } from '../GetWallet';
-import { Connecting } from '../Connecting';
-import { useWalletKit } from '../../hooks/useWalletKit';
-import { AsideList, ModalAside, ModalContainer, ModalMain } from './style';
-
-interface ModalProps {
-	isOpen: boolean;
-	closeAble?: boolean;
-	slots?: ReactNode[];
-}
-
-enum Step {
-	Introduce = 0,
-	WalletList = 1,
-	GetWallet = 2,
-	Connecting = 3
-}
-
-export function ConnectModal({ isOpen, slots }: ModalProps) {
-	const { t } = useTranslation();
-
-	const { currentChain, getConnectors, currentConnector, connectStatus, closeModal } = useWalletKit();
-
-	const [step, setStep] = useState(Step.Introduce);
-	const [selectedWallet, setSelectedWallet] = useState<any | null>(null);
-	const [connectors, setConnectors] = useState<any[]>([]);
-
-	const requestConnectors = async () => {
-		const list = await getConnectors(currentChain);
-		setConnectors(list);
-	};
-
-	const connectorsGroupByType = useMemo(() => {
-		const result = connectors.reduce((acc, connector) => {
-			if (!acc[connector.connectorType]) {
-				acc[connector.connectorType] = [];
-			}
-			acc[connector.connectorType].push(connector);
-			return acc;
-		}, {});
-		return result;
-	}, [connectors]);
-
-	const sortedKeys = useMemo(() => {
-		const keys = Object.keys(connectorsGroupByType);
-		const sortedKeys = keys.sort((a, b) => {
-			const order = ['installed', 'run', 'more'];
-			return order.indexOf(a) - order.indexOf(b);
-		});
-		return sortedKeys;
-	}, [connectorsGroupByType]);
-
-	useEffect(() => {
-		if (isOpen) {
-			requestConnectors();
-		} else {
-			setStep(0);
-			setConnectors([]);
-		}
-	}, [isOpen, currentChain]);
-
-	useEffect(() => {
-		switch (connectStatus) {
-			case 'connected':
-				closeModal();
-				break;
-			default:
-				setStep(0);
-				break;
-		}
-	}, [connectStatus]);
-
-	const renderMainByStep = useCallback(() => {
-		switch (step) {
-			case 0:
-				return (
-					<Introduce
-						onGetWallet={() => {
-							setStep(Step.WalletList);
-						}}
-					/>
-				);
-			case 1:
-				return (
-					<WalletList
-						list={SupportWallets}
-						onBack={() => {
-							setStep(0);
-						}}
-						onGetWallet={wallet => {
-							if (wallet.name === 'Gel Wallet') {
-								window.open(wallet.webUrl, '_blank');
-								return;
-							}
-							setSelectedWallet(wallet);
-							setStep(Step.GetWallet);
-						}}
-					/>
-				);
-			case 2:
-				return (
-					<GetWallet
-						wallet={selectedWallet}
-						onBack={() => {
-							setStep(Step.WalletList);
-						}}
-					/>
-				);
-			default:
-				return <></>;
-		}
-	}, [step]);
-
-	return (
-		<Modal isOpen={isOpen}>
-			<ModalContainer>
-				<ModalAside className={step !== 0 ? 'hidden' : ''}>
-					<ModalHeader title={t('connectWallet')} className="asideTitle" />
-					<AsideList>
-						{sortedKeys.map(connectorType => {
-							return (
-								<div className="typeBox" key={connectorType}>
-									<div className={`typeHeader ${connectorType}`}>{t(connectorType)}</div>
-									{connectorsGroupByType[connectorType].map((connector: any) => {
-										return <WalletTriggerButton key={connectorType + connector.name} connector={connector} />;
-									})}
-								</div>
-							);
-						})}
-
-						{slots ? (
-							slots.map((Slot: ReactNode, index: number) => {
-								return <SlotWrapper key={index}>{Slot}</SlotWrapper>;
-							})
-						) : (
-							<></>
-						)}
-					</AsideList>
-				</ModalAside>
-				<ModalMain>
-					{connectStatus === 'connecting' ? <Connecting wallet={currentConnector} /> : renderMainByStep()}
-				</ModalMain>
-			</ModalContainer>
-		</Modal>
-	);
-}

package/src/components/Modal/WalletInfoModal.tsx

@@ -1,82 +0,0 @@
-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

@@ -1,80 +0,0 @@
-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

@@ -1,190 +0,0 @@
-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-y: auto;
-	overflow-x: hidden;
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-	padding: 0 20px 20px;
-
-	.typeBox {
-		display: flex;
-		flex-direction: column;
-		gap: 4px;
-	}
-
-	.typeHeader {
-		font-size: 14px;
-		line-height: 14px;
-		font-weight: 700;
-		color: ${({ theme }) => theme.gray};
-		margin-bottom: 14px;
-
-		&.installed {
-			color: ${({ theme }) => theme.blue};
-		}
-	}
-
-	@media (max-width: 768px) {
-		overflow-x: auto;
-		overflow-y: hidden;
-		flex-direction: row;
-		padding: 0 20px;
-
-		.typeBox {
-			flex-direction: row;
-
-			.typeHeader {
-				display: none;
-			}
-		}
-
-		// &::-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

@@ -1,10 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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;

package/src/components/SVGs/spinSvg.tsx

@@ -1,10 +0,0 @@
-const SpinSvg = (props: React.SVGProps<SVGSVGElement> & { className?: string }) => (
-	<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none" {...props}>
-		<path
-			d="M21.3914 24.6515C21.6898 25.1549 21.5228 25.8278 20.9999 26.1124C20.488 26.4106 19.8365 26.2355 19.5463 25.7212C19.2342 25.2178 19.4149 24.5585 19.9213 24.2603C20.4524 23.9648 21.093 24.1454 21.3914 24.6515ZM15.0813 26.9303C15.0813 27.513 14.5995 28 13.9945 28C13.4114 28 12.9241 27.524 12.9241 26.9303V26.1808C12.9241 25.5844 13.4141 25.1084 13.9945 25.1084C14.5913 25.1084 15.0813 25.5844 15.0813 26.1808V26.9303ZM8.47553 25.7212C8.17165 26.2491 7.5119 26.416 7.00545 26.1178C6.48531 25.8251 6.30189 25.1713 6.6085 24.6488L7.40514 23.2563C7.71174 22.7447 8.36876 22.5669 8.8889 22.8596C9.39261 23.1578 9.57877 23.8226 9.27216 24.3287L8.47553 25.7212ZM3.34805 21.396C2.82791 21.686 2.16268 21.5109 1.87798 20.9993C1.5741 20.4959 1.74657 19.8284 2.26124 19.5302L4.40202 18.291C4.91394 18.0064 5.57917 18.1679 5.87209 18.6876C6.16228 19.191 5.98433 19.8585 5.47515 20.1567L3.34805 21.396ZM1.07039 15.0738C0.4736 15.0738 0 14.5923 0 14.0041C0 13.4077 0.4736 12.9262 1.07039 12.9262H4.40476C5.00155 12.9262 5.47515 13.4077 5.47515 13.9959C5.47515 14.5923 5.00155 15.0738 4.40476 15.0738H1.07039ZM2.26397 8.46155C1.74383 8.17157 1.5741 7.515 1.88071 7.00068C2.16542 6.4809 2.82791 6.30581 3.35079 6.60401L6.97534 8.70777C7.48726 9.00049 7.65699 9.65432 7.37228 10.1604C7.06841 10.6802 6.40866 10.8471 5.90495 10.5571L2.26397 8.46155ZM6.6085 3.3403L9.13254 7.72017C9.43915 8.23175 10.0962 8.41505 10.6081 8.11138C11.12 7.8214 11.2898 7.15662 10.9914 6.64231L8.45636 2.27064C8.16618 1.76453 7.50916 1.58124 7.00271 1.87943C6.48257 2.17763 6.31558 2.83693 6.6085 3.3403ZM12.9268 1.07787C12.9268 0.495164 13.4168 0 13.9972 0C14.594 0 15.084 0.484221 15.084 1.07787V6.12252C15.084 6.71891 14.6022 7.20039 13.9972 7.2086C13.4141 7.2086 12.9268 6.73532 12.9268 6.12252V1.07787ZM19.5326 2.27064C19.8392 1.75085 20.488 1.58124 21.0027 1.87396C21.5228 2.16395 21.7062 2.82052 21.3996 3.34304L18.8701 7.72291C18.5854 8.23449 17.9119 8.41505 17.4 8.11959C16.8881 7.8214 16.7184 7.15662 17.0085 6.64231L19.5326 2.27064ZM24.6737 6.60401L20.2854 9.1318C19.7735 9.42179 19.5955 10.0784 19.8885 10.6009C20.1923 11.1042 20.8521 11.2739 21.3585 10.9921L25.7496 8.46429C26.2533 8.1743 26.4395 7.51773 26.1329 7.00342C25.8372 6.48363 25.1775 6.29761 24.6737 6.60401ZM26.9295 12.9262C27.5318 12.9262 28.0081 13.4077 27.9999 14.0041C27.9999 14.5923 27.5345 15.0738 26.9295 15.0738H21.8759C21.2928 15.0738 20.8028 14.5923 20.8028 13.9959C20.8028 13.4077 21.2928 12.9262 21.8759 12.9262H26.9295Z"
-			fill="#6A6A6A"
-		/>
-	</svg>
-);
-
-export default SpinSvg;