diff --git a/src/i18n/locales/en/translations.json b/src/i18n/locales/en/translations.json index 153934dc8..23df41cab 100644 --- a/src/i18n/locales/en/translations.json +++ b/src/i18n/locales/en/translations.json @@ -22,6 +22,7 @@ "hours": "Hours", "minutes": "Minutes", "seconds": "Seconds", + "connecting": "Connecting", "duration.left": "{{duration}} left", "duration.ago": "{{duration}} ago", "toast.counter": "{{ index }} of {{ count }}", diff --git a/src/sections/provider/ProviderSelectModal.styled.ts b/src/sections/provider/ProviderSelectModal.styled.ts index 804b12511..540dbcad4 100644 --- a/src/sections/provider/ProviderSelectModal.styled.ts +++ b/src/sections/provider/ProviderSelectModal.styled.ts @@ -37,3 +37,26 @@ export const SSwitchContainer = styled.div` margin: 0 -24px; } ` + +export const SSWitchContent = styled.div` + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; +` + +export const SAutoModeActiveContainer = styled.div` + border-radius: 8px; + background: rgba(${theme.rgbColors.primaryA06}, 0.06); + position: relative; + + pointer-events: none; + + & > button { + position: absolute; + inset: 0; + border: 0; + box-shadow: none; + height: 100%; + } +` diff --git a/src/sections/provider/ProviderSelectModal.tsx b/src/sections/provider/ProviderSelectModal.tsx index 3a6565284..45be411bb 100644 --- a/src/sections/provider/ProviderSelectModal.tsx +++ b/src/sections/provider/ProviderSelectModal.tsx @@ -1,4 +1,4 @@ -import { useProviderRpcUrlStore } from "api/provider" +import { useActiveProvider, useProviderRpcUrlStore } from "api/provider" import { Modal } from "components/Modal/Modal" import { useState } from "react" @@ -7,19 +7,28 @@ import { Text } from "components/Typography/Text/Text" import { useTranslation } from "react-i18next" import { ProviderSelectForm } from "sections/provider/ProviderSelectForm" import { useRpcStore } from "state/store" -import { SSwitchContainer } from "./ProviderSelectModal.styled" +import { + SAutoModeActiveContainer, + SSwitchContainer, + SSWitchContent, +} from "./ProviderSelectModal.styled" import { DeleteModal } from "./components/DeleteModal/DeleteModal" import { Button } from "components/Button/Button" +import { ProviderItem } from "sections/provider/components/ProviderItem/ProviderItem" +import { useRpcProvider } from "providers/rpcProvider" export function ProviderSelectModal(props: { open: boolean onClose: () => void }) { + const { isLoaded } = useRpcProvider() const { setRpcUrl, autoMode, setAutoMode } = useProviderRpcUrlStore() const [removeRpcUrl, setRemoveRpcUrl] = useState() const { t } = useTranslation() const { removeRpc } = useRpcStore() + const activeProvider = useActiveProvider() + return ( <> - -
- - {t("rpc.change.modal.autoMode.title")} - - - {t("rpc.change.modal.autoMode.desc")} - -
-
- - {autoMode - ? t("rpc.change.modal.autoMode.enabled") - : t("rpc.change.modal.autoMode.disabled")} - - -
+ + +
+ + {t("rpc.change.modal.autoMode.title")} + + + {t("rpc.change.modal.autoMode.desc")} + +
+
+ + {autoMode + ? t("rpc.change.modal.autoMode.enabled") + : t("rpc.change.modal.autoMode.disabled")} + + +
+
+ {autoMode && activeProvider.url && ( + + + {!isLoaded && ( + + )} + + )}
diff --git a/src/sections/provider/components/ProviderItem/ProviderItem.tsx b/src/sections/provider/components/ProviderItem/ProviderItem.tsx index 9ff124dc3..9a1edbf12 100644 --- a/src/sections/provider/components/ProviderItem/ProviderItem.tsx +++ b/src/sections/provider/components/ProviderItem/ProviderItem.tsx @@ -19,8 +19,9 @@ type ProviderItemProps = { url: string isActive?: boolean custom?: boolean - onClick: () => void + onClick?: () => void onRemove?: (id: string) => void + className?: string } export const ProviderItem = ({ @@ -30,6 +31,7 @@ export const ProviderItem = ({ custom, onClick, onRemove, + className, }: ProviderItemProps) => { const [isEdit, setIsEdit] = useState(false) const store = useProviderRpcUrlStore() @@ -47,7 +49,7 @@ export const ProviderItem = ({ ) return ( - +