Fix connection screen (#899)

src/app/screens/connect/connectionRequest/dappLogo.tsx

@@ -1,24 +1,33 @@
 /* eslint-disable import/prefer-default-export */
 import styled from 'styled-components';
 
-// eslint-disable-next-line import/prefer-default-export
-const Logo = styled('img')((props) => ({
-  maxHeight: 48,
-  maxWidth: 48,
-  paddingBlockStart: props.theme.space.xxl,
+const ImgContainer = styled('div')({
+  display: 'flex',
+  justifyContent: 'center',
+});
+
+const Img = styled('img')((props) => ({
+  height: 48,
+  width: 48,
   alignSelf: 'center',
+  objectFit: 'contain',
+  borderRadius: props.theme.radius(1),
 }));
 
 type Props = {
   /**
    * Any source that can be used as an image source.
    */
-  src?: string;
+  src?: string | null;
 };
 export function DappLogo({ src }: Props) {
   if (!src) {
     return null;
   }
 
-  return <Logo src={src} alt="Dapp Logo" />;
+  return (
+    <ImgContainer>
+      <Img src={src} alt="Dapp Logo" />
+    </ImgContainer>
+  );
 }

src/app/screens/connect/connectionRequest/host.tsx

@@ -1,3 +1,6 @@
+import { permissions } from '@secretkeylabs/xverse-core';
+import { useTranslation } from 'react-i18next';
+
 import styled from 'styled-components';
 
 /* eslint-disable import/prefer-default-export */
@@ -8,12 +11,29 @@ const Container = styled('div')((props) => ({
 }));
 
 type Props = {
-  url: ConstructorParameters<typeof URL>[0];
+  origin: string;
 };
 
-export function Host({ url }: Props) {
-  const parsedUrl = new URL(url);
-  const { host } = parsedUrl;
+export function Host({ origin }: Props) {
+  const { t } = useTranslation('translation', { keyPrefix: 'AUTH_REQUEST_SCREEN' });
 
-  return <Container>{host}</Container>;
+  const { nameFromOrigin } = permissions.utils.originName;
+  const name = nameFromOrigin(origin);
+
+  const dappName = (() => {
+    // This means there was no name found for the origin, and the host is used
+    // as the name instead.
+    if (name === origin) {
+      const parsedUrl = new URL(origin);
+      return parsedUrl.host;
+    }
+
+    return name;
+  })();
+
+  return (
+    <Container>
+      {t('REQUEST_TOOLTIP')} {dappName}
+    </Container>
+  );
 }

src/app/screens/connect/connectionRequest/index.styles.tsx

@@ -56,3 +56,15 @@ export const RequestMessage = styled.p((props) => ({
   wordWrap: 'break-word',
   marginTop: props.theme.space.l,
 }));
+
+export const DappInfoContainer = styled('div')((props) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  rowGap: props.theme.space.m,
+}));
+
+export const DappInfoTextContainer = styled('div')((props) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  rowGap: props.theme.space.xxs,
+}));

src/app/screens/connect/connectionRequest/index.tsx

@@ -23,11 +23,15 @@ import {
   AddressBoxContainer,
   Container,
   ContentContainer,
+  DappInfoContainer,
+  DappInfoTextContainer,
   PermissionDescriptionsContainer,
   RequestMessage,
 } from './index.styles';
 
 import useSelectedAccount from '@hooks/useSelectedAccount';
+import { getAppIconFromWebManifest, safePromise } from '@secretkeylabs/xverse-core';
+import { useQuery } from '@tanstack/react-query';
 import AddressPurposeBox from '../addressPurposeBox';
 import * as Permissions from './permissions';
 import { SelectAccountPrompt } from './selectAccount';
@@ -45,6 +49,17 @@ function ConnectionRequestInner({ data, context }: ConnectionRequestInnerProps)
   }, []);
   const handleAccept = useMakeHandleAccept({ context, data });
 
+  const { data: appIconSrc } = useQuery({
+    queryKey: ['appIcon', context.origin],
+    queryFn: async () => {
+      const [error, icon] = await safePromise(getAppIconFromWebManifest(context.origin));
+
+      if (error) return null;
+
+      return icon;
+    },
+  });
+
   const AddressPurposeRow = useCallback(
     (purpose: AddressPurpose) => {
       if (purpose === AddressPurpose.Payment) {
@@ -88,14 +103,18 @@ function ConnectionRequestInner({ data, context }: ConnectionRequestInnerProps)
   return (
     <Container>
       <ContentContainer>
-        <DappLogo />
+        <DappInfoContainer>
+          <DappLogo src={appIconSrc} />
+          <DappInfoTextContainer>
             <Title />
-        <Host url={context.origin} />
+            <Host origin={context.origin} />
             {(data as ConnectRequestMessage).params?.message && (
               <RequestMessage>
                 {(data as ConnectRequestMessage).params?.message?.substring(0, 80)}
               </RequestMessage>
             )}
+          </DappInfoTextContainer>
+        </DappInfoContainer>
         <AccountSwitcherContainer>
           <SelectAccountPrompt />
         </AccountSwitcherContainer>