chore: a couple of enhancements

algorandfoundation · Oct 30, 2024 · 287ec62 · 287ec62
1 parent f1f8298
commit 287ec62
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 23 deletions.
diff --git a/src/features/routing/components/templated-nav-link/templated-nav-link.tsx b/src/features/routing/components/templated-nav-link/templated-nav-link.tsx
@@ -8,30 +8,25 @@ export interface TemplatedNavLinkProps<TTemplateParams> {
   title?: string
   urlTemplate: UrlTemplateObj<TTemplateParams>
   urlParams?: Partial<TTemplateParams>
-  queryParams?: Record<string, string | number | boolean>
   children?: ReactNode
   ref?: React.LegacyRef<HTMLAnchorElement>
 }
 
-const buildQueryString = (queryParams?: Record<string, string | number | boolean>) => {
-  if (!queryParams) return ''
-  const queryString = new URLSearchParams(queryParams as Record<string, string>).toString()
-  return queryString ? `?${queryString}` : ''
-}
-
 export const TemplatedNavLink = fixedForwardRef(
   <TTemplateArgs,>(
-    { className, title, urlTemplate, urlParams, queryParams, children, ...rest }: TemplatedNavLinkProps<TTemplateArgs>,
+    { className, title, urlTemplate, urlParams, children, ...rest }: TemplatedNavLinkProps<TTemplateArgs>,
     ref: React.LegacyRef<HTMLAnchorElement>
   ) => {
     const existingParams = useParams()
 
-    const baseUrl = urlTemplate.build({ ...existingParams, ...urlParams } as TTemplateArgs)
-    const queryString = buildQueryString(queryParams)
-    const fullUrl = `${baseUrl}${queryString}`
-
     return (
-      <NavLink ref={ref} title={title} to={fullUrl} className={className} {...rest}>
+      <NavLink
+        ref={ref}
+        title={title}
+        to={urlTemplate.build({ ...existingParams, ...urlParams } as TTemplateArgs)}
+        className={className}
+        {...rest}
+      >
         {children}
       </NavLink>
     )

diff --git a/src/features/wallet/components/connect-wallet-button.tsx b/src/features/wallet/components/connect-wallet-button.tsx
@@ -5,7 +5,7 @@ import { Dialog, DialogContent, DialogHeader, SmallSizeDialogBody } from '@/feat
 import { ellipseAddress } from '@/utils/ellipse-address'
 import { AccountLink } from '@/features/accounts/components/account-link'
 import { Loader2 as Loader, CircleMinus, Wallet } from 'lucide-react'
-import { useNetworkConfig } from '@/features/network/data'
+import { localnetId, useNetworkConfig } from '@/features/network/data'
 import { useCallback, useMemo } from 'react'
 import { Popover, PopoverContent, PopoverTrigger } from '@/features/common/components/popover'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/features/common/components/select'
@@ -22,8 +22,8 @@ import { useDisconnectWallet } from '../hooks/use-disconnect-wallet'
 import { CopyButton } from '@/features/common/components/copy-button'
 import { useLoadableReverseLookupNfdResult } from '@/features/nfd/data'
 import { RenderLoadable } from '@/features/common/components/render-loadable'
-import { TemplatedNavLink } from '@/features/routing/components/templated-nav-link/templated-nav-link'
 import { Urls } from '@/routes/urls'
+import { useNavigate } from 'react-router-dom'
 
 export const connectWalletLabel = 'Connect Wallet'
 export const disconnectWalletLabel = 'Disconnect Wallet'
@@ -138,6 +138,7 @@ export function ConnectWalletButton() {
   const [dialogOpen, setDialogOpen] = useAtom(walletDialogOpenAtom)
   const networkConfig = useNetworkConfig()
   const refreshAvailableKmdWallets = useRefreshAvailableKmdWallets()
+  const navigate = useNavigate()
 
   let button = <></>
 
@@ -201,15 +202,20 @@ export function ConnectWalletButton() {
             <ProviderConnectButton key={`provider-${provider.metadata.id}`} provider={provider} onConnect={selectProvider(provider)} />
           )
         )}
-        {networkConfig.id === 'localnet' && (
-          <>
-            <span className="inline-flex justify-center text-sm font-medium">OR</span>
-            <Button variant="link" onClick={() => setDialogOpen(false)} className="h-0 pb-4">
-              <TemplatedNavLink urlTemplate={Urls.Fund} queryParams={{ create: true }}>
-                Create a funded dev account
-              </TemplatedNavLink>{' '}
+        {networkConfig.id === localnetId && (
+          <div className="flex flex-col gap-2">
+            <span className="inline-flex justify-center text-sm">OR</span>
+            <Button
+              variant="link"
+              onClick={() => {
+                setDialogOpen(false)
+                navigate({ pathname: Urls.Fund.build({}), search: '?create=true' })
+              }}
+              className="mb-0.5 h-auto p-0"
+            >
+              Create a funded dev account
             </Button>
-          </>
+          </div>
         )}
       </>
     )