const accountId = context.accountId; if (!accountId) { return ( <div style={{ width: "512px", height: "512px", backgroundSize: "100%", backgroundPosition: "center", backgroundRepeat: "no-repeat", backgroundColor: "white", position: "flex", fontFamily: '"Press Start 2P", sans-serif', alignItems: "center", justifyContent: "center", }} > <img src="https://bafybeiep6yscx365ici64ce2o7ktr3vewuyk7rwj4kxpwrf4ugeloxgfri.ipfs.w3s.link/error-001.jpg" alt="ERROR 001" style={{ width: "340px", margin: "50px 40px 10px 80px", position: "flex", }} /> <h2 style={{ fontFamily: "Press Start 2P", fontSize: "14px", color: "black", display: "flex", alignItems: "center", justifyContent: "center", }} > ERROR 001: NO NEAR WALLET CONNECTED.{" "} </h2>{" "} <h3 style={{ fontFamily: "Press Start 2P", fontSize: "12px", color: "black", display: "flex", alignItems: "center", justifyContent: "center", }} > {" "} Please connect with your near wallet or create one for free </h3> <a href="https://shard.dog/go?url=https://app.jumpdefi.xyz" style={{ fontFamily: "Press Start 2P", fontSize: "14px", color: "black", display: "flex", alignItems: "center", justifyContent: "center", margin: "40px 1opx 10px 10px", }} > HERE </a> </div> ); } const Heart = styled.div` position: relative; width: 100px; height: 90px; &:before, &:after { position: absolute; content: ''; left: 50px; top: 0; width: 50px; height: 80px; background: red; border-radius: 50px 50px 0 0; transform: rotate(-45deg); transform-origin: 0 100%; } &:after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; } `; const heartBeat = styled.keyframes` 0% { transform: scale( .75 ); } 20% { transform: scale( 1.1 ); } 40% { transform: scale( .75 ); } 60% { transform: scale( 1.1 ); } 80% { transform: scale( .75 ); } 100% { transform: scale( .75 ); } `; const AnimatedHeart = styled(Heart)` animation: ${heartBeat} 1s infinite; `; return ( <div style={{ width: "300px", height: "200px", backgroundSize: "100%", backgroundPosition: "center", backgroundRepeat: "no-repeat", backgroundColor: "black", position: "relative", fontFamily: '"Press Start 2P", sans-serif', alignItems: "center", justifyContent: "center", }} > <a style={{ fontFamily: "Press Start 2P", fontSize: "55px", color: "white", display: "flex", alignItems: "center", justifyContent: "center", margin: "40px 1opx 10px 10px", }} > hello world </a> <div> <AnimatedHeart /> </div> </div> );