From e674775fe66a047422cc0c9e811e1c27638de71e Mon Sep 17 00:00:00 2001
From: tony <tony@bvm.network>
Date: Thu, 5 Sep 2024 14:53:47 +0700
Subject: [PATCH] Add Paymaster address (AA module)

---
 .../Buy/component4/YourNodes/AANode.tsx       | 25 ++++++++-
 src/modules/blockchains/Buy/mockup_3.ts       | 11 ++++
 .../AddressPaymasterInput/index.tsx           | 54 +++++++++++++++++++
 .../AddressPaymasterInput/styles.module.scss  | 25 +++++++++
 .../blockchains/detail_v4/hook/useAAModule.ts |  5 ++
 .../detail_v4/provider/ChainProvider.hook.ts  |  2 +-
 6 files changed, 119 insertions(+), 3 deletions(-)
 create mode 100644 src/modules/blockchains/detail_v3/account-abstraction_v2/components/AddressPaymasterInput/index.tsx
 create mode 100644 src/modules/blockchains/detail_v3/account-abstraction_v2/components/AddressPaymasterInput/styles.module.scss

diff --git a/src/modules/blockchains/Buy/component4/YourNodes/AANode.tsx b/src/modules/blockchains/Buy/component4/YourNodes/AANode.tsx
index 3866e5a22..7896220ec 100644
--- a/src/modules/blockchains/Buy/component4/YourNodes/AANode.tsx
+++ b/src/modules/blockchains/Buy/component4/YourNodes/AANode.tsx
@@ -2,6 +2,8 @@ import React, { useMemo } from 'react';
 
 import AddressInput from '@/modules/blockchains/detail_v3/account-abstraction_v2/components/AddressInput';
 import FeeRateInput from '@/modules/blockchains/detail_v3/account-abstraction_v2/components/FeeRateInput';
+import AddressPaymasterInput from '@/modules/blockchains/detail_v3/account-abstraction_v2/components/AddressPaymasterInput';
+
 import { useChainProvider } from '@/modules/blockchains/detail_v4/provider/ChainProvider.hook';
 import { DappNode as DappNodeProps } from '@/types/node';
 import { useSignalEffect } from '@preact/signals-react';
@@ -25,8 +27,14 @@ import { useParams } from 'next/navigation';
 
 const AANode = ({ data }: NodeProps<DappNodeProps>) => {
   const { dapp } = data;
-  const { isAAModuleLoading, aaStatusData, isCanNotEdit, getAATypeIconUrl } =
-    useAAModule();
+
+  const {
+    isAAModuleLoading,
+    aaStatusData,
+    isCanNotEdit,
+    isDone,
+    getAATypeIconUrl,
+  } = useAAModule();
   const { getAAStatus, isUpdateFlow } = useChainProvider();
   const { resetAAStore } = useAccountAbstractionStore();
 
@@ -125,6 +133,19 @@ const AANode = ({ data }: NodeProps<DappNodeProps>) => {
                   >
                     <FeeRateInput option={dapp.baseBlock.fields[1]} />
                   </Lego>
+
+                  {isDone && (
+                    <Lego
+                      first={false}
+                      last={false}
+                      titleInLeft
+                      titleInRight={false}
+                      background={adjustBrightness(dapp.color, -10)}
+                      {...dapp.baseBlock.fields[2]}
+                    >
+                      <AddressPaymasterInput />
+                    </Lego>
+                  )}
                 </LegoParent>
               </Droppable>
             </Draggable>
diff --git a/src/modules/blockchains/Buy/mockup_3.ts b/src/modules/blockchains/Buy/mockup_3.ts
index dbd981afb..3eca83062 100644
--- a/src/modules/blockchains/Buy/mockup_3.ts
+++ b/src/modules/blockchains/Buy/mockup_3.ts
@@ -60,6 +60,17 @@ export const accountAbstractionAsADapp: DappModel = {
         options: [],
         placeholder: '21,000',
       },
+      {
+        background: '#009aa5',
+        key: 'input_apps_paymaster_address',
+        title: 'Paymaster contract address',
+        type: 'input',
+        icon: '',
+        value: '',
+        tooltip: '',
+        options: [],
+        placeholder: '21,000',
+      },
     ],
   },
 };
diff --git a/src/modules/blockchains/detail_v3/account-abstraction_v2/components/AddressPaymasterInput/index.tsx b/src/modules/blockchains/detail_v3/account-abstraction_v2/components/AddressPaymasterInput/index.tsx
new file mode 100644
index 000000000..6cfeb4cec
--- /dev/null
+++ b/src/modules/blockchains/detail_v3/account-abstraction_v2/components/AddressPaymasterInput/index.tsx
@@ -0,0 +1,54 @@
+import { useAAModule } from '@/modules/blockchains/detail_v4/hook/useAAModule';
+import { Flex, Image, Input } from '@chakra-ui/react';
+import copy from 'copy-to-clipboard';
+import toast from 'react-hot-toast';
+import s from './styles.module.scss';
+
+const AddressPaymasterInput = () => {
+  const { aaInstalledData } = useAAModule();
+
+  const paymasterAddress = aaInstalledData?.aaPaymasterContract || '';
+
+  return (
+    <Flex flexDir={'row'} align={'center'} gap={'10px'}>
+      <Flex flexDir={'column'} justify={'center'} gap={'4px'}>
+        <Flex flexDir={'row'} align={'center'} gap={'4px'}>
+          <Input
+            className={s.input}
+            mt={'0px'}
+            type="text"
+            fontSize={'14px'}
+            value={paymasterAddress}
+            borderColor={'transparent'}
+            borderWidth={'none'}
+            disabled={true}
+            _focus={{
+              borderColor: 'transparent',
+            }}
+            _disabled={{
+              color: '#fff',
+            }}
+          />
+          <Image
+            src={'/icons/ic-copy.svg'}
+            w={['16px', '18px', '20px']}
+            h={'auto'}
+            objectFit={'contain'}
+            _hover={{
+              cursor: 'pointer',
+              opacity: 0.8,
+            }}
+            onClick={() => {
+              if (paymasterAddress) {
+                copy(paymasterAddress);
+                toast.success('Copied successully!');
+              }
+            }}
+          />
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default AddressPaymasterInput;
diff --git a/src/modules/blockchains/detail_v3/account-abstraction_v2/components/AddressPaymasterInput/styles.module.scss b/src/modules/blockchains/detail_v3/account-abstraction_v2/components/AddressPaymasterInput/styles.module.scss
new file mode 100644
index 000000000..91dda5eeb
--- /dev/null
+++ b/src/modules/blockchains/detail_v3/account-abstraction_v2/components/AddressPaymasterInput/styles.module.scss
@@ -0,0 +1,25 @@
+.input {
+  background-color: #ffffff !important;
+  color: #000000 !important;
+  width: 200px !important;
+  padding: 0 12px !important;
+  border-radius: 99999px !important;
+  outline: none !important;
+  height: 22px !important;
+  line-height: calc(20 / 14);
+  font-family: var(--font-SFProDisplay);
+
+  &::placeholder {
+    color: #000000 !important;
+    opacity: 0.5 !important;
+  }
+
+  &__disabled {
+    pointer-events: none !important;
+    cursor: not-allowed !important;
+  }
+}
+
+.fontError {
+  font-family: var(--font-SFProDisplay);
+}
diff --git a/src/modules/blockchains/detail_v4/hook/useAAModule.ts b/src/modules/blockchains/detail_v4/hook/useAAModule.ts
index b5b12fc60..4c19cc771 100644
--- a/src/modules/blockchains/detail_v4/hook/useAAModule.ts
+++ b/src/modules/blockchains/detail_v4/hook/useAAModule.ts
@@ -80,6 +80,10 @@ export const useAAModule = () => {
     return aaStatusDetail === 'done';
   }, [aaStatusDetail]);
 
+  const isDone = useMemo(() => {
+    return aaStatusDetail === 'done';
+  }, [aaStatusDetail]);
+
   const configAAHandler = async () => {
     try {
       if (!order) {
@@ -154,6 +158,7 @@ export const useAAModule = () => {
     configAAHandler,
     isCanConfigAA,
     isCanNotEdit,
+    isDone,
     aaStatusDetail,
     isAAModuleLoading,
     checkTokenContractAddress,
diff --git a/src/modules/blockchains/detail_v4/provider/ChainProvider.hook.ts b/src/modules/blockchains/detail_v4/provider/ChainProvider.hook.ts
index dd77d3a3c..06b256eaa 100644
--- a/src/modules/blockchains/detail_v4/provider/ChainProvider.hook.ts
+++ b/src/modules/blockchains/detail_v4/provider/ChainProvider.hook.ts
@@ -331,7 +331,7 @@ export const useChainProvider = () => {
     if (result) {
       return {
         ...result,
-        statusStr: result.statusCode === 'done' ? 'Running' : result.statusStr,
+        statusStr: result.statusCode === 'done' ? 'Deployed' : result.statusStr,
       };
     } else {
       let statusCode = 'drafting_modules';