fix(canonical-bridge-widget): Fix tron icon display issue on mobile

bnb-chain · Oct 21, 2024 · 535bb24 · 535bb24
1 parent 56de81f
commit 535bb24
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 0 deletions.
diff --git a/apps/canonical-bridge-ui/pages/_document.tsx b/apps/canonical-bridge-ui/pages/_document.tsx
@@ -10,6 +10,16 @@ export default class Document extends NextDocument {
       <Html lang="en">
         <Head>
           <link rel="stylesheet" href={`${env.ASSET_PREFIX}/fonts/index.css`} />
+          <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js" defer></script>
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `
+              window.onload = () => {
+                new window.VConsole();
+              }
+            `,
+            }}
+          ></script>
         </Head>
         <body>
           <ColorModeScript initialColorMode={theme.config.initialColorMode} />

diff --git a/packages/canonical-bridge-widget/src/modules/wallet/components/ProfileMenu/index.tsx b/packages/canonical-bridge-widget/src/modules/wallet/components/ProfileMenu/index.tsx
@@ -27,6 +27,20 @@ export const ProfileMenu = () => {
             pl={{ base: '0', md: '12px' }}
             pr={{ base: '0', md: '16px' }}
           >
+            {/* Don't remove the below component, otherwise tron icon will be abnormal on mobile */}
+            <Center
+              boxSize={1}
+              opacity={0}
+              position="absolute"
+              left={0}
+              zIndex={-1}
+              sx={{
+                opacity: 0,
+                boxSize: 1,
+              }}
+            >
+              {walletIcon}
+            </Center>
             {walletIcon && (
               <Center
                 sx={{