Randomize the wallets data (#178)

* Randomize the wallets data * Update circle's url
solana-foundation · Jan 30, 2025 · 9dadf65 · 9dadf65
1 parent 50830cf
commit 9dadf65
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 16 deletions.
diff --git a/src/components/wallets/WalletCard.jsx b/src/components/wallets/WalletCard.jsx
@@ -13,13 +13,19 @@ const WalletCard = ({ index, walletImage, name, body, websiteUrl }) => {
         height={60}
         alt={name}
         className={styles["wallet-card-icon"]}
+        suppressHydrationWarning
       ></Image>
-      <h3 className={styles["wallet-card-title"]}>{name}</h3>
-      <p className={styles["wallet-card-body"]}>{body}</p>
+      <h3 className={styles["wallet-card-title"]} suppressHydrationWarning>
+        {name}
+      </h3>
+      <p className={styles["wallet-card-body"]} suppressHydrationWarning>
+        {body}
+      </p>
       <a
         href={websiteUrl}
         className={styles["wallet-card-view-details"]}
         target="_blank"
+        suppressHydrationWarning
       >
         {t("wallets.card.view-details")}
         <span>

diff --git a/src/components/wallets/Wallets.jsx b/src/components/wallets/Wallets.jsx
@@ -12,18 +12,20 @@ const Wallets = ({ walletData, resetWalletsAndFilters }) => {
         <h2 className={styles["wallets-title"]}>{t("wallets.grid.title")}</h2>
         <div className={styles["wallets-grid"]}>
           {walletData.length ? (
-            walletData.map((wallet, key) => {
-              return (
-                <WalletCard
-                  index={key}
-                  name={wallet.name}
-                  walletImage={wallet.icon.src}
-                  body={wallet.body}
-                  websiteUrl={wallet.website}
-                  key={key}
-                />
-              );
-            })
+            walletData
+              .sort(() => Math.random() - 0.5)
+              .map((wallet, key) => {
+                return (
+                  <WalletCard
+                    index={key}
+                    name={wallet.name}
+                    walletImage={wallet.icon.src}
+                    body={wallet.body}
+                    websiteUrl={wallet.website}
+                    key={key}
+                  />
+                );
+              })
           ) : (
             <div className={styles["wallets-no-results-container"]}>
               <p className={styles["wallets-no-results-found"]}>

diff --git a/src/data/wallets/wallet-data.js b/src/data/wallets/wallet-data.js
@@ -295,8 +295,7 @@ export const walletData = [
   {
     name: "Circle",
     body: "Circle: Built for Developers — Create the next revolutionary app powered by Circle digital currency and Web3 wallets.",
-    website:
-      "https://www.circle.com/en/?utm_term=circle%20crypto&utm_campaign=ENV+-+G+-+Search+-+Brand+-+Circle+Brand+-+BM&utm_source=adwords&utm_medium=ppc&hsa_acc=2894751369&hsa_cam=21275683630&hsa_grp=161485174945&hsa_ad=698997839918&hsa_src=g&hsa_tgt=kwd-406962479483&hsa_kw=circle%20crypto&hsa_mt=b&hsa_net=adwords&hsa_ver=3&gad_source=1&gclid=Cj0KCQjwt4a2BhD6ARIsALgH7Dr8b1BWSEQNruIubu5OfrHeciikyVpAAGh2Y9QlJJ9f3QJzoBcW7sMaAjCdEALw_wcB",
+    website: "https://www.circle.com/programmable-wallets",
     additionalInfo:
       "Non-Custodial/Self Custodial • Token Extentions • Hold NFTs • Gas abstraction",
     icon: circleIcon,