Add before you start modal
This commit is contained in:
delivan
parent
88c150b78b
commit
8b269bc7b9
210
components/before-you-start-modal/index.tsx
Normal file
210
components/before-you-start-modal/index.tsx
Normal file
@ -0,0 +1,210 @@
|
||||
import { FunctionComponent } from "react";
|
||||
import ReactModal from "react-modal";
|
||||
import Image from "next/image";
|
||||
import styled from "styled-components";
|
||||
import { WalletType } from "../../constants/wallet";
|
||||
import { loginWithTwitter } from "../../queries";
|
||||
import color from "../../styles/color";
|
||||
|
||||
interface Props {
|
||||
isModalOpen: boolean;
|
||||
onCloseModal: () => void;
|
||||
currentReferal?: string;
|
||||
walletKeyName: string;
|
||||
selectedWalletItem?: WalletType;
|
||||
}
|
||||
|
||||
export const BeforeYouStartModal: FunctionComponent<Props> = (props) => {
|
||||
const {
|
||||
isModalOpen,
|
||||
onCloseModal,
|
||||
currentReferal,
|
||||
walletKeyName,
|
||||
selectedWalletItem,
|
||||
} = props;
|
||||
|
||||
const handleClickButton = async () => {
|
||||
await loginWithTwitter();
|
||||
};
|
||||
|
||||
return (
|
||||
<ReactModal
|
||||
isOpen={isModalOpen}
|
||||
onRequestClose={onCloseModal}
|
||||
ariaHideApp={false}
|
||||
style={{
|
||||
overlay: { background: "#121212cc" },
|
||||
content: {
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
right: "auto",
|
||||
bottom: "auto",
|
||||
padding: 0,
|
||||
marginRight: "-50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
background: color.grey["800"],
|
||||
border: 0,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ModalContainer>
|
||||
<ModalTitle>Before you start</ModalTitle>
|
||||
{currentReferal && (
|
||||
<ModalDescription>
|
||||
{"You're invited by"}
|
||||
<Image
|
||||
style={{ marginLeft: "4px" }}
|
||||
src="/images/icons/twitter-small.png"
|
||||
alt="twitter icon"
|
||||
width={18}
|
||||
height={18}
|
||||
/>
|
||||
<ModalDescriptionBold>{currentReferal}</ModalDescriptionBold>
|
||||
</ModalDescription>
|
||||
)}
|
||||
<SubTextsContainer>
|
||||
<SubTextList>
|
||||
<SubTextListItem>
|
||||
ICNS requires you to verify ownership of your Twitter account.
|
||||
</SubTextListItem>
|
||||
<br />
|
||||
<SubTextListItem>
|
||||
ICNS name stays the same even if your Twitter handle changes in
|
||||
the future.
|
||||
</SubTextListItem>
|
||||
<br />
|
||||
<SubTextListItem>
|
||||
ICNS name can only be claimed once per Twitter account.
|
||||
</SubTextListItem>
|
||||
</SubTextList>
|
||||
</SubTextsContainer>
|
||||
<WalletAccountContainer>
|
||||
<WalletAccountLabel>{"Claim ICNS name for"}</WalletAccountLabel>
|
||||
<WalletAccountValue>
|
||||
{selectedWalletItem && (
|
||||
<selectedWalletItem.IconComponent width={16} height={16} />
|
||||
)}
|
||||
{walletKeyName}
|
||||
</WalletAccountValue>
|
||||
</WalletAccountContainer>
|
||||
<ClaimWithTwitterButton onClick={handleClickButton}>
|
||||
<Image
|
||||
src="/images/icons/twitter-small.png"
|
||||
alt="twitter icon"
|
||||
width={28}
|
||||
height={28}
|
||||
/>
|
||||
CLAIM WITH TWITTER
|
||||
</ClaimWithTwitterButton>
|
||||
</ModalContainer>
|
||||
</ReactModal>
|
||||
);
|
||||
};
|
||||
|
||||
const ModalContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.75rem;
|
||||
padding: 2.25rem;
|
||||
|
||||
max-width: 28.5rem;
|
||||
`;
|
||||
|
||||
const ModalTitle = styled.div`
|
||||
font-family: "Inter", serif;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.8rem;
|
||||
|
||||
color: ${color.white};
|
||||
`;
|
||||
|
||||
const ModalDescription = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
font-family: "Inter", serif;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 0.925rem;
|
||||
line-height: 1.1rem;
|
||||
|
||||
color: ${color.grey["500"]};
|
||||
`;
|
||||
|
||||
const ModalDescriptionBold = styled.span`
|
||||
color: ${color.grey["100"]};
|
||||
`;
|
||||
|
||||
const SubTextsContainer = styled.div`
|
||||
padding: 1rem 1.75rem;
|
||||
|
||||
background-color: ${color.grey["700"]};
|
||||
`;
|
||||
|
||||
const SubTextList = styled.ul`
|
||||
margin: 0 0 1rem;
|
||||
padding: 0 0.75rem;
|
||||
`;
|
||||
|
||||
const SubTextListItem = styled.li`
|
||||
font-weight: 400;
|
||||
font-size: 0.825rem;
|
||||
line-height: 1.5rem;
|
||||
|
||||
color: ${color.grey["300"]};
|
||||
`;
|
||||
|
||||
const WalletAccountContainer = styled.div`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
`;
|
||||
|
||||
const WalletAccountLabel = styled.div`
|
||||
font-weight: 500;
|
||||
font-size: 0.925rem;
|
||||
line-height: 1.125rem;
|
||||
|
||||
color: ${color.grey["200"]};
|
||||
`;
|
||||
|
||||
const WalletAccountValue = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.725rem;
|
||||
background: ${color.grey["700"]};
|
||||
|
||||
font-weight: 600;
|
||||
font-size: 0.925rem;
|
||||
line-height: 1.125rem;
|
||||
|
||||
color: ${color.grey["100"]};
|
||||
`;
|
||||
|
||||
const ClaimWithTwitterButton = styled.button`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.625rem;
|
||||
padding: 1.875rem;
|
||||
|
||||
background-color: ${color.grey["700"]};
|
||||
border: none;
|
||||
|
||||
font-weight: 600;
|
||||
font-size: 1.25rem;
|
||||
line-height: 102.5%;
|
||||
letter-spacing: 0.07em;
|
||||
|
||||
text-transform: uppercase;
|
||||
color: #03a9f4;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
}
|
||||
`;
|
||||
@ -2,19 +2,26 @@ import { FunctionComponent, useState } from "react";
|
||||
import ReactModal from "react-modal";
|
||||
import styled from "styled-components";
|
||||
import color from "../../styles/color";
|
||||
import { WalletList } from "../../constants/wallet";
|
||||
import { WalletList, WalletType } from "../../constants/wallet";
|
||||
import { WalletItem } from "./wallet-item";
|
||||
import { ErrorMessage } from "../../types";
|
||||
import { ErrorModal } from "../error-modal";
|
||||
import { BeforeYouStartModal } from "../before-you-start-modal";
|
||||
|
||||
interface Props {
|
||||
isModalOpen: boolean;
|
||||
onCloseModal: () => void;
|
||||
currentReferal?: string;
|
||||
}
|
||||
|
||||
export const ConnectWalletModal: FunctionComponent<Props> = (props) => {
|
||||
const { isModalOpen, onCloseModal } = props;
|
||||
const { isModalOpen, onCloseModal, currentReferal } = props;
|
||||
const [isErrorModalOpen, setErrorModalOpen] = useState(false);
|
||||
const [isBeforeYouStartModalOpen, setBeforeYouStartModalOpen] =
|
||||
useState(false);
|
||||
const [selectedWalletItem, setSelectedWalletItem] = useState<WalletType>();
|
||||
const [walletKeyName, setWalletKeyName] = useState("");
|
||||
|
||||
const [errorMessage, setErrorMessage] = useState<ErrorMessage>();
|
||||
|
||||
return (
|
||||
@ -40,8 +47,8 @@ export const ConnectWalletModal: FunctionComponent<Props> = (props) => {
|
||||
<ModalContainer>
|
||||
<ModalTitle>Connect Wallet</ModalTitle>
|
||||
<ModalDescription>
|
||||
Make sure you have the correst account to cliam your ICNS name is
|
||||
slelected on your wallet
|
||||
Make sure you have selected the correct account to link to your ICNS
|
||||
name.
|
||||
</ModalDescription>
|
||||
|
||||
{WalletList.map((walletItem) => {
|
||||
@ -51,11 +58,21 @@ export const ConnectWalletModal: FunctionComponent<Props> = (props) => {
|
||||
key={walletItem.name}
|
||||
setErrorModalOpen={setErrorModalOpen}
|
||||
setErrorMessage={setErrorMessage}
|
||||
setBeforeYouStartModalOpen={setBeforeYouStartModalOpen}
|
||||
setWalletKeyName={setWalletKeyName}
|
||||
setSelectedWalletItem={setSelectedWalletItem}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</ModalContainer>
|
||||
|
||||
<BeforeYouStartModal
|
||||
isModalOpen={isBeforeYouStartModalOpen}
|
||||
onCloseModal={() => setBeforeYouStartModalOpen(false)}
|
||||
currentReferal={currentReferal}
|
||||
walletKeyName={walletKeyName}
|
||||
selectedWalletItem={selectedWalletItem}
|
||||
/>
|
||||
<ErrorModal
|
||||
isModalOpen={isErrorModalOpen}
|
||||
onCloseModal={() => setErrorModalOpen(false)}
|
||||
@ -89,7 +106,7 @@ const ModalDescription = styled.div`
|
||||
font-family: "Inter", serif;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.1rem;
|
||||
|
||||
color: ${color.grey["400"]};
|
||||
|
||||
@ -16,7 +16,6 @@ import {
|
||||
WalletType,
|
||||
} from "../../constants/wallet";
|
||||
import { getKeplrFromWindow, KeplrWallet } from "../../wallets";
|
||||
import { loginWithTwitter } from "../../queries";
|
||||
import {
|
||||
KEPLR_NO_ACCOUNT_ERROR,
|
||||
KEPLR_NO_ACCOUNT_MESSAGE,
|
||||
@ -30,10 +29,20 @@ interface Props {
|
||||
wallet: WalletType;
|
||||
setErrorMessage: Dispatch<SetStateAction<ErrorMessage | undefined>>;
|
||||
setErrorModalOpen: Dispatch<SetStateAction<boolean>>;
|
||||
setBeforeYouStartModalOpen: Dispatch<SetStateAction<boolean>>;
|
||||
setWalletKeyName: Dispatch<SetStateAction<string>>;
|
||||
setSelectedWalletItem: Dispatch<SetStateAction<WalletType | undefined>>;
|
||||
}
|
||||
|
||||
export const WalletItem: FunctionComponent<Props> = (props: Props) => {
|
||||
const { wallet, setErrorModalOpen, setErrorMessage } = props;
|
||||
const {
|
||||
wallet,
|
||||
setErrorModalOpen,
|
||||
setErrorMessage,
|
||||
setBeforeYouStartModalOpen,
|
||||
setWalletKeyName,
|
||||
setSelectedWalletItem,
|
||||
} = props;
|
||||
const [isInstalled, setIsInstalled] = useState<boolean>();
|
||||
|
||||
useEffect(() => {
|
||||
@ -41,13 +50,14 @@ export const WalletItem: FunctionComponent<Props> = (props: Props) => {
|
||||
}, []);
|
||||
|
||||
const onClickWalletItem = async () => {
|
||||
setSelectedWalletItem(wallet);
|
||||
try {
|
||||
if (wallet.name === "Keplr") {
|
||||
await connectKeplr();
|
||||
localStorage.setItem(SELECTED_WALLET_KEY, wallet.name);
|
||||
}
|
||||
|
||||
await loginWithTwitter();
|
||||
setBeforeYouStartModalOpen(true);
|
||||
} catch (error) {
|
||||
if (error instanceof Error) {
|
||||
console.log(error.message);
|
||||
@ -78,11 +88,14 @@ export const WalletItem: FunctionComponent<Props> = (props: Props) => {
|
||||
|
||||
if (keplr) {
|
||||
const wallet = new KeplrWallet(keplr);
|
||||
|
||||
const chainIds = (await wallet.getChainInfosWithoutEndpoints()).map(
|
||||
(c) => c.chainId,
|
||||
);
|
||||
|
||||
await wallet.init(chainIds);
|
||||
const walletKey = await wallet.getKey(chainIds[0]);
|
||||
setWalletKeyName(walletKey.name);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -69,7 +69,7 @@ export const FinalCheckModal: FunctionComponent<Props> = (props) => {
|
||||
/>
|
||||
}
|
||||
title="Your Twitter Handle"
|
||||
content={`${twitterUserName}`}
|
||||
content={`@${twitterUserName}`}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
@ -108,8 +108,8 @@ export const FinalCheckModal: FunctionComponent<Props> = (props) => {
|
||||
}}
|
||||
/>
|
||||
}
|
||||
title="Keplr account"
|
||||
content={walletInfo?.name || "Keplr account"}
|
||||
title="Keplr Account"
|
||||
content={walletInfo?.name || "Keplr Account"}
|
||||
contentTooltip={{
|
||||
id: "address-tooltip",
|
||||
content: walletInfo?.bech32Address || "",
|
||||
@ -128,6 +128,9 @@ export const FinalCheckModal: FunctionComponent<Props> = (props) => {
|
||||
<SubTextListItem>
|
||||
Please make sure you’ve selected the right account on your wallet.
|
||||
</SubTextListItem>
|
||||
<SubTextListItem>
|
||||
This is an irreversible onchain trasaction.
|
||||
</SubTextListItem>
|
||||
</SubTextList>
|
||||
<SubText>
|
||||
{MINIMUM_OSMO_FEE} will be spent as a spam-prevention fee.
|
||||
|
||||
@ -19,12 +19,15 @@ import MainLogo from "../public/images/svg/main-logo.svg";
|
||||
import MainTitle from "../public/images/svg/main-title.svg";
|
||||
|
||||
export default function Home() {
|
||||
const [isModalOpen, setModalOpen] = useState(false);
|
||||
const [currentReferral, setCurrentReferral] = useState("");
|
||||
|
||||
const [isConnectWalletModalOpen, setIsConnectWalletModalOpen] =
|
||||
useState(false);
|
||||
|
||||
const onClickConnectWalletButton = async () => {
|
||||
amplitude.track("click connect wallet button");
|
||||
|
||||
setModalOpen(true);
|
||||
setIsConnectWalletModalOpen(true);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
@ -36,6 +39,7 @@ export default function Home() {
|
||||
|
||||
if (referral) {
|
||||
localStorage.setItem(REFERRAL_KEY, referral);
|
||||
setCurrentReferral(referral);
|
||||
}
|
||||
}
|
||||
|
||||
@ -92,8 +96,9 @@ export default function Home() {
|
||||
</MainContainer>
|
||||
|
||||
<ConnectWalletModal
|
||||
isModalOpen={isModalOpen}
|
||||
onCloseModal={() => setModalOpen(false)}
|
||||
isModalOpen={isConnectWalletModalOpen}
|
||||
onCloseModal={() => setIsConnectWalletModalOpen(false)}
|
||||
currentReferal={currentReferral}
|
||||
/>
|
||||
</Container>
|
||||
);
|
||||
|
||||
@ -1,23 +1,21 @@
|
||||
<svg width="946" height="202" viewBox="0 0 946 202" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M691.953 69.1477H690.18C690.112 68.7689 689.985 68.4356 689.8 68.1477C689.614 67.8598 689.387 67.6155 689.118 67.4148C688.849 67.214 688.548 67.0625 688.214 66.9602C687.885 66.858 687.534 66.8068 687.163 66.8068C686.493 66.8068 685.892 66.9754 685.362 67.3125C684.836 67.6496 684.419 68.1439 684.112 68.7955C683.809 69.447 683.657 70.2424 683.657 71.1818C683.657 72.1288 683.809 72.928 684.112 73.5795C684.419 74.2311 684.837 74.7235 685.368 75.0568C685.898 75.3902 686.495 75.5568 687.157 75.5568C687.525 75.5568 687.873 75.5076 688.203 75.4091C688.536 75.3068 688.837 75.1572 689.106 74.9602C689.375 74.7633 689.603 74.5227 689.788 74.2386C689.978 73.9508 690.108 73.6212 690.18 73.25L691.953 73.2557C691.858 73.8277 691.675 74.3542 691.402 74.8352C691.133 75.3125 690.786 75.7254 690.362 76.0739C689.942 76.4186 689.461 76.6856 688.919 76.875C688.377 77.0644 687.786 77.1591 687.146 77.1591C686.139 77.1591 685.241 76.9205 684.453 76.4432C683.665 75.9621 683.044 75.2746 682.589 74.3807C682.139 73.4867 681.913 72.4205 681.913 71.1818C681.913 69.9394 682.14 68.8731 682.595 67.983C683.05 67.089 683.671 66.4034 684.459 65.9261C685.247 65.4451 686.142 65.2045 687.146 65.2045C687.764 65.2045 688.339 65.2936 688.873 65.4716C689.411 65.6458 689.894 65.9034 690.322 66.2443C690.75 66.5814 691.104 66.9943 691.385 67.483C691.665 67.9678 691.854 68.5227 691.953 69.1477ZM694.694 77V65.3636H696.449V75.4886H701.722V77H694.694ZM705.942 77H704.078L708.266 65.3636H710.294L714.482 77H712.618L709.328 67.4773H709.237L705.942 77ZM706.254 72.4432H712.3V73.9205H706.254V72.4432ZM718.558 65.3636V77H716.802V65.3636H718.558ZM721.754 65.3636H723.885L727.59 74.4091H727.726L731.431 65.3636H733.561V77H731.891V68.5795H731.783L728.351 76.983H726.965L723.533 68.5739H723.425V77H721.754V65.3636ZM743.907 77L740.679 65.3636H742.526L744.793 74.375H744.901L747.259 65.3636H749.088L751.446 74.3807H751.554L753.816 65.3636H755.668L752.435 77H750.668L748.219 68.2841H748.128L745.679 77H743.907ZM759.664 65.3636V77H757.909V65.3636H759.664ZM762.287 66.875V65.3636H771.293V66.875H767.662V77H765.912V66.875H762.287ZM773.923 77V65.3636H775.679V70.4205H781.48V65.3636H783.241V77H781.48V71.9261H775.679V77H773.923ZM790.739 66.875V65.3636H799.744V66.875H796.114V77H794.364V66.875H790.739ZM804.653 77L801.426 65.3636H803.272L805.539 74.375H805.647L808.005 65.3636H809.835L812.193 74.3807H812.301L814.562 65.3636H816.414L813.181 77H811.414L808.965 68.2841H808.874L806.426 77H804.653ZM820.411 65.3636V77H818.655V65.3636H820.411ZM823.034 66.875V65.3636H832.039V66.875H828.409V77H826.659V66.875H823.034ZM834.096 66.875V65.3636H843.101V66.875H839.471V77H837.721V66.875H834.096ZM845.731 77V65.3636H853.027V66.875H847.487V70.4205H852.646V71.9261H847.487V75.4886H853.095V77H845.731ZM856.012 77V65.3636H860.16C861.061 65.3636 861.809 65.5189 862.404 65.8295C863.002 66.1402 863.449 66.5701 863.745 67.1193C864.04 67.6648 864.188 68.2955 864.188 69.0114C864.188 69.7235 864.038 70.3504 863.739 70.892C863.444 71.4299 862.997 71.8485 862.398 72.1477C861.804 72.447 861.055 72.5966 860.154 72.5966H857.012V71.0852H859.995C860.563 71.0852 861.025 71.0038 861.381 70.8409C861.741 70.678 862.004 70.4413 862.171 70.1307C862.338 69.8201 862.421 69.447 862.421 69.0114C862.421 68.572 862.336 68.1913 862.165 67.8693C861.999 67.5473 861.735 67.3011 861.376 67.1307C861.02 66.9564 860.552 66.8693 859.972 66.8693H857.768V77H856.012ZM861.756 71.75L864.631 77H862.631L859.813 71.75H861.756Z" fill="#5B5B5B"/>
|
||||
<path d="M897.544 65.2736C896.826 65.5767 896.054 65.779 895.24 65.8747C896.067 65.406 896.704 64.6586 897.003 63.7757C896.229 64.2086 895.37 64.5267 894.457 64.6943C893.728 63.9572 892.688 63.5 891.535 63.5C889.322 63.5 887.527 65.1955 887.527 67.2862C887.527 67.5821 887.564 67.8702 887.632 68.15C884.302 67.9907 881.348 66.4814 879.372 64.191C879.025 64.7507 878.83 65.406 878.83 66.0976C878.83 67.4119 879.535 68.569 880.612 69.2507C879.955 69.2316 879.336 69.0572 878.795 68.7779C878.795 68.7893 878.795 68.8064 878.795 68.8224C878.795 70.6591 880.177 72.1886 882.008 72.5367C881.674 72.6241 881.32 72.6728 880.955 72.6728C880.697 72.6728 880.444 72.6448 880.2 72.6029C880.71 74.104 882.19 75.201 883.943 75.2336C882.571 76.2474 880.844 76.8547 878.965 76.8547C878.641 76.8547 878.323 76.8371 878.01 76.8009C879.785 77.8721 881.892 78.5 884.154 78.5C891.525 78.5 895.557 72.7297 895.557 67.7238C895.557 67.5598 895.551 67.3964 895.543 67.235C896.33 66.7053 897.008 66.0371 897.544 65.2736Z" fill="#03A9F4"/>
|
||||
<path d="M516.01 0.916016V0.916016C536.72 0.916016 553.509 17.7049 553.509 38.4151V38.9452H516.01V0.916016Z" fill="#00B86E"/>
|
||||
<path d="M553.511 38.4151C553.511 17.7049 570.3 0.916016 591.01 0.916016V0.916016V38.9452H553.511V38.4151Z" fill="#FF77F3"/>
|
||||
<svg width="946" height="201" viewBox="0 0 946 201" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M516.01 0.916016C536.72 0.916016 553.509 17.7049 553.509 38.4151V38.9452H516.01V0.916016Z" fill="#00B86E"/>
|
||||
<path d="M553.511 38.4151C553.511 17.7049 570.3 0.916016 591.01 0.916016V38.9452H553.511V38.4151Z" fill="#FF77F3"/>
|
||||
<rect x="516.01" y="38.9414" width="37.4991" height="38.0292" fill="#F4CC3E"/>
|
||||
<rect x="553.511" y="38.9414" width="37.4991" height="38.0292" fill="#FB5232"/>
|
||||
<path d="M155.51 41.5C155.51 18.5802 136.93 0 114.01 0V0V19.75C114.01 31.7622 123.748 41.5 135.76 41.5H155.51V41.5Z" fill="#5A4CFA"/>
|
||||
<path d="M155.51 41.5C155.51 64.4198 136.93 83 114.01 83V83V63.25C114.01 51.2378 123.748 41.5 135.76 41.5H155.51V41.5Z" fill="#F4CC3E"/>
|
||||
<path d="M72.5098 41.5C72.5098 18.5802 91.0899 0 114.01 0V0V19.75C114.01 31.7622 104.272 41.5 92.2598 41.5H72.5098V41.5Z" fill="#FF77F3"/>
|
||||
<path d="M72.5098 41.5C72.5098 64.4198 91.0899 83 114.01 83V83V63.25C114.01 51.2378 104.272 41.5 92.2598 41.5H72.5098V41.5Z" fill="#00B86E"/>
|
||||
<path d="M17.82 44.5497C19.8 49.1697 22.77 52.3597 26.07 54.3397V76.9997H42.13V54.2297C45.43 52.2497 48.29 49.0597 50.16 44.5497L68.2 2.96969H50.82L35.75 40.1497C35.09 41.4697 34.76 42.3497 34.1 42.3497C33.44 42.3497 33.11 41.5797 32.45 40.1497L17.27 2.96969H0L17.82 44.5497Z" fill="#DAECD5"/>
|
||||
<path d="M199.842 78.2097C221.842 78.2097 232.072 65.4497 232.072 44.1097V2.96969H216.012V43.7797C216.012 56.6497 210.732 62.9197 199.842 62.9197C188.952 62.9197 183.672 56.6497 183.672 43.7797V2.96969H167.612V44.1097C167.612 65.4497 177.732 78.2097 199.842 78.2097Z" fill="#DAECD5"/>
|
||||
<path d="M265.889 76.9997L265.999 53.3497H272.269C280.629 53.3497 283.819 56.9797 287.229 63.7997L293.829 76.9997H311.209L304.059 62.3697C300.209 54.6697 297.459 49.6097 292.729 46.9697C302.189 44.4397 308.129 36.6297 308.129 26.5097C308.129 10.7797 295.259 2.96969 278.539 2.96969H250.049V76.9997H265.889ZM278.759 17.8197C286.019 17.8197 291.629 20.8997 291.629 28.1597C291.629 35.0897 286.129 39.0497 278.539 39.0497H265.999L266.109 17.8197H278.759Z" fill="#DAECD5"/>
|
||||
<path d="M371.668 76.9997V22.2197L400.928 72.7097C403.348 76.7797 407.418 78.4297 412.148 78.4297C417.978 78.4297 423.368 74.2497 423.368 66.8797V2.96969H408.188V57.4197L378.928 7.25969C376.508 3.18969 372.658 1.42969 367.818 1.42969C361.768 1.42969 356.378 5.71969 356.378 13.0897V76.9997H371.668Z" fill="#DAECD5"/>
|
||||
<path d="M434.787 76.9997H451.177L455.467 61.9297L485.497 61.8197L489.787 76.9997H506.177L486.597 13.4197C484.067 5.38969 477.467 1.53969 470.427 1.53969C463.497 1.53969 456.897 5.38969 454.367 13.4197L434.787 76.9997ZM468.117 18.1497C468.557 16.6097 469.327 15.9497 470.537 15.9497C471.857 15.9497 472.517 16.6097 472.957 18.1497L481.317 47.5197H459.647L468.117 18.1497Z" fill="#DAECD5"/>
|
||||
<path d="M658.406 76.9997V62.5897H620.456V47.1897H655.436V32.7797H620.456V17.3797H657.746V2.96969H618.586C608.356 2.96969 604.396 8.35969 604.396 16.8297V63.2497C604.396 71.7197 608.356 76.9997 618.586 76.9997H658.406Z" fill="#DAECD5"/>
|
||||
<path d="M24.2 200V174.92H58.74V160.18H24.2V140.82H61.27V125.97H22.33C12.21 125.97 8.14 131.36 8.14 139.83V200H24.2Z" fill="#DAECD5"/>
|
||||
<path d="M106.673 201.43C128.563 201.43 145.283 184.93 145.283 163.04C145.283 141.26 128.673 124.65 106.673 124.65C84.7825 124.65 68.1725 141.26 68.1725 163.04C68.1725 184.93 84.7825 201.43 106.673 201.43ZM106.673 186.25C94.3525 186.25 84.6725 176.13 84.6725 163.04C84.6725 149.95 94.3525 139.83 106.673 139.83C119.103 139.83 128.673 149.95 128.673 163.04C128.673 176.13 118.992 186.25 106.673 186.25Z" fill="#DAECD5"/>
|
||||
<path d="M171.711 200L171.821 176.35H178.091C186.451 176.35 189.641 179.98 193.051 186.8L199.651 200H217.031L209.881 185.37C206.031 177.67 203.281 172.61 198.551 169.97C208.011 167.44 213.951 159.63 213.951 149.51C213.951 133.78 201.081 125.97 184.361 125.97H155.871V200H171.711ZM184.581 140.82C191.841 140.82 197.451 143.9 197.451 151.16C197.451 158.09 191.951 162.05 184.361 162.05H171.821L171.931 140.82H184.581Z" fill="#DAECD5"/>
|
||||
<path d="M155.51 41.5C155.51 18.5802 136.93 0 114.01 0V19.75C114.01 31.7622 123.748 41.5 135.76 41.5H155.51Z" fill="#5A4CFA"/>
|
||||
<path d="M155.51 41.5C155.51 64.4198 136.93 83 114.01 83V63.25C114.01 51.2378 123.748 41.5 135.76 41.5H155.51Z" fill="#F4CC3E"/>
|
||||
<path d="M72.5098 41.5C72.5098 18.5802 91.0899 0 114.01 0V19.75C114.01 31.7622 104.272 41.5 92.2598 41.5H72.5098Z" fill="#FF77F3"/>
|
||||
<path d="M72.5098 41.5C72.5098 64.4198 91.0899 83 114.01 83V63.25C114.01 51.2378 104.272 41.5 92.2598 41.5H72.5098Z" fill="#00B86E"/>
|
||||
<path d="M17.82 44.5498C19.8 49.1698 22.77 52.3598 26.07 54.3398V76.9998H42.13V54.2298C45.43 52.2498 48.29 49.0598 50.16 44.5498L68.2 2.9698H50.82L35.75 40.1498C35.09 41.4698 34.76 42.3498 34.1 42.3498C33.44 42.3498 33.11 41.5798 32.45 40.1498L17.27 2.9698H0L17.82 44.5498Z" fill="#DAECD5"/>
|
||||
<path d="M199.842 78.2098C221.842 78.2098 232.072 65.4498 232.072 44.1098V2.9698H216.012V43.7798C216.012 56.6498 210.732 62.9198 199.842 62.9198C188.952 62.9198 183.672 56.6498 183.672 43.7798V2.9698H167.612V44.1098C167.612 65.4498 177.732 78.2098 199.842 78.2098Z" fill="#DAECD5"/>
|
||||
<path d="M265.889 76.9998L265.999 53.3498H272.269C280.629 53.3498 283.819 56.9798 287.229 63.7998L293.829 76.9998H311.209L304.059 62.3698C300.209 54.6698 297.459 49.6098 292.729 46.9698C302.189 44.4398 308.129 36.6298 308.129 26.5098C308.129 10.7798 295.259 2.9698 278.539 2.9698H250.049V76.9998H265.889ZM278.759 17.8198C286.019 17.8198 291.629 20.8998 291.629 28.1598C291.629 35.0898 286.129 39.0498 278.539 39.0498H265.999L266.109 17.8198H278.759Z" fill="#DAECD5"/>
|
||||
<path d="M371.668 76.9998V22.2198L400.928 72.7098C403.348 76.7798 407.418 78.4298 412.148 78.4298C417.978 78.4298 423.368 74.2498 423.368 66.8798V2.9698H408.188V57.4198L378.928 7.25981C376.508 3.18981 372.658 1.4298 367.818 1.4298C361.768 1.4298 356.378 5.71981 356.378 13.0898V76.9998H371.668Z" fill="#DAECD5"/>
|
||||
<path d="M434.787 76.9998H451.177L455.467 61.9298L485.497 61.8198L489.787 76.9998H506.177L486.597 13.4198C484.067 5.3898 477.467 1.5398 470.427 1.5398C463.497 1.5398 456.897 5.3898 454.367 13.4198L434.787 76.9998ZM468.117 18.1498C468.557 16.6098 469.327 15.9498 470.537 15.9498C471.857 15.9498 472.517 16.6098 472.957 18.1498L481.317 47.5198H459.647L468.117 18.1498Z" fill="#DAECD5"/>
|
||||
<path d="M658.406 76.9998V62.5898H620.456V47.1898H655.436V32.7798H620.456V17.3798H657.746V2.9698H618.586C608.356 2.9698 604.396 8.3598 604.396 16.8298V63.2498C604.396 71.7198 608.356 76.9998 618.586 76.9998H658.406Z" fill="#DAECD5"/>
|
||||
<path d="M720.56 76.7797V51.6997H755.1V36.9597H720.56V17.5997H757.63V2.74969H718.69C708.57 2.74969 704.5 8.13969 704.5 16.6097V76.7797H720.56Z" fill="#DAECD5"/>
|
||||
<path d="M803.032 78.2097C824.922 78.2097 841.643 61.7097 841.643 39.8197C841.643 18.0397 825.032 1.42969 803.032 1.42969C781.142 1.42969 764.532 18.0397 764.532 39.8197C764.532 61.7097 781.142 78.2097 803.032 78.2097ZM803.032 63.0297C790.712 63.0297 781.032 52.9097 781.032 39.8197C781.032 26.7297 790.712 16.6097 803.032 16.6097C815.462 16.6097 825.032 26.7297 825.032 39.8197C825.032 52.9097 815.352 63.0297 803.032 63.0297Z" fill="#DAECD5"/>
|
||||
<path d="M868.071 76.7797L868.181 53.1297H874.451C882.811 53.1297 886.001 56.7597 889.411 63.5797L896.011 76.7797H913.391L906.241 62.1497C902.391 54.4497 899.641 49.3897 894.911 46.7497C904.371 44.2197 910.311 36.4097 910.311 26.2897C910.311 10.5597 897.441 2.74969 880.721 2.74969H852.231V76.7797H868.071ZM880.941 17.5997C888.201 17.5997 893.811 20.6797 893.811 27.9397C893.811 34.8697 888.311 38.8297 880.721 38.8297H868.181L868.291 17.5997H880.941Z" fill="#DAECD5"/>
|
||||
<path d="M324.979 199.395V144.742L354.171 195.115C356.585 199.176 360.646 200.822 365.365 200.822C371.182 200.822 376.559 196.651 376.559 189.299V125.536H361.414V179.86L332.222 129.817C329.808 125.756 325.966 124 321.138 124C315.102 124 309.724 128.28 309.724 135.633V199.395H324.979Z" fill="#DAECD5"/>
|
||||
<path d="M445.739 125.536H386.257V140.352H407.987V199.395H424.009V140.352H445.739V125.536Z" fill="#DAECD5"/>
|
||||
<path d="M510.082 199.395V185.018H472.219V169.654H507.118V155.277H472.219V139.913H509.423V125.536H470.354C460.147 125.536 456.197 130.914 456.197 139.364V185.677C456.197 194.127 460.147 199.395 470.354 199.395H510.082Z" fill="#DAECD5"/>
|
||||
@ -27,7 +25,7 @@
|
||||
<path d="M893.894 199.395V144.742L923.086 195.115C925.5 199.176 929.561 200.822 934.28 200.822C940.097 200.822 945.474 196.651 945.474 189.299V125.536H930.329V179.86L901.137 129.817C898.723 125.756 894.882 124 890.053 124C884.017 124 878.639 128.28 878.639 135.633V199.395H893.894Z" fill="#DAECD5"/>
|
||||
<path d="M522.01 125.018H559.547V162.555H522.01V125.018Z" fill="#FB5232"/>
|
||||
<path d="M522.01 162.554H559.547V200.091H522.01V162.554Z" fill="#F4CC3E"/>
|
||||
<path d="M559.548 125.018H578.317C588.682 125.018 597.085 133.421 597.085 143.786V143.786C597.085 154.152 588.682 162.555 578.317 162.555H559.548V125.018Z" fill="#00B86E"/>
|
||||
<path d="M559.548 125.018H578.317C588.682 125.018 597.085 133.421 597.085 143.786C597.085 154.152 588.682 162.555 578.317 162.555H559.548V125.018Z" fill="#00B86E"/>
|
||||
<path d="M559.548 162.554L597.085 200.091H559.548V162.554Z" fill="#5A4CFA"/>
|
||||
<path d="M796.354 124.018C817.169 124.018 834.044 140.892 834.044 161.707H815.199C804.791 161.707 796.354 153.27 796.354 142.862V124.018Z" fill="#FF77F3"/>
|
||||
<path d="M796.354 180.551C796.354 170.143 804.791 161.706 815.199 161.706H834.044V199.396H796.354V180.551Z" fill="#00B86E"/>
|
||||
@ -35,4 +33,7 @@
|
||||
<path d="M758.664 161.706H777.508C787.916 161.706 796.353 170.143 796.353 180.551V199.396H758.664V161.706Z" fill="#5A4CFA"/>
|
||||
<rect x="259.005" y="124.019" width="37.9915" height="37.9915" rx="18.9957" fill="#FB5232"/>
|
||||
<rect x="259.005" y="162.01" width="37.9915" height="37.9915" fill="#F4CC3E"/>
|
||||
<path d="M61.16 125.97H1.54004V140.82H23.32V200H39.38V140.82H61.16V125.97Z" fill="#DAECD5"/>
|
||||
<path d="M88.8018 200V170.52H122.572V200H138.632V125.97H122.572V155.78H88.8018V125.97H72.7418V200H88.8018Z" fill="#DAECD5"/>
|
||||
<path d="M211.374 200V185.59H173.424V170.19H208.404V155.78H173.424V140.38H210.714V125.97H171.554C161.324 125.97 157.364 131.36 157.364 139.83V186.25C157.364 194.72 161.324 200 171.554 200H211.374Z" fill="#DAECD5"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 7.1 KiB |
Loading…
Reference in New Issue
Block a user