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

Add updated props for address component #2833

Merged
merged 5 commits into from
Oct 16, 2024
Merged

Add updated props for address component #2833

merged 5 commits into from
Oct 16, 2024

Conversation

david0xd
Copy link
Contributor

@david0xd david0xd commented Oct 11, 2024 •
edited
Loading

Update props of address component to get it work in more flexible way.

Integration PR for metamask-extension: MetaMask/metamask-extension#27798

Related ticket: #2758

@david0xd david0xd self-assigned this Oct 11, 2024
@david0xd david0xd mentioned this pull request Oct 14, 2024
Merged
7 tasks
@david0xd david0xd marked this pull request as ready for review October 14, 2024 10:26
@david0xd david0xd requested a review from a team as a code owner October 14, 2024 10:26
@codecov Codecov
Copy link

codecov bot commented Oct 14, 2024 •
edited
Loading

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 94.44%. Comparing base (a4e654a) to head (11780d8).
Report is 1 commits behind head on main.

Additional details and impacted files 
@@           Coverage Diff           @@
##             main    #2833   +/-   ##
=======================================
  Coverage   94.44%   94.44%           
=======================================
  Files         484      484           
  Lines       10324    10324           
  Branches     1574     1574           
=======================================
  Hits         9751     9751           
  Misses        573      573

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@david0xd david0xd merged commit a916c19 into main Oct 16, 2024
166 checks passed
@david0xd david0xd deleted the dd/modify-address-component branch October 16, 2024 08:16
FrederikBolding pushed a commit to MetaMask/metamask-extension that referenced this pull request Nov 4, 2024
@david0xd @GuillaumeRx
feat: Add changes to Snaps Address UI component (#27798)
df64b2b 
## **Description**
Add changes to Snaps Address UI component to support more flexible use
cases.

This PR needs release of the `snaps-sdk` after merging:
MetaMask/snaps#2833

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

## **Related issues**
Fixes: MetaMask/snaps#2758

## **Manual testing steps**
1. Use custom Snap build from template-snap-monorepo and add few
varieties of address component to test new capabilities.
2. Make sure UI is looking good.
3. Make sure that there are no regressions.

## **Screenshots/Recordings**
### **Before**
![Screenshot 2024-10-11 at 18 12
06](https://github.com/user-attachments/assets/4d498bd6-0ef0-445c-90ab-40918e63b421)

### **After**
![Screenshot 2024-10-15 at 14 34
16](https://github.com/user-attachments/assets/792244b6-300d-45e2-b7e1-91bbcb93a9a6)
![Screenshot 2024-10-15 at 14 34
28](https://github.com/user-attachments/assets/9c6776e1-f6b6-4888-864b-b95621e83069)
![Screenshot 2024-10-15 at 14 34
47](https://github.com/user-attachments/assets/054a9127-ce9a-43d9-ab06-61c4099990a6)
![Screenshot 2024-10-15 at 14 35
10](https://github.com/user-attachments/assets/4c829486-2195-4f14-947e-cbc3572eb822)

### Snap code used for testing
#### (_Might be useful for QA_)
```typescript
export const onRpcRequest: OnRpcRequestHandler = async ({ request }) => {
  switch (request.method) {
    case 'hello':
      return snap.request({
        method: 'snap_dialog',
        params: {
          type: 'confirmation',
          content: (
            <Box>
              <Heading size="lg">Some unknown address</Heading>

              <Text>Default address</Text>
              <Address address="0x1acC6721CF7642Eb37651F8019AC9a785C064002" />

              <Text>Custom address (displayName=true)</Text>
              <Address
                address="0x1acC6721CF7642Eb37651F8019AC9a785C064002"
                displayName={true}
              />

              <Text>Custom address (avatar=false)</Text>
              <Address
                address="0x1234567890123456789012345678901234567890"
                avatar={false}
              />

              <Text>Custom address (displayName=true, avatar=false)</Text>
              <Address
                address="0x1234567890123456789012345678901234567890"
                displayName={true}
                avatar={false}
              />

              <Text>Custom address (truncate=false)</Text>
              <Address
                address="0x1234567890123456789012345678901234567890"
                truncate={false}
              />

              <Text>Custom address (truncate=false, avatar=false)</Text>
              <Address
                address="0x1234567890123456789012345678901234567890"
                truncate={false}
                avatar={false}
              />

              <Heading size="lg">My address</Heading>

              <Text>Default address</Text>
              <Address address="0xBc641D258aA0e90F70AaDbcC4dE2D58d88029713" />

              <Text>Custom address (displayName=true)</Text>
              <Address
                address="0xBc641D258aA0e90F70AaDbcC4dE2D58d88029713"
                displayName={true}
              />

              <Text>Custom address (avatar=false)</Text>
              <Address
                address="0xBc641D258aA0e90F70AaDbcC4dE2D58d88029713"
                avatar={false}
              />

              <Text>Custom address (displayName=true, avatar=false)</Text>
              <Address
                address="0xBc641D258aA0e90F70AaDbcC4dE2D58d88029713"
                displayName={true}
                avatar={false}
              />

              <Text>Custom address (truncate=false)</Text>
              <Address
                address="0xBc641D258aA0e90F70AaDbcC4dE2D58d88029713"
                truncate={false}
              />

              <Text>Custom address (truncate=false, avatar=false)</Text>
              <Address
                address="0xBc641D258aA0e90F70AaDbcC4dE2D58d88029713"
                truncate={false}
                avatar={false}
              />

              <Heading size="lg">Contact address</Heading>

              <Text>Default address</Text>
              <Address address="0x1acC6721CF7642Eb37651F8019AC9a785C064002" />

              <Text>Custom address (displayName=true)</Text>
              <Address
                address="0x1acC6721CF7642Eb37651F8019AC9a785C064002"
                displayName={true}
              />

              <Text>Custom address (avatar=false)</Text>
              <Address
                address="0x1acC6721CF7642Eb37651F8019AC9a785C064002"
                avatar={false}
              />

              <Text>Custom address (displayName=true, avatar=false)</Text>
              <Address
                address="0x1acC6721CF7642Eb37651F8019AC9a785C064002"
                displayName={true}
                avatar={false}
              />

              <Text>Custom address (truncate=false)</Text>
              <Address
                address="0x1acC6721CF7642Eb37651F8019AC9a785C064002"
                truncate={false}
              />

              <Text>Custom address (truncate=false, avatar=false)</Text>
              <Address
                address="0x1acC6721CF7642Eb37651F8019AC9a785C064002"
                truncate={false}
                avatar={false}
              />
            </Box>
          ),
        },
      });
    default:
      throw new Error('Method not found.');
  }
};
```

## **Pre-merge author checklist**
- [ ] 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).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] 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]>
FrederikBolding pushed a commit to MetaMask/metamask-extension that referenced this pull request Nov 4, 2024
@david0xd @GuillaumeRx @FrederikBolding
feat: Add changes to Snaps Address UI component (#27798)
093caf7 
## **Description**
Add changes to Snaps Address UI component to support more flexible use
cases.

This PR needs release of the `snaps-sdk` after merging:
MetaMask/snaps#2833

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

## **Related issues**
Fixes: MetaMask/snaps#2758

## **Manual testing steps**
1. Use custom Snap build from template-snap-monorepo and add few
varieties of address component to test new capabilities.
2. Make sure UI is looking good.
3. Make sure that there are no regressions.

## **Screenshots/Recordings**
### **Before**
![Screenshot 2024-10-11 at 18 12
06](https://github.com/user-attachments/assets/4d498bd6-0ef0-445c-90ab-40918e63b421)

### **After**
![Screenshot 2024-10-15 at 14 34
16](https://github.com/user-attachments/assets/792244b6-300d-45e2-b7e1-91bbcb93a9a6)
![Screenshot 2024-10-15 at 14 34
28](https://github.com/user-attachments/assets/9c6776e1-f6b6-4888-864b-b95621e83069)
![Screenshot 2024-10-15 at 14 34
47](https://github.com/user-attachments/assets/054a9127-ce9a-43d9-ab06-61c4099990a6)
![Screenshot 2024-10-15 at 14 35
10](https://github.com/user-attachments/assets/4c829486-2195-4f14-947e-cbc3572eb822)

### Snap code used for testing
#### (_Might be useful for QA_)
```typescript
export const onRpcRequest: OnRpcRequestHandler = async ({ request }) => {
  switch (request.method) {
    case 'hello':
      return snap.request({
        method: 'snap_dialog',
        params: {
          type: 'confirmation',
          content: (
            <Box>
              <Heading size="lg">Some unknown address</Heading>

              <Text>Default address</Text>
              <Address address="0x1acC6721CF7642Eb37651F8019AC9a785C064002" />

              <Text>Custom address (displayName=true)</Text>
              <Address
                address="0x1acC6721CF7642Eb37651F8019AC9a785C064002"
                displayName={true}
              />

              <Text>Custom address (avatar=false)</Text>
              <Address
                address="0x1234567890123456789012345678901234567890"
                avatar={false}
              />

              <Text>Custom address (displayName=true, avatar=false)</Text>
              <Address
                address="0x1234567890123456789012345678901234567890"
                displayName={true}
                avatar={false}
              />

              <Text>Custom address (truncate=false)</Text>
              <Address
                address="0x1234567890123456789012345678901234567890"
                truncate={false}
              />

              <Text>Custom address (truncate=false, avatar=false)</Text>
              <Address
                address="0x1234567890123456789012345678901234567890"
                truncate={false}
                avatar={false}
              />

              <Heading size="lg">My address</Heading>

              <Text>Default address</Text>
              <Address address="0xBc641D258aA0e90F70AaDbcC4dE2D58d88029713" />

              <Text>Custom address (displayName=true)</Text>
              <Address
                address="0xBc641D258aA0e90F70AaDbcC4dE2D58d88029713"
                displayName={true}
              />

              <Text>Custom address (avatar=false)</Text>
              <Address
                address="0xBc641D258aA0e90F70AaDbcC4dE2D58d88029713"
                avatar={false}
              />

              <Text>Custom address (displayName=true, avatar=false)</Text>
              <Address
                address="0xBc641D258aA0e90F70AaDbcC4dE2D58d88029713"
                displayName={true}
                avatar={false}
              />

              <Text>Custom address (truncate=false)</Text>
              <Address
                address="0xBc641D258aA0e90F70AaDbcC4dE2D58d88029713"
                truncate={false}
              />

              <Text>Custom address (truncate=false, avatar=false)</Text>
              <Address
                address="0xBc641D258aA0e90F70AaDbcC4dE2D58d88029713"
                truncate={false}
                avatar={false}
              />

              <Heading size="lg">Contact address</Heading>

              <Text>Default address</Text>
              <Address address="0x1acC6721CF7642Eb37651F8019AC9a785C064002" />

              <Text>Custom address (displayName=true)</Text>
              <Address
                address="0x1acC6721CF7642Eb37651F8019AC9a785C064002"
                displayName={true}
              />

              <Text>Custom address (avatar=false)</Text>
              <Address
                address="0x1acC6721CF7642Eb37651F8019AC9a785C064002"
                avatar={false}
              />

              <Text>Custom address (displayName=true, avatar=false)</Text>
              <Address
                address="0x1acC6721CF7642Eb37651F8019AC9a785C064002"
                displayName={true}
                avatar={false}
              />

              <Text>Custom address (truncate=false)</Text>
              <Address
                address="0x1acC6721CF7642Eb37651F8019AC9a785C064002"
                truncate={false}
              />

              <Text>Custom address (truncate=false, avatar=false)</Text>
              <Address
                address="0x1acC6721CF7642Eb37651F8019AC9a785C064002"
                truncate={false}
                avatar={false}
              />
            </Box>
          ),
        },
      });
    default:
      throw new Error('Method not found.');
  }
};
```

## **Pre-merge author checklist**
- [ ] 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).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] 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]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Mrtenz Mrtenz Mrtenz left review comments

@GuillaumeRx GuillaumeRx GuillaumeRx approved these changes

Assignees

@david0xd david0xd

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@david0xd @Mrtenz @GuillaumeRx