chore(wallet): add send and delegate e2e specs

palladians · Dec 22, 2023 · fb7bd81 · fb7bd81
1 parent 2e44943
commit fb7bd81
Show file tree

Hide file tree

Showing 95 changed files with 301 additions and 218 deletions.
diff --git a/apps/extension/app.html b/apps/extension/app.html
@@ -1,16 +1,14 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-
-<head>
+  <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Pallad</title>
     <link rel="stylesheet" href="/src/assets/fonts.css" />
-</head>
+  </head>
 
-<body>
+  <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
-</body>
-
+  </body>
 </html>
diff --git a/apps/extension/e2e/staking.spec.ts b/apps/extension/e2e/staking.spec.ts
@@ -0,0 +1,22 @@
+import { expect, test } from './extension'
+import { devnetWallet } from './fixtures'
+import { OnboardingPom } from './pom/onboarding'
+
+const VALIDATOR = 'B62qjsV6WQwTeEWrNrRRBP6VaaLvQhwWTnFi4WP4LQjGvpfZEumXzxb'
+
+test('delegate to self', async ({ page, extensionId }) => {
+  const onboardingPom = new OnboardingPom({ page, extensionId })
+  await onboardingPom.restoreTestWallet()
+  await page.getByTestId('bottomNavigation__menu').click()
+  await page.getByTestId('commandMenu__delegate').click()
+  await page.getByTestId('delegate__to').fill(VALIDATOR)
+  await page.getByTestId('delegate__nextButton').click()
+  await page
+    .getByTestId('confirm__spendingPassword')
+    .fill(devnetWallet.spendingPassword)
+  await page.getByTestId('confirm__nextButton').click()
+  await page.getByTestId('transactionResult__nextButton').click()
+  await expect(
+    page.getByTestId('transactions__pendingTransactions').first()
+  ).toBeVisible()
+})
diff --git a/apps/extension/e2e/transaction.spec.ts b/apps/extension/e2e/transaction.spec.ts
@@ -0,0 +1,23 @@
+import { expect, test } from './extension'
+import { devnetWallet } from './fixtures'
+import { OnboardingPom } from './pom/onboarding'
+
+const RECEIVER = 'B62qjsV6WQwTeEWrNrRRBP6VaaLvQhwWTnFi4WP4LQjGvpfZEumXzxb'
+
+test('sends a berkeley transaction', async ({ page, extensionId }) => {
+  const onboardingPom = new OnboardingPom({ page, extensionId })
+  await onboardingPom.restoreTestWallet()
+  await page.getByTestId('bottomNavigation__menu').click()
+  await page.getByTestId('commandMenu__send').click()
+  await page.getByTestId('send__to').fill(RECEIVER)
+  await page.getByTestId('send__amount').fill('1')
+  await page.getByTestId('send__nextButton').click()
+  await page
+    .getByTestId('confirm__spendingPassword')
+    .fill(devnetWallet.spendingPassword)
+  await page.getByTestId('confirm__nextButton').click()
+  await page.getByTestId('transactionResult__nextButton').click()
+  await expect(
+    page.getByTestId('transactions__pendingTransactions').first()
+  ).toBeVisible()
+})
diff --git a/apps/extension/index.html b/apps/extension/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

diff --git a/apps/extension/src/App.tsx b/apps/extension/src/App.tsx
@@ -3,8 +3,19 @@ import '@palladxyz/features/dist/index.css'
 
 import { Router } from '@palladxyz/features'
 import { ThemeProvider } from 'next-themes'
+import { useEffect } from 'react'
 
 function App() {
+  useEffect(() => {
+    const handleContextmenu = (e: MouseEvent) => {
+      if (!e.metaKey) e.preventDefault()
+    }
+    document.addEventListener('contextmenu', handleContextmenu)
+    return function cleanup() {
+      document.removeEventListener('contextmenu', handleContextmenu)
+    }
+  }, [])
+
   return (
     <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
       <Router />

diff --git a/apps/extension/src/main.tsx b/apps/extension/src/main.tsx
@@ -4,7 +4,7 @@ import '@total-typescript/ts-reset'
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 
-import App from './App'
+import App from './app'
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>

diff --git a/packages/features/package.json b/packages/features/package.json
@@ -86,6 +86,7 @@
     "react-qr-code": "^2.0.12",
     "react-router": "^6.21.0",
     "react-router-dom": "^6.21.0",
+    "react-twc": "^1.0.1",
     "recharts": "^2.10.3",
     "superjson": "^2.2.1",
     "tailwind-merge": "^2.1.0",

diff --git a/packages/features/src/Router.tsx b/packages/features/src/Router.tsx
@@ -5,37 +5,37 @@ import { MemoryRouter, Route, Routes } from 'react-router-dom'
 import { Toaster } from '@/components/ui/toaster'
 import { TooltipProvider } from '@/components/ui/tooltip'
 
-import { AboutView } from './about/views/About'
-import { AddressBookView } from './address-book/views/AddressBook'
-import { NewAddressView } from './address-book/views/NewAddress'
-import { UnlockWalletView } from './lock/views/UnlockWallet'
-import { NotFoundView } from './not-found/views/NotFound'
-import { CreateWalletView } from './onboarding/views/CreateWallet'
-import { MnemonicConfirmationView } from './onboarding/views/MnemonicConfirmation'
-import { MnemonicInputView } from './onboarding/views/MnemonicInput'
-import { MnemonicWritedownView } from './onboarding/views/MnemonicWritedown'
-import { RestoreWalletView } from './onboarding/views/RestoreWallet'
-import { StartView } from './onboarding/views/Start'
-import { StayConnectedView } from './onboarding/views/StayConnected'
-import { OverviewView } from './overview/views/Overview'
-import { ReceiveView } from './receive/views/Receive'
-import { SendView } from './send/views/Send'
-import { TransactionErrorView } from './send/views/TransactionError'
-import { TransactionSuccessView } from './send/views/TransactionSuccess'
-import { TransactionSummaryView } from './send/views/TransactionSummary'
-import { SettingsView } from './settings/views/Settings'
-import { BlockProducersView } from './staking/views/BlockProducers'
-import { DelegateView } from './staking/views/Delegate'
-import { StakingOverviewView } from './staking/views/StakingOverview'
-import { TransactionDetailsView } from './transactions/views/TransactionDetails'
-import { TransactionsView } from './transactions/views/Transactions'
+import { AboutView } from './about/views/about'
+import { AddressBookView } from './address-book/views/address-book'
+import { NewAddressView } from './address-book/views/new-address'
+import { UnlockWalletView } from './lock/views/unlock-wallet'
+import { NotFoundView } from './not-found/views/not-found'
+import { CreateWalletView } from './onboarding/views/create-wallet'
+import { MnemonicConfirmationView } from './onboarding/views/mnemonic-confirmation'
+import { MnemonicInputView } from './onboarding/views/mnemonic-input'
+import { MnemonicWritedownView } from './onboarding/views/mnemonic-writedown'
+import { RestoreWalletView } from './onboarding/views/restore-wallet'
+import { StartView } from './onboarding/views/start'
+import { StayConnectedView } from './onboarding/views/stay-connected'
+import { OverviewView } from './overview/views/overview'
+import { ReceiveView } from './receive/views/receive'
+import { SendView } from './send/views/send'
+import { TransactionErrorView } from './send/views/transaction-error'
+import { TransactionSuccessView } from './send/views/transaction-success'
+import { TransactionSummaryView } from './send/views/transaction-summary'
+import { SettingsView } from './settings/views/settings'
+import { BlockProducersView } from './staking/views/block-producers'
+import { DelegateView } from './staking/views/delegate'
+import { StakingOverviewView } from './staking/views/staking-overview'
+import { TransactionDetailsView } from './transactions/views/transaction-details'
+import { TransactionsView } from './transactions/views/transactions'
 
 dayjs.extend(relativeTime)
 
 export const Router = () => {
   return (
     <TooltipProvider>
-      <div className="flex flex-1">
+      <div className="flex flex-1 pointer">
         <MemoryRouter>
           <Routes>
             <Route path="/" element={<StartView />} />

diff --git a/packages/features/src/about/views/About.stories.tsx b/packages/features/src/about/views/About.stories.tsx
@@ -1,6 +1,6 @@
 import { StoryDefault } from '@ladle/react'
 
-import { AboutView } from './About'
+import { AboutView } from './about'
 
 export const View = () => <AboutView />
 

diff --git a/packages/features/src/about/views/About.tsx b/packages/features/src/about/views/About.tsx
@@ -1,13 +1,13 @@
 import { useNavigate } from 'react-router-dom'
 
+import Logo from '@/common/assets/logo.svg'
+import { AppLayout } from '@/components/app-layout'
+import { MetaField } from '@/components/meta-field'
 import { Button } from '@/components/ui/button'
 import { Card } from '@/components/ui/card'
+import { ViewHeading } from '@/components/view-heading'
 
 import packageJson from '../../../package.json'
-import Logo from '../../common/assets/logo.svg'
-import { AppLayout } from '../../common/components/AppLayout'
-import { MetaField } from '../../common/components/MetaField'
-import { ViewHeading } from '../../common/components/ViewHeading'
 
 const AppMeta = [
   {

diff --git a/...c/address-book/components/ContactTile.tsx → .../address-book/components/contact-tile.tsx b/...c/address-book/components/ContactTile.tsx → .../address-book/components/contact-tile.tsx
@@ -1,6 +1,9 @@
 import { TrashIcon } from 'lucide-react'
 import { useNavigate } from 'react-router-dom'
 
+import { truncateString } from '@/common/lib/string'
+import { useAddressBookStore } from '@/common/store/address-book'
+import { Contact } from '@/common/types'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Card } from '@/components/ui/card'
@@ -10,10 +13,6 @@ import {
   TooltipTrigger
 } from '@/components/ui/tooltip'
 
-import { truncateString } from '../../common/lib/string'
-import { useAddressBookStore } from '../../common/store/addressBook'
-import { Contact } from '../../common/types'
-
 interface ContactTileProps {
   contact: Contact
   index?: number

diff --git a/...-book/components/NewAddressForm.schema.ts → ...ook/components/new-address-form.schema.ts b/...-book/components/NewAddressForm.schema.ts → ...ook/components/new-address-form.schema.ts
diff --git a/...ddress-book/components/NewAddressForm.tsx → ...ress-book/components/new-address-form.tsx b/...ddress-book/components/NewAddressForm.tsx → ...ress-book/components/new-address-form.tsx
@@ -3,15 +3,15 @@ import { PlusIcon } from 'lucide-react'
 import { useForm } from 'react-hook-form'
 import { useNavigate } from 'react-router-dom'
 
-import { FormError } from '@/common/components/FormError'
+import { useAddressBookStore } from '@/common/store/address-book'
 import { ButtonArrow } from '@/components/button-arrow'
+import { FormError } from '@/components/form-error'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { cn } from '@/lib/utils'
 
-import { useAddressBookStore } from '../../common/store/addressBook'
-import { NewAddressFormSchema } from './NewAddressForm.schema'
+import { NewAddressFormSchema } from './new-address-form.schema'
 
 export const NewAddressForm = () => {
   const navigate = useNavigate()

diff --git a/...ddress-book/views/AddressBook.stories.tsx → ...dress-book/views/address-book.stories.tsx b/...ddress-book/views/AddressBook.stories.tsx → ...dress-book/views/address-book.stories.tsx
@@ -1,6 +1,6 @@
 import { StoryDefault } from '@ladle/react'
 
-import { AddressBookView } from './AddressBook'
+import { AddressBookView } from './address-book'
 
 export const View = () => <AddressBookView />
 

diff --git a/...es/src/address-book/views/AddressBook.tsx → ...s/src/address-book/views/address-book.tsx b/...es/src/address-book/views/AddressBook.tsx → ...s/src/address-book/views/address-book.tsx
@@ -1,10 +1,11 @@
 import { PlusIcon } from 'lucide-react'
 import { useNavigate } from 'react-router-dom'
 
-import { AppLayout } from '../../common/components/AppLayout'
-import { ViewHeading } from '../../common/components/ViewHeading'
-import { useAddressBookStore } from '../../common/store/addressBook'
-import { ContactTile } from '../components/ContactTile'
+import { useAddressBookStore } from '@/common/store/address-book'
+import { AppLayout } from '@/components/app-layout'
+import { ViewHeading } from '@/components/view-heading'
+
+import { ContactTile } from '../components/contact-tile'
 
 const DonatePallad = {
   name: 'Donate To Pallad',

diff --git a/...address-book/views/NewAddress.stories.tsx → ...ddress-book/views/new-address.stories.tsx b/...address-book/views/NewAddress.stories.tsx → ...ddress-book/views/new-address.stories.tsx
@@ -1,6 +1,6 @@
 import { StoryDefault } from '@ladle/react/lib/app/exports'
 
-import { NewAddressView } from './NewAddress'
+import { NewAddressView } from './new-address'
 
 export const View = () => <NewAddressView />
 

diff --git a/...res/src/address-book/views/NewAddress.tsx → ...es/src/address-book/views/new-address.tsx b/...res/src/address-book/views/NewAddress.tsx → ...es/src/address-book/views/new-address.tsx
@@ -1,8 +1,9 @@
 import { useNavigate } from 'react-router-dom'
 
-import { AppLayout } from '../../common/components/AppLayout'
-import { ViewHeading } from '../../common/components/ViewHeading'
-import { NewAddressForm } from '../components/NewAddressForm'
+import { AppLayout } from '@/components/app-layout'
+import { ViewHeading } from '@/components/view-heading'
+
+import { NewAddressForm } from '../components/new-address-form'
 
 export const NewAddressView = () => {
   const navigate = useNavigate()

diff --git a/packages/features/src/common/components/index.ts b/packages/features/src/common/components/index.ts
diff --git a/...s/features/src/common/hooks/useAccount.ts → .../features/src/common/hooks/use-account.ts b/...s/features/src/common/hooks/useAccount.ts → .../features/src/common/hooks/use-account.ts
diff --git a/.../src/common/hooks/useBlockchainSummary.ts → ...rc/common/hooks/use-blockchain-summary.ts b/.../src/common/hooks/useBlockchainSummary.ts → ...rc/common/hooks/use-blockchain-summary.ts
diff --git a/...atures/src/common/hooks/useTransaction.ts → ...tures/src/common/hooks/use-transaction.ts b/...atures/src/common/hooks/useTransaction.ts → ...tures/src/common/hooks/use-transaction.ts
diff --git a/...tures/src/common/hooks/useTransactions.ts → ...ures/src/common/hooks/use-transactions.ts b/...tures/src/common/hooks/useTransactions.ts → ...ures/src/common/hooks/use-transactions.ts
diff --git a/.../features/src/common/store/addressBook.ts → ...features/src/common/store/address-book.ts b/.../features/src/common/store/addressBook.ts → ...features/src/common/store/address-book.ts
diff --git a/...s/src/common/store/pendingTransactions.ts → .../src/common/store/pending-transactions.ts b/...s/src/common/store/pendingTransactions.ts → .../src/common/store/pending-transactions.ts
diff --git a/...tures/src/common/components/AppLayout.tsx → ...es/features/src/components/app-layout.tsx b/...tures/src/common/components/AppLayout.tsx → ...es/features/src/components/app-layout.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 
-import { BottomNavigation } from './BottomNavigation'
-import { CommandMenu } from './CommandMenu'
+import { BottomNavigation } from './bottom-navigation'
+import { CommandMenu } from './command-menu'
 
 interface AppLayoutProps {
   children: React.ReactNode

diff --git a/...rc/common/components/BottomNavigation.tsx → ...ures/src/components/bottom-navigation.tsx b/...rc/common/components/BottomNavigation.tsx → ...ures/src/components/bottom-navigation.tsx
diff --git a/...res/src/common/components/CommandMenu.tsx → .../features/src/components/command-menu.tsx b/...res/src/common/components/CommandMenu.tsx → .../features/src/components/command-menu.tsx
@@ -22,7 +22,7 @@ import {
   CommandList
 } from '@/components/ui/command'
 
-import { useAccount } from '../hooks/useAccount'
+import { useAccount } from '../common/hooks/use-account'
 
 interface CommandMenuProps {
   open: boolean

diff --git a/...tures/src/common/components/FormError.tsx → ...es/features/src/components/form-error.tsx b/...tures/src/common/components/FormError.tsx → ...es/features/src/components/form-error.tsx
diff --git a/...tures/src/common/components/FormLabel.tsx → ...es/features/src/components/form-label.tsx b/...tures/src/common/components/FormLabel.tsx → ...es/features/src/components/form-label.tsx
diff --git a/...tures/src/common/components/MetaField.tsx → ...es/features/src/components/meta-field.tsx b/...tures/src/common/components/MetaField.tsx → ...es/features/src/components/meta-field.tsx
diff --git a/...atures/src/common/components/MinaIcon.tsx → ...ges/features/src/components/mina-icon.tsx b/...atures/src/common/components/MinaIcon.tsx → ...ges/features/src/components/mina-icon.tsx
diff --git a/...s/src/common/components/SocialButtons.tsx → ...eatures/src/components/social-buttons.tsx b/...s/src/common/components/SocialButtons.tsx → ...eatures/src/components/social-buttons.tsx
diff --git a/...res/src/common/components/ViewHeading.tsx → .../features/src/components/view-heading.tsx b/...res/src/common/components/ViewHeading.tsx → .../features/src/components/view-heading.tsx
diff --git a/...es/src/common/components/WizardLayout.tsx → ...features/src/components/wizard-layout.tsx b/...es/src/common/components/WizardLayout.tsx → ...features/src/components/wizard-layout.tsx
@@ -1,10 +1,9 @@
 import { MoonIcon, SunIcon } from 'lucide-react'
 import { useTheme } from 'next-themes'
 
+import Logo from '@/common/assets/logo.svg'
 import { Toggle } from '@/components/ui/toggle'
 
-import Logo from '../assets/logo.svg'
-
 interface WizardLayoutProps {
   children: React.ReactNode
   footer: React.ReactNode

diff --git a/packages/features/src/index.ts b/packages/features/src/index.ts
@@ -3,6 +3,6 @@ import '@total-typescript/ts-reset'
 import type {} from 'graphql-request'
 import type {} from 'swr'
 export { useAppStore } from './common/store/app'
-export { Router } from './Router'
+export { Router } from './router'
 export * as Icons from 'lucide-react'
 import './globals.css'
diff --git a/...s/src/lock/views/UnlockWallet.stories.tsx → .../src/lock/views/unlock-wallet.stories.tsx b/...s/src/lock/views/UnlockWallet.stories.tsx → .../src/lock/views/unlock-wallet.stories.tsx
@@ -1,6 +1,6 @@
 import { StoryDefault } from '@ladle/react'
 
-import { UnlockWalletView } from './UnlockWallet'
+import { UnlockWalletView } from './unlock-wallet'
 
 export const View = () => <UnlockWalletView />
 

diff --git a/.../features/src/lock/views/UnlockWallet.tsx → ...features/src/lock/views/unlock-wallet.tsx b/.../features/src/lock/views/UnlockWallet.tsx → ...features/src/lock/views/unlock-wallet.tsx
@@ -10,9 +10,10 @@ import { useForm } from 'react-hook-form'
 import { useNavigate } from 'react-router-dom'
 import { z } from 'zod'
 
-import { FormError } from '@/common/components/FormError'
+import { useAccount } from '@/common/hooks/use-account'
 import { passwordSchema } from '@/common/lib/validation'
 import { ButtonArrow } from '@/components/button-arrow'
+import { FormError } from '@/components/form-error'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
@@ -21,12 +22,10 @@ import {
   TooltipContent,
   TooltipTrigger
 } from '@/components/ui/tooltip'
+import { ViewHeading } from '@/components/view-heading'
+import { WizardLayout } from '@/components/wizard-layout'
 import { cn } from '@/lib/utils'
 
-import { WizardLayout } from '../../common/components'
-import { ViewHeading } from '../../common/components/ViewHeading'
-import { useAccount } from '../../common/hooks/useAccount'
-
 const formSchema = z.object({
   spendingPassword: passwordSchema
 })

diff --git a/.../src/not-found/views/NotFound.stories.tsx → ...src/not-found/views/not-found.stories.tsx b/.../src/not-found/views/NotFound.stories.tsx → ...src/not-found/views/not-found.stories.tsx
@@ -1,6 +1,6 @@
 import { StoryDefault } from '@ladle/react'
 
-import { NotFoundView } from './NotFound'
+import { NotFoundView } from './not-found'
 
 export const View = () => <NotFoundView />
 

diff --git a/...features/src/not-found/views/NotFound.tsx → ...eatures/src/not-found/views/not-found.tsx b/...features/src/not-found/views/NotFound.tsx → ...eatures/src/not-found/views/not-found.tsx
@@ -1,9 +1,8 @@
 import { useNavigate } from 'react-router-dom'
 
+import { AppLayout } from '@/components/app-layout'
 import { Button } from '@/components/ui/button'
-
-import { AppLayout } from '../../common/components/AppLayout'
-import { ViewHeading } from '../../common/components/ViewHeading'
+import { ViewHeading } from '@/components/view-heading'
 
 export const NotFoundView = () => {
   const navigate = useNavigate()