From 7b13e0726abb011e31c28680d895d01ff5877724 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Esteban=20Mi=C3=B1o?= <efmino@uc.cl>
Date: Wed, 2 Aug 2023 10:39:38 -0400
Subject: [PATCH] fix: connected apps network badge (#825)

---
 .../popup/pages/home/ConnectedApps.tsx        | 205 +++++++++---------
 1 file changed, 107 insertions(+), 98 deletions(-)

diff --git a/src/entries/popup/pages/home/ConnectedApps.tsx b/src/entries/popup/pages/home/ConnectedApps.tsx
index 1e1c2faf8c..238801384f 100644
--- a/src/entries/popup/pages/home/ConnectedApps.tsx
+++ b/src/entries/popup/pages/home/ConnectedApps.tsx
@@ -19,6 +19,7 @@ import {
   Stack,
   Symbol,
   Text,
+  TextOverflow,
 } from '~/design-system';
 import { Row, Rows } from '~/design-system/components/Rows/Rows';
 
@@ -185,111 +186,119 @@ const ConnectedApp = ({
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
       >
-        {disconnectButtonVisible && (
-          <Box position="absolute" paddingTop="12px" style={{ right: 20 }}>
-            <ButtonSymbol
-              color="red"
-              height="28px"
-              variant="raised"
-              symbol="xmark"
-              borderRadius="8px"
-              onClick={disconnectAppSession}
-            />
-          </Box>
-        )}
-        <ConnectedAppNetworkMenu
-          url={url}
-          menuTriggerId={`connected-app-menu-${appHost}`}
-        >
-          <Inset horizontal="12px" vertical="8px">
-            <Inline alignHorizontal="justify" alignVertical="center">
-              <Columns space="8px">
-                <Column width="content">
-                  <Box
-                    style={{
-                      width: '36px',
-                      height: '36px',
-                      overflow: 'hidden',
-                    }}
-                  >
-                    <ExternalImage
-                      mask={appsConnectedImageMask}
-                      src={appLogo}
-                      width="36"
-                      height="36"
-                    />
-                  </Box>
-                  <Box
-                    position="absolute"
-                    style={{
-                      marginLeft: '-7px',
-                      marginTop: '-10.5px',
-                    }}
-                  >
-                    <Box
-                      style={{
-                        height: 14,
-                        width: 14,
-                        borderRadius: 7,
-                      }}
-                    >
-                      <Inline
-                        alignHorizontal="center"
-                        alignVertical="center"
-                        height="full"
+        <Columns>
+          <Column>
+            <ConnectedAppNetworkMenu
+              url={url}
+              menuTriggerId={`connected-app-menu-${appHost}`}
+            >
+              <Inset horizontal="12px" vertical="8px">
+                <Inline alignHorizontal="justify" alignVertical="center">
+                  <Columns space="8px">
+                    <Column width="content">
+                      <Box
+                        style={{
+                          width: '36px',
+                          height: '36px',
+                          overflow: 'hidden',
+                        }}
                       >
-                        <Bleed top="7px">
-                          <ChainBadge chainId={appSession?.chainId} size="14" />
-                        </Bleed>
-                      </Inline>
-                    </Box>
-                  </Box>
-                </Column>
-
-                <Column>
-                  <Box>
-                    <Stack space="8px">
-                      <Box style={{ wordBreak: 'break-all' }}>
-                        <Text
-                          align="left"
-                          size="14pt"
-                          weight="semibold"
-                          color="label"
-                        >
-                          {appName || appHost}
-                        </Text>
+                        <ExternalImage
+                          mask={appsConnectedImageMask}
+                          src={appLogo}
+                          width="36"
+                          height="36"
+                        />
                       </Box>
-                      <Inline space="4px" alignVertical="center">
+                      <Box
+                        style={{
+                          marginLeft: '-7px',
+                          marginTop: '-10.5px',
+                        }}
+                      >
                         <Box
-                          background="fill"
-                          borderRadius="30px"
                           style={{
-                            width: '16px',
-                            height: '16px',
-                            overflow: 'hidden',
+                            height: 14,
+                            width: 14,
+                            borderRadius: 7,
                           }}
                         >
-                          <WalletAvatar
-                            address={address}
-                            size={16}
-                            emojiSize="12pt"
-                          />
+                          <Inline
+                            alignHorizontal="center"
+                            alignVertical="center"
+                            height="full"
+                          >
+                            <Bleed top="7px">
+                              <ChainBadge
+                                chainId={appSession?.chainId}
+                                size="14"
+                              />
+                            </Bleed>
+                          </Inline>
                         </Box>
-                        <Text
-                          color="labelTertiary"
-                          size="12pt"
-                          weight="semibold"
-                        >
-                          {ensName || truncateAddress(address)}
-                        </Text>
-                      </Inline>
-                    </Stack>
-                  </Box>
-                </Column>
-              </Columns>
-            </Inline>
-          </Inset>
-        </ConnectedAppNetworkMenu>
+                      </Box>
+                    </Column>
+
+                    <Column>
+                      <Box>
+                        <Stack space="8px">
+                          <Box style={{ wordBreak: 'break-all' }}>
+                            <TextOverflow
+                              align="left"
+                              size="14pt"
+                              weight="semibold"
+                              color="label"
+                            >
+                              {appName || appHost}
+                            </TextOverflow>
+                          </Box>
+                          <Inline space="4px" alignVertical="center">
+                            <Box
+                              background="fill"
+                              borderRadius="30px"
+                              style={{
+                                width: '16px',
+                                height: '16px',
+                                overflow: 'hidden',
+                              }}
+                            >
+                              <WalletAvatar
+                                address={address}
+                                size={16}
+                                emojiSize="12pt"
+                              />
+                            </Box>
+                            <Text
+                              color="labelTertiary"
+                              size="12pt"
+                              weight="semibold"
+                            >
+                              {ensName || truncateAddress(address)}
+                            </Text>
+                          </Inline>
+                        </Stack>
+                      </Box>
+                    </Column>
+                  </Columns>
+                </Inline>
+              </Inset>
+            </ConnectedAppNetworkMenu>
+          </Column>
+          <Column width="content">
+            {disconnectButtonVisible && (
+              <Box paddingTop="12px" paddingRight="12px">
+                <ButtonSymbol
+                  color="red"
+                  height="28px"
+                  variant="raised"
+                  symbol="xmark"
+                  borderRadius="8px"
+                  onClick={disconnectAppSession}
+                />
+              </Box>
+            )}
+          </Column>
+        </Columns>
       </Box>
     </Box>
   );