machine changes

Joystream · Jun 10, 2023 · da5f8d3 · da5f8d3
1 parent b7cf605
commit da5f8d3
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 39 deletions.
diff --git a/packages/ui/src/memberships/modals/EmailSubscriptionModal/EmailSubscriptionModal.tsx b/packages/ui/src/memberships/modals/EmailSubscriptionModal/EmailSubscriptionModal.tsx
@@ -1,16 +1,16 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 
 import { useApi } from '@/api/hooks/useApi'
-import { TextMedium } from '@/common/components/typography'
+import { FailureModal } from '@/common/components/FailureModal'
+import { ResultText } from '@/common/components/Modal'
+import { WaitModal } from '@/common/components/WaitModal'
 import { useMachine } from '@/common/hooks/useMachine'
 import { useModal } from '@/common/hooks/useModal'
-import { SignTransactionModal } from '@/common/modals/SignTransactionModal/SignTransactionModal'
 import { EmailSubscriptionModalCall } from '@/memberships/modals/EmailSubscriptionModal/index'
 
 import { EmailSubscriptionFormModal } from './EmaiSubscriptionFormModal'
 import { EmailSubscriptionMachine } from './machine'
 import { EmailSubscriptionForm } from './types'
-import { createBatch } from './utils'
 
 export const EmailSubscriptionModal = () => {
   const { api } = useApi()
@@ -20,6 +20,17 @@ export const EmailSubscriptionModal = () => {
   } = useModal<EmailSubscriptionModalCall>()
   const [state, send] = useMachine(EmailSubscriptionMachine)
 
+  const signModal = async () => {
+    const timestamp = new Date()
+    api?.sign(member.controllerAccount, `${member.id}:${timestamp}`)
+  }
+
+  useEffect(() => {
+    if (state.matches('signature')) {
+      signModal()
+    }
+  }, [state])
+
   if (state.matches('prepare')) {
     return (
       <EmailSubscriptionFormModal
@@ -31,15 +42,15 @@ export const EmailSubscriptionModal = () => {
   }
 
   if (state.matches('transaction')) {
+    return <WaitModal onClose={hideModal} title="Pending transaction" description="Registering email address..." />
+  }
+
+  if (state.matches('error')) {
     return (
-      <SignTransactionModal
-        buttonText="Sign and subscribe"
-        transaction={createBatch(state.context.form, api)}
-        signer={member.controllerAccount}
-        service={state.children.transaction}
-      >
-        <TextMedium>You subscribed to emal.</TextMedium>
-      </SignTransactionModal>
+      <FailureModal onClose={hideModal}>
+        There was a problem with creating a subscription.
+        <ResultText>We could not create your subscription at the moment! Please, try again later!</ResultText>
+      </FailureModal>
     )
   }
 

diff --git a/packages/ui/src/memberships/modals/EmailSubscriptionModal/machine.ts b/packages/ui/src/memberships/modals/EmailSubscriptionModal/machine.ts
@@ -2,12 +2,6 @@ import { EventRecord } from '@polkadot/types/interfaces/system'
 import { assign, createMachine } from 'xstate'
 
 import { transactionModalFinalStatusesFactory } from '@/common/modals/utils'
-import {
-  isTransactionCanceled,
-  isTransactionError,
-  isTransactionSuccess,
-  transactionMachine,
-} from '@/common/model/machines'
 import { EmptyObject } from '@/common/types'
 
 import { EmailSubscriptionForm } from './types'
@@ -17,53 +11,59 @@ interface EmailSubscriptionContext {
 }
 
 interface TransactionContext {
-  transactionEvents?: EventRecord[]
+  signature?: EventRecord[]
 }
 
 type Context = EmailSubscriptionContext & TransactionContext
 
 type EmailSubscriptionState =
   | { value: 'prepare'; context: EmptyObject }
   | { value: 'transaction'; context: Required<EmailSubscriptionContext> }
+  | { value: 'signature'; context: Required<EmailSubscriptionContext> }
   | { value: 'success'; context: Required<EmailSubscriptionContext> }
   | { value: 'error'; context: Required<Context> }
 
 export type EmailSubscriptionEvent =
-  | { type: 'PASS' }
-  | { type: 'FAIL' }
   | { type: 'DONE'; form: EmailSubscriptionForm }
   | { type: 'SUCCESS' }
   | { type: 'ERROR' }
+  | { type: 'SIGNED'; signature: EventRecord[] }
+  | { type: 'CANCEL' }
 
 export const EmailSubscriptionMachine = createMachine<Context, EmailSubscriptionEvent, EmailSubscriptionState>({
   initial: 'prepare',
   states: {
     prepare: {
       on: {
         DONE: {
-          target: 'transaction',
+          target: 'signature',
           actions: assign({ form: (_, event) => event.form }),
         },
       },
     },
+    signature: {
+      on: {
+        SIGNED: {
+          target: 'transaction',
+          actions: assign({
+            signature: (_, event) => {
+              return event.signature
+            },
+          }),
+        },
+        CANCEL: {
+          target: 'canceled',
+        },
+      },
+    },
     transaction: {
-      invoke: {
-        id: 'transaction',
-        src: transactionMachine,
-        onDone: [
-          {
-            target: 'success',
-            cond: isTransactionSuccess,
-          },
-          {
-            target: 'error',
-            cond: isTransactionError,
-          },
-          {
-            target: 'canceled',
-            cond: isTransactionCanceled,
-          },
-        ],
+      on: {
+        SUCCESS: {
+          target: 'success',
+        },
+        ERROR: {
+          target: 'error',
+        },
       },
     },
     ...transactionModalFinalStatusesFactory({