feat: add helper message

FuelLabs · Sep 23, 2024 · 35c7218 · 35c7218
1 parent 9844571
commit 35c7218
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
diff --git a/packages/react/src/ui/Connect/components/Connector/Connector.tsx b/packages/react/src/ui/Connect/components/Connector/Connector.tsx
@@ -11,6 +11,7 @@ import { Spinner } from '../Spinner/Spinner';
 import {
   ConnectorContent,
   ConnectorDescription,
+  ConnectorHelper,
   ConnectorImage,
   ConnectorLinkButton,
   ConnectorTitle,
@@ -71,6 +72,12 @@ export function Connector({ className, connector, theme }: ConnectorProps) {
         {loading && <Spinner size={26} color="var(--fuel-loader-background)" />}
         {!loading && (dialogLabels.buttonLabel || actionText)}
       </ConnectorLinkButton>
+      {dialogState === DialogState.CONNECTING && (
+        <ConnectorHelper>
+          If you have installed and is not detected <br /> try to refresh the
+          page.
+        </ConnectorHelper>
+      )}
     </div>
   );
 }
diff --git a/packages/react/src/ui/Connect/components/Connector/styles.tsx b/packages/react/src/ui/Connect/components/Connector/styles.tsx
@@ -58,3 +58,13 @@ export const ConnectorContent = styled.div`
   display: flex;
   flex-direction: column;
 `;
+
+export const ConnectorHelper = styled.p`
+  font-size: 0.8em;
+  font-weight: 400;
+  text-align: center;
+  margin: 0.6em 1.2em;
+  line-height: 1.2em;
+  padding: 0 2em;
+  opacity: 0.5;
+`;