Feat/swarm UI url

src/components/Auth/index.tsx

@@ -15,7 +15,7 @@
 
 export const AuthGuard = ({ children }: PropsWithChildren) => {
   const [unAuthorized, setUnauthorized] = useState(false)
-  const { setBudget, setIsAdmin, setPubKey, setIsAuthenticated } = useUserStore((s) => s)
+  const { setBudget, setIsAdmin, setPubKey, setIsAuthenticated, setSwarmUiUrl } = useUserStore((s) => s)
   const { splashDataLoading } = useDataStore((s) => s)
   const [renderMainPage, setRenderMainPage] = useState(false)
 
@@ -67,9 +67,15 @@
       const res = await getIsAdmin()
 
       if (res.data) {
-        localStorage.setItem('admin', JSON.stringify({ isAdmin: res.data.isAdmin }))
+        const isAdmin = !!res.data.isAdmin
 
-        setIsAdmin(!!res.data.isAdmin)
+        localStorage.setItem('admin', JSON.stringify({ isAdmin }))
+
+        if (isAdmin && res.data.swarmUiUrl) {
+          setSwarmUiUrl(res.data.swarmUiUrl)
+        }
+
+        setIsAdmin(isAdmin)
         setTrendingTopicsFeatureFlag(res.data.trendingTopics)
         setQueuedSourcesFeatureFlag(res.data.queuedSources)
         setCustomSchemaFeatureFlag(res.data.customSchema)
@@ -91,6 +97,7 @@
     setCustomSchemaFeatureFlag,
     setRealtimeGraphFeatureFlag,
     setChatInterfaceFeatureFlag,
+    setSwarmUiUrl,
   ])
 
   // auth checker
@@ -105,7 +112,7 @@
 
           await handleAuth()
         } catch (error) {
           console.log(error)
         }
       }
 

src/components/SettingsModal/SettingsView/General/index.tsx

@@ -1,16 +1,17 @@
-import { FC, useState } from 'react'
 import { Button } from '@mui/material'
+import { FC, useState } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
+import { MdError } from 'react-icons/md'
 import { ClipLoader } from 'react-spinners'
 import styled from 'styled-components'
 import { Flex } from '~/components/common/Flex'
+import { SuccessNotify } from '~/components/common/SuccessToast'
 import { TextInput } from '~/components/common/TextInput'
 import { NODE_ADD_ERROR, requiredRule } from '~/constants'
-import { TAboutParams, postAboutData } from '~/network/fetchSourcesData'
+import { postAboutData, TAboutParams } from '~/network/fetchSourcesData'
 import { useAppStore } from '~/stores/useAppStore'
+import { useUserStore } from '~/stores/useUserStore'
 import { colors } from '~/utils/colors'
-import { SuccessNotify } from '~/components/common/SuccessToast'
-import { MdError } from 'react-icons/md'
 
 type Props = {
   initialValues: TAboutParams
@@ -21,6 +22,7 @@ export const General: FC<Props> = ({ initialValues, onClose }) => {
   const form = useForm<TAboutParams>({ defaultValues: initialValues, mode: 'onSubmit' })
   const { isSubmitting } = form.formState
   const setAppMetaData = useAppStore((s) => s.setAppMetaData)
+  const { swarmUiUrl } = useUserStore((s) => s)
   const [error, setError] = useState<string>('')
 
   const onSubmit = form.handleSubmit(async (data) => {
@@ -56,8 +58,14 @@ export const General: FC<Props> = ({ initialValues, onClose }) => {
   return (
     <FormProvider {...form}>
       <StyledForm id="add-node-form" onSubmit={handleSubmit}>
-        <>
+        <FormBody>
           <Flex>
+            {swarmUiUrl && (
+              <SwarmLinkContainer>
+                <Link href={swarmUiUrl}>View Swarm UI</Link>
+              </SwarmLinkContainer>
+            )}
+
             <Flex pt={20}>
               <TextInput
                 id="cy-about-title-id"
@@ -81,7 +89,7 @@ export const General: FC<Props> = ({ initialValues, onClose }) => {
             </Flex>
           </Flex>
 
-          <Flex mt={210} py={error ? 0 : 24}>
+          <Flex py={error ? 0 : 24}>
             <Button
               color="secondary"
               disabled={isSubmitting}
@@ -108,14 +116,15 @@ export const General: FC<Props> = ({ initialValues, onClose }) => {
               </StyledError>
             ) : null}
           </Flex>
-        </>
+        </FormBody>
       </StyledForm>
     </FormProvider>
   )
 }
 
 const StyledForm = styled.form`
   padding: 36px;
+  height: 100%;
 `
 
 const IconWrapper = styled.span`
@@ -130,6 +139,26 @@ const IconWrapper = styled.span`
   }
 `
 
+const SwarmLinkContainer = styled(Flex)`
+  display: flex;
+  align-items: flex-end;
+`
+
+const FormBody = styled(Flex)`
+  display: flex;
+  direction: column;
+  justify-content: space-between;
+  height: 100%;
+`
+
+const Link = styled.a`
+  font-family: 'Barlow';
+  font-size: 16px;
+  color: ${colors.PRIMARY_BLUE};
+  text-decoration: underline;
+  font-weight: 500;
+`
+
 const StyledError = styled(Flex)`
   display: flex;
   align-items: center;

src/stores/useUserStore/index.ts

@@ -16,9 +16,11 @@ export type UserStore = {
   tribeUuid: string
   setTribeUuid: (val: string) => void
   tribeHost: string
+  swarmUiUrl: string
   setTribeHost: (val: string) => void
   setIsAuthenticated: (val: boolean) => void
   setSignedToken: (val: string) => void
+  setSwarmUiUrl: (val: string) => void
 }
 
 const defaultData: Omit<
@@ -31,6 +33,7 @@ const defaultData: Omit<
   | 'setTribeHost'
   | 'setIsAuthenticated'
   | 'setSignedToken'
+  | 'setSwarmUiUrl'
 > = {
   isAdmin: false,
   isAuthenticated: false,
@@ -40,6 +43,7 @@ const defaultData: Omit<
   tribeHost: '',
   tribeUuid: '',
   signedToken: '',
+  swarmUiUrl: '',
 }
 
 export const useUserStore = create<UserStore>((set) => ({
@@ -59,4 +63,5 @@ export const useUserStore = create<UserStore>((set) => ({
   setTribeHost: (tribeHost) => set({ tribeHost }),
   setIsAuthenticated: (isAuthenticated) => set({ isAuthenticated }),
   setSignedToken: (signedToken) => set({ signedToken }),
+  setSwarmUiUrl: (swarmUiUrl) => set({ swarmUiUrl }),
 }))

src/types/index.ts

@@ -240,6 +240,7 @@ export type IsAdminResponse = {
     customSchema: boolean
     realtimeGraph: boolean
     chatInterface: boolean
+    swarmUiUrl: string
   }
   success: boolean
   message: string