transaction modal

frontend/src/forms/TransactionForm.tsx

@@ -31,6 +31,11 @@ export const TransactionForm = ({ stackId, onSave, onCancel }: Props) => {
     onSave?.()
   }
 
+  const handleCancel = () => {
+    console.log('cancelling')
+    onCancel?.()
+  }
+
   return (
     <Form
       form={form}
@@ -45,7 +50,7 @@ export const TransactionForm = ({ stackId, onSave, onCancel }: Props) => {
         <Input />
       </FormItem>
       <Row>
-        <Button onClick={onCancel}>Cancel</Button>
+        <Button onClick={handleCancel}>Cancel</Button>
         <Button htmlType="submit">Save</Button>
       </Row>
     </Form>

frontend/src/layout/Modal/index.tsx

@@ -1,5 +1,5 @@
 import { ModalProps } from 'antd'
-import { ReactElement, cloneElement } from 'react'
+import { ReactElement } from 'react'
 import './style.scss'
 
 type Props = ModalProps & { children: ReactElement }
@@ -10,7 +10,5 @@ export type DankFormProps = {
 }
 
 export const Modal = ({ children, visible }: Props) => {
-  const el = cloneElement(children, (props: DankFormProps) => ({ ...props }))
+  return visible ? <div className="dank-modal">{children}</div> : null
-
-  return visible ? <div className="dank-modal">{el}</div> : null
 }

frontend/src/widgets/FundBar/index.tsx

@@ -1,9 +1,10 @@
-import { Stack } from '../../types'
-import './style.scss'
-import _ from 'lodash'
 import { useState } from 'react'
 import { Modal } from '../../layout/Modal'
 import { TransactionForm } from '../../forms/TransactionForm'
+import { Stack } from '../../types'
+import _ from 'lodash'
+
+import './style.scss'
 
 type Props = {
   stack: Stack
@@ -22,6 +23,15 @@ export const FundBar = ({ stack }: Props) => {
     setNewTx(true)
   }
 
+  const handleCancel = () => {
+    console.log('cancelling tx')
+    setNewTx(false)
+  }
+
+  const handleSave = () => {
+    console.log('tx saved!')
+  }
+
   return (
     <>
       <div className="fundbar">
@@ -39,8 +49,12 @@ export const FundBar = ({ stack }: Props) => {
           ${Math.floor(current)} / ${max}
         </div>
       </div>
-      <Modal visible={newTx} onCancel={() => setNewTx(false)}>
+      <Modal visible={newTx}>
-        <TransactionForm stackId={stack.id} />
+        <TransactionForm
+          stackId={stack.id}
+          onSave={handleSave}
+          onCancel={handleCancel}
+        />
       </Modal>
     </>
   )