Merge pull request #78 from zkfairdomains/test

Test

src/assets/styles/style.css

@@ -135,7 +135,7 @@ footer {
 }
 body {
     margin: 0;
-    font: 400 16px / var(--bs-body-line-height) bigsd, Arial, Helvetica, sans-serif !important;
+    font: 400 16px / var(--bs-body-line-height) rbtm, Arial, Helvetica, sans-serif !important;
     text-align: var(--bs-body-text-align);
     background: #000 !important;
     -webkit-text-size-adjust: 100%;
@@ -353,7 +353,7 @@ label {
 button {
     min-width: 100px;
     border-radius: 4px;
-    font-size: 1.625rem !important;
+    font-size: 16px !important;
     transition: 0.3s;
     -webkit-transition: 0.3s;
 }
@@ -5385,26 +5385,26 @@ progress {
     }
 }
 @font-face {
-    font-family: bigsd;
-    src: url(../fonts/BigShouldersDisplay-Light.ttf) format("truetype");
+    font-family: rbtm;
+    src: url(../fonts/RobotoMono-Light.ttf) format("truetype");
     font-weight: 300;
     font-style: normal;
 }
 @font-face {
-    font-family: bigsd;
-    src: url(../fonts/BigShouldersDisplay-Regular.ttf) format("truetype");
+    font-family: rbtm;
+    src: url(../fonts/RobotoMono-Regular.ttf) format("truetype");
     font-weight: 400;
     font-style: normal;
 }
 @font-face {
-    font-family: bigsd;
-    src: url(../fonts/BigShouldersDisplay-Medium.ttf) format("truetype");
+    font-family: rbtm;
+    src: url(../fonts/RobotoMono-Medium.ttf) format("truetype");
     font-weight: 500;
     font-style: normal;
 }
 @font-face {
-    font-family: bigsd;
-    src: url(../fonts/BigShouldersDisplay-Bold.ttf) format("truetype");
+    font-family: rbtm;
+    src: url(../fonts/RobotoMono-Bold.ttf) format("truetype");
     font-weight: 700;
     font-style: normal;
 }
@@ -5748,7 +5748,8 @@ header h1 span{
         max-width: 100%;
         width: 100%;
     }
-    header .wallet-connect{margin-right: 20px;min-width: 150px;font-size: 18px !important;}
+    header .wallet-connect{margin-right: 10px;min-width: 140px;font-size: 13px !important;}
+    header .wallet-connect img{display: none;}
 }
 header .container-fluid > div,
 header .container-lg > div,
@@ -5810,7 +5811,7 @@ header .container-md > div nav ul li a,
 header .container-sm > div nav ul li a,
 header .container-xl > div nav ul li a,
 header .container-xxl > div nav ul li a {
-    font-size: 1.375rem;
+    font-size: 14px;
     color: #fff;
     text-decoration: none;
 }
