fix: send form icons (#177)

liftedinit · Jan 7, 2025 · b0b3b4e · b0b3b4e
1 parent 71ddd09
commit b0b3b4e
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 19 deletions.
diff --git a/components/bank/forms/ibcSendForm.tsx b/components/bank/forms/ibcSendForm.tsx
@@ -1,13 +1,7 @@
 import React, { useState, useMemo } from 'react';
 import { useFeeEstimation, useTx } from '@/hooks';
 import { ibc } from '@liftedinit/manifestjs';
-import {
-  getIbcInfo,
-  parseNumberToBigInt,
-  shiftDigits,
-  truncateString,
-  formatTokenDisplayName,
-} from '@/utils';
+import { getIbcInfo, parseNumberToBigInt, shiftDigits, truncateString } from '@/utils';
 import { PiCaretDownBold } from 'react-icons/pi';
 import { MdContacts } from 'react-icons/md';
 import { CombinedBalanceInfo } from '@/utils/types';
@@ -291,7 +285,10 @@ export default function IbcSendForm({
                         className="btn btn-sm h-full px-3 bg-[#FFFFFF] dark:bg-[#FFFFFF0F] border-none hover:bg-transparent"
                       >
                         {values.selectedToken?.metadata ? (
-                          <DenomImage denom={values.selectedToken.metadata} />
+                          <DenomImage
+                            denom={values.selectedToken.metadata}
+                            withBackground={false}
+                          />
                         ) : null}
 
                         {(() => {
@@ -330,12 +327,19 @@ export default function IbcSendForm({
                           filteredBalances?.map(token => (
                             <li
                               key={token.coreDenom}
-                              onClick={() => setFieldValue('selectedToken', token)}
+                              onClick={() => {
+                                setFieldValue('selectedToken', token);
+                                if (document.activeElement instanceof HTMLElement) {
+                                  document.activeElement.blur();
+                                }
+                              }}
                               className="hover:bg-[#E0E0FF33] dark:hover:bg-[#FFFFFF0F] cursor-pointer rounded-lg"
                               aria-label={token.metadata?.display ?? token.denom}
                             >
                               <a className="flex flex-row items-center gap-2 px-2 py-2">
-                                {token.metadata ? <DenomImage denom={token.metadata} /> : null}
+                                {token.metadata ? (
+                                  <DenomImage denom={token.metadata} withBackground={false} />
+                                ) : null}
                                 <span className="truncate">
                                   {(() => {
                                     const tokenDisplayName =

diff --git a/components/bank/forms/sendForm.tsx b/components/bank/forms/sendForm.tsx
@@ -211,7 +211,10 @@ export default function SendForm({
                         className="btn btn-sm h-full px-3 bg-[#FFFFFF] dark:bg-[#FFFFFF0F] border-none hover:bg-transparent"
                       >
                         {values.selectedToken?.metadata ? (
-                          <DenomImage denom={values.selectedToken?.metadata} />
+                          <DenomImage
+                            denom={values.selectedToken?.metadata}
+                            withBackground={false}
+                          />
                         ) : null}
 
                         {(() => {
@@ -252,12 +255,17 @@ export default function SendForm({
                           filteredBalances?.map(token => (
                             <li
                               key={token.coreDenom}
-                              onClick={() => setFieldValue('selectedToken', token)}
+                              onClick={() => {
+                                setFieldValue('selectedToken', token);
+                                if (document.activeElement instanceof HTMLElement) {
+                                  document.activeElement.blur();
+                                }
+                              }}
                               className="hover:bg-[#E0E0FF33] dark:hover:bg-[#FFFFFF0F] cursor-pointer rounded-lg"
                               aria-label={token.metadata?.display}
                             >
                               <a className="flex flex-row items-center gap-2 px-2 py-2">
-                                <DenomImage denom={token?.metadata} />
+                                <DenomImage denom={token?.metadata} withBackground={false} />
                                 <span className="truncate">
                                   {token.metadata?.display.startsWith('factory')
                                     ? token.metadata?.display.split('/').pop()?.toUpperCase()

diff --git a/components/factory/components/DenomImage.tsx b/components/factory/components/DenomImage.tsx
@@ -64,7 +64,13 @@ export const isUrlSupported = (url: string) => {
   }
 };
 
-export const DenomImage = ({ denom }: { denom: any }) => {
+export const DenomImage = ({
+  denom,
+  withBackground = true,
+}: {
+  denom: any;
+  withBackground?: boolean;
+}) => {
   const [imageError, setImageError] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
   const [isSupported, setIsSupported] = useState(false);
@@ -94,7 +100,9 @@ export const DenomImage = ({ denom }: { denom: any }) => {
   // Check for MFX token first
   if (denom?.base?.includes('umfx')) {
     return (
-      <div className="w-11 h-11 p-2 rounded-md dark:bg-[#ffffff0f] bg-[#0000000A]">
+      <div
+        className={`w-11 h-11 p-2 rounded-md ${withBackground ? 'dark:bg-[#ffffff0f] bg-[#0000000a]' : ''}`}
+      >
         <Image
           width={44}
           height={44}
@@ -108,12 +116,14 @@ export const DenomImage = ({ denom }: { denom: any }) => {
 
   // Then check for other conditions
   if (!denom?.uri || !isSupported || imageError) {
-    return <ProfileAvatar walletAddress={denom?.base} />;
+    return <ProfileAvatar walletAddress={denom?.base} withBackground={withBackground} />;
   }
 
   // For all other cases, use the denom.uri
   return (
-    <div className="w-11 h-11 p-2 rounded-md dark:bg-[#ffffff0f] bg-[#0000000A]">
+    <div
+      className={`w-11 h-11 p-2 rounded-md ${withBackground ? 'dark:bg-[#ffffff0f] bg-[#0000000A]' : ''}`}
+    >
       <Image
         width={44}
         height={44}

diff --git a/utils/identicon.tsx b/utils/identicon.tsx
@@ -3,7 +3,15 @@ import React, { useState, useEffect } from 'react';
 import Identicon, { IdenticonOptions } from 'identicon.js';
 import CryptoJS from 'crypto-js';
 
-const ProfileAvatar = ({ walletAddress, size }: { walletAddress: string; size?: number }) => {
+const ProfileAvatar = ({
+  walletAddress,
+  size,
+  withBackground = true,
+}: {
+  walletAddress: string;
+  size?: number;
+  withBackground?: boolean;
+}) => {
   const [avatarSrc, setAvatarSrc] = useState('');
 
   const colors: [number, number, number, number][] = [
@@ -38,7 +46,7 @@ const ProfileAvatar = ({ walletAddress, size }: { walletAddress: string; size?:
     <img
       src={avatarSrc}
       alt="Profile Avatar"
-      className="rounded-md dark:bg-[#FFFFFF0F] bg-[#0000000A]"
+      className={`rounded-md ${withBackground ? 'dark:bg-[#FFFFFF0F] bg-[#0000000A]' : ''}`}
       style={{ height: imageSize, width: imageSize }}
     />
   );