create-stylus 0.1.3 → 0.1.5

package/templates/base/packages/nextjs/components/scaffold-eth/Faucet.tsx

@@ -1,10 +1,12 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useState, useMemo } from "react";
 import { Address as AddressType, createWalletClient, http, parseEther } from "viem";
 import { privateKeyToAccount } from "viem/accounts";
 import { useAccount } from "wagmi";
+import { useTheme } from "next-themes";
 import { BanknotesIcon } from "@heroicons/react/24/outline";
+import { AngularBorder } from "~~/components/AngularBorder";
 import { Address, AddressInput, Balance, EtherInput } from "~~/components/scaffold-eth";
 import { useTransactor } from "~~/hooks/scaffold-eth";
 import { notification } from "~~/utils/scaffold-eth";
@@ -29,6 +31,11 @@ export const Faucet = () => {
   const [sendValue, setSendValue] = useState("");
 
   const { chain: ConnectedChain } = useAccount();
+  const { resolvedTheme } = useTheme();
+
+  const isDarkMode = useMemo(() => {
+    return resolvedTheme === "dark";
+  }, [resolvedTheme]);
 
   const faucetTxn = useTransactor(localWalletClient);
 
@@ -83,10 +90,38 @@ export const Faucet = () => {
 
   return (
     <div>
-      <label htmlFor="faucet-modal" className="btn btn-primary btn-sm font-normal gap-1">
-        <BanknotesIcon className="h-4 w-4" />
-        <span>Faucet</span>
-      </label>
+      <div className="relative">
+        <AngularBorder width={130} height={40} color="rgba(227, 6, 110, 1)" />
+        <label
+          htmlFor="faucet-modal"
+          className="flex items-center gap-2 px-4 py-2 cursor-pointer rounded-lg"
+          style={{
+            width: "130px",
+            height: "40px",
+            display: "flex",
+            alignItems: "flex-start",
+            paddingTop: "8px",
+            position: "relative",
+            zIndex: 1,
+          }}
+        >
+          <BanknotesIcon className="h-4 w-4" style={{ color: "rgba(227, 6, 110, 1)" }} />
+          <span
+            style={{
+              color: isDarkMode ? "#FFF" : "black",
+              fontFamily: "Orbitron, sans-serif",
+              fontSize: "14px",
+              fontWeight: 700,
+              textTransform: "uppercase",
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+            }}
+          >
+            Faucet
+          </span>
+        </label>
+      </div>
       <input type="checkbox" id="faucet-modal" className="modal-toggle" />
       <label htmlFor="faucet-modal" className="modal cursor-pointer">
         <label className="modal-box relative">

package/templates/base/packages/nextjs/components/scaffold-eth/Input/InputBase.tsx

@@ -47,7 +47,7 @@ export const InputBase = <T extends { toString: () => string } | undefined = str
   }, [reFocus]);
 
   return (
-    <div className={`flex border-2 border-base-300 bg-base-200 rounded-full text-accent ${modifier}`}>
+    <div className={`flex text-accent ${modifier}`}>
       {prefix}
       <input
         className="input input-ghost focus-within:border-transparent focus:outline-hidden focus:bg-transparent h-[2.2rem] min-h-[2.2rem] px-4 border w-full font-medium placeholder:text-accent/70 text-base-content/70 focus:text-base-content/70"

package/templates/base/packages/nextjs/components/scaffold-eth/Input/IntegerInput.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useState } from "react";
 import { parseEther } from "viem";
+import { useTheme } from "next-themes";
 import { CommonInputProps, InputBase, IntegerVariant, isValidInteger } from "~~/components/scaffold-eth";
 
 type IntegerInputProps = CommonInputProps<string> & {
@@ -16,6 +17,8 @@ export const IntegerInput = ({
   variant = IntegerVariant.UINT256,
   disableMultiplyBy1e18 = false,
 }: IntegerInputProps) => {
+  const { resolvedTheme } = useTheme();
+  const isDarkMode = resolvedTheme === "dark";
   const [inputError, setInputError] = useState(false);
   const multiplyBy1e18 = useCallback(() => {
     if (!value) {
@@ -33,31 +36,38 @@ export const IntegerInput = ({
   }, [value, variant]);
 
   return (
-    <InputBase
-      name={name}
-      value={value}
-      placeholder={placeholder}
-      error={inputError}
-      onChange={onChange}
-      disabled={disabled}
-      suffix={
-        !inputError &&
-        !disableMultiplyBy1e18 && (
-          <div
-            className="space-x-4 flex tooltip tooltip-top tooltip-secondary before:content-[attr(data-tip)] before:right-[-10px] before:left-auto before:transform-none"
-            data-tip="Multiply by 1e18 (wei)"
-          >
-            <button
-              className={`${disabled ? "cursor-not-allowed" : "cursor-pointer"} font-semibold px-4 text-accent`}
-              onClick={multiplyBy1e18}
-              disabled={disabled}
-              type="button"
+    <div
+      className="integer-input-wrapper input-container"
+      style={{
+        padding: "12px 16px",
+      }}
+    >
+      <InputBase
+        name={name}
+        value={value}
+        placeholder={placeholder}
+        error={inputError}
+        onChange={onChange}
+        disabled={disabled}
+        suffix={
+          !inputError &&
+          !disableMultiplyBy1e18 && (
+            <div
+              className="space-x-4 flex tooltip tooltip-top tooltip-secondary before:content-[attr(data-tip)] before:right-[-10px] before:left-auto before:transform-none"
+              data-tip="Multiply by 1e18 (wei)"
             >
-              ∗
-            </button>
-          </div>
-        )
-      }
-    />
+              <button
+                className={`${disabled ? "cursor-not-allowed" : "cursor-pointer"} font-semibold px-4 text-accent`}
+                onClick={multiplyBy1e18}
+                disabled={disabled}
+                type="button"
+              >
+                ∗
+              </button>
+            </div>
+          )
+        }
+      />
+    </div>
   );
 };

package/templates/base/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AngularWalletAddress.tsx

@@ -0,0 +1,223 @@
+import { useRef, useState } from "react";
+import { getAddress } from "viem";
+import { Address } from "viem";
+import { useDisconnect } from "wagmi";
+import {
+  ArrowLeftEndOnRectangleIcon,
+  ArrowsRightLeftIcon,
+  CheckCircleIcon,
+  ChevronDownIcon,
+  DocumentDuplicateIcon,
+  QrCodeIcon,
+  UserCircleIcon,
+} from "@heroicons/react/24/outline";
+import { BlockieAvatar, isENS } from "~~/components/scaffold-eth";
+import { useCopyToClipboard, useOutsideClick } from "~~/hooks/scaffold-eth";
+import { getTargetNetworks } from "~~/utils/scaffold-stylus";
+import { arbitrumNitro } from "~~/utils/scaffold-stylus/supportedChains";
+import { useTheme } from "next-themes";
+
+const allowedNetworks = getTargetNetworks();
+
+type AngularWalletAddressProps = {
+  address: Address;
+  displayName: string;
+  ensAvatar?: string;
+  onSwitchAccount: () => void;
+};
+
+export const AngularWalletAddress = ({
+  address,
+  ensAvatar,
+  displayName,
+  onSwitchAccount,
+}: AngularWalletAddressProps) => {
+  const { disconnect } = useDisconnect();
+  const checkSumAddress = getAddress(address);
+  const { resolvedTheme } = useTheme();
+  const isDarkMode = resolvedTheme === "dark";
+
+  const { copyToClipboard: copyAddressToClipboard, isCopiedToClipboard: isAddressCopiedToClipboard } =
+    useCopyToClipboard();
+  const [selectingNetwork, setSelectingNetwork] = useState(false);
+  const dropdownRef = useRef<HTMLDetailsElement>(null);
+
+  const closeDropdown = () => {
+    setSelectingNetwork(false);
+    dropdownRef.current?.removeAttribute("open");
+  };
+
+  useOutsideClick(dropdownRef, closeDropdown);
+
+  return (
+    <>
+      <details ref={dropdownRef} className="dropdown dropdown-end leading-3">
+        <summary
+          tabIndex={0}
+          className="dropdown-toggle gap-0 !h-auto"
+          style={{
+            position: "relative",
+            width: "220px",
+            height: "46px",
+            display: "flex",
+            alignItems: "center",
+            padding: "0 20px",
+            cursor: "pointer",
+            alignSelf: "center",
+          }}
+        >
+          {/* Angular border SVG */}
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="220"
+            height="46"
+            viewBox="0 0 220 46"
+            fill="none"
+            style={{
+              position: "absolute",
+              top: "-7px",
+              left: 0,
+              pointerEvents: "none",
+            }}
+          >
+            <path
+              d="M196.132 0.5L219.5 23.2109V45.5H24.0811L0.5 22.7871V0.5H196.132Z"
+              stroke="#30B4ED"
+              strokeWidth="1"
+            />
+          </svg>
+
+          {/* Content */}
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: "8px",
+              width: "100%",
+              height: "100%",
+              zIndex: 1,
+              position: "relative",
+            }}
+          >
+            <BlockieAvatar address={checkSumAddress} size={30} ensImage={ensAvatar} />
+            <span
+              style={{
+                color: isDarkMode ? "#FFF" : "black",
+                fontFamily: "Orbitron, sans-serif",
+                fontSize: "14px",
+                fontWeight: 700,
+                lineHeight: "1",
+                textTransform: "uppercase",
+                display: "flex",
+                alignItems: "center",
+                height: "30px",
+                whiteSpace: "nowrap",
+                minWidth: 0,
+              }}
+            >
+              {isENS(displayName) ? displayName : checkSumAddress?.slice(0, 6) + "..." + checkSumAddress?.slice(-4)}
+            </span>
+            <ChevronDownIcon
+              className="h-4 w-4"
+              style={{
+                color: isDarkMode ? "#FFF" : "black",
+                height: "16px",
+                width: "16px",
+              }}
+            />
+          </div>
+        </summary>
+        <ul
+          tabIndex={0}
+          className="dropdown-content menu z-[2] p-2 mt-4 gap-1"
+          style={{
+            borderRadius: "8px",
+            border: isDarkMode ? "1px solid rgba(255, 255, 255, 0.20)" : "1px solid rgba(0, 0, 0, 0.1)",
+            background: isDarkMode ? "rgba(2, 2, 2, 0.20)" : "rgba(255, 255, 255, 0.20)",
+            backdropFilter: "blur(25px)",
+          }}
+        >
+          <li className={selectingNetwork ? "hidden" : ""}>
+            <div
+              className="flex gap-3 py-3 px-3 cursor-pointer rounded-lg transition-all duration-200 hover:bg-gradient-to-r hover:from-[rgba(48,180,237,0.16)] hover:to-[rgba(227,6,110,0.16)]"
+              onClick={() => copyAddressToClipboard(checkSumAddress)}
+            >
+              {isAddressCopiedToClipboard ? (
+                <>
+                  <CheckCircleIcon
+                    className="h-5 w-5"
+                    style={{ color: isDarkMode ? "white" : "black" }}
+                    aria-hidden="true"
+                  />
+                  <span className="whitespace-nowrap" style={{ color: isDarkMode ? "white" : "black" }}>
+                    Copied!
+                  </span>
+                </>
+              ) : (
+                <>
+                  <DocumentDuplicateIcon
+                    className="h-5 w-5"
+                    style={{ color: isDarkMode ? "white" : "black" }}
+                    aria-hidden="true"
+                  />
+                  <span className="whitespace-nowrap" style={{ color: isDarkMode ? "white" : "black" }}>
+                    Copy address
+                  </span>
+                </>
+              )}
+            </div>
+          </li>
+          <li className={selectingNetwork ? "hidden" : ""}>
+            <label
+              htmlFor="qrcode-modal"
+              className="flex gap-3 py-3 px-3 cursor-pointer rounded-lg transition-all duration-200 hover:bg-gradient-to-r hover:from-[rgba(48,180,237,0.16)] hover:to-[rgba(227,6,110,0.16)]"
+            >
+              <QrCodeIcon className="h-5 w-5" style={{ color: isDarkMode ? "white" : "black" }} />
+              <span className="whitespace-nowrap" style={{ color: isDarkMode ? "white" : "black" }}>
+                View QR Code
+              </span>
+            </label>
+          </li>
+          {allowedNetworks.some(network => network.id === arbitrumNitro.id) && (
+            <li className={selectingNetwork ? "hidden" : ""}>
+              <button
+                className="flex gap-3 py-3 px-3 cursor-pointer rounded-lg transition-all duration-200 hover:bg-gradient-to-r hover:from-[rgba(48,180,237,0.16)] hover:to-[rgba(227,6,110,0.16)] w-full text-left"
+                type="button"
+                onClick={onSwitchAccount}
+              >
+                <UserCircleIcon className="h-5 w-5" style={{ color: isDarkMode ? "white" : "black" }} />
+                <span className="whitespace-nowrap" style={{ color: isDarkMode ? "white" : "black" }}>
+                  Switch account
+                </span>
+              </button>
+            </li>
+          )}
+          {allowedNetworks.length > 1 ? (
+            <li className={selectingNetwork ? "hidden" : ""}>
+              <button
+                className="flex gap-3 py-3 px-3 cursor-pointer rounded-lg transition-all duration-200 hover:bg-gradient-to-r hover:from-[rgba(48,180,237,0.16)] hover:to-[rgba(227,6,110,0.16)] w-full text-left"
+                type="button"
+                onClick={() => {
+                  setSelectingNetwork(true);
+                }}
+              >
+                <ArrowsRightLeftIcon className="h-5 w-5" style={{ color: isDarkMode ? "white" : "black" }} />
+                <span style={{ color: isDarkMode ? "white" : "black" }}>Switch Network</span>
+              </button>
+            </li>
+          ) : null}
+          <li className={selectingNetwork ? "hidden" : ""}>
+            <button
+              className="flex gap-3 py-3 px-3 cursor-pointer rounded-lg transition-all duration-200 hover:bg-gradient-to-r hover:from-[rgba(48,180,237,0.16)] hover:to-[rgba(227,6,110,0.16)] w-full text-left"
+              type="button"
+              onClick={() => disconnect()}
+            >
+              <ArrowLeftEndOnRectangleIcon className="h-5 w-5" style={{ color: "#FB3748" }} />
+              <span style={{ color: "#FB3748" }}>Disconnect</span>
+            </button>
+          </li>
+        </ul>
+      </details>
+    </>
+  );
+};

package/templates/base/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/index.tsx

@@ -4,6 +4,7 @@
 import { useState } from "react";
 import { Balance } from "../Balance";
 import { AddressInfoDropdown } from "./AddressInfoDropdown";
+import { AngularWalletAddress } from "./AngularWalletAddress";
 import { AddressQRCodeModal } from "./AddressQRCodeModal";
 import { BurnerWalletModal } from "./BurnerWalletModal";
 import { WrongNetworkDropdown } from "./WrongNetworkDropdown";
@@ -64,7 +65,7 @@ export const RainbowKitCustomConnectButton = () => {
                         {chain.name}
                       </span>
                     </div>
-                    <AddressInfoDropdown
+                    <AngularWalletAddress
                       address={account.address as Address}
                       displayName={account.displayName}
                       ensAvatar={account.ensAvatar}

package/templates/base/packages/nextjs/icons/EthIcon.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+const EthIcon = ({ width = 32, height = 32, className = "" }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 32 32"
+      fill="none"
+      className={className}
+    >
+      <g fill="none" fillRule="evenodd">
+        <circle cx="16" cy="16" r="16" fill="#627EEA" />
+        <g fill="#FFF" fillRule="nonzero">
+          <path fillOpacity=".602" d="M16.498 4v8.87l7.497 3.35z" />
+          <path d="M16.498 4L9 16.22l7.498-3.35z" />
+          <path fillOpacity=".602" d="M16.498 21.968v6.027L24 17.616z" />
+          <path d="M16.498 27.995v-6.028L9 17.616z" />
+          <path fillOpacity=".2" d="M16.498 20.573l7.497-4.353-7.497-3.348z" />
+          <path fillOpacity=".602" d="M9 16.22l7.498 4.353v-7.701z" />
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default EthIcon;

package/templates/base/packages/nextjs/package.json

@@ -13,6 +13,15 @@
     "vercel": "vercel",
     "vercel:yolo": "vercel --build-env NEXT_PUBLIC_IGNORE_BUILD_ERROR=true"
   },
+  "overrides": {
+    "chalk": "5.3.0",
+    "strip-ansi": "7.1.0",
+    "color-convert": "2.0.1",
+    "color-name": "1.1.4",
+    "is-core-module": "2.13.1",
+    "error-ex": "1.3.2",
+    "has-ansi": "5.0.1"
+  },
   "dependencies": {
     "@ethersproject/providers": "^5.7.2",
     "@heroicons/react": "^2.1.5",

package/templates/base/packages/nextjs/public/logo.svg

@@ -1,8 +1,21 @@
-<svg width="46" height="47" viewBox="0 0 46 47" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M17.824 28.0332L22.4381 29.4512L20.3516 31.5377L20.1619 31.7275L16.9891 30.7552C13.9751 29.8302 11.7228 27.4522 10.9617 24.3934C10.2005 21.3347 11.0756 18.1787 13.3046 15.9498L25.7411 3.50818C25.7793 3.52497 25.8169 3.54379 25.8525 3.56516C25.8907 3.58398 25.9283 3.60535 25.9639 3.62469C26.028 3.65776 26.0896 3.69592 26.1537 3.73153C26.2153 3.76714 26.2768 3.80479 26.3389 3.8455C26.3888 3.87653 26.4361 3.90706 26.4834 3.94013C26.5307 3.97116 26.578 4.00423 26.6259 4.03985C26.6711 4.07088 26.7134 4.10395 26.7561 4.13702C26.7943 4.16297 26.8319 4.19401 26.8675 4.22453C26.9006 4.24845 26.9316 4.27439 26.9622 4.30289C26.9667 4.30543 26.9718 4.30746 26.9764 4.31255C27.1189 4.4311 27.2537 4.55422 27.3865 4.68701L27.9889 5.2894L15.3153 17.961C13.8001 19.4787 13.2048 21.6242 13.7218 23.7061C14.2387 25.788 15.7726 27.4049 17.824 28.0332Z" fill="#1A1A1A"/>
-<path d="M19.1825 23.8648L26.1583 25.731L23.8347 28.0546L18.4473 26.6127C16.9133 26.2047 15.7538 25.0452 15.3412 23.5112C14.9311 21.9773 15.3554 20.3929 16.4768 19.2716L29.2242 6.5242L31.2374 8.53743L18.49 21.2823C18.3333 21.441 18.2148 21.6211 18.1369 21.8206C18.0209 22.1243 18.0041 22.4535 18.0896 22.776C18.1064 22.8402 18.1278 22.9017 18.1537 22.9612C18.3364 23.4069 18.7088 23.7392 19.183 23.8648H19.1825Z" fill="#1A1A1A"/>
-<path d="M32.6961 31.0493L20.257 43.4909L18.5144 45.2334C17.9477 44.8875 17.419 44.4698 16.9377 43.9885L16.3353 43.3861L18.0118 41.7097L30.6854 29.0381C32.2031 27.5204 32.7983 25.3723 32.2789 23.293C31.7594 21.2111 30.228 19.5942 28.1766 18.9658L23.5645 17.5504L23.7543 17.3606L25.8408 15.2741L29.0135 16.2464C32.027 17.1714 34.2799 19.5494 35.041 22.6082C35.7996 25.6669 34.925 28.8229 32.6961 31.0493Z" fill="white"/>
-<path d="M29.5233 27.73L16.7785 40.4774L15.1021 42.1538L13.0888 40.1406L14.7653 38.4642L27.5126 25.7193C27.6714 25.558 27.7899 25.3779 27.8637 25.1785C27.9797 24.8748 27.9965 24.5456 27.911 24.225C27.8942 24.1609 27.8729 24.0994 27.8495 24.0399C27.6693 23.5942 27.2944 23.2619 26.8182 23.1342L19.8444 21.2706L20.0387 21.0762L21.9736 19.1414L22.168 18.947L27.5528 20.3838C29.0868 20.7964 30.2463 21.9559 30.6589 23.4878C31.069 25.0218 30.6447 26.6082 29.5233 27.73Z" fill="white"/>
-<path d="M43.6291 23.4995C43.6291 25.1571 42.984 26.715 41.8128 27.8862L27.3864 42.3125C26.2152 43.4837 24.6573 44.1289 22.9998 44.1289C22.9026 44.1289 22.8054 44.1263 22.7103 44.1218H22.6818C22.606 44.1172 22.5322 44.1121 22.4589 44.105C22.433 44.1024 22.4091 44.1004 22.3831 44.0978C22.3098 44.0907 22.2386 44.0836 22.1648 44.0719C22.1531 44.0719 22.1409 44.0693 22.1292 44.0673C22.0982 44.0648 22.0651 44.0602 22.0321 44.0556C21.9491 44.0414 21.8682 44.0271 21.7878 44.0129C21.7761 44.0083 21.7639 44.0058 21.7548 44.0058C21.6815 43.989 21.6077 43.9727 21.5365 43.9559C21.4678 43.9391 21.3991 43.9228 21.3305 43.9015C21.2831 43.8898 21.2379 43.8755 21.1931 43.8633C21.1127 43.8394 21.0318 43.8134 20.9535 43.7849C20.9295 43.7753 20.9061 43.7682 20.8822 43.759C20.8751 43.7565 20.8705 43.7544 20.8634 43.7519C20.7947 43.728 20.7281 43.702 20.6619 43.6735C20.6334 43.6639 20.6049 43.6496 20.5764 43.6379C20.4793 43.5952 20.3821 43.5524 20.2849 43.5051C20.2753 43.5005 20.2661 43.4955 20.2564 43.4909L32.6955 31.0493C34.9245 28.8228 35.7995 25.6669 35.0405 22.6081C34.2793 19.5494 32.0265 17.1709 29.013 16.2464L25.8403 15.2741L23.7538 17.3606L23.564 17.5504L28.176 18.9658C30.2269 19.5942 31.7588 21.211 32.2783 23.293C32.7978 25.3723 32.2025 27.5209 30.6848 29.0381L18.0112 41.7096L16.3348 43.3861L15.102 42.1533L16.7784 40.4769L29.5233 27.7295C30.6446 26.6081 31.0695 25.0218 30.6589 23.4873C30.2463 21.9554 29.0868 20.7959 27.5528 20.3833L22.1679 18.9465L21.9735 19.1408L20.0387 21.0757L19.8443 21.2701L26.8181 23.1337C27.2948 23.2619 27.6693 23.5936 27.8494 24.0393C27.8733 24.0989 27.8947 24.1604 27.911 24.2245C27.9964 24.5445 27.9797 24.8742 27.8637 25.178C27.7904 25.3769 27.6713 25.5575 27.5126 25.7188L14.7652 38.4637L4.18723 27.8857C3.01603 26.7145 2.3709 25.1566 2.3709 23.499C2.3709 21.8414 3.01603 20.2835 4.18723 19.1123L18.6136 4.68701C19.7848 3.5158 21.3427 2.87067 23.0003 2.87067C23.0974 2.87067 23.1946 2.87322 23.2898 2.8778H23.3182C23.418 2.88238 23.5172 2.89204 23.6169 2.90171C23.6973 2.90883 23.7782 2.9185 23.8565 2.9302C23.8708 2.9302 23.8825 2.93274 23.8947 2.93478C23.9257 2.93732 23.9542 2.9419 23.9822 2.94648C24.058 2.95818 24.1318 2.97243 24.205 2.98668C24.2193 2.98922 24.231 2.99125 24.2452 2.9938C24.3185 3.01059 24.3897 3.02687 24.4635 3.04366C24.5322 3.06045 24.6009 3.07673 24.6696 3.0981C24.7052 3.10776 24.7428 3.11692 24.7784 3.12913C24.8329 3.14592 24.8873 3.1622 24.9423 3.18154C25.0491 3.21715 25.158 3.2548 25.2623 3.29754C25.3167 3.31433 25.3691 3.3357 25.421 3.36164C25.4755 3.38301 25.5299 3.40692 25.5823 3.43287C25.6367 3.45678 25.6891 3.48273 25.741 3.50868L13.3045 15.9503C11.0756 18.1792 10.2005 21.3352 10.9616 24.3939C11.7227 27.4527 13.9751 29.8312 16.9891 30.7557L20.1618 31.728L20.3516 31.5382L22.4381 29.4517L17.824 28.0337C15.7731 27.4054 14.2386 25.788 13.7217 23.7066C13.2048 21.6247 13.8001 19.4787 15.3152 17.9615L27.9888 5.28991L29.2241 6.52521L16.4767 19.2726C15.3554 20.394 14.9306 21.9783 15.3411 23.5122C15.7538 25.0462 16.9133 26.2057 18.4472 26.6137L23.8347 28.0556L26.1582 25.732L19.1824 23.8658C18.7082 23.7402 18.3358 23.4084 18.1531 22.9623C18.1272 22.9027 18.1058 22.8412 18.089 22.7771C18.0036 22.4545 18.0204 22.1248 18.1364 21.8216C18.2147 21.6226 18.3333 21.442 18.4894 21.2833L31.2368 8.53844L41.8123 19.1139C42.9835 20.2851 43.6286 21.8429 43.6286 23.5005L43.6291 23.4995Z" fill="#213147"/>
-<path d="M43.4892 17.4344L32.9138 6.85897L30.9005 4.84574L29.0654 3.01059C28.5841 2.52929 28.0529 2.11209 27.4861 1.76561C26.1511 0.940377 24.61 0.499268 22.9997 0.499268C20.7092 0.499268 18.5561 1.39064 16.9367 3.01008L2.51081 17.4344C0.891376 19.0564 0 21.2095 0 23.5C0 25.7905 0.891376 27.9437 2.51081 29.5657L13.0888 40.1411L14.7652 38.4647L4.18723 27.8867C3.01603 26.7155 2.3709 25.1576 2.3709 23.5C2.3709 21.8424 3.01603 20.2846 4.18723 19.1134L18.6136 4.68701C19.7848 3.5158 21.3427 2.87067 23.0003 2.87067C23.0974 2.87067 23.1946 2.87322 23.2897 2.8778H23.3182C23.418 2.88238 23.5172 2.89204 23.6169 2.90171C23.6973 2.90883 23.7782 2.9185 23.8565 2.9302C23.8708 2.9302 23.8825 2.93275 23.8947 2.93478C23.9257 2.93732 23.9542 2.9419 23.9822 2.94648C24.058 2.95818 24.1318 2.97243 24.205 2.98668C24.2193 2.98922 24.231 2.99125 24.2452 2.9938C24.3185 3.01059 24.3897 3.02687 24.4635 3.04366C24.5322 3.06045 24.6009 3.07673 24.6695 3.0981C24.7052 3.10776 24.7428 3.11692 24.7784 3.12913C24.8329 3.14592 24.8873 3.1622 24.9423 3.18154C25.0491 3.21715 25.158 3.2548 25.2623 3.29754C25.3167 3.31433 25.3691 3.3357 25.421 3.36164C25.4755 3.38301 25.5299 3.40692 25.5823 3.43287C25.6367 3.45679 25.6891 3.48273 25.741 3.50868L13.3045 15.9503C11.0756 18.1792 10.2005 21.3352 10.9616 24.394C11.7227 27.4527 13.9751 29.8312 16.9891 30.7557L20.1618 31.728L20.3516 31.5382L22.4381 29.4517L17.824 28.0337C15.7731 27.4054 14.2386 25.788 13.7217 23.7066C13.2048 21.6247 13.8001 19.4787 15.3152 17.9615L27.9888 5.28991L27.972 5.27312L29.2241 6.52522L16.4767 19.2726C15.3554 20.394 14.9306 21.9783 15.3411 23.5122C15.7538 25.0462 16.9133 26.2057 18.4472 26.6137L23.8346 28.0556L26.1582 25.732L19.1824 23.8658C18.7082 23.7402 18.3358 23.4085 18.1531 22.9623C18.1272 22.9027 18.1058 22.8412 18.089 22.7771C18.0036 22.4545 18.0204 22.1248 18.1364 21.8216C18.2147 21.6226 18.3332 21.442 18.4894 21.2833L31.2368 8.53844L41.8123 19.1139C42.9835 20.2851 43.6286 21.8429 43.6286 23.5005C43.6286 25.1581 42.9835 26.716 41.8123 27.8872L27.3859 42.3136C26.2147 43.4848 24.6568 44.1299 22.9992 44.1299C22.9021 44.1299 22.8049 44.1274 22.7097 44.1228H22.6813C22.6054 44.1182 22.5317 44.1131 22.4584 44.106C22.4325 44.1034 22.4085 44.1014 22.3826 44.0989C22.3093 44.0917 22.2381 44.0846 22.1643 44.0729C22.1526 44.0729 22.1404 44.0704 22.1287 44.0683C22.0977 44.0658 22.0646 44.0612 22.0315 44.0566C21.9486 44.0424 21.8677 44.0281 21.7873 44.0139C21.7756 44.0093 21.7634 44.0068 21.7543 44.0068C21.681 43.99 21.6072 43.9737 21.536 43.9569C21.4673 43.9401 21.3986 43.9238 21.3299 43.9025C21.2826 43.8908 21.2373 43.8765 21.1926 43.8643C21.1122 43.8404 21.0313 43.8145 20.9529 43.786C20.929 43.7763 20.9056 43.7692 20.8817 43.76C20.8746 43.7575 20.87 43.7554 20.8629 43.7529C20.7942 43.729 20.7276 43.703 20.6614 43.6745C20.6329 43.6649 20.6044 43.6506 20.5759 43.6389C20.4788 43.5962 20.3816 43.5535 20.2844 43.5061C20.2747 43.5016 20.2656 43.4965 20.2559 43.4919L18.5134 45.2345C19.8484 46.0597 21.3895 46.5008 22.9997 46.5008C25.2903 46.5008 27.4434 45.6094 29.0654 43.99L43.4892 29.5662C45.1086 27.9442 46 25.7911 46 23.5005C46 21.21 45.1086 19.0569 43.4892 17.4349V17.4344Z" fill="#E3066E"/>
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 6C0 2.68629 2.68629 0 6 0H42C45.3137 0 48 2.68629 48 6V42C48 45.3137 45.3137 48 42 48H6C2.68629 48 0 45.3137 0 42V6Z" fill="#020202"/>
+<path d="M0 6C0 2.68629 2.68629 0 6 0H42C45.3137 0 48 2.68629 48 6V42C48 45.3137 45.3137 48 42 48H6C2.68629 48 0 45.3137 0 42V6Z" fill="url(#paint0_linear_203_709)" fill-opacity="0.3"/>
+<path d="M9.75907 10.6256L7.26708 15.4397H14.299L14.3159 32.7282C14.3159 35.7434 11.3632 36.0117 9.29256 36.0117L6.8269 39.7194V40.1518H28.8639V39.6818L26.3834 36.0134H22.7469C20.613 36.0134 19.6704 34.2796 19.6704 32.7137V19.1777C19.6704 16.278 21.7848 15.4775 22.842 15.4397H38.0246L35.2452 10.6256H19.6704V5.69836L14.4599 7.62396V10.6256H9.75907Z" fill="url(#paint1_linear_203_709)"/>
+<path d="M31.754 27.7199L33.2964 28.1758L32.5989 28.8467L32.5355 28.9077L31.4749 28.5951C30.4673 28.2977 29.7143 27.5331 29.4599 26.5497C29.2054 25.5663 29.498 24.5516 30.2431 23.835L34.4006 19.8348C34.4134 19.8402 34.426 19.8463 34.4379 19.8532C34.4506 19.8592 34.4632 19.8661 34.4751 19.8723C34.4966 19.8829 34.5171 19.8952 34.5386 19.9066C34.5591 19.9181 34.5797 19.9302 34.6005 19.9433C34.6171 19.9533 34.633 19.9631 34.6488 19.9737C34.6646 19.9837 34.6804 19.9943 34.6964 20.0058C34.7115 20.0158 34.7257 20.0264 34.7399 20.037C34.7527 20.0454 34.7653 20.0553 34.7772 20.0652C34.7883 20.0728 34.7986 20.0812 34.8088 20.0903C34.8104 20.0912 34.8121 20.0918 34.8136 20.0935C34.8612 20.1316 34.9063 20.1712 34.9507 20.2138L35.1521 20.4075L30.9153 24.4816C30.4088 24.9695 30.2098 25.6594 30.3826 26.3287C30.5554 26.9981 31.0682 27.5179 31.754 27.7199Z" fill="#1A1A1A"/>
+<path d="M32.2079 26.3798L34.5399 26.9798L33.7632 27.7268L31.9622 27.2633C31.4494 27.1321 31.0617 26.7593 30.9238 26.2661C30.7867 25.7729 30.9286 25.2635 31.3034 24.903L35.5649 20.8046L36.2379 21.4518L31.9764 25.5495C31.9241 25.6005 31.8844 25.6584 31.8584 25.7225C31.8196 25.8202 31.814 25.926 31.8426 26.0297C31.8482 26.0503 31.8553 26.0701 31.864 26.0893C31.9251 26.2326 32.0496 26.3394 32.2081 26.3798H32.2079Z" fill="#1A1A1A"/>
+<path d="M36.7257 28.6896L32.5674 32.6897L31.9848 33.25C31.7953 33.1387 31.6186 33.0044 31.4577 32.8497L31.2563 32.656L31.8168 32.117L36.0536 28.0429C36.5609 27.555 36.7599 26.8644 36.5863 26.1958C36.4126 25.5265 35.9007 25.0066 35.2149 24.8046L33.6731 24.3495L33.7365 24.2885L34.434 23.6177L35.4947 23.9303C36.5021 24.2277 37.2552 24.9922 37.5096 25.9756C37.7632 26.9591 37.4709 27.9738 36.7257 28.6896Z" fill="white"/>
+<path d="M35.6649 27.6224L31.4043 31.7209L30.8439 32.2599L30.1709 31.6126L30.7313 31.0736L34.9928 26.976C35.0458 26.9241 35.0855 26.8662 35.1101 26.8021C35.1489 26.7044 35.1545 26.5986 35.1259 26.4955C35.1203 26.4749 35.1132 26.4551 35.1054 26.436C35.0452 26.2927 34.9198 26.1859 34.7606 26.1448L32.4293 25.5456L32.4942 25.4832L33.1411 24.8611L33.206 24.7986L35.0062 25.2605C35.519 25.3932 35.9066 25.766 36.0446 26.2585C36.1817 26.7517 36.0398 27.2617 35.6649 27.6224Z" fill="white"/>
+<path d="M40.3805 26.2623C40.3805 26.7952 40.1648 27.2961 39.7733 27.6727L34.9506 32.3109C34.559 32.6875 34.0382 32.8949 33.4841 32.8949C33.4516 32.8949 33.4191 32.8941 33.3873 32.8926H33.3778C33.3525 32.8911 33.3278 32.8895 33.3033 32.8872C33.2946 32.8864 33.2866 32.8857 33.278 32.8849C33.2535 32.8826 33.2297 32.8803 33.205 32.8766C33.2011 32.8766 33.197 32.8758 33.1931 32.8751C33.1827 32.8743 33.1717 32.8728 33.1606 32.8713C33.1329 32.8668 33.1058 32.8622 33.079 32.8576C33.0751 32.8561 33.071 32.8553 33.0679 32.8553C33.0434 32.8499 33.0188 32.8447 32.9949 32.8393C32.972 32.8339 32.949 32.8286 32.9261 32.8218C32.9102 32.818 32.8951 32.8134 32.8801 32.8095C32.8533 32.8018 32.8262 32.7935 32.8 32.7843C32.792 32.7812 32.7842 32.7789 32.7762 32.776C32.7738 32.7752 32.7723 32.7745 32.7699 32.7737C32.747 32.766 32.7247 32.7577 32.7026 32.7485C32.693 32.7454 32.6835 32.7408 32.674 32.737C32.6415 32.7233 32.609 32.7096 32.5765 32.6943C32.5733 32.6929 32.5702 32.6912 32.567 32.6898L36.7254 28.6896C37.4705 27.9738 37.7631 26.9591 37.5093 25.9757C37.2549 24.9923 36.5017 24.2276 35.4943 23.9303L34.4337 23.6177L33.7362 24.2886L33.6727 24.3496L35.2145 24.8047C35.9001 25.0067 36.4123 25.5265 36.5859 26.1959C36.7596 26.8644 36.5606 27.5552 36.0532 28.043L31.8164 32.1171L31.256 32.6561L30.8439 32.2597L31.4043 31.7207L35.6649 27.6223C36.0398 27.2618 36.1818 26.7517 36.0445 26.2584C35.9066 25.7658 35.519 25.3931 35.0062 25.2604L33.206 24.7984L33.141 24.8609L32.4942 25.483L32.4292 25.5455L34.7606 26.1447C34.92 26.1859 35.0451 26.2926 35.1053 26.4359C35.1133 26.455 35.1205 26.4748 35.1259 26.4954C35.1545 26.5983 35.1489 26.7043 35.1101 26.8019C35.0856 26.8659 35.0458 26.924 34.9927 26.9758L30.7313 31.0735L27.1951 27.6725C26.8036 27.296 26.5879 26.7951 26.5879 26.2621C26.5879 25.7292 26.8036 25.2283 27.1951 24.8518L32.0178 20.2139C32.4093 19.8373 32.9301 19.6299 33.4843 19.6299C33.5168 19.6299 33.5492 19.6307 33.5811 19.6322H33.5906C33.6239 19.6336 33.6571 19.6368 33.6904 19.6399C33.7173 19.6422 33.7443 19.6453 33.7705 19.649C33.7753 19.649 33.7792 19.6498 33.7833 19.6505C33.7937 19.6513 33.8032 19.6528 33.8125 19.6543C33.8379 19.658 33.8625 19.6626 33.887 19.6672C33.8918 19.668 33.8957 19.6687 33.9005 19.6695C33.925 19.6749 33.9488 19.6801 33.9734 19.6855C33.9964 19.6909 34.0194 19.6961 34.0423 19.703C34.0542 19.7061 34.0668 19.7091 34.0787 19.713C34.0969 19.7184 34.1151 19.7236 34.1335 19.7298C34.1692 19.7413 34.2056 19.7534 34.2405 19.7671C34.2587 19.7725 34.2762 19.7794 34.2935 19.7877C34.3117 19.7946 34.3299 19.8023 34.3474 19.8106C34.3656 19.8183 34.3832 19.8267 34.4005 19.835L30.243 23.8351C29.4979 24.5518 29.2053 25.5664 29.4598 26.5499C29.7142 27.5333 30.4672 28.298 31.4747 28.5953L32.5354 28.9078L32.5988 28.8468L33.2963 28.176L31.7538 27.7201C31.0682 27.5181 30.5553 26.9981 30.3825 26.3289C30.2097 25.6595 30.4087 24.9696 30.9152 24.4818L35.1519 20.4077L35.5649 20.8049L31.3035 24.9033C30.9286 25.2638 30.7866 25.7732 30.9238 26.2664C31.0618 26.7596 31.4494 27.1324 31.9622 27.2636L33.7632 27.7271L34.54 26.9801L32.208 26.3801C32.0494 26.3397 31.9249 26.233 31.8639 26.0896C31.8552 26.0704 31.8481 26.0506 31.8425 26.03C31.8139 25.9263 31.8195 25.8203 31.8583 25.7228C31.8845 25.6589 31.9241 25.6008 31.9763 25.5498L36.2378 21.4521L39.7731 24.8523C40.1647 25.2288 40.3803 25.7297 40.3803 26.2626L40.3805 26.2623Z" fill="#213147"/>
+<path d="M40.3336 24.3123L36.7982 20.9122L36.1252 20.2649L35.5117 19.6749C35.3508 19.5201 35.1732 19.386 34.9838 19.2746C34.5375 19.0093 34.0223 18.8674 33.484 18.8674C32.7183 18.8674 31.9985 19.154 31.4571 19.6747L26.6345 24.3123C26.0932 24.8338 25.7952 25.526 25.7952 26.2625C25.7952 26.9989 26.0932 27.6911 26.6345 28.2126L30.1707 31.6128L30.7312 31.0738L27.195 27.6728C26.8034 27.2963 26.5878 26.7954 26.5878 26.2625C26.5878 25.7295 26.8034 25.2286 27.195 24.8521L32.0177 20.2138C32.4092 19.8373 32.93 19.6299 33.4841 19.6299C33.5166 19.6299 33.5491 19.6307 33.5809 19.6322H33.5904C33.6238 19.6336 33.6569 19.6367 33.6903 19.6398C33.7172 19.6421 33.7442 19.6452 33.7704 19.649C33.7752 19.649 33.7791 19.6498 33.7831 19.6505C33.7935 19.6513 33.803 19.6528 33.8124 19.6542C33.8377 19.658 33.8624 19.6626 33.8869 19.6672C33.8917 19.668 33.8956 19.6686 33.9003 19.6695C33.9248 19.6749 33.9486 19.6801 33.9733 19.6855C33.9963 19.6909 34.0192 19.6961 34.0422 19.703C34.0541 19.7061 34.0667 19.709 34.0786 19.713C34.0968 19.7184 34.115 19.7236 34.1333 19.7298C34.1691 19.7413 34.2055 19.7534 34.2403 19.7671C34.2585 19.7725 34.276 19.7794 34.2934 19.7877C34.3116 19.7946 34.3298 19.8023 34.3473 19.8106C34.3655 19.8183 34.383 19.8267 34.4004 19.835L30.2429 23.8351C29.4977 24.5518 29.2052 25.5664 29.4596 26.5499C29.7141 27.5333 30.467 28.298 31.4746 28.5952L32.5352 28.9078L32.5987 28.8468L33.2962 28.176L31.7537 27.7201C31.0681 27.5181 30.5551 26.9981 30.3823 26.3289C30.2095 25.6595 30.4085 24.9695 30.915 24.4817L35.1518 20.4077L35.1462 20.4023L35.5648 20.8048L31.3033 24.9033C30.9285 25.2638 30.7864 25.7732 30.9237 26.2664C31.0616 26.7596 31.4493 27.1324 31.9621 27.2635L33.7631 27.7271L34.5398 26.9801L32.2078 26.3801C32.0493 26.3397 31.9248 26.233 31.8638 26.0896C31.8551 26.0704 31.8479 26.0506 31.8423 26.03C31.8137 25.9263 31.8194 25.8203 31.8581 25.7228C31.8843 25.6589 31.924 25.6008 31.9762 25.5497L36.2376 21.4521L39.773 24.8523C40.1645 25.2288 40.3802 25.7297 40.3802 26.2626C40.3802 26.7956 40.1645 27.2964 39.773 27.673L34.9503 32.3112C34.5587 32.6878 34.0379 32.8952 33.4838 32.8952C33.4513 32.8952 33.4188 32.8944 33.387 32.8929H33.3775C33.3522 32.8914 33.3275 32.8898 33.303 32.8875C33.2943 32.8867 33.2863 32.886 33.2777 32.8852C33.2532 32.8829 33.2294 32.8806 33.2047 32.8769C33.2008 32.8769 33.1967 32.8761 33.1928 32.8754C33.1824 32.8746 33.1714 32.8731 33.1603 32.8717C33.1326 32.8671 33.1055 32.8625 33.0787 32.8579C33.0747 32.8564 33.0707 32.8556 33.0676 32.8556C33.0431 32.8502 33.0185 32.845 32.9946 32.8396C32.9717 32.8342 32.9487 32.829 32.9258 32.8221C32.9099 32.8183 32.8948 32.8137 32.8798 32.8098C32.853 32.8021 32.8259 32.7938 32.7997 32.7846C32.7917 32.7815 32.7839 32.7792 32.7759 32.7763C32.7735 32.7755 32.772 32.7748 32.7696 32.774C32.7467 32.7663 32.7244 32.758 32.7023 32.7488C32.6927 32.7457 32.6832 32.7411 32.6737 32.7374C32.6412 32.7236 32.6087 32.7099 32.5762 32.6947C32.573 32.6932 32.5699 32.6916 32.5667 32.6901L31.9842 33.2503C32.4305 33.5157 32.9457 33.6575 33.484 33.6575C34.2497 33.6575 34.9695 33.3709 35.5117 32.8502L40.3336 28.2128C40.875 27.6913 41.1729 26.999 41.1729 26.2626C41.1729 25.5262 40.875 24.8339 40.3336 24.3124V24.3123Z" fill="#E3066E"/>
+<defs>
+<linearGradient id="paint0_linear_203_709" x1="24" y1="-12.0009" x2="24" y2="48" gradientUnits="userSpaceOnUse">
+<stop stop-opacity="0"/>
+<stop offset="1" stop-color="#E3066E"/>
+</linearGradient>
+<linearGradient id="paint1_linear_203_709" x1="22.4258" y1="5.69836" x2="22.4258" y2="40.1518" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.5"/>
+</linearGradient>
+</defs>
 </svg>