@@ -5964,7 +5965,7 @@ header .mm.active span:last-child {
     border-radius: 4px;
     border: 0;
     display: flex;
-    font-size: 1.375rem !important;
+    font-size: 16px !important;
     transition: 0.3s;
     min-width: 190px;
     justify-content: center;
@@ -6027,7 +6028,7 @@ footer .footNav ul li {
     position: relative;
 }
 footer .footNav ul li a {
-    font-size: 1.375rem;
+    font-size: 14px;
     color: #fff;
     text-decoration: none;
     transition: 0.3s;
@@ -6079,8 +6080,8 @@ main section .banner {
     }
 }
 main section .banner h2 {
-    line-height: 4.0625rem;
-    font-size: 3.5rem;
+    line-height: calc(1.325rem + 1.4vw);
+    font-size: calc(1.325rem + 1.1vw);
     color: #fff;
     margin-bottom: 30px;
 }
@@ -6090,14 +6091,14 @@ main section .banner h2 span {
 }
 @media (max-width: 768px) {
     main section .banner h2 {
-        font-size: 36px;
-        line-height: 46px;
+        font-size: 24px;
+        line-height: 32px;
     }
     main section .banner h2 br {
         display: none;
     }
     main section .banner h2 span {
-        font-size: 40px;
+        font-size: 28px;
     }
 }
 main section .banner-bg {
@@ -6132,7 +6133,7 @@ main section .banner-bg {
 .search-content form input {
     width: 100%;
     border: none;
-    font-size: 1.875rem;
+    font-size: 18px;
 }
 @media (max-width: 768px) {
     .search-content form input {
@@ -6627,7 +6628,7 @@ ul {
 .customCounter .countplus:hover{background: #20c997;color:#fff;border-color: #fff;}
 .customCounter button:hover::after,.customCounter button:hover::before{background-color: #fff;}
 .customCounter div{height: 30px;margin: 0 15px;display: flex;justify-content: center;align-items: center;border-radius: 4px;border:1px solid #000;padding: 7px;background-color: #fff;font-size: 20px;color:#000;}
-button{border-width: 1px;font-family:bigsd, Arial, Helvetica, sans-serif !important;font-size: 18px;}
+button{border-width: 1px;font-family:rbtm, Arial, Helvetica, sans-serif !important;font-size: 18px;}
  table {
     width: 100%;
     border-collapse: collapse;
@@ -6652,9 +6653,9 @@ button{border-width: 1px;font-family:bigsd, Arial, Helvetica, sans-serif !import
   }
 
  table thead td, table thead th{font-size: 20px;}
- table tr td,table tr th{color:#fff;border:1px solid #fff;padding:10px;background:rgba(255,255,255,.2);font-family:'Arial';font-size:14px}
+ table tr td,table tr th{color:#fff;border:1px solid #fff;padding:10px;background:rgba(255,255,255,.2);font-family:'Arial';font-size:18px}
  table tr th{font-weight:bold;}
- table tr td button{height: 30px;font-size: 16px !important;padding: 0;}
+ table tr td button{height: 30px;font-size: 18px !important;padding: 0;}
 
  table.tabletype2 td,table.tabletype2 th{
     border: none;
@@ -6682,6 +6683,22 @@ button{border-width: 1px;font-family:bigsd, Arial, Helvetica, sans-serif !import
   .modal table{margin-bottom: 20px;}
   .modal .btn-close{max-width: 40px;max-height: 40px ;}
 
+
+  @media(max-width:768px){
+    .modal table{min-width: auto !important;}
+    .modal table,.modal table tr, .modal table th{display: block;font-size: 20px;}
+    .modal table thead{display: none;}
+      .modal table td{display:flex;flex-direction:column;justify-content:center;text-align: center;font-size: 20px}
+    .modal table tr:nth-child(odd){background:rgba(0,0,0,.05);}
+    .modal table tr{width:100%;}
+    .modal table tbody{display:block;}
+    .modal table tr td:first-child::before{content:"Name";display:block;margin-bottom: 6px;font-size: 24px;}
+    .modal table tr td:nth-child(2):before{content:"Expires";display:block;margin-bottom: 6px;font-size: 24px;}
+    .modal table tr td:last-child:before{content:"Extend";display:block;margin-bottom: 6px;font-size: 24px;}
+    .modal .tabContent{overflow-x: hidden !important;}
+    .modal .customCounter{margin-bottom:10px}
+}
+
 .notFoundPage{display: flex;align-items: center;justify-content: center;flex-direction: column;}
 .notFoundPage *{color:#fff;}
 .notFoundPage  h2{font-size: 11vw;text-align: center;}

src/components/Register.js

@@ -13,6 +13,7 @@ import { GET_DOMAIN } from "../graphql/Domain";
 import { CountdownCircleTimer } from 'react-countdown-circle-timer'
 import { getDateSimple, getExpires, getOneYearDuration, getTimeAgo, getTokenId, obscureLabel, obscureName } from "../helpers/String";
 import { getBalance } from '@wagmi/core'
+import { goerli, zkFair } from 'wagmi/chains'
 
 class Register extends Component {
 
@@ -71,7 +72,8 @@ class Register extends Component {
                 address: process.env.REACT_APP_ZKFREGISTERCONTROLLER,
                 functionName: "makeCommitment",
                 args: [ this.props.name, this.props.owner, this.getDuration(), secret, this.resolver, this.data, this.reverseRecord ],
-                account: this.props.owner
+                account: this.props.owner,
+                chainId: process.env.REACT_APP_NODE_ENV === "production" ? zkFair.id: goerli.id
             });
 
             console.log("make: "+ _commitment)
@@ -88,7 +90,8 @@ class Register extends Component {
                 address: process.env.REACT_APP_ZKFREGISTERCONTROLLER,
                 functionName: "commitments",
                 args: [ _commitment ],
-                account: this.props.owner
+                account: this.props.owner,
+                chainId: process.env.REACT_APP_NODE_ENV === "production" ? zkFair.id: goerli.id
             });
 
             console.log("Result: "+ result  );
@@ -138,9 +141,7 @@ class Register extends Component {
                 functionName: "commit",
                 args: [ this.state.commitment ],
                 account: this.props.owner,
-                onError: (e)=> { 
-                    toast.error(e.message);
-                }
+                chainId: process.env.REACT_APP_NODE_ENV === "production" ? zkFair.id: goerli.id
             });
 
 
@@ -182,7 +183,8 @@ class Register extends Component {
                 functionName: "register",
                 args: [ this.props.name, this.props.owner, this.getDuration(), this.state.secret, this.resolver, this.data, this.reverseRecord ],
                 account: this.props.owner,
-                value: this.state.price
+                value: this.state.price,
+                chainId: process.env.REACT_APP_NODE_ENV === "production" ? zkFair.id: goerli.id
             });
 
             toast.success("Your transaction has been sent.");
@@ -215,7 +217,8 @@ class Register extends Component {
                 address: process.env.REACT_APP_ZKFREGISTERCONTROLLER,
                 functionName: 'available',
                 args: [this.props.name],
-                account: this.props.owner
+                account: this.props.owner,
+                chainId: process.env.REACT_APP_NODE_ENV === "production" ? zkFair.id: goerli.id
             });
 
             this.setState({ isAvailablePending: false });
@@ -273,7 +276,8 @@ class Register extends Component {
                 address: process.env.REACT_APP_ZKFREGISTERCONTROLLER,
                 functionName: 'rentPrice',
                 args: [this.props.name, this.getDuration()],
-                account: this.props.owner
+                account: this.props.owner,
+                chainId: process.env.REACT_APP_NODE_ENV === "production" ? zkFair.id: goerli.id
             });
 
             console.log(_price)

src/components/RenewModal.js

@@ -10,6 +10,7 @@ import { Modal } from "react-bootstrap";
 import {  } from "@apollo/client";
 import { getExpires, getTimeAgo, obscureName } from "../helpers/String";
 import { getBalance } from '@wagmi/core'
+import { goerli, zkFair } from 'wagmi/chains'
 
 class RenewModal extends Component {
 
@@ -55,7 +56,8 @@ class RenewModal extends Component {
                 functionName: "renew",
                 args: [ this.props.domain.labelName, this.getDuration() ],
                 account: this.props.owner,
-                value: this.state.price
+                value: this.state.price,
+                chainId: process.env.REACT_APP_NODE_ENV === "production" ? zkFair.id: goerli.id
             });
 
             toast.success("Your transaction has been sent.");
@@ -91,7 +93,7 @@ class RenewModal extends Component {
     }
 
     async handlePrice() {
-        console.log("handlePrice")
+        console.log("handlePrice Renew")
         let _price = false; 
 
         try { 
@@ -103,7 +105,8 @@ class RenewModal extends Component {
                 address: process.env.REACT_APP_ZKFREGISTERCONTROLLER,
                 functionName: 'rentPrice',
                 args: [this.props.domain.labelName, this.getDuration()],
-                account: this.props.owner
+                account: this.props.owner,
+                chainId: process.env.REACT_APP_NODE_ENV === "production" ? zkFair.id: goerli.id
             });
 
             console.log(_price) 
@@ -124,6 +127,7 @@ class RenewModal extends Component {
 
             const balance = await getBalance(wagmiConfig, {
                 address: this.props.owner, 
+                chainId: process.env.REACT_APP_NODE_ENV === "production" ? zkFair.id: goerli.id
             });
 
             this.setState({ isGettingBalance : false, balance: balance.value });

src/partials/Header.js

@@ -11,7 +11,14 @@ import { Dropdown,NavDropdown } from "react-bootstrap";
 function Header() {
 
     //const menuRef = useRef();
-
+    function closeMobileMenu(e){
+        var menuIcon = document.getElementsByClassName("mm");
+        var bodytag = document.getElementsByTagName("body")
+        var controlsContent = document.getElementsByClassName('controls-content');
+        bodytag[0].classList.remove('menuOn');
+        menuIcon[0].classList.remove('active');
+        controlsContent[0].classList.remove('active');
+    }
     function openMobilMenu(e) {
 
         var menuIcon = document.getElementsByClassName("mm");
@@ -41,7 +48,7 @@ function Header() {
             <div className="controls-content">
                 <nav>
                     <ul className="d-flex">
-                        <li><Link to="/account">My Domains</Link></li>
+                        <li><Link onClick={(e) => closeMobileMenu(e)} to="/account">My Domains</Link></li>
                     </ul>
                 </nav>
             </div>