From b0abc0be98bbf8e325f3793367a81465c274bed9 Mon Sep 17 00:00:00 2001
From: Hugo Marques <hugomarquesdev@MacBook-Pro-de-Hugo.local>
Date: Tue, 7 Nov 2023 21:52:23 +0000
Subject: [PATCH] Feature: Edit wallet address

---
 src/modals/EditWalletAddress.tsx | 150 +++++++++++++++++++++++++++++++
 src/modals/index.ts              |   3 +
 src/views/User/index.tsx         |   9 ++
 3 files changed, 162 insertions(+)
 create mode 100644 src/modals/EditWalletAddress.tsx

diff --git a/src/modals/EditWalletAddress.tsx b/src/modals/EditWalletAddress.tsx
new file mode 100644
index 00000000..ce3b6a63
--- /dev/null
+++ b/src/modals/EditWalletAddress.tsx
@@ -0,0 +1,150 @@
+import {
+    Box,
+    Button,
+    CircledIcon,
+    ModalWrapper,
+    toast,
+    useModal
+} from '@impact-market/ui';
+import { SubmitHandler, useForm, useFormState } from 'react-hook-form';
+import { useLoanManager } from '@impact-market/utils';
+import { usePrismicData } from '../libs/Prismic/components/PrismicDataProvider';
+import { useState } from 'react';
+import Input from '../components/Input';
+import RichText from '../libs/Prismic/components/RichText';
+import processTransactionError from 'src/utils/processTransactionError';
+import useTranslations from 'src/libs/Prismic/hooks/useTranslations';
+
+const EditWalletAddress = () => {
+    const { modals } = usePrismicData();
+    const { t } = useTranslations();
+    const {
+        editWalletAddressTitle,
+        editWalletAddressDescription,
+        editWalletAddressPlaceholder,
+        editWalletAddressSuccess,
+        editWalletAddressError,
+        editWalletAddressHint
+    } = modals?.data;
+
+    const [error, setError] = useState(false);
+    const { handleClose, address } = useModal();
+    const { control, handleSubmit } = useForm();
+    const { isSubmitting } = useFormState({
+        control
+    });
+
+    const { changeUserAddress } = useLoanManager();
+
+    const handleCancel = (event: any) => {
+        event.preventDefault();
+        handleClose();
+    };
+
+    const onSubmit: SubmitHandler<any> = async (data) => {
+        if (data?.address.toLowerCase() === address.toLowerCase()) {
+            setError(true);
+        } else {
+            setError(false);
+
+            try {
+                const { status } = await changeUserAddress(
+                    address,
+                    data?.address
+                );
+
+                if (status) {
+                    toast.success(editWalletAddressSuccess);
+                    handleClose();
+                } else {
+                    toast.error(editWalletAddressError);
+                }
+            } catch (error) {
+                console.log(error);
+                toast.error(editWalletAddressError);
+
+                processTransactionError(error, 'change_address');
+            }
+        }
+    };
+
+    return (
+        <ModalWrapper maxW={'484px'} padding={2} w="100%">
+            <form onSubmit={handleSubmit(onSubmit)}>
+                <Box
+                    flex
+                    fDirection={{ sm: 'column', xs: 'column' }}
+                    style={{
+                        alignItems: 'center',
+                        justifyContent: 'center'
+                    }}
+                >
+                    <Box
+                        flex
+                        fDirection={{ sm: 'column', xs: 'column' }}
+                        style={{
+                            justifyContent: 'start'
+                        }}
+                        w="100%"
+                    >
+                        <CircledIcon icon="edit" medium />
+                        <RichText
+                            content={editWalletAddressTitle}
+                            g900
+                            large
+                            mt={1}
+                            semibold
+                            mb={0.5}
+                        />
+                        <RichText
+                            content={editWalletAddressDescription}
+                            g500
+                            small
+                            mb={1}
+                        />
+                        <Input
+                            placeholder={editWalletAddressPlaceholder}
+                            wrapperProps={{
+                                w: '100%'
+                            }}
+                            rules={{
+                                required: true
+                            }}
+                            control={control}
+                            name="address"
+                            withError={error}
+                            hint={error && editWalletAddressHint}
+                        />
+                    </Box>
+                    <Box
+                        flex
+                        fDirection={{ sm: 'row', xs: 'column' }}
+                        style={{
+                            alignItems: 'start',
+                            gap: '1rem',
+                            justifyContent: 'center'
+                        }}
+                    >
+                        <Button
+                            gray
+                            fluid={'xs'}
+                            mt={{ sm: 1.5, xs: 1.5 }}
+                            onClick={handleCancel}
+                        >
+                            {t('dismiss')}
+                        </Button>
+                        <Button
+                            fluid={'xs'}
+                            mt={{ sm: 1.5, xs: 0 }}
+                            isLoading={isSubmitting}
+                        >
+                            {t('save')}
+                        </Button>
+                    </Box>
+                </Box>
+            </form>
+        </ModalWrapper>
+    );
+};
+
+export default EditWalletAddress;
diff --git a/src/modals/index.ts b/src/modals/index.ts
index 314389da..7eb11b2e 100644
--- a/src/modals/index.ts
+++ b/src/modals/index.ts
@@ -17,6 +17,9 @@ const modals = {
     contribute: dynamic(() => import('./Contribute'), { ssr: false }),
     createStory: dynamic(() => import('./Stories/CreateStory'), { ssr: false }),
     deleteStory: dynamic(() => import('./Stories/DeleteStory'), { ssr: false }),
+    editWalletAddress: dynamic(() => import('./EditWalletAddress'), {
+        ssr: false
+    }),
     laeFailedLesson: dynamic(() => import('./LearnAndEarn/WrongAnswer'), {
         ssr: false
     }),
diff --git a/src/views/User/index.tsx b/src/views/User/index.tsx
index c7d3720c..231f6a21 100644
--- a/src/views/User/index.tsx
+++ b/src/views/User/index.tsx
@@ -12,6 +12,7 @@ import {
     Text,
     TextLink,
     ViewContainer,
+    openModal,
     toast
 } from '@impact-market/ui';
 import { formatAddress } from '../../utils/formatAddress';
@@ -142,6 +143,14 @@ const User: React.FC<{ isLoading?: boolean }> = (props) => {
                                     icon: 'copy',
                                     onClick: () => copyToClipboard(),
                                     title: t('copyAddress')
+                                },
+                                {
+                                    icon: 'edit',
+                                    onClick: () =>
+                                        openModal('editWalletAddress', {
+                                            address: user?.address
+                                        }),
+                                    title: 'Edit wallet address'
                                 }
                             ]}
                             title={formatAddress(user?.address, [6, 4])}