Transaction: 8N6jwck...5ZSL

{ "data": { "huunhanz.near": { "widget": { "headerSwap": { "": "State.init({\r\n color: \"#31cf34\",\r\n image1:\r\n \"https://bafkreidzrna3q6csqykuvzih6yywrijmdg4fn4tb53azjmmjuobfus4v2e.ipfs.nftstorage.link/\",\r\n image2:\r\n \"https://bafybeibuj22kfgmevy3os6akrswxosjyjv5q6tecyv5jsfpw7iccajp5qa.ipfs.nftstorage.link/\",\r\n});\r\n\r\nconst [dropdownVisible, setDropdownVisible] = useState(false);\r\nconst [visible, setVisible] = useState(true);\r\n\r\nconst toggleDropdown = () => {\r\n setDropdownVisible(!dropdownVisible);\r\n};\r\n\r\nconst handlClick = () => {\r\n setVisible(!visible);\r\n};\r\n\r\nconst Header = styled.div`\r\n .header{\r\n background-color:${state.color};\r\n }\r\n \r\n .py-3{\r\n padding-bottom: 1rem!important;\r\n padding-top: 1rem!important;\r\n }\r\n \r\n .container {\r\n max-width: 1140px;\r\n --bs-gutter-x: 1.5rem;\r\n --bs-gutter-y: 0;\r\n margin-left: auto;\r\n margin-right: auto;\r\n padding-left: calc(var(--bs-gutter-x)*.5);\r\n padding-right: calc(var(--bs-gutter-x)*.5);\r\n width: 100%;\r\n }\r\n \r\n .position-relative{\r\n position: relative!important;\r\n }\r\n \r\n header {\r\n display: block;\r\n }\r\n \r\n \r\n .justify-content-md-between{\r\n justify-content: space-between!important;\r\n }\r\n \r\n .align-items-center {\r\n align-items: center!important;\r\n }\r\n \r\n .col-lg-3 {\r\n flex: 0 0 auto;\r\n width: 25%;\r\n }\r\n \r\n .col-md-4 {\r\n flex: 0 0 auto;\r\n width: 33.33333333%;\r\n }\r\n \r\n .col-12 {\r\n flex: 0 0 auto;\r\n width: 100%;\r\n }\r\n \r\n .row {\r\n --bs-gutter-x: 1.5rem;\r\n --bs-gutter-y: 0;\r\n display: flex;\r\n flex-wrap: wrap;\r\n margin-left: calc(var(--bs-gutter-x)*-.5);\r\n margin-right: calc(var(--bs-gutter-x)*-.5);\r\n margin-top: calc(var(--bs-gutter-y)*-1);\r\n }\r\n \r\n .text-decoration-none {\r\n text-decoration: none!important;\r\n }\r\n \r\n .d-xl-none {\r\n display: none!important;\r\n }\r\n \r\n .burger {\r\n color: #fff;\r\n cursor: pointer;\r\n position: absolute;\r\n right: 10px;\r\n z-index: 3;\r\n }\r\n \r\n .burger-line {\r\n background-color: #fff;\r\n border-radius: 4px;\r\n display: block;\r\n height: 4px;\r\n margin-bottom: 3px;\r\n transition: all .3s ease-in-out;\r\n width: 30px;\r\n }\r\n \r\n .col-md-8 {\r\n flex: 0 0 auto;\r\n width: 66.66666667%;\r\n }\r\n \r\n .overlay {\r\n background-color: #000;\r\n height: 100%;\r\n left: 0;\r\n opacity: .6;\r\n position: fixed;\r\n top: 0;\r\n width: 100%;\r\n z-index: 2;\r\n }\r\n \r\n .d-none {\r\n display: none!important;\r\n }\r\n \r\n .navbar {\r\n background-color: transparent;\r\n height: auto;\r\n position: relative;\r\n right: auto;\r\n top: auto;\r\n width: 100%;\r\n }\r\n \r\n .justify-content-center {\r\n justify-content: center!important;\r\n }\r\n \r\n .navbar-nav {\r\n --bs-nav-link-padding-x: 0;\r\n --bs-nav-link-padding-y: 0.5rem;\r\n --bs-nav-link-font-weight: ;\r\n --bs-nav-link-color: var(--bs-navbar-color);\r\n --bs-nav-link-hover-color: var(--bs-navbar-hover-color);\r\n --bs-nav-link-disabled-color: var(--bs-navbar-disabled-color);\r\n display: flex;\r\n flex-direction: column;\r\n list-style: none;\r\n margin-bottom: 0;\r\n padding-left: 0;\r\n }\r\n \r\n ul {\r\n margin-bottom: 1rem;\r\n margin-top: 0;\r\n }\r\n \r\n .p-1 {\r\n padding: 0.25rem!important;\r\n }\r\n \r\n li {\r\n display: list-item;\r\n text-align: -webkit-match-parent;\r\n }\r\n \r\n .nav-link {\r\n color: #fff;\r\n font-family: Lakki Reddy,cursive;\r\n font-size: 1rem;\r\n }\r\n \r\n .col-lg-9 {\r\n flex: 0 0 auto;\r\n width: 75%;\r\n }\r\n \r\n .nav-link span {\r\n text-shadow: 0 4px 4px #00000040;\r\n }\r\n \r\n .nav-link {\r\n font-size: 1.5rem;\r\n }\r\n \r\n .dropdown-menu {\r\n border-radius: 10px; \r\n position: absolute;\r\n top: 75px;\r\n left: 24px;\r\n z-index: 1000;\r\n min-width: 10rem;\r\n padding: 0.5rem 0;\r\n margin: 0.125rem 0 0;\r\n font-size: 1rem;\r\n color: #212529;\r\n text-align: left;\r\n list-style: none;\r\n background-color: #fff;\r\n background-clip: padding-box;\r\n border: 1px solid rgba(0, 0, 0, 0.15);\r\n border: 1px solid #31cf34;\r\n }\r\n \r\n .dropdown-menu.show {\r\n display: block;\r\n }\r\n \r\n .dropdown li {\r\n margin-bottom: 0.7em;\r\n }\r\n \r\n .p-lg-3 {\r\n padding: 1rem!important;\r\n }\r\n \r\n .dropdown-item {\r\n font-size: 1.4rem;\r\n color: ${state.color};\r\n text-shadow: 0 3px 6px #00000040;\r\n font-family: Lakki Reddy,cursive;\r\n }\r\n @media (max-width: 768px) { \r\n .logo{\r\n display:flex;\r\n flex-direction:row;\r\n align-items:start;\r\n justify-content:start;\r\n }\r\n }\r\n \r\n \r\n`;\r\nconsole.log(visible);\r\nreturn (\r\n <Header>\r\n <div class=\"header py-3 position-relative\" id=\"header\">\r\n <div class=\"container\">\r\n <span\r\n onClick={handlClick}\r\n class=\"d-x1-none burger position-absolute top-50\"\r\n id=\"burger\"\r\n >\r\n <span class=\"burger-line\"></span>\r\n <span class=\"burger-line\"></span>\r\n <span class=\"burger-line\"></span>\r\n <span>Menu</span>\r\n </span>\r\n <div class=\"row justify-content-center justify-content-md-between align-items-center\">\r\n <div class=\"col-lg-3 justify-content-start align-items-start\">\r\n <a class=\"text-decoration-none logo\">\r\n <img src={state.image2} alt=\"Icon\" width=\"70\" height=\"70\" />\r\n <img src={state.image1} alt=\"Logo\" width=\"141\" height=\"60\" />\r\n </a>\r\n </div>\r\n <div class={`col-lg-9 ${visible ? \"d-none\" : \"d-block\"}`}>\r\n <div class=\"navbar justify-content-center\" id=\"navbar\">\r\n <ul class=\"navbar-nav d-xl-flex flex-xl-row justify-content-md-between\">\r\n <li class=\"nav-item p-1 p-lg-3\">\r\n <a class=\"nav-link close-menu\" aria-current=\"page\" href=\"/\">\r\n <span>home</span>\r\n </a>\r\n </li>\r\n <li class=\"nav-item p-1 p-lg-3\">\r\n <a class=\"nav-link close-menu\" href=\"/#about\">\r\n <span>about</span>\r\n </a>\r\n </li>\r\n <li class=\"nav-item p-1 p-lg-3\">\r\n <a class=\"nav-link close-menu\" href=\"/#how\">\r\n <span>how to buy</span>\r\n </a>\r\n </li>\r\n <li class=\"nav-item p-1 p-lg-3 position-relative\">\r\n <a\r\n class={`nav-link dropdown-toggle ${\r\n dropdownVisible ? \"show\" : \"\"\r\n }`}\r\n href=\"#\"\r\n id=\"toggle\"\r\n onClick={toggleDropdown}\r\n >\r\n <span>bridge to near</span>\r\n </a>\r\n <ul\r\n class={`dropdown-menu ${dropdownVisible ? \"show\" : \"\"}`}\r\n id=\"dropdown\"\r\n >\r\n <li>\r\n <a class=\"dropdown-item\" href=\"/ethereum\">\r\n from <span class=\"text-capitalize\">ethereum</span>\r\n </a>\r\n </li>\r\n <li>\r\n <a class=\"dropdown-item\" href=\"/solana\">\r\n from <span class=\"text-capitalize\">solana</span>\r\n </a>\r\n </li>\r\n <li>\r\n <a class=\"dropdown-item\" href=\"/evm\">\r\n from <span class=\"text-capitalize\">arbitrum</span>\r\n </a>\r\n </li>\r\n <li>\r\n <a class=\"dropdown-item\" href=\"/evm\">\r\n from <span class=\"text-capitalize\">optimism</span>\r\n </a>\r\n </li>\r\n <li>\r\n <a class=\"dropdown-item\" href=\"/evm\">\r\n from <span class=\"text-capitalize\">polygon</span>\r\n </a>\r\n </li>\r\n <li>\r\n <a class=\"dropdown-item\" href=\"/evm\">\r\n from <span class=\"text-capitalize\">fantom</span>\r\n </a>\r\n </li>\r\n <li>\r\n <a class=\"dropdown-item\" href=\"/evm\">\r\n from <span class=\"text-capitalize\">avalanche</span>\r\n </a>\r\n </li>\r\n <li>\r\n <a class=\"dropdown-item\" href=\"/evm\">\r\n from <span class=\"text-capitalize\">BSC</span>\r\n </a>\r\n </li>\r\n <li>\r\n <a class=\"dropdown-item\" href=\"/suit-aptos\">\r\n from <span class=\"text-capitalize\">sui</span>\r\n </a>\r\n </li>\r\n <li>\r\n <a class=\"dropdown-item\" href=\"/suit-aptos\">\r\n from <span class=\"text-capitalize\">aptos</span>\r\n </a>\r\n </li>\r\n </ul>\r\n </li>\r\n <li class=\"nav-item p-1 p-lg-3\">\r\n <a class=\"nav-link close-menu\" href=\"/#token\">\r\n <span>tokenomic</span>\r\n </a>\r\n </li>\r\n <li class=\"nav-item p-1 p-lg-3\">\r\n <a class=\"nav-link close-menu\" href=\"/#roadmap\">\r\n <span>roadmap</span>\r\n </a>\r\n </li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"overlay d-none\" id=\"overlay\"></div>\r\n </Header>\r\n);\r\n" } } } } }