fix: z index issue with socks icon (#6295)

package.json

@@ -39,6 +39,9 @@
       "src/state/**/*.ts*",
       "src/utils/**/*.ts*"
     ],
+    "coveragePathIgnorePatterns": [
+      ".snap"
+    ],
     "coverageThreshold": {
       "global": {
         "branches": 4,

src/components/Identicon/StatusIcon.test.tsx

+import { getConnections } from 'connection'
+import { render } from 'test-utils'
+
+import StatusIcon from './StatusIcon'
+
+jest.mock('../../hooks/useSocksBalance', () => ({
+  useHasSocks: () => true,
+}))
+
+describe('StatusIcon', () => {
+  it('renders children in correct order, with no account and with socks', () => {
+    const supportedConnections = getConnections()
+    const injectedConnection = supportedConnections[1]
+    const component = render(<StatusIcon connection={injectedConnection} />)
+    expect(component.getByTestId('StatusIconRoot')).toMatchSnapshot()
+  })
+
+  it('renders with no account and showMiniIcons=false', () => {
+    const supportedConnections = getConnections()
+    const injectedConnection = supportedConnections[1]
+    const component = render(<StatusIcon connection={injectedConnection} showMiniIcons={false} />)
+    expect(component.getByTestId('StatusIconRoot').children.length).toEqual(0)
+  })
+})

src/components/Identicon/StatusIcon.tsx

@@ -90,10 +90,10 @@ export default function StatusIcon({
   const hasSocks = useHasSocks()
 
   return (
-    <IconWrapper size={size}>
-      {hasSocks && showMiniIcons && <Socks />}
+    <IconWrapper size={size} data-testid="StatusIconRoot">
       <MainWalletIcon connection={connection} size={size} />
       {showMiniIcons && <MiniWalletIcon connection={connection} side="right" />}
+      {hasSocks && showMiniIcons && <Socks />}
     </IconWrapper>
   )
 }

src/components/Identicon/__snapshots__/StatusIcon.test.tsx.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StatusIcon renders children in correct order, with no account and with socks 1`] = `
+.c0 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-flow: column nowrap;
+  -ms-flex-flow: column nowrap;
+  flex-flow: column nowrap;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  margin-right: 8px;
+}
+
+.c0 > img,
+.c0 span {
+  height: 16px;
+  width: 16px;
+}
+
+.c1 {
+  position: absolute;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 16px;
+  height: 16px;
+  bottom: -4px;
+  right: -4px;
+  border-radius: 50%;
+  outline: 2px solid #FFFFFF;
+  outline-offset: -0.1px;
+  background-color: #FFFFFF;
+  overflow: hidden;
+}
+
+.c3 {
+  position: absolute;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 16px;
+  height: 16px;
+  bottom: -4px;
+  left: -4px;
+  border-radius: 50%;
+  outline: 2px solid #FFFFFF;
+  outline-offset: -0.1px;
+  background-color: #FFFFFF;
+  overflow: hidden;
+}
+
+.c2 {
+  width: 16px;
+  height: 16px;
+}
+
+@media (max-width:960px) {
+  .c0 {
+    -webkit-align-items: flex-end;
+    -webkit-box-align: flex-end;
+    -ms-flex-align: flex-end;
+    align-items: flex-end;
+  }
+}
+
+@supports (overflow:clip) {
+  .c1 {
+    overflow: clip;
+  }
+}
+
+@supports (overflow:clip) {
+  .c3 {
+    overflow: clip;
+  }
+}
+
+<div
+  class="c0"
+  data-testid="StatusIconRoot"
+  size="16"
+>
+  <div
+    class="c1"
+  >
+    <img
+      alt="MetaMask icon"
+      class="c2"
+      src="metamask.svg"
+    />
+  </div>
+  <div
+    class="c3"
+  >
+    <img
+      class="c2"
+      src="socks.svg"
+    />
+  </div>
+</div>
+`;