v1.3-beta: cleanup

namesys-eth · Jan 4, 2024 · 69e902a · 69e902a
1 parent b173c13
commit 69e902a
Show file tree

Hide file tree

Showing 10 changed files with 104 additions and 113 deletions.
diff --git a/components/Loading.tsx b/components/Loading.tsx
@@ -0,0 +1,83 @@
+import React, { useState, useEffect } from "react"
+
+interface Props {
+  height: number,
+  width: number
+}
+
+const ColorsLoadingIcon: React.FC<Props> = ({ height, width }) => {
+
+  const svgString = `
+    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 278 278" width="${width}mm" height="${height}mm">
+      <defs>
+        <path id="J" d="M135.837 210.115l14.22-81.21 14.22 53.652z"/>
+        <path id="K" d="M156.045 122.32l14.22 54.14 78.587-76.577z"/>
+        <path id="L" d="M140.577 214.749l78.587-76.821 14.47 54.628z"/>
+        <path id="M" d="M224.902 132.319l28.69-27.802-14.22 81.942z"/>
+      </defs>
+      <g transform="translate(35.88 67.413) matrix(2.193452 0 0 2.243876 -323.83206 -281.53944)" fill-rule="evenodd">
+        <use xlink:href="#J">
+        <animate attributeName="fill" values="#fca400;#fc4c00;#fc0000;#fc003f;#fca400;#fc4c00;#fc0000;#fc003f;#fca400;#fc4c00;#fc0000;" dur="3.3s" repeatCount="indefinite"/>
+        </use>
+        <use xlink:href="#M">
+        <animate attributeName="fill" values="#fca400;#fc4c00;#fc0000;#fc003f;#fca400;#fc4c00;#fc0000;#fc003f;#fca400;#fc4c00;#fc0000;" dur="3.5s" repeatCount="indefinite"/>
+        </use>
+        <use xlink:href="#K">
+        <animate attributeName="fill" values="#fca400;#fc4c00;#fc0000;#fc003f;#fca400;#fc4c00;#fc0000;#fc003f;#fca400;#fc4c00;#fc0000;" dur="3.2s" repeatCount="indefinite"/>
+        </use>
+        <use xlink:href="#L">
+        <animate attributeName="fill" values="#fca400;#fc4c00;#fc0000;#fc003f;#fca400;#fc4c00;#fc0000;#fc003f;#fca400;#fc4c00;#fc0000;" dur="3.6s" repeatCount="indefinite"/>
+        </use>
+      </g>
+    </svg>
+  `
+
+  return <div dangerouslySetInnerHTML={{ __html: svgString }} />
+}
+
+export const FlapLoadingIcon: React.FC<Props> = ({ height, width }) => {
+  const [flapStatus, setFlapStatus] = useState<Array<boolean>>([true, true, true, true])
+
+  useEffect(() => {
+    const flapInterval = setInterval(() => {
+      setFlapStatus((prevStatus) => {
+        const newStatus = [...prevStatus]
+        const indexOfFalse = newStatus.indexOf(false)
+        newStatus[indexOfFalse] = true
+        newStatus[(indexOfFalse + 1) % newStatus.length] = false
+        return newStatus
+      })
+    }, 400)
+
+    return () => clearInterval(flapInterval)
+  }, [])
+
+  const svgString = `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="30 0 130 337" width="${width}mm" height="${height}mm">
+      <path
+        d="M -29.308975,325.1522 1.8828298,142.92643 33.074634,263.31583 Z"
+        style="fill: #ff6400; stroke: none; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none;"
+        opacity="${flapStatus[0] ? 1 : 0}"
+      />
+      <path
+        d="M 15.01621,128.15136 46.208014,249.63522 218.58375,77.806709 Z"
+        style="fill: #ff6400; stroke: none; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none;"
+        opacity="${flapStatus[1] ? 1 : 0}"
+      />
+      <path
+        d="M -18.911707,335.54949 153.46403,163.17373 185.20306,285.75203 Z"
+        style="fill: #ff6400; stroke: none; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none;"
+        opacity="${flapStatus[3] ? 1 : 0}"
+      />
+      <path
+        d="M 166.05021,150.58758 228.98104,88.203976 197.78924,272.07141 Z"
+        style="fill: #ff6400; stroke: none; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 4; stroke-dasharray: none;"
+        opacity="${flapStatus[2] ? 1 : 0}"
+      />
+    </svg>
+  `
+
+  return <div dangerouslySetInnerHTML={{ __html: svgString }} />
+}
+
+export default ColorsLoadingIcon
diff --git a/components/LoadingColors.tsx b/components/LoadingColors.tsx
diff --git a/components/LoadingLeaves.tsx b/components/LoadingLeaves.tsx
diff --git a/components/Preview.tsx b/components/Preview.tsx
@@ -12,8 +12,8 @@ import Gateway from '../components/Gateway'
 import Options from '../components/Options'
 import Error from '../components/Error'
 import Info from '../components/Info'
-import Gas from '../components/Gas'
-import Loading from '../components/LoadingColors'
+import Savings from '../components/WrapUp'
+import Loading from './Loading'
 import Success from '../components/Success'
 import Confirm from '../components/Confirm'
 import * as constants from '../utils/constants'
@@ -3432,7 +3432,7 @@ const Preview: React.FC<ModalProps> = ({ show, onClose, _ENS_, chain, handlePare
           >
             {success}
           </Success>
-          <Gas
+          <Savings
             color={'lime'}
             icon={'free_breakfast'}
             onClose={() => {
@@ -3442,7 +3442,7 @@ const Preview: React.FC<ModalProps> = ({ show, onClose, _ENS_, chain, handlePare
             show={gasModal}
           >
             {gas}
-          </Gas>
+          </Savings>
           <Info
             handleTrigger={handleInfoTrigger}
             handleModalData={handleInfoModalData}

diff --git a/components/Stealth.tsx b/components/Stealth.tsx
@@ -10,7 +10,7 @@ import Help from '../components/Help'
 import Salt from '../components/Salt'
 import PayTo from '../components/PayTo'
 import Error from '../components/Error'
-import Loading from '../components/LoadingColors'
+import Loading from './Loading'
 import Success from '../components/Success'
 import * as constants from '../utils/constants'
 import { KEYGEN } from '../utils/keygen'

diff --git a/components/Ticker.tsx b/components/Ticker.tsx
@@ -5,7 +5,7 @@ interface Props {
   mobile: boolean
 }
 
-const MyComponent: React.FC<Props> = ({ variable, mobile }) => {
+const GasTicker: React.FC<Props> = ({ variable, mobile }) => {
   return (
     <button
       className="button-tiny"
@@ -21,14 +21,14 @@ const MyComponent: React.FC<Props> = ({ variable, mobile }) => {
       data-tooltip={'Total Gas Saved by Off-chain Records'}
     >
       <div
-        className="material-icons smol"
+        className="material-icons-round smol"
         style={{
-          color: 'lightgreen',
+          color: 'lime',
           fontSize: mobile ? '18px' : '22px',
           marginRight: '5px'
         }}
       >
-        {'local_gas_station'}
+        {'energy_savings_leaf'}
       </div>
       <div>
         <span
@@ -55,4 +55,4 @@ const MyComponent: React.FC<Props> = ({ variable, mobile }) => {
   );
 };
 
-export default MyComponent;
+export default GasTicker;
diff --git a/components/Gas.tsx → components/WrapUp.tsx b/components/Gas.tsx → components/WrapUp.tsx
@@ -13,7 +13,7 @@ function sumValues(obj: { [key: string]: number }): number {
   return total;
 }
 
-const Gas = ({ icon, color, show, onClose, children }) => {
+const Savings = ({ icon, color, show, onClose, children }) => {
   const [browser, setBrowser] = React.useState(false);
   React.useEffect(() => {
     setBrowser(true);
@@ -49,7 +49,7 @@ const Gas = ({ icon, color, show, onClose, children }) => {
                 color: color
               }}
             >
-              { 'verified' }
+              { 'wind_power' }
             </span>
           </StyledModalTitle>}
         <StyledModalBody>
@@ -82,7 +82,7 @@ const Gas = ({ icon, color, show, onClose, children }) => {
             >
               <div>Your</div>&nbsp;
               <div
-                className="material-icons"
+                className="material-icons-round"
                 style={{
                   marginBottom: '3px',
                   fontSize: '28px',
@@ -194,4 +194,4 @@ const StyledModalOverlay = styled.div`
   background-color: rgba(0, 0, 0, 1);
 `;
 
-export default Gas;
+export default Savings;
diff --git a/pages/account.tsx b/pages/account.tsx
@@ -24,7 +24,7 @@ import Error from '../components/Error'
 import Gateway from '../components/Gateway'
 import List from '../components/List'
 import Ticker from '../components/Ticker'
-import Loading from '../components/LoadingColors'
+import Loading from '../components/Loading'
 import SearchBox from '../components/SearchBox'
 import Confirm from '../components/Confirm'
 import Export from '../components/Export'

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -5,8 +5,7 @@ import { ConnectButton } from '@rainbow-me/rainbowkit'
 import type { NextPage } from 'next'
 import {
   useAccount,
-  useContractRead,
-  useNetwork
+  useContractRead
 } from 'wagmi'
 import { ethers } from 'ethers'
 import { isMobile } from 'react-device-detect'
@@ -17,8 +16,8 @@ import Stealth from '../components/Stealth'
 import Faq from '../components/FAQ'
 import Error from '../components/Error'
 import List from '../components/List'
-import Ticker from '../components/Ticker'
-import Loading from '../components/LoadingColors'
+import GasTicker from '../components/Ticker'
+import Loading from '../components/Loading'
 import BigSearch from '../components/BigSearch'
 import * as constants from '../utils/constants'
 import * as verifier from '../utils/verifier'
@@ -620,7 +619,7 @@ const Home: NextPage = () => {
                 marginTop: !isMobile ? '0px' : '-25px'
               }}
             >
-              <Ticker variable={savings} mobile={isMobile} />
+              <GasTicker variable={savings} mobile={isMobile} />
             </div>
           </div>
           <div
@@ -858,7 +857,7 @@ const Home: NextPage = () => {
                 </span>
                 <span
                   style={{
-                    color: 'white',
+                    color: 'skyblue',
                     fontWeight: '700',
                     fontSize: isMobile ? '13px' : '20px'
                   }}

diff --git a/public/sw.js b/public/sw.js