feat: add gem.xyz link

src/App.css

@@ -24,17 +24,17 @@ code {
 }
 
 .App-body {
-  height: 95%;
+  height: 92%;
-  height: 95vh;
+  height: 92vh;
-  height: calc(var(--vh, 1vh) * 95);
+  height: calc(var(--vh, 1vh) * 92);
   display: flex;
   align-items: center;
 }
 
 .App-footer {
-  height: 5%;
+  height: 8%;
-  height: 5vh;
+  height: 8vh;
-  height: calc(var(--vh, 1vh) * 5);
+  height: calc(var(--vh, 1vh) * 8);
 }
 
 .card-row {

src/App.js

@@ -16,6 +16,7 @@ import EnsIcon from "./asset/image/ens-icon.jpeg";
 import GithubIcon from "./asset/image/github-icon.svg";
 import TwitterIcon from "./asset/image/twitter-icon.svg";
 import WebsiteIcon from "./asset/image/website-icon.png";
+import GemXyzIcon from "./asset/image/gemxyz-icon.jpeg";
 
 import { EnsContract, hexToDec, textRecordToUrl } from "./utility";
 
@@ -41,8 +42,10 @@ function App() {
   });
 
   const ensImages = {};
-  const donationLink =
+  // const donationLink =
-    "https://heliowallet.com/ethereum-donation?address=0x2652CBE035CF346A4E085D4C2Fb30F2B5Abf3d3d&amount=0.01&accessWallet=1&qrCode=1&ethBalance=1";
+  //   "https://heliowallet.com/ethereum-donation?address=0x2652CBE035CF346A4E085D4C2Fb30F2B5Abf3d3d&amount=0.01&accessWallet=1&qrCode=1&ethBalance=1";
+  const gemxyzLink =
+    "https://www.gem.xyz/collection/ens/?filters=%7B%22custom%22:%5B%2224h%22%5D%7D";
 
   useEffect(() => {
     setSeconds(getSeconds());
@@ -323,10 +326,10 @@ function App() {
       <div className="App-footer container">
         <div className="row">
           <div className="col">
-            Donate to the project:&nbsp;
+            {renderIcon(GemXyzIcon, gemxyzLink, "Gem.xyz", {
-            <a href={`${donationLink}`} target="_blank" rel="noreferrer">
+              borderRadius: "50%",
-              04h59.eth
+              boxShadow: "0 1px 15px rgba(0, 0, 0, 0.225)",
-            </a>
+            })}
           </div>
         </div>
       </div>