fix: social wallet logo modal display (#113)

liftedinit · Dec 4, 2024 · 4fa85a8 · 4fa85a8
1 parent 2f624b1
commit 4fa85a8
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 9 deletions.
diff --git a/components/react/authSignerModal.tsx b/components/react/authSignerModal.tsx
@@ -6,6 +6,7 @@ import { TxBody, AuthInfo } from '@liftedinit/manifestjs/dist/codegen/cosmos/tx/
 import { decodePubkey } from '@cosmjs/proto-signing';
 import { useWallet, useChain } from '@cosmos-kit/react';
 import Image from 'next/image';
+import { getRealLogo } from '@/utils';
 
 type DisplayDataToSignProps = {
   data: SignData;
@@ -137,7 +138,7 @@ const SignModal = ({
       <div className="modal-box max-w-lg w-full dark:bg-[#1D192D] bg-[#FFFFFF] rounded-lg shadow-xl">
         <div className="flex justify-between items-center pb-4">
           <div className="flex items-center gap-3">
-            <img src={walletIconString} alt="Wallet type logo" className="w-8 h-8" />
+            <img src={getRealLogo(walletIconString)} alt="Wallet type logo" className="w-8 h-8" />
             <h3 className="text-xl font-semibold">{walletName?.toString()} Direct Signer</h3>
           </div>
           <button className="btn btn-sm btn-circle btn-ghost" onClick={onClose}>

diff --git a/components/react/views/Connected.tsx b/components/react/views/Connected.tsx
@@ -5,7 +5,7 @@ import { useState } from 'react';
 import ProfileAvatar from '@/utils/identicon';
 import { useBalance } from '@/hooks/useQueries';
 import { CopyIcon } from '@/components/icons';
-import { shiftDigits, truncateString } from '@/utils';
+import { getRealLogo, shiftDigits, truncateString } from '@/utils';
 import Image from 'next/image';
 import { MdContacts } from 'react-icons/md';
 import { Contacts } from './Contacts';
@@ -54,7 +54,13 @@ export const Connected = ({
           <ChevronLeftIcon className="w-5 h-5" aria-hidden="true" />
         </button>
         <div className="flex flex-row gap-2 items-center">
-          <Image height={0} width={0} src={logo} alt={name} className="w-8 h-8 rounded-full mr-2" />
+          <Image
+            height={0}
+            width={0}
+            src={getRealLogo(logo)}
+            alt={name}
+            className="w-8 h-8 rounded-full mr-2"
+          />
           <Dialog.Title as="h3" className="text-md font-semibold">
             {name}
           </Dialog.Title>

diff --git a/components/react/views/Connecting.tsx b/components/react/views/Connecting.tsx
@@ -3,6 +3,7 @@
 import { Dialog } from '@headlessui/react';
 import { XMarkIcon } from '@heroicons/react/24/outline';
 import { ChevronLeftIcon } from '@heroicons/react/20/solid';
+import { getRealLogo } from '@/utils';
 
 export const Connecting = ({
   onClose,
@@ -41,7 +42,11 @@ export const Connecting = ({
         </button>
       </div>
       <div className="flex flex-col w-full h-full mt-4 sm:px-8 sm:py-6">
-        <img src={logo} alt={name} className="flex-shrink-0 w-20 h-20 mx-auto aspect-1" />
+        <img
+          src={getRealLogo(logo)}
+          alt={name}
+          className="flex-shrink-0 w-20 h-20 mx-auto aspect-1"
+        />
         <p className="mt-3 font-medium ">{title}</p>
         <p className="mt-1 text-sm text-gray-500 dark:text-white/75">{subtitle}</p>
       </div>

diff --git a/components/react/views/Error.tsx b/components/react/views/Error.tsx
@@ -4,6 +4,7 @@ import { Dialog } from '@headlessui/react';
 import { XMarkIcon, ArrowPathIcon } from '@heroicons/react/24/outline';
 import { ChevronLeftIcon } from '@heroicons/react/20/solid';
 import Image from 'next/image';
+import { getRealLogo } from '@/utils';
 export const Error = ({
   currentWalletName,
   onClose,
@@ -44,7 +45,7 @@ export const Error = ({
       <div className="flex flex-col w-full h-full py-6 mt-4 sm:px-8">
         <div className="p-3 border rounded-full border-red-600 mx-auto aspect-1 flex-shrink-0">
           <Image
-            src={logo}
+            src={getRealLogo(logo)}
             alt="Wallet type logo"
             className="flex-shrink-0 w-16 h-16 aspect-1"
             width={16}

diff --git a/components/react/views/NotExist.tsx b/components/react/views/NotExist.tsx
@@ -2,6 +2,7 @@
 import { Dialog } from '@headlessui/react';
 import { XMarkIcon, ArrowDownTrayIcon } from '@heroicons/react/24/outline';
 import { ChevronLeftIcon } from '@heroicons/react/20/solid';
+import { getRealLogo } from '@/utils';
 
 export const NotExist = ({
   onClose,
@@ -38,7 +39,11 @@ export const NotExist = ({
         </button>
       </div>
       <div className="flex flex-col w-full h-full py-6 mt-4 sm:px-8">
-        <img src={logo} alt={name} className="flex-shrink-0 w-16 h-16 mx-auto aspect-1" />
+        <img
+          src={getRealLogo(logo)}
+          alt={name}
+          className="flex-shrink-0 w-16 h-16 mx-auto aspect-1"
+        />
         <p className="mt-3 font-medium text-black dark:text-white">Install {name}</p>
         <p className="mt-1 text-sm text-gray-500 dark:text-white/75">
           To connect your {name} wallet, install the browser extension.

diff --git a/components/react/views/WalletList.tsx b/components/react/views/WalletList.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable @next/next/no-img-element */
 import { XMarkIcon } from '@heroicons/react/24/outline';
 import { ChainWalletBase } from 'cosmos-kit';
+import { getRealLogo } from '@/utils';
 
 export const WalletList = ({
   onClose,
@@ -48,7 +49,11 @@ export const WalletList = ({
               onClick={() => onWalletClicked(name)}
               className="flex items-center w-full p-3 rounded-lg dark:bg-[#ffffff0c] bg-[#f0f0ff5c] dark:hover:bg-[#0000004c] hover:bg-[#a8a8a84c] transition"
             >
-              <img src={logo?.toString()} alt={prettyName} className="w-10 h-10 rounded-xl mr-3" />
+              <img
+                src={getRealLogo(logo?.toString() ?? '')}
+                alt={prettyName}
+                className="w-10 h-10 rounded-xl mr-3"
+              />
               <span className="text-md">{prettyName}</span>
             </button>
           ))}
@@ -66,7 +71,7 @@ export const WalletList = ({
               className="flex items-center justify-center p-4 dark:bg-[#ffffff0c] bg-[#f0f0ff5c] dark:hover:bg-[#0000004c] hover:bg-[#a8a8a84c] rounded-lg transition"
             >
               <img
-                src={isDarkMode ? logo?.toString() + '_light.svg' : logo?.toString() + '_dark.svg'}
+                src={getRealLogo(logo?.toString() ?? '')}
                 alt={prettyName}
                 className={`${prettyName === 'Reddit' || prettyName === 'Google' ? 'w-8 h-8' : 'w-7 h-7'} rounded-md`}
               />
@@ -84,7 +89,11 @@ export const WalletList = ({
               onClick={() => onWalletClicked(name)}
               className="flex items-center w-full p-3 rounded-lg dark:bg-[#ffffff0c] bg-[#f0f0ff5c] dark:hover:bg-[#0000004c] hover:bg-[#a8a8a84c] transition"
             >
-              <img src={logo?.toString()} alt={prettyName} className="w-10 h-10 rounded-xl mr-3" />
+              <img
+                src={getRealLogo(logo?.toString() ?? '')}
+                alt={prettyName}
+                className="w-10 h-10 rounded-xl mr-3"
+              />
               <span className="text-md">{prettyName === 'Twitter' ? 'X' : prettyName}</span>
             </button>
           ))}

diff --git a/utils/logos.ts b/utils/logos.ts
@@ -40,6 +40,16 @@ export const convertChainName = (chainName: string) => {
   }
 };
 
+export const getRealLogo = (logo: string) => {
+  const isDarkMode = document.documentElement.classList.contains('dark');
+  const localAndHasExtension = /^\/(?!.*\.[0-9a-z]+$)/i.test(logo);
+  return localAndHasExtension
+    ? isDarkMode
+      ? logo?.toString() + '_light.svg'
+      : logo?.toString() + '_dark.svg'
+    : logo;
+};
+
 export const isUrlValid = async (url: string) => {
   const res = await fetch(url, {
     method: 'HEAD',