diff --git a/packages/react/src/ui/Connect/components/Connector/Connector.tsx b/packages/react/src/ui/Connect/components/Connector/Connector.tsx
index 1e6196ce..299ca32e 100644
--- 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 && }
{!loading && (dialogLabels.buttonLabel || actionText)}
+ {dialogState === DialogState.CONNECTING && !connector.installed && (
+
+ If you have installed and is not detected
try refreshing the
+ page.
+
+ )}
);
}
diff --git a/packages/react/src/ui/Connect/components/Connector/styles.tsx b/packages/react/src/ui/Connect/components/Connector/styles.tsx
index eb4e0838..e85baa3a 100644
--- 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;
+`;