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; +`;