From b0b3b4e6a83632abf7a4646a39e2e596b997b6bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20C=2E=20Morency?= <1102868+fmorency@users.noreply.github.com> Date: Tue, 7 Jan 2025 15:33:13 -0500 Subject: [PATCH] fix: send form icons (#177) --- components/bank/forms/ibcSendForm.tsx | 24 ++++++++++++-------- components/bank/forms/sendForm.tsx | 14 +++++++++--- components/factory/components/DenomImage.tsx | 18 +++++++++++---- utils/identicon.tsx | 12 ++++++++-- 4 files changed, 49 insertions(+), 19 deletions(-) diff --git a/components/bank/forms/ibcSendForm.tsx b/components/bank/forms/ibcSendForm.tsx index 9e71ef7..213ee33 100644 --- 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 ? ( - + ) : null} {(() => { @@ -330,12 +327,19 @@ export default function IbcSendForm({ filteredBalances?.map(token => (
  • 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} > - {token.metadata ? : null} + {token.metadata ? ( + + ) : null} {(() => { const tokenDisplayName = diff --git a/components/bank/forms/sendForm.tsx b/components/bank/forms/sendForm.tsx index b1155dc..8602062 100644 --- 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 ? ( - + ) : null} {(() => { @@ -252,12 +255,17 @@ export default function SendForm({ filteredBalances?.map(token => (
  • 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.metadata?.display.startsWith('factory') ? token.metadata?.display.split('/').pop()?.toUpperCase() diff --git a/components/factory/components/DenomImage.tsx b/components/factory/components/DenomImage.tsx index 13f9b39..bd1af22 100644 --- 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 ( -
    +
    { // Then check for other conditions if (!denom?.uri || !isSupported || imageError) { - return ; + return ; } // For all other cases, use the denom.uri return ( -
    +
    { +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?: Profile Avatar );