Adding hippieBlue gnosisChain color and test for cleanNetworkName

src/components/NetworkSelector/NetworkSelector.styled.ts

@@ -2,7 +2,7 @@ import styled from 'styled-components'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { COLOURS } from 'styles'
 
-const { fadedGreyishWhiteOpacity, white } = COLOURS
+const { fadedGreyishWhiteOpacity, white, hippieBlue } = COLOURS
 
 export const SelectorContainer = styled.div`
   display: flex;
@@ -68,7 +68,7 @@ export const Option = styled.div`
       background: ${({ theme }): string => theme.yellow4};
     }
     &.gnosischain {
-      background: ${({ theme }): string => theme.orange1};
+      background: ${(): string => hippieBlue};
     }
     &.ethereum {
       background: ${({ theme }): string => theme.blue4};
@@ -98,8 +98,8 @@ export const NetworkLabel = styled.span`
   }
 
   &.gnosischain {
-    background: ${({ theme }): string => theme.orangeOpacity};
-    color: ${({ theme }): string => theme.orange};
+    background: ${(): string => `rgb(72 169 166 / 25%);`};
+    color: ${(): string => hippieBlue};
   }
 `
 

src/styles/colours.ts

@@ -3,6 +3,7 @@ export const COLOURS = {
   whiteDark: '#e9e9f0',
   blue: '#3F77FF',
   blueDark: '#185afb',
+  hippieBlue: '#48A9A6',
   purple: '#8958FF',
   bgLight: '#edf2f7',
   bgDark: 'linear-gradient(0deg, #21222E 0.05%, #2C2D3F 100%)',

test/utils/miscellaneous.spec.ts

@@ -1,5 +1,5 @@
 import { tokenList } from '../data'
-import { getToken, isAnAddressAccount, isAnOrderId, isEns } from 'utils'
+import { cleanNetworkName, getToken, isAnAddressAccount, isAnOrderId, isEns } from 'utils'
 import BN from 'bn.js'
 import { pathAccordingTo } from 'hooks/useSearchSubmit'
 
@@ -156,3 +156,20 @@ describe('isEns', () => {
     expect(result).toBe(true)
   })
 })
+
+describe('cleanNetworkName', () => {
+  it('should return empty string for undefined input', () => {
+    const text = undefined
+
+    const result = cleanNetworkName(text)
+
+    expect(result).toBe('')
+  })
+  it('should return lowercase withouth white space', () => {
+    const text = 'Gnosis Chain'
+
+    const result = cleanNetworkName(text)
+
+    expect(result).toBe('gnosischain')
+  })
+})