Merge pull request #302 from algorandfoundation/create_fund

chore: add create funded dev link to connect wallet
algorandfoundation · Oct 30, 2024 · 4fff7e0 · 4fff7e0
2 parents 794eba8 + a9d2ee2
commit 4fff7e0
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 4 deletions.
diff --git a/src/features/common/components/button.tsx b/src/features/common/components/button.tsx
@@ -17,7 +17,7 @@ const buttonVariants = cva(
         ['outline-secondary']: 'border border-secondary bg-transparent text-secondary hover:bg-accent hover:text-secondary/90',
         secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
+        link: 'text-primary underline',
         ['no-style']: '',
       },
       size: {

diff --git a/src/features/fund/components/localnet-funding.tsx b/src/features/fund/components/localnet-funding.tsx
@@ -12,6 +12,7 @@ import { ellipseAddress } from '@/utils/ellipse-address'
 import { useLoadableActiveWalletAddressSnapshotAtom } from '@/features/wallet/data/active-wallet'
 import { RenderLoadable } from '@/features/common/components/render-loadable'
 import { PageLoader } from '@/features/common/components/page-loader'
+import { useLocation } from 'react-router-dom'
 
 const fundExistingAccountAccordionId = 'existing'
 const fundNewAccountAccordionId = 'new'
@@ -30,6 +31,11 @@ const fundLocalnetAccount = async (receiver: Address, amount: AlgoAmount) => {
 }
 
 export function LocalnetFunding() {
+  const { search } = useLocation()
+  const queryParams = new URLSearchParams(search)
+  const create = queryParams.get('create') === 'true'
+  const activeItem = create ? fundNewAccountAccordionId : fundExistingAccountAccordionId
+
   const { providers } = useWallet()
   const activeProvider = providers?.find((p) => p.isActive)
   const loadableActiveWalletAddressSnapshot = useLoadableActiveWalletAddressSnapshotAtom()
@@ -50,10 +56,11 @@ export function LocalnetFunding() {
     <RenderLoadable loadable={loadableActiveWalletAddressSnapshot} fallback={<PageLoader />}>
       {(activeWalletAddressSnapshot) => (
         <Accordion
+          key={activeItem}
           type="single"
           collapsible
           className="xl:w-1/2"
-          defaultValue={fundExistingAccountAccordionId}
+          defaultValue={activeItem}
           onValueChange={() => setCreatedAddress(undefined)}
         >
           <AccordionItem value={fundExistingAccountAccordionId}>

diff --git a/src/features/layout/pages/layout-page.test.tsx b/src/features/layout/pages/layout-page.test.tsx
@@ -33,7 +33,7 @@ describe('when rendering the layout page', () => {
             const dialog = component.getByRole('dialog')
             const buttons = component.getAllByRole('button')
             expect(dialog).toBeTruthy()
-            expect(buttons.length).toBe(2)
+            expect(buttons.length).toBe(3)
           })
         }
       )

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,6 +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 { Urls } from '@/routes/urls'
+import { useNavigate } from 'react-router-dom'
 
 export const connectWalletLabel = 'Connect Wallet'
 export const disconnectWalletLabel = 'Disconnect Wallet'
@@ -136,6 +138,7 @@ export function ConnectWalletButton() {
   const [dialogOpen, setDialogOpen] = useAtom(walletDialogOpenAtom)
   const networkConfig = useNetworkConfig()
   const refreshAvailableKmdWallets = useRefreshAvailableKmdWallets()
+  const navigate = useNavigate()
 
   let button = <></>
 
@@ -199,6 +202,21 @@ export function ConnectWalletButton() {
             <ProviderConnectButton key={`provider-${provider.metadata.id}`} provider={provider} onConnect={selectProvider(provider)} />
           )
         )}
+        {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>
+        )}
       </>
     )
   }