Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: send form icons #177

Merged
merged 4 commits into from
Jan 7, 2025
Merged

fix: send form icons #177

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b21b269
fix: send form denom icon display
fmorency Jan 7, 2025
fd6c913
fix: optional param
fmorency Jan 7, 2025
3ebfea4
fix: type check
fmorency Jan 7, 2025
8b04293
fix: default value
fmorency Jan 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 14 additions & 10 deletions components/bank/forms/ibcSendForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -291,7 +285,10 @@
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}

{(() => {
Expand Down Expand Up @@ -330,12 +327,19 @@
filteredBalances?.map(token => (
<li
key={token.coreDenom}
onClick={() => setFieldValue('selectedToken', token)}
onClick={() => {
setFieldValue('selectedToken', token);
if (document.activeElement instanceof HTMLElement) {
document.activeElement.blur();

Check warning on line 333 in components/bank/forms/ibcSendForm.tsx

View check run for this annotation

Codecov / codecov/patch

components/bank/forms/ibcSendForm.tsx#L330-L333 

Added lines #L330 - L333 were not covered by tests
}
}}
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 =
Expand Down
14 changes: 11 additions & 3 deletions components/bank/forms/sendForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -211,7 +211,10 @@
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}

{(() => {
Expand Down Expand Up @@ -252,12 +255,17 @@
filteredBalances?.map(token => (
<li
key={token.coreDenom}
onClick={() => setFieldValue('selectedToken', token)}
onClick={() => {
setFieldValue('selectedToken', token);
if (document.activeElement instanceof HTMLElement) {
document.activeElement.blur();

Check warning on line 261 in components/bank/forms/sendForm.tsx

View check run for this annotation

Codecov / codecov/patch

components/bank/forms/sendForm.tsx#L258-L261 

Added lines #L258 - L261 were not covered by tests
}
}}
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()
Expand Down
18 changes: 14 additions & 4 deletions components/factory/components/DenomImage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,13 @@
}
};

export const DenomImage = ({ denom }: { denom: any }) => {
export const DenomImage = ({
denom,
withBackground = true,
}: {
denom: any;
withBackground?: boolean;
}) => {

Check warning on line 73 in components/factory/components/DenomImage.tsx

View check run for this annotation

Codecov / codecov/patch

components/factory/components/DenomImage.tsx#L67-L73 

Added lines #L67 - L73 were not covered by tests
const [imageError, setImageError] = useState(false);
const [isLoading, setIsLoading] = useState(true);
const [isSupported, setIsSupported] = useState(false);
Expand Down Expand Up @@ -94,7 +100,9 @@
// 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]' : ''}`}
>

Check warning on line 105 in components/factory/components/DenomImage.tsx

View check run for this annotation

Codecov / codecov/patch

components/factory/components/DenomImage.tsx#L103-L105 

Added lines #L103 - L105 were not covered by tests
<Image
width={44}
height={44}
Expand All @@ -108,12 +116,14 @@

// Then check for other conditions
if (!denom?.uri || !isSupported || imageError) {
return <ProfileAvatar walletAddress={denom?.base} />;
return <ProfileAvatar walletAddress={denom?.base} withBackground={withBackground} />;

Check warning on line 119 in components/factory/components/DenomImage.tsx

View check run for this annotation

Codecov / codecov/patch

components/factory/components/DenomImage.tsx#L119 

Added line #L119 was not covered by tests
}

// 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]' : ''}`}
>

Check warning on line 126 in components/factory/components/DenomImage.tsx

View check run for this annotation

Codecov / codecov/patch

components/factory/components/DenomImage.tsx#L124-L126 

Added lines #L124 - L126 were not covered by tests
<Image
width={44}
height={44}
Expand Down
12 changes: 10 additions & 2 deletions utils/identicon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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][] = [
Expand Down Expand Up @@ -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 }}
/>
);
Expand Down
Loading