Skip to content

Commit

Permalink
fix(431-2): active network icon has too much margin and adding option…
Browse files Browse the repository at this point in the history
…al prop (#12405)

## **Description**

The active network icon in the header has too much margin and is
misaligned with the network title.

I have also added an optional prop of `networkName` that allows
developers to pass in the network name of their choice. This is in
preparation of
[multichain](#12256)
support, currently we are showing the selected network name, in
multichain we want to be able to pass in a network name and not the
selected chain.

## **Related issues**
Fixes: 

## **Manual testing steps**
1. Goto asset details, swaps, or buy. Basically any screen that has the
header with network name
2.
3.

## **Screenshots/Recordings**
(green icon at the very top)
| Before  | After  |
|:---:|:---:|

|![asset_details_ios_before](https://github.com/user-attachments/assets/26de61bb-a217-456f-9d40-8bc552f4b1ec)|![asset_details_ios_after](https://github.com/user-attachments/assets/a4d4667b-4b1f-485c-a9f9-ef78872da772)|

### **Before**

NA

### **After**

NA

## **Pre-merge author checklist**

- [ ] 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).
- [ ] 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-mobile/blob/main/.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.
  • Loading branch information
vinnyhoward authored Dec 2, 2024
1 parent 1a83b1f commit b221d14
Show file tree
Hide file tree
Showing 11 changed files with 85 additions and 74 deletions.
21 changes: 16 additions & 5 deletions app/components/UI/NavbarTitle/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ const createStyles = (colors) =>
},
network: {
flexDirection: 'row',
alignItems: 'center',
},
networkName: {
fontSize: 11,
Expand All @@ -37,7 +38,6 @@ const createStyles = (colors) =>
height: 5,
borderRadius: 100,
marginRight: 5,
marginTop: Device.isIos() ? 4 : 5,
},
title: {
fontSize: scale(14),
Expand Down Expand Up @@ -90,6 +90,10 @@ class NavbarTitle extends PureComponent {
* Boolean that specifies if the network selected is displayed
*/
showSelectedNetwork: PropTypes.bool,
/**
* Name of the network to display
*/
networkName: PropTypes.string,
/**
* Content to display inside text element
*/
Expand Down Expand Up @@ -127,16 +131,24 @@ class NavbarTitle extends PureComponent {
};

render = () => {
const { providerConfig, title, translate, showSelectedNetwork, children } =
this.props;
const {
providerConfig,
title,
translate,
showSelectedNetwork,
children,
networkName,
} = this.props;
let name = null;
const color =
(Networks[providerConfig.type] && Networks[providerConfig.type].color) ||
null;
const colors = this.context.colors || mockTheme.colors;
const styles = createStyles(colors);

if (providerConfig.nickname) {
if (networkName) {
name = networkName;
} else if (providerConfig.nickname) {
name = providerConfig.nickname;
} else {
name =
Expand All @@ -145,7 +157,6 @@ class NavbarTitle extends PureComponent {
}

const realTitle = translate ? strings(title) : title;

return (
<TouchableOpacity
onPress={this.openNetworkList}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -181,6 +181,7 @@ exports[`BuildQuote View Crypto Currency Data renders a special error page if cr
<View
style={
{
"alignItems": "center",
"flexDirection": "row",
}
}
Expand All @@ -192,7 +193,6 @@ exports[`BuildQuote View Crypto Currency Data renders a special error page if cr
"borderRadius": 100,
"height": 5,
"marginRight": 5,
"marginTop": 4,
"width": 5,
},
{
Expand Down Expand Up @@ -882,6 +882,7 @@ exports[`BuildQuote View Crypto Currency Data renders a special error page if cr
<View
style={
{
"alignItems": "center",
"flexDirection": "row",
}
}
Expand All @@ -893,7 +894,6 @@ exports[`BuildQuote View Crypto Currency Data renders a special error page if cr
"borderRadius": 100,
"height": 5,
"marginRight": 5,
"marginTop": 4,
"width": 5,
},
{
Expand Down Expand Up @@ -1583,6 +1583,7 @@ exports[`BuildQuote View Crypto Currency Data renders an error page when there i
<View
style={
{
"alignItems": "center",
"flexDirection": "row",
}
}
Expand All @@ -1594,7 +1595,6 @@ exports[`BuildQuote View Crypto Currency Data renders an error page when there i
"borderRadius": 100,
"height": 5,
"marginRight": 5,
"marginTop": 4,
"width": 5,
},
{
Expand Down Expand Up @@ -2255,6 +2255,7 @@ exports[`BuildQuote View Crypto Currency Data renders the loading page when cryp
<View
style={
{
"alignItems": "center",
"flexDirection": "row",
}
}
Expand All @@ -2266,7 +2267,6 @@ exports[`BuildQuote View Crypto Currency Data renders the loading page when cryp
"borderRadius": 100,
"height": 5,
"marginRight": 5,
"marginTop": 4,
"width": 5,
},
{
Expand Down Expand Up @@ -3203,6 +3203,7 @@ exports[`BuildQuote View Fiat Currency Data renders an error page when there is
<View
style={
{
"alignItems": "center",
"flexDirection": "row",
}
}
Expand All @@ -3214,7 +3215,6 @@ exports[`BuildQuote View Fiat Currency Data renders an error page when there is
"borderRadius": 100,
"height": 5,
"marginRight": 5,
"marginTop": 4,
"width": 5,
},
{
Expand Down Expand Up @@ -3875,6 +3875,7 @@ exports[`BuildQuote View Fiat Currency Data renders the loading page when fiats
<View
style={
{
"alignItems": "center",
"flexDirection": "row",
}
}
Expand All @@ -3886,7 +3887,6 @@ exports[`BuildQuote View Fiat Currency Data renders the loading page when fiats
"borderRadius": 100,
"height": 5,
"marginRight": 5,
"marginTop": 4,
"width": 5,
},
{
Expand Down Expand Up @@ -4823,6 +4823,7 @@ exports[`BuildQuote View Payment Method Data renders an error page when there is
<View
style={
{
"alignItems": "center",
"flexDirection": "row",
}
}
Expand All @@ -4834,7 +4835,6 @@ exports[`BuildQuote View Payment Method Data renders an error page when there is
"borderRadius": 100,
"height": 5,
"marginRight": 5,
"marginTop": 4,
"width": 5,
},
{
Expand Down Expand Up @@ -5495,6 +5495,7 @@ exports[`BuildQuote View Payment Method Data renders the loading page when payme
<View
style={
{
"alignItems": "center",
"flexDirection": "row",
}
}
Expand All @@ -5506,7 +5507,6 @@ exports[`BuildQuote View Payment Method Data renders the loading page when payme
"borderRadius": 100,
"height": 5,
"marginRight": 5,
"marginTop": 4,
"width": 5,
},
{
Expand Down Expand Up @@ -6443,6 +6443,7 @@ exports[`BuildQuote View Regions data renders an error page when there is a regi
<View
style={
{
"alignItems": "center",
"flexDirection": "row",
}
}
Expand All @@ -6454,7 +6455,6 @@ exports[`BuildQuote View Regions data renders an error page when there is a regi
"borderRadius": 100,
"height": 5,
"marginRight": 5,
"marginTop": 4,
"width": 5,
},
{
Expand Down Expand Up @@ -7115,6 +7115,7 @@ exports[`BuildQuote View Regions data renders the loading page when regions are
<View
style={
{
"alignItems": "center",
"flexDirection": "row",
}
}
Expand All @@ -7126,7 +7127,6 @@ exports[`BuildQuote View Regions data renders the loading page when regions are
"borderRadius": 100,
"height": 5,
"marginRight": 5,
"marginTop": 4,
"width": 5,
},
{
Expand Down Expand Up @@ -8063,6 +8063,7 @@ exports[`BuildQuote View renders correctly 1`] = `
<View
style={
{
"alignItems": "center",
"flexDirection": "row",
}
}
Expand All @@ -8074,7 +8075,6 @@ exports[`BuildQuote View renders correctly 1`] = `
"borderRadius": 100,
"height": 5,
"marginRight": 5,
"marginTop": 4,
"width": 5,
},
{
Expand Down Expand Up @@ -11118,6 +11118,7 @@ exports[`BuildQuote View renders correctly 2`] = `
<View
style={
{
"alignItems": "center",
"flexDirection": "row",
}
}
Expand All @@ -11129,7 +11130,6 @@ exports[`BuildQuote View renders correctly 2`] = `
"borderRadius": 100,
"height": 5,
"marginRight": 5,
"marginTop": 4,
"width": 5,
},
{
Expand Down Expand Up @@ -14153,6 +14153,7 @@ exports[`BuildQuote View renders correctly when sdkError is present 1`] = `
<View
style={
{
"alignItems": "center",
"flexDirection": "row",
}
}
Expand All @@ -14164,7 +14165,6 @@ exports[`BuildQuote View renders correctly when sdkError is present 1`] = `
"borderRadius": 100,
"height": 5,
"marginRight": 5,
"marginTop": 4,
"width": 5,
},
{
Expand Down Expand Up @@ -14825,6 +14825,7 @@ exports[`BuildQuote View renders correctly when sdkError is present 2`] = `
<View
style={
{
"alignItems": "center",
"flexDirection": "row",
}
}
Expand All @@ -14836,7 +14837,6 @@ exports[`BuildQuote View renders correctly when sdkError is present 2`] = `
"borderRadius": 100,
"height": 5,
"marginRight": 5,
"marginTop": 4,
"width": 5,
},
{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,7 @@ exports[`GetStarted renders correctly 1`] = `
<View
style={
{
"alignItems": "center",
"flexDirection": "row",
}
}
Expand All @@ -169,7 +170,6 @@ exports[`GetStarted renders correctly 1`] = `
"borderRadius": 100,
"height": 5,
"marginRight": 5,
"marginTop": 4,
"width": 5,
},
{
Expand Down Expand Up @@ -831,6 +831,7 @@ exports[`GetStarted renders correctly 2`] = `
<View
style={
{
"alignItems": "center",
"flexDirection": "row",
}
}
Expand All @@ -842,7 +843,6 @@ exports[`GetStarted renders correctly 2`] = `
"borderRadius": 100,
"height": 5,
"marginRight": 5,
"marginTop": 4,
"width": 5,
},
{
Expand Down Expand Up @@ -1504,6 +1504,7 @@ exports[`GetStarted renders correctly when getStarted is true 1`] = `
<View
style={
{
"alignItems": "center",
"flexDirection": "row",
}
}
Expand All @@ -1515,7 +1516,6 @@ exports[`GetStarted renders correctly when getStarted is true 1`] = `
"borderRadius": 100,
"height": 5,
"marginRight": 5,
"marginTop": 4,
"width": 5,
},
{
Expand Down Expand Up @@ -1947,6 +1947,7 @@ exports[`GetStarted renders correctly when sdkError is present 1`] = `
<View
style={
{
"alignItems": "center",
"flexDirection": "row",
}
}
Expand All @@ -1958,7 +1959,6 @@ exports[`GetStarted renders correctly when sdkError is present 1`] = `
"borderRadius": 100,
"height": 5,
"marginRight": 5,
"marginTop": 4,
"width": 5,
},
{
Expand Down
Loading

0 comments on commit b221d14

Please sign in to comment.