-
Notifications
You must be signed in to change notification settings - Fork 557
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add `Avatar` component, that lets Snaps show an avatar for an address without showing the full address. Progresses #2776
- Loading branch information
1 parent
173cf1b
commit fae7855
Showing
8 changed files
with
140 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
import { Avatar } from './Avatar'; | ||
|
||
describe('Avatar', () => { | ||
it('renders an avatar', () => { | ||
const result = ( | ||
<Avatar address="eip155:1:0x1234567890123456789012345678901234567890" /> | ||
); | ||
|
||
expect(result).toStrictEqual({ | ||
type: 'Avatar', | ||
key: null, | ||
props: { | ||
address: 'eip155:1:0x1234567890123456789012345678901234567890', | ||
}, | ||
}); | ||
}); | ||
|
||
it('renders an avatar of a certain size', () => { | ||
const result = ( | ||
<Avatar | ||
address="eip155:1:0x1234567890123456789012345678901234567890" | ||
size="lg" | ||
/> | ||
); | ||
|
||
expect(result).toStrictEqual({ | ||
type: 'Avatar', | ||
key: null, | ||
props: { | ||
address: 'eip155:1:0x1234567890123456789012345678901234567890', | ||
size: 'lg', | ||
}, | ||
}); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
import type { CaipAccountId } from '@metamask/utils'; | ||
|
||
import { createSnapComponent } from '../component'; | ||
|
||
/** | ||
* The props of the {@link Avatar} component. | ||
* | ||
* @property address - The address to display. This should be a valid CAIP-10 address. | ||
*/ | ||
export type AvatarProps = { | ||
address: CaipAccountId; | ||
size?: 'sm' | 'md' | 'lg' | undefined; | ||
}; | ||
|
||
const TYPE = 'Avatar'; | ||
|
||
/** | ||
* An avatar component, which is used to display an avatar for a CAIP-10 address. | ||
* | ||
* This component does not accept any children. | ||
* | ||
* @param props - The props of the component. | ||
* @param props.address - The address to display. This should be a valid CAIP-10 address. | ||
* @returns An avatar element. | ||
* @example | ||
* <Avatar address="eip155:1:0x1234567890123456789012345678901234567890" /> | ||
* @example | ||
* <Avatar address="bip122:000000000019d6689c085ae165831e93:128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6" /> | ||
*/ | ||
export const Avatar = createSnapComponent<AvatarProps, typeof TYPE>(TYPE); | ||
|
||
/** | ||
* An avatar element. | ||
* | ||
* @see Avatar | ||
*/ | ||
export type AvatarElement = ReturnType<typeof Avatar>; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters