fix: impersonated visibility and added a.DI link to UI

bgd-labs · Feb 27, 2024 · f7115ce · f7115ce · github-actions · Feb 27, 2024
1 parent 31d3c3f
commit f7115ce
Show file tree

Hide file tree

Showing 9 changed files with 81 additions and 30 deletions.
diff --git a/.github/workflows/ipfs_deploy.yml b/.github/workflows/ipfs_deploy.yml
@@ -61,5 +61,5 @@ jobs:
               owner: context.repo.owner,
               repo: context.repo.repo,
               release_id: data.id,
-              body: data.body + `\n <hr> \n Ipfs deployment:` + `${{steps.pinata.outputs.uri}}`,
+              body: data.body + `\n <hr> \n Ipfs deployment: ` + `${{steps.pinata.outputs.uri}}`,
             })
diff --git a/src/ui/components/NetworkIcon.tsx b/src/ui/components/NetworkIcon.tsx
@@ -1,5 +1,5 @@
 import { Box, SxProps } from '@mui/system';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { toHex } from 'viem';
 import {
   arbitrum,
@@ -74,8 +74,19 @@ export function NetworkIcon({
   css,
   withTooltip,
 }: NetworkIconProps) {
-  const [networkIconName] = useState(getIconNetworkName(chainId));
-  const [chain] = useState(chainInfoHelper.getChainParameters(chainId));
+  const [networkIconName, setNetworkIconName] = useState(
+    getIconNetworkName(chainId),
+  );
+  const [chain, setChain] = useState(
+    chainInfoHelper.getChainParameters(chainId),
+  );
+
+  useEffect(() => {
+    if (chainId) {
+      setNetworkIconName(getIconNetworkName(chainId));
+      setChain(chainInfoHelper.getChainParameters(chainId));
+    }
+  }, [chainId]);
 
   return (
     <>

diff --git a/src/ui/layouts/AppHeader.tsx b/src/ui/layouts/AppHeader.tsx
@@ -521,6 +521,23 @@ export function AppHeader() {
                   )}
                 </React.Fragment>
               ))}
+              <Link
+                href={ROUTES.adi}
+                inNewWindow
+                onClick={() => handleCloseMobileMenu()}
+                css={{
+                  color: '$textLight',
+                  mb: 14,
+                  display: 'block',
+                }}>
+                <Box
+                  component="p"
+                  sx={{
+                    typography: 'body',
+                  }}>
+                  {texts.header.adi}
+                </Box>
+              </Link>
               <Link
                 href={ROUTES.payloadsExplorer}
                 onClick={() => handleCloseMobileMenu()}

diff --git a/src/ui/layouts/SettingsButton.tsx b/src/ui/layouts/SettingsButton.tsx
@@ -191,9 +191,28 @@ export function SettingsButton() {
                   color: '$textWhite',
                   [theme.breakpoints.up('lg')]: { width: 190 },
                 }}>
+                <Link
+                  href={ROUTES.adi}
+                  inNewWindow
+                  css={{
+                    display: 'inline-block',
+                    color: '$textDisabled',
+                    lineHeight: 1,
+                    hover: {
+                      color: theme.palette.$textWhite,
+                    },
+                    mb: 15,
+                  }}
+                  onClick={close}>
+                  <Box sx={{ typography: 'buttonSmall' }}>
+                    {texts.header.adi}
+                  </Box>
+                </Link>
+
                 <Link
                   href={ROUTES.payloadsExplorer}
                   css={{
+                    display: 'inline-block',
                     color: '$textDisabled',
                     lineHeight: 1,
                     hover: {
@@ -210,6 +229,7 @@ export function SettingsButton() {
                 <Link
                   href={ROUTES.rpcSwitcher}
                   css={{
+                    display: 'inline-block',
                     color: isRpcHasError ? '$error' : '$textDisabled',
                     lineHeight: 1,
                     hover: {
@@ -250,7 +270,11 @@ export function SettingsButton() {
                 </Link>
                 <Box
                   component="p"
-                  sx={{ typography: 'headline', color: '$textLight' }}>
+                  sx={{
+                    display: 'block',
+                    typography: 'headline',
+                    color: '$textLight',
+                  }}>
                   {texts.header.theme}
                 </Box>
                 <Divider sx={{ mt: 8, mb: 14 }} />

diff --git a/src/ui/utils/routes.ts b/src/ui/utils/routes.ts
@@ -7,4 +7,5 @@ export const ROUTES = {
   rpcSwitcher: '/rpc-switcher',
   proposalCreateOverview: '/proposal-create-overview',
   payloadsExplorer: '/payloads-explorer',
+  adi: 'https://adi.onaave.com/',
 };
diff --git a/src/ui/utils/texts.ts b/src/ui/utils/texts.ts
@@ -285,6 +285,7 @@ export const texts = {
     appMode: 'App mode',
     theme: 'Theme',
     payloadsExplorer: 'Payloads explorer',
+    adi: 'Aave delivery infrastructure',
     appModeDefault: 'Default',
     appModeDev: 'Dev',
     appModeExpert: 'Expert',

diff --git a/src/web3/components/wallet/ConnectWalletModal.tsx b/src/web3/components/wallet/ConnectWalletModal.tsx
@@ -46,16 +46,15 @@ export const wallets: Wallet[] = [
     walletType: WalletType.Impersonated,
     icon: `url(${setRelativePath('/images/wallets/impersonated.svg')})`,
     title: 'Impersonated',
-    isVisible: false,
+    isVisible: true,
   },
 ];
 
 export function ConnectWalletModal({
   isOpen,
   setIsOpen,
 }: ConnectWalletModalProps) {
-  const { walletActivating, walletConnectionError, setModalOpen, appMode } =
-    useStore();
+  const { walletActivating, walletConnectionError, setModalOpen } = useStore();
 
   const [impersonatedFormOpen, setImpersonatedFormOpen] = useState(false);
 
@@ -71,19 +70,16 @@ export function ConnectWalletModal({
   }, [walletActivating, walletConnectionError]);
 
   return (
-    <BasicModal isOpen={isOpen} setIsOpen={setIsOpen} withCloseButton>
+    <BasicModal
+      isOpen={isOpen}
+      setIsOpen={setIsOpen}
+      withCloseButton
+      onBackButtonClick={
+        impersonatedFormOpen ? () => setImpersonatedFormOpen(false) : undefined
+      }>
       <ConnectWalletModalContent
         walletActivating={walletActivating}
-        wallets={wallets.map((wallet) => {
-          if (wallet.walletType === WalletType.Impersonated) {
-            return {
-              ...wallet,
-              isVisible: appMode === 'expert',
-            };
-          } else {
-            return wallet;
-          }
-        })}
+        wallets={wallets}
         walletConnectionError={walletConnectionError}
         impersonatedFormOpen={impersonatedFormOpen}
         setImpersonatedFormOpen={setImpersonatedFormOpen}

diff --git a/src/web3/components/wallet/ConnectWalletModalContent.tsx b/src/web3/components/wallet/ConnectWalletModalContent.tsx
@@ -33,7 +33,7 @@ export function ConnectWalletModalContent({
         alignItems: 'center',
         justifyContent: 'center',
         flexDirection: 'column',
-        pt: 20,
+        pt: impersonatedFormOpen ? 60 : 20,
       }}>
       <Box
         sx={{

diff --git a/src/web3/components/wallet/ImpersonatedForm.tsx b/src/web3/components/wallet/ImpersonatedForm.tsx
@@ -27,13 +27,6 @@ export function ImpersonatedForm({ closeClick }: ImpersonatedFormProps) {
   return (
     <Box
       sx={{ display: 'flex', width: '100%', flex: 1, flexDirection: 'column' }}>
-      <BackButton3D
-        isSmall
-        alwaysWithBorders
-        alwaysVisible
-        onClick={() => closeClick(false)}
-        wrapperCss={{ mb: 40 }}
-      />
       <Box
         sx={{
           display: 'flex',
@@ -67,9 +60,17 @@ export function ImpersonatedForm({ closeClick }: ImpersonatedFormProps) {
                   />
                 )}
               </Field>
-              <BigButton alwaysWithBorders type="submit" css={{ mt: 24 }}>
-                {texts.walletConnect.impersonatedButtonTitle}
-              </BigButton>
+
+              <Box
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}>
+                <BigButton alwaysWithBorders type="submit" css={{ mt: 60 }}>
+                  {texts.walletConnect.impersonatedButtonTitle}
+                </BigButton>
+              </Box>
             </Box>
           )}
         </Form>