const logo = ( <svg width="260" height="40" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#a)"> <path d="M48.928 37.816V16.524h3.18l.279 1.726h.167c.89-1.17 2.45-2.005 4.573-2.005 3.904 0 7.079 3.181 7.079 7.915 0 4.733-3.125 7.914-7.086 7.914-2.116 0-3.57-.89-4.35-1.893h-.167v7.58h-3.682v.055h.007ZM60.524 24.16c0-2.785-1.782-4.517-3.96-4.517-2.179 0-3.96 1.726-3.96 4.517 0 2.79 1.781 4.517 3.96 4.517 2.178 0 3.96-1.726 3.96-4.517ZM66.043 24.16c0-4.629 3.348-7.915 7.748-7.915 4.461 0 7.747 3.348 7.747 7.915 0 4.628-3.348 7.914-7.747 7.914-4.462 0-7.748-3.341-7.748-7.914Zm11.813 0c0-2.73-1.782-4.517-4.072-4.517-2.227 0-4.071 1.782-4.071 4.517 0 2.735 1.838 4.517 4.072 4.517 2.233 0 4.071-1.782 4.071-4.517ZM84.21 31.796V10.67h3.683v21.126H84.21ZM101.605 16.524h3.905l-6.634 18.564c-.668 1.837-1.559 2.728-3.96 2.728h-3.564v-3.403h3.007c.557 0 .836-.278 1.003-.724l.334-1.002-6.244-16.17h3.905l3.96 10.594h.613l3.57-10.593h.105v.006ZM106.233 32.581h3.738c.167 1.003 1.169 2.34 3.515 2.34 2.227 0 3.681-1.393 3.681-3.515V29.29H117c-.835.89-2.339 1.67-4.238 1.67-3.905 0-6.968-3.007-6.968-7.357s3.007-7.358 6.968-7.358c2.004 0 3.514.836 4.461 1.95h.167l.279-1.671h3.18v14.882c0 4.072-2.729 6.745-7.357 6.745-5.198 0-7.147-3.398-7.259-5.57Zm10.872-8.978c0-2.395-1.67-4.072-3.848-4.072-2.117 0-3.794 1.67-3.794 4.072 0 2.4 1.671 4.071 3.794 4.071 2.122 0 3.848-1.676 3.848-4.071ZM123.35 24.16c0-4.629 3.347-7.915 7.747-7.915 4.461 0 7.747 3.348 7.747 7.915 0 4.628-3.347 7.914-7.747 7.914-4.462 0-7.747-3.341-7.747-7.914Zm11.819 0c0-2.73-1.838-4.517-4.072-4.517-2.228 0-4.072 1.782-4.072 4.517 0 2.735 1.838 4.517 4.072 4.517 2.228 0 4.072-1.782 4.072-4.517ZM141.412 31.796V16.524h3.181l.278 1.448h.167c.613-.668 2.117-1.727 4.406-1.727 3.515 0 6.021 2.506 6.021 6.411v9.195h-3.682v-8.694c0-1.949-1.392-3.403-3.292-3.403a3.377 3.377 0 0 0-3.403 3.403v8.694h-3.676v-.055Z" fill="#fff" /> <path d="m29.082 30.014 9.029-5.241a1.5 1.5 0 0 0 .78-1.337V12.954a1.5 1.5 0 0 0-.78-1.337l-9.029-5.241a1.56 1.56 0 0 0-1.559 0l-9.034 5.24a1.5 1.5 0 0 0-.78 1.338v18.675l-6.355 3.681-6.355-3.681v-7.302l6.355-3.682 4.183 2.395v-4.907l-3.403-1.95c-.223-.11-.502-.222-.78-.222s-.557.056-.78.223L1.54 21.43a1.5 1.5 0 0 0-.78 1.337V33.25a1.5 1.5 0 0 0 .78 1.337l9.028 5.24a1.56 1.56 0 0 0 1.56 0l9.028-5.24a1.5 1.5 0 0 0 .78-1.337V14.575l.11-.056 6.25-3.626 6.355 3.682v7.302l-6.355 3.675-4.183-2.395v4.907l3.404 1.95a1.571 1.571 0 0 0 1.565 0Z" fill="url(#b)" /> </g> <path d="M165.162 30.607v-1.554l9.787-13.38v-.144h-9.368v-1.851h11.892v1.62l-9.611 13.314v.143h9.964v1.852h-12.664Zm18.034-6.393-.022-2.568h.44l7.936-7.968h2.48l-7.837 7.847-.176.033-2.821 2.656Zm-1.786 6.393V8.035h1.962v22.572h-1.962Zm10.548 0-6.878-8.696 1.411-1.356 7.98 10.052h-2.513Zm5.427 0V8.035h13.094v1.851h-11.033v8.498h10.339v1.852h-10.339v8.52h11.253v1.85h-13.314Zm17.723-22.572 7.053 19.894h.199l7.054-19.894h2.16l-8.211 22.572h-2.205l-8.211-22.572h2.161Zm19.595 0h2.381l8.189 19.662h.198l8.189-19.662h2.381v22.572h-1.94V12.388h-.176l-7.616 18.219h-1.874l-7.616-18.219h-.176v18.219h-1.94V8.035Z" fill="#fff" /> <defs> <linearGradient id="b" x1=".698" y1="34.279" x2="37.045" y2="13.04" gradientUnits="userSpaceOnUse" > <stop stop-color="#A726C1" /> <stop offset=".878" stop-color="#803BDF" /> <stop offset="1" stop-color="#7B3FE4" /> </linearGradient> <clipPath id="a"> <path fill="#fff" d="M.76 6.209h154.698v33.786H.76z" /> </clipPath> </defs> </svg> ); const buttonStyled = ` background: rgba(255, 255, 255, 0.5); border: none; border-radius: 24px; font-size: 0.8rem; text-transform: uppercase; list-style: none; color: white; &:hover { background: rgba(255, 255, 255, 0.8); } &:disabled { color: black; background: rgba(255, 255, 255, 0.25); } `; const Theme = styled.div` color: white; padding: 0; margin:0; width: 100%; min-width: 1000px; height: 100%; min-height: 400px; display: grid; place-items: center; padding-top: 100px; padding-bottom: 100px; margin: 0 auto; background: url(https://bafybeifnxzoabfcn4txprj7pkexb4adkcxnp34qfnsk3wkztay2sweuh44.ipfs.w3s.link/polygon-bg-optimized.png) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-color: #0D0E20; .bridge-abs { ${buttonStyled} position: absolute; top: 0; right: 0; z-index: 99999; } .connect-web3 { background: white; color: #44F; border-color: white; &:hover { background: #ddd; border-color: #bbb; color: black; color: #00F; } } .grid { display: flex; align-items: flex-start; justify-content: center; } .apps { width: 380px; .grid { display: flex; align-items: center; justify-content: space-between; width: 100%; padding-right: 16px; > .logo { width: 260px; height: 40px; margin: 0; } > .bridge-button { ${buttonStyled} padding: 6px 12px; } } >h1 { margin-top: 48px; color: white; } >h2 { color: rgba(255, 255, 255, 0.8); font-size: 1.4rem; margin-bottom: 32px; } > div { display: flex; flex-wrap: wrap; > div { width: 150px; height: 150px; margin: 8px; margin-bottom: 64px; text-align: center; > img { width: 100px; border-radius: 50%; } >h1 { margin: 16px 0; font-size: 1rem; } > button { ${buttonStyled} } } } .component { margin-top: 1.5rem; } `; State.init({ bridge: true, component: null, }); const sender = Ethers.send("eth_requestAccounts", [])[0] || ""; if (sender) { Ethers.provider() .getNetwork() .then(({ chainId }) => { State.update({ chainId }); }); } if (state.sender === undefined) { State.update({ sender: Ethers.send("eth_requestAccounts", [])[0] || "" }); } if (state.sender === "") { State.update({ sender: Ethers.send("eth_requestAccounts", [])[0] || "" }); } const { bridge, component } = state; const setComponent = (component) => { let update = { component, bridge: null }; if (component === "bridge") update = { component: null, bridge: true }; State.update(update); }; if (bridge !== true && (state.sender === "" || state.chainId !== 1101)) { return ( <Theme> <div className="grid"> <div className="center"> <div className="apps"> <div className="grid"> <div className="logo">{logo}</div> </div> <h1>Bring Ethereum to everyone.</h1> <h2>Fast, cheap and secure.</h2> {!state.sender === undefined && ( <Web3Connect connectLabel="Connect with Web3" className="connect-web3" /> )} {state.sender !== "" && state.chainId !== 1011 && ( <p>To proceed, please switch to the Polygon ZKEVM Network</p> )} </div> </div> </div> </Theme> ); } return ( <Theme> <button disabled={bridge} className="bridge-abs" onClick={() => setComponent("bridge")} > Bridge </button> <div className="grid"> <div className="center"> <div className="apps"> <div className="grid"> <div className="logo">{logo}</div> <button disabled={bridge} className="bridge-button" onClick={() => setComponent("bridge")} > Bridge </button> </div> <h1>Bring Ethereum to everyone.</h1> <h2>Fast, cheap and secure.</h2> <div> <div> <img src={ "https://bafkreicivus3yfqvnefgprxf3lj5hzjpgiqe3gwld4bhxeyng4ndpeaxje.ipfs.nftstorage.link/" } /> <h1>Quickswap</h1> <button disabled={component === "quickswap"} onClick={() => setComponent("quickswap")} > DEX </button> </div> <div> <img src={ "https://bafybeic6v34nkxhmro22tv2yoltsykniye2xlkgya6nxdqpxklu2bjn5me.ipfs.nftstorage.link/" } /> <h1>Gamma</h1> <button disabled={component === "gamma"} onClick={() => setComponent("gamma")} > Liquidity </button> </div> {false && ( <div> <img src={ "https://bafkreiagr7ikurfd2jthfnrje6ckqsww5labskp3qy2vowed32j4amhdlq.ipfs.nftstorage.link/" } /> <h1>Aave</h1> <button disabled={component === "aave"} onClick={() => setComponent("aave")} > Lending Protocol </button> </div> )} <div> <img src={ "https://bafkreiafnfe7jzj3xxmpcxfkwob2fnfqdi66blmvpcrmcb3wnuwiaahtvi.ipfs.nftstorage.link/" } /> <h1>Pancake Swap</h1> <button disabled={component === "pancake"} onClick={() => setComponent("pancake")} > Dex </button> </div> <div> <img src={ "https://bafkreiepbud73mssal3blwkj3pz3zyfloojhtw2kvxl7tli55tzrw6lmlu.ipfs.nftstorage.link/" } /> <h1>Balancer</h1> <button disabled={component === "balancer"} onClick={() => State.update({ component: "balancer" })} > Dex </button> </div> </div> </div> </div> <div className="component"> <div className="center"> {bridge === true && component === null ? ( <Widget src="ciocan.near/widget/zkevm-bridge" /> ) : ( <> {component === "quickswap" && ( <Widget src="zavodil.near/widget/swap-zkevm" /> )} {component === "aave" && ( <Widget src="aave-v3.near/widget/AAVE" /> )} {component === "pancake" && ( <Widget src="zavodil.near/widget/swap-zkevm" props={{ dex: "Pancake Swap", forceNetwork: "ZKEVM", }} /> )} {component === "balancer" && ( <Widget src="zavodil.near/widget/swap-zkevm" props={{ dex: "Balancer", forceNetwork: "ZKEVM", }} /> )} {component === "gamma" && ( <Widget src="james-cordova423.near/widget/gamma-zkevm-app" /> )} </> )} </div> </div> </div> </Theme> );