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

Jump to bottom

Expose a component that displays an Avatar (Jazzicon/Blockie) #2776

Closed
GuillaumeRx opened this issue Oct 1, 2024 · 1 comment · Fixed by MetaMask/metamask-extension#27376
Closed

Expose a component that displays an Avatar (Jazzicon/Blockie) #2776

GuillaumeRx opened this issue Oct 1, 2024 · 1 comment · Fixed by MetaMask/metamask-extension#27376
Assignees
@FrederikBolding
Labels
release-12.7.0 Issue or pull request that will be included in release 12.7.0

Comments

@GuillaumeRx
Copy link
Contributor

GuillaumeRx commented Oct 1, 2024 •
edited by FrederikBolding
Loading

Custom UI could use a Component that displays a Jazzicon/Blockie of an address.

Create a component that takes a CAIP-10 address and displays the Jazzicon or Blockie (depending on the extension's preference).
@Maliksb11

This comment was marked as spam.

Sign in to view
@GuillaumeRx GuillaumeRx changed the title Expose a component that displays a Jazzicon/Blockie Expose a component that displays a Avatar (Jazzicon/Blockie) Oct 8, 2024
@GuillaumeRx GuillaumeRx changed the title Expose a component that displays a Avatar (Jazzicon/Blockie) Expose a component that displays an Avatar (Jazzicon/Blockie) Oct 8, 2024
@FrederikBolding FrederikBolding self-assigned this Oct 9, 2024
@FrederikBolding FrederikBolding mentioned this issue Oct 9, 2024
Merged
FrederikBolding added a commit that referenced this issue Oct 9, 2024
@FrederikBolding
feat: Add Avatar component (#2820)
fae7855 
Add `Avatar` component, that lets Snaps show an avatar for an address
without showing the full address.

Progresses #2776
@FrederikBolding FrederikBolding mentioned this issue Oct 14, 2024
Merged
FrederikBolding added a commit to MetaMask/metamask-extension that referenced this issue Oct 15, 2024
@FrederikBolding
feat: Add Snap UI avatar component (#27826)
0434349 
<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

Move Snaps UI avatar implementation to a separate component that can be
consumed by Snaps.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27826?quickstart=1)

## **Related issues**

Closes: MetaMask/snaps#2776

## **Manual testing steps**
```jsx
export const onRpcRequest: OnRpcRequestHandler = async ({
  origin,
  request,
}) => {
  switch (request.method) {
    case 'hello':
      return snap.request({
        method: 'snap_dialog',
        params: {
          type: 'confirmation',
          content: (
            <Box>
              <Text>
                Hello, <Bold>{origin}</Bold>!
              </Text>
              <Text>
                This custom confirmation is just for display purposes.
              </Text>
              <Text>
                But you can edit the snap source code to make it do something,
                if you want to!
              </Text>
              <Address address='eip155:1:0x1234567890123456789012345678901234567890' />
              <Avatar address="eip155:1:0x1234567890123456789012345678901234567890" />
              <Address address="bip122:000000000019d6689c085ae165831e93:128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6" />
              <Avatar address="bip122:000000000019d6689c085ae165831e93:128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6" />
              <Box direction="horizontal" alignment="space-between" center={true}>
                <Text>Avatar</Text>
                <Avatar address="bip122:000000000019d6689c085ae165831e93:128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6" />
              </Box>
 
            </Box>
          ),
        },
      });
    default:
      throw new Error('Method not found.');
  }
};

```

## **Screenshots/Recordings**

<img width="387" alt="Screenshot 2024-10-14 at 14 44 50"
src="https://github.com/user-attachments/assets/e06a0aca-0aeb-4004-9290-d700867b4eff">
Mrtenz pushed a commit to MetaMask/metamask-extension that referenced this issue Oct 15, 2024
@FrederikBolding @Mrtenz
feat: Add Snap UI avatar component (#27826)
86d70c2 
<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

Move Snaps UI avatar implementation to a separate component that can be
consumed by Snaps.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27826?quickstart=1)

## **Related issues**

Closes: MetaMask/snaps#2776

## **Manual testing steps**
```jsx
export const onRpcRequest: OnRpcRequestHandler = async ({
  origin,
  request,
}) => {
  switch (request.method) {
    case 'hello':
      return snap.request({
        method: 'snap_dialog',
        params: {
          type: 'confirmation',
          content: (
            <Box>
              <Text>
                Hello, <Bold>{origin}</Bold>!
              </Text>
              <Text>
                This custom confirmation is just for display purposes.
              </Text>
              <Text>
                But you can edit the snap source code to make it do something,
                if you want to!
              </Text>
              <Address address='eip155:1:0x1234567890123456789012345678901234567890' />
              <Avatar address="eip155:1:0x1234567890123456789012345678901234567890" />
              <Address address="bip122:000000000019d6689c085ae165831e93:128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6" />
              <Avatar address="bip122:000000000019d6689c085ae165831e93:128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6" />
              <Box direction="horizontal" alignment="space-between" center={true}>
                <Text>Avatar</Text>
                <Avatar address="bip122:000000000019d6689c085ae165831e93:128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6" />
              </Box>
 
            </Box>
          ),
        },
      });
    default:
      throw new Error('Method not found.');
  }
};

```

## **Screenshots/Recordings**

<img width="387" alt="Screenshot 2024-10-14 at 14 44 50"
src="https://github.com/user-attachments/assets/e06a0aca-0aeb-4004-9290-d700867b4eff">
Mrtenz pushed a commit to MetaMask/metamask-extension that referenced this issue Oct 15, 2024
@FrederikBolding @Mrtenz
feat: Add Snap UI avatar component (#27826)
d1a2e6e 
<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

Move Snaps UI avatar implementation to a separate component that can be
consumed by Snaps.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27826?quickstart=1)

## **Related issues**

Closes: MetaMask/snaps#2776

## **Manual testing steps**
```jsx
export const onRpcRequest: OnRpcRequestHandler = async ({
  origin,
  request,
}) => {
  switch (request.method) {
    case 'hello':
      return snap.request({
        method: 'snap_dialog',
        params: {
          type: 'confirmation',
          content: (
            <Box>
              <Text>
                Hello, <Bold>{origin}</Bold>!
              </Text>
              <Text>
                This custom confirmation is just for display purposes.
              </Text>
              <Text>
                But you can edit the snap source code to make it do something,
                if you want to!
              </Text>
              <Address address='eip155:1:0x1234567890123456789012345678901234567890' />
              <Avatar address="eip155:1:0x1234567890123456789012345678901234567890" />
              <Address address="bip122:000000000019d6689c085ae165831e93:128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6" />
              <Avatar address="bip122:000000000019d6689c085ae165831e93:128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6" />
              <Box direction="horizontal" alignment="space-between" center={true}>
                <Text>Avatar</Text>
                <Avatar address="bip122:000000000019d6689c085ae165831e93:128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6" />
              </Box>
 
            </Box>
          ),
        },
      });
    default:
      throw new Error('Method not found.');
  }
};

```

## **Screenshots/Recordings**

<img width="387" alt="Screenshot 2024-10-14 at 14 44 50"
src="https://github.com/user-attachments/assets/e06a0aca-0aeb-4004-9290-d700867b4eff">
@FrederikBolding FrederikBolding mentioned this issue Oct 16, 2024
Merged
7 tasks
github-merge-queue bot pushed a commit to MetaMask/metamask-extension that referenced this issue Oct 16, 2024
@Mrtenz @GuillaumeRx
@hmalik88 @FrederikBolding
chore: Bump Snaps packages (#27376)
d1d469e 
## **Description**

This bumps all Snaps packages to the latest versions.

Summary of changes in the snaps deps:
- Allow updating `context` in `snap_updateInterface`
- Add `snap_getCurrencyRate` RPC method
- Add `Avatar` component
- Add `min`, `max` and `step` props to `Input` component
- Add `size` prop to `Heading` component
- Add support for `metamask:` schemed URLs in Snap UI links
- Pass full URLs to PhishingController
- Ignore Snap insight response if transaction or signature has already
been signed
- Allow `Link` in `Row` and `Address` in `Link`

Closes MetaMask/snaps#2776

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27376?quickstart=1)

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

---------

Co-authored-by: Guillaume Roux <[email protected]>
Co-authored-by: Hassan Malik <[email protected]>
Co-authored-by: Hassan Malik <[email protected]>
Co-authored-by: Frederik Bolding <[email protected]>
@metamaskbot metamaskbot added the release-12.7.0 Issue or pull request that will be included in release 12.7.0 label Oct 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@FrederikBolding FrederikBolding

Labels
release-12.7.0 Issue or pull request that will be included in release 12.7.0
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

chore: Bump Snaps packages MetaMask/metamask-extension
4 participants
@FrederikBolding @GuillaumeRx @metamaskbot @Maliksb11