feat(web): explainer-info-at-sign-in-and-connect-resolver

Author: tractorss

web/src/components/EnsureAuth.tsx

@@ -1,18 +1,37 @@
 import React, { useCallback } from "react";
+import styled from "styled-components";
 
 import { useAccount } from "wagmi";
+
 import { useAtlasProvider } from "@kleros/kleros-app";
 import { Button } from "@kleros/ui-components-library";
+
 import { errorToast, infoToast, successToast } from "utils/wrapWithToast";
 
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  justify-content: center;
+  align-items: center;
+`;
+
+const StyledInfo = styled.p`
+  margin: 0;
+  padding: 0;
+`;
+
 interface IEnsureAuth {
   children: React.ReactElement;
+  message?: string;
+  buttonText?: string;
   className?: string;
 }
 
-const EnsureAuth: React.FC<IEnsureAuth> = ({ children, className }) => {
+const EnsureAuth: React.FC<IEnsureAuth> = ({ children, message, buttonText, className }) => {
   const { address } = useAccount();
   const { isVerified, isSigningIn, authoriseUser } = useAtlasProvider();
+
   const handleClick = useCallback(() => {
     infoToast(`Signing in User...`);
 
@@ -26,13 +45,16 @@ const EnsureAuth: React.FC<IEnsureAuth> = ({ children, className }) => {
   return isVerified ? (
     children
   ) : (
-    <Button
-      text="Sign In"
-      onClick={handleClick}
-      disabled={isSigningIn || !address}
-      isLoading={isSigningIn}
-      {...{ className }}
-    />
+    <Container>
+      {message ? <StyledInfo>{message}</StyledInfo> : null}
+      <Button
+        text={buttonText ?? "Sign In"}
+        onClick={handleClick}
+        disabled={isSigningIn || !address}
+        isLoading={isSigningIn}
+        {...{ className }}
+      />
+    </Container>
   );
 };
 

web/src/pages/Resolver/index.tsx

@@ -5,6 +5,8 @@ import { Navigate, Route, Routes, useLocation } from "react-router-dom";
 import { useToggle } from "react-use";
 import { useAccount } from "wagmi";
 
+import { useAtlasProvider } from "@kleros/kleros-app";
+
 import { MAX_WIDTH_LANDSCAPE, landscapeStyle } from "styles/landscapeStyle";
 import { responsiveSize } from "styles/responsiveSize";
 
@@ -75,9 +77,26 @@ const MiddleContentContainer = styled.div`
   position: relative;
 `;
 
+const Heading = styled.h1`
+  margin: 0 0 0 32px;
+  font-size: 24px;
+  font-weight: 600;
+  color: ${({ theme }) => theme.primaryText};
+  text-align: center;
+`;
+
+const Paragraph = styled.p`
+  padding: 0;
+  margin-bottom: 32px;
+  font-size: 16px;
+  text-align: center;
+  color: ${({ theme }) => theme.secondaryText};
+`;
+
 const DisputeResolver: React.FC = () => {
   const location = useLocation();
   const [isDisputeResolverMiniGuideOpen, toggleDisputeResolverMiniGuide] = useToggle(false);
+  const { isVerified } = useAtlasProvider();
   const { isConnected } = useAccount();
   const isPreviewPage = location.pathname.includes("/preview");
   const isLandingPage = location.pathname.includes("/create");
@@ -86,8 +105,14 @@ const DisputeResolver: React.FC = () => {
     <Wrapper>
       <HeroImage />
       <Container>
+        {!isConnected || !isVerified ? (
+          <>
+            <Heading>Justise as a Service</Heading>
+            <Paragraph>You send your disputes. Kleros sends back decisions.</Paragraph>
+          </>
+        ) : null}
         {isConnected ? (
-          <StyledEnsureAuth>
+          <StyledEnsureAuth buttonText="Sign in to start">
             <MiddleContentContainer>
               {isConnected && !isPreviewPage && !isLandingPage ? (
                 <HowItWorksAndTimeline>