add active RPC url to rpc modal when in auto mode

galacticcouncil · Dec 10, 2024 · c9ed8e5 · c9ed8e5
1 parent 8961f3c
commit c9ed8e5
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 32 deletions.
diff --git 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
@@ -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
@@ -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<string | undefined>()
   const { t } = useTranslation()
   const { removeRpc } = useRpcStore()
 
+  const activeProvider = useActiveProvider()
+
   return (
     <>
       <Modal
@@ -28,34 +37,44 @@ export function ProviderSelectModal(props: {
         title={t("rpc.change.modal.title")}
         headerVariant="GeistMono"
       >
-        <SSwitchContainer
-          sx={{
-            flex: "row",
-            align: "center",
-            justify: "space-between",
-            gap: 10,
-          }}
-        >
-          <div sx={{ maxWidth: 280 }}>
-            <Text fs={13} sx={{ mb: 4 }}>
-              {t("rpc.change.modal.autoMode.title")}
-            </Text>
-            <Text color="basic400" fs={12}>
-              {t("rpc.change.modal.autoMode.desc")}
-            </Text>
-          </div>
-          <div sx={{ flex: "row", align: "center", gap: 8 }}>
-            <Text fs={11} color="basic400">
-              {autoMode
-                ? t("rpc.change.modal.autoMode.enabled")
-                : t("rpc.change.modal.autoMode.disabled")}
-            </Text>
-            <Switch
-              name="rpc-auto-mode"
-              value={autoMode}
-              onCheckedChange={setAutoMode}
-            />
-          </div>
+        <SSwitchContainer>
+          <SSWitchContent>
+            <div sx={{ maxWidth: 280 }}>
+              <Text fs={13} sx={{ mb: 4 }}>
+                {t("rpc.change.modal.autoMode.title")}
+              </Text>
+              <Text color="basic400" fs={12}>
+                {t("rpc.change.modal.autoMode.desc")}
+              </Text>
+            </div>
+            <div sx={{ flex: "row", align: "center", gap: 8 }}>
+              <Text fs={11} color="basic400">
+                {autoMode
+                  ? t("rpc.change.modal.autoMode.enabled")
+                  : t("rpc.change.modal.autoMode.disabled")}
+              </Text>
+              <Switch
+                name="rpc-auto-mode"
+                value={autoMode}
+                onCheckedChange={setAutoMode}
+              />
+            </div>
+          </SSWitchContent>
+          {autoMode && activeProvider.url && (
+            <SAutoModeActiveContainer sx={{ mt: 14 }}>
+              <ProviderItem
+                sx={{ opacity: isLoaded ? 1 : 0 }}
+                name={activeProvider.name}
+                url={activeProvider.url}
+                isActive
+              />
+              {!isLoaded && (
+                <Button variant="outline" isLoading>
+                  {t("connecting")}
+                </Button>
+              )}
+            </SAutoModeActiveContainer>
+          )}
         </SSwitchContainer>
 
         <div sx={{ pt: 12 }}>

diff --git 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 (
-    <SItem onClick={onClick}>
+    <SItem onClick={onClick} className={className}>
       <div>
         <Text
           color={isActive ? "pink600" : "white"}