Skip to content

Commit 33d747a

Browse files
runway-github[bot]vinnyhowardtommasini
authored
chore(runway): cherry-pick 78b1458 (#16244)
- fix(5091): remove misleading network badges from AccountRightButton (#16104) ## **Description** ### Problem The current `AccountRightButton` component shows network badges that create confusion about dapp permission behavior: 1. **When dapp is connected:** Shows an "Active Network" badge on the account avatar, suggesting only that network can receive requests 2. **Reality:** Connected dapps can send confirmation requests for any permitted network, making the network badge misleading This UX inconsistency could lead users to believe they're limited to interactions on the displayed network only. ### Solution Simplified the `AccountRightButton` behavior to remove misleading network indicators while maintaining core functionality: **New Behavior:** - When no dapp is connected (!selectedAddress): Shows Global Selected Network avatar - When dapp is connected (selectedAddress exists): Shows account avatar only (no network badge) Maintained Functionality: - **Disconnected state:** Clicking opens network selector - **Connected state:** Clicking opens permissions view where users can edit permitted networks - Network management through permissions remains fully functional ## **Related issues** Fixes: https://github.com/MetaMask/MetaMask-planning/issues/5091 ## **Manual testing steps** 1. Goto the browser tab 2. Goto any dapp and observe that the network avatar is still their and clickable 3. When you connect/give permissions to the dapp, the account avatar still shows and works as usual, but the network badge doesn't show anymore. ## **Screenshots/Recordings** https://github.com/user-attachments/assets/589d195e-eb6f-4889-977b-c633d75a0480 ### **Before** `-` ### **After** `-` ## **Pre-merge author checklist** - [x] I’ve followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.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-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [x] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [x] 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. [78b1458](78b1458) Co-authored-by: Vince Howard <vincenguyenhoward@gmail.com> Co-authored-by: tommasini <46944231+tommasini@users.noreply.github.com>
1 parent 4cac41d commit 33d747a

18 files changed

Lines changed: 150 additions & 367 deletions

‎app/components/UI/AccountRightButton/AccountRightButton.types.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
export interface AccountRightButtonProps {
22
selectedAddress: string;
33
onPress: () => void;
4-
isNetworkVisible?: boolean;
54
}

‎app/components/UI/AccountRightButton/__snapshots__/index.test.tsx.snap‎

Lines changed: 113 additions & 204 deletions
Original file line numberDiff line numberDiff line change
@@ -333,234 +333,143 @@ exports[`AccountRightButton should render correctly 1`] = `
333333
}
334334
/>
335335
<View
336-
onLayout={[Function]}
337336
style={
338337
{
339-
"alignSelf": "flex-start",
340-
"position": "relative",
338+
"backgroundColor": "#ffffff",
339+
"borderRadius": 16,
340+
"height": 32,
341+
"overflow": "hidden",
342+
"width": 32,
341343
}
342344
}
343-
testID="badge-wrapper-badge"
344345
>
345-
<View>
346-
<View
347-
style={
346+
<View
347+
style={
348+
[
349+
{
350+
"overflow": "hidden",
351+
},
348352
{
349-
"backgroundColor": "#ffffff",
353+
"backgroundColor": "#F39000",
350354
"borderRadius": 16,
351355
"height": 32,
352-
"overflow": "hidden",
353356
"width": 32,
354-
}
357+
},
358+
undefined,
359+
]
360+
}
361+
>
362+
<RNSVGSvgView
363+
bbHeight={32}
364+
bbWidth={32}
365+
focusable={false}
366+
height={32}
367+
style={
368+
[
369+
{
370+
"backgroundColor": "transparent",
371+
"borderWidth": 0,
372+
},
373+
{
374+
"flex": 0,
375+
"height": 32,
376+
"width": 32,
377+
},
378+
]
355379
}
380+
width={32}
356381
>
357-
<View
358-
style={
359-
[
360-
{
361-
"overflow": "hidden",
362-
},
363-
{
364-
"backgroundColor": "#F39000",
365-
"borderRadius": 16,
366-
"height": 32,
367-
"width": 32,
368-
},
369-
undefined,
370-
]
382+
<RNSVGGroup
383+
fill={
384+
{
385+
"payload": 4278190080,
386+
"type": 0,
387+
}
371388
}
372389
>
373-
<RNSVGSvgView
374-
bbHeight={32}
375-
bbWidth={32}
376-
focusable={false}
390+
<RNSVGRect
391+
fill={
392+
{
393+
"payload": 4294381057,
394+
"type": 0,
395+
}
396+
}
377397
height={32}
378-
style={
398+
matrix={
399+
[
400+
-0.393941909590951,
401+
-0.9191353392552345,
402+
0.9191353392552345,
403+
-0.393941909590951,
404+
2.0673962067717984,
405+
41.20297235917101,
406+
]
407+
}
408+
propList={
379409
[
380-
{
381-
"backgroundColor": "transparent",
382-
"borderWidth": 0,
383-
},
384-
{
385-
"flex": 0,
386-
"height": 32,
387-
"width": 32,
388-
},
410+
"fill",
389411
]
390412
}
391413
width={32}
392-
>
393-
<RNSVGGroup
394-
fill={
395-
{
396-
"payload": 4278190080,
397-
"type": 0,
398-
}
414+
x={0}
415+
y={0}
416+
/>
417+
<RNSVGRect
418+
fill={
419+
{
420+
"payload": 4279616754,
421+
"type": 0,
399422
}
400-
>
401-
<RNSVGRect
402-
fill={
403-
{
404-
"payload": 4294381057,
405-
"type": 0,
406-
}
407-
}
408-
height={32}
409-
matrix={
410-
[
411-
-0.393941909590951,
412-
-0.9191353392552345,
413-
0.9191353392552345,
414-
-0.393941909590951,
415-
2.0673962067717984,
416-
41.20297235917101,
417-
]
418-
}
419-
propList={
420-
[
421-
"fill",
422-
]
423-
}
424-
width={32}
425-
x={0}
426-
y={0}
427-
/>
428-
<RNSVGRect
429-
fill={
430-
{
431-
"payload": 4279616754,
432-
"type": 0,
433-
}
434-
}
435-
height={32}
436-
matrix={
437-
[
438-
0.9378889346118975,
439-
-0.34693565157325623,
440-
0.34693565157325623,
441-
0.9378889346118975,
442-
-3.7958154919572626,
443-
-8.214031424007846,
444-
]
445-
}
446-
propList={
447-
[
448-
"fill",
449-
]
450-
}
451-
width={32}
452-
x={0}
453-
y={0}
454-
/>
455-
<RNSVGRect
456-
fill={
457-
{
458-
"payload": 4278291572,
459-
"type": 0,
460-
}
461-
}
462-
height={32}
463-
matrix={
464-
[
465-
0.39394190959095127,
466-
0.9191353392552344,
467-
-0.9191353392552344,
468-
0.39394190959095127,
469-
56.18052634818,
470-
-1.5614990621965208,
471-
]
472-
}
473-
propList={
474-
[
475-
"fill",
476-
]
477-
}
478-
width={32}
479-
x={0}
480-
y={0}
481-
/>
482-
</RNSVGGroup>
483-
</RNSVGSvgView>
484-
</View>
485-
</View>
486-
</View>
487-
<View
488-
style={
489-
{
490-
"alignItems": "center",
491-
"aspectRatio": 1,
492-
"height": 0,
493-
"justifyContent": "center",
494-
"position": "absolute",
495-
"right": 0,
496-
"top": 0,
497-
"transform": [
498-
{
499-
"translateX": 0,
500-
},
501-
{
502-
"translateY": -0,
503-
},
504-
],
505-
}
506-
}
507-
>
508-
<View
509-
onLayout={[Function]}
510-
style={
511-
{
512-
"alignItems": "center",
513-
"aspectRatio": 1,
514-
"height": "50%",
515-
"justifyContent": "center",
516-
"maxHeight": 24,
517-
"minHeight": 8,
518-
"opacity": 0,
519-
}
520-
}
521-
testID="badgenetwork"
522-
>
523-
<View
524-
style={
525-
{
526-
"alignItems": "center",
527-
"backgroundColor": "#ffffff",
528-
"borderColor": "#ffffff",
529-
"borderRadius": 8,
530-
"borderWidth": 2,
531-
"height": 32,
532-
"justifyContent": "center",
533-
"overflow": "hidden",
534-
"shadowColor": "#0000001a",
535-
"shadowOffset": {
536-
"height": 2,
537-
"width": 0,
538-
},
539-
"shadowOpacity": 1,
540-
"shadowRadius": 4,
541-
"transform": [
542-
{
543-
"scale": 1,
544-
},
545-
],
546-
"width": 32,
547423
}
548-
}
549-
>
550-
<Image
551-
onError={[Function]}
552-
resizeMode="contain"
553-
source={1}
554-
style={
424+
height={32}
425+
matrix={
426+
[
427+
0.9378889346118975,
428+
-0.34693565157325623,
429+
0.34693565157325623,
430+
0.9378889346118975,
431+
-3.7958154919572626,
432+
-8.214031424007846,
433+
]
434+
}
435+
propList={
436+
[
437+
"fill",
438+
]
439+
}
440+
width={32}
441+
x={0}
442+
y={0}
443+
/>
444+
<RNSVGRect
445+
fill={
555446
{
556-
"height": 32,
557-
"width": 32,
447+
"payload": 4278291572,
448+
"type": 0,
558449
}
559450
}
560-
testID="network-avatar-image"
451+
height={32}
452+
matrix={
453+
[
454+
0.39394190959095127,
455+
0.9191353392552344,
456+
-0.9191353392552344,
457+
0.39394190959095127,
458+
56.18052634818,
459+
-1.5614990621965208,
460+
]
461+
}
462+
propList={
463+
[
464+
"fill",
465+
]
466+
}
467+
width={32}
468+
x={0}
469+
y={0}
561470
/>
562-
</View>
563-
</View>
471+
</RNSVGGroup>
472+
</RNSVGSvgView>
564473
</View>
565474
</View>
566475
</TouchableOpacity>

‎app/components/UI/AccountRightButton/index.test.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,7 @@ describe('AccountRightButton', () => {
3333
it('should render correctly', () => {
3434
const { toJSON } = renderScreen(
3535
() => (
36-
<AccountRightButton
37-
selectedAddress="0x123"
38-
onPress={() => undefined}
39-
isNetworkVisible
40-
/>
36+
<AccountRightButton selectedAddress="0x123" onPress={() => undefined} />
4137
),
4238
{
4339
name: 'AccountRightButton',

0 commit comments

Comments
 (0)