Merge pull request #785 from TrustlessComputer/fix/studio-aa-module

Add Paymaster address (AA module)
TrustlessComputer · Sep 5, 2024 · 5dbe66c · 5dbe66c
2 parents 8c381cf + e674775
commit 5dbe66c
Show file tree

Hide file tree

Showing 6 changed files with 119 additions and 3 deletions.
diff --git 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
@@ -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/...s/blockchains/detail_v3/account-abstraction_v2/components/AddressPaymasterInput/index.tsx b/...s/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/...ains/detail_v3/account-abstraction_v2/components/AddressPaymasterInput/styles.module.scss b/...ains/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
@@ -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
@@ -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';