From 6001d1ca1ace8b51594ee89f4d636880d721d75f Mon Sep 17 00:00:00 2001
From: cuteolaf <oliverlim818@gmail.com>
Date: Thu, 9 May 2024 10:27:53 -0700
Subject: [PATCH] update recipient fields

---
 .../Elements/RecipientInput/index.tsx         | 47 ++++++++++++++++
 .../Selectors/RecipientSelector/index.tsx     | 56 -------------------
 src/components/Elements/Selectors/index.ts    |  1 -
 src/components/Elements/index.ts              |  1 +
 src/components/Modals/Sell/index.tsx          |  5 +-
 src/pages/transfer.tsx                        |  4 +-
 6 files changed, 52 insertions(+), 62 deletions(-)
 create mode 100644 src/components/Elements/RecipientInput/index.tsx
 delete mode 100644 src/components/Elements/Selectors/RecipientSelector/index.tsx

diff --git a/src/components/Elements/RecipientInput/index.tsx b/src/components/Elements/RecipientInput/index.tsx
new file mode 100644
index 00000000..a68a69a1
--- /dev/null
+++ b/src/components/Elements/RecipientInput/index.tsx
@@ -0,0 +1,47 @@
+import { Box, Button, Input, InputAdornment, Typography } from '@mui/material';
+
+import { isValidAddress } from '@/utils/functions';
+
+import { useAccounts } from '@/contexts/account';
+
+export interface RecipientInputProps {
+  setRecipient: (_: string) => void;
+  recipient: string;
+}
+
+export const RecipientInput = ({
+  setRecipient,
+  recipient,
+}: RecipientInputProps) => {
+  const {
+    state: { activeAccount },
+  } = useAccounts();
+
+  return (
+    <Box>
+      <Typography>Recipient</Typography>
+      <Input
+        value={recipient}
+        onChange={(e) => setRecipient(e.target.value)}
+        fullWidth
+        type='text'
+        placeholder='Address of the recipient'
+        endAdornment={
+          <InputAdornment position='end'>
+            <Button
+              variant='text'
+              color='info'
+              onClick={() =>
+                activeAccount && setRecipient(activeAccount.address)
+              }
+            >
+              Me
+            </Button>
+          </InputAdornment>
+        }
+        sx={{ height: '3rem' }}
+        error={recipient.length > 0 && !isValidAddress(recipient)}
+      />
+    </Box>
+  );
+};
diff --git a/src/components/Elements/Selectors/RecipientSelector/index.tsx b/src/components/Elements/Selectors/RecipientSelector/index.tsx
deleted file mode 100644
index c03dc216..00000000
--- a/src/components/Elements/Selectors/RecipientSelector/index.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import {
-  FormControl,
-  InputLabel,
-  MenuItem,
-  Select,
-  TextField,
-} from '@mui/material';
-import { useState } from 'react';
-
-export interface RecipientSelectorProps {
-  setRecipient: (_: string) => void;
-  recipient: string;
-}
-
-export const RecipientSelector = ({
-  setRecipient,
-  recipient,
-}: RecipientSelectorProps) => {
-  const [recipientKind, setRecipientKind] = useState('Me');
-
-  const handleRecipientKindChange = (event: any) => {
-    setRecipient('');
-    setRecipientKind(event.target.value);
-  };
-
-  const handleOtherRecipientChange = (event: any) => {
-    setRecipient(event.target.value);
-  };
-
-  return (
-    <div>
-      <FormControl fullWidth>
-        <InputLabel id='recipient-selector-label'>Recipient</InputLabel>
-        <Select
-          labelId='recipient-selector-label'
-          id='recipient-selector'
-          value={recipientKind}
-          label='Recipient'
-          onChange={handleRecipientKindChange}
-        >
-          <MenuItem value='Me'>Me</MenuItem>
-          <MenuItem value='Other'>Other</MenuItem>
-        </Select>
-      </FormControl>
-      {recipientKind === 'Other' && (
-        <TextField
-          label='Recipient'
-          fullWidth
-          margin='normal'
-          value={recipient}
-          onChange={handleOtherRecipientChange}
-        />
-      )}
-    </div>
-  );
-};
diff --git a/src/components/Elements/Selectors/index.ts b/src/components/Elements/Selectors/index.ts
index 286b62e4..1ace844e 100644
--- a/src/components/Elements/Selectors/index.ts
+++ b/src/components/Elements/Selectors/index.ts
@@ -1,5 +1,4 @@
 export * from './AssetSelector';
 export * from './ChainSelector';
 export * from './FinalitySelector';
-export * from './RecipientSelector';
 export * from './RegionSelector';
diff --git a/src/components/Elements/index.ts b/src/components/Elements/index.ts
index 6790cd5f..9526edbb 100644
--- a/src/components/Elements/index.ts
+++ b/src/components/Elements/index.ts
@@ -7,6 +7,7 @@ export * from './FeatureCard';
 export * from './Label';
 export * from './ListingCard';
 export * from './MarketFilters';
+export * from './RecipientInput';
 export * from './RegionCard';
 export * from './SaleInfoPanel';
 export * from './SalePhaseInfoPanel';
diff --git a/src/components/Modals/Sell/index.tsx b/src/components/Modals/Sell/index.tsx
index bc66c888..5a3b4bf2 100644
--- a/src/components/Modals/Sell/index.tsx
+++ b/src/components/Modals/Sell/index.tsx
@@ -11,8 +11,7 @@ import {
 import { Region } from 'coretime-utils';
 import { useEffect, useState } from 'react';
 
-import { AmountInput, RegionCard } from '@/components/Elements';
-import { RecipientSelector } from '@/components/Elements/Selectors/RecipientSelector';
+import { AmountInput, RecipientInput, RegionCard } from '@/components/Elements';
 
 import { useAccounts } from '@/contexts/account';
 import { useCoretimeApi } from '@/contexts/apis';
@@ -123,7 +122,7 @@ export const SellModal = ({
             />
           </Stack>
           <Stack direction='column' gap={2}>
-            <RecipientSelector
+            <RecipientInput
               setRecipient={setSaleRecipient}
               recipient={saleRecipient}
             />
diff --git a/src/pages/transfer.tsx b/src/pages/transfer.tsx
index 40359752..c7fb1cca 100644
--- a/src/pages/transfer.tsx
+++ b/src/pages/transfer.tsx
@@ -18,7 +18,7 @@ import {
   AmountInput,
   ChainSelector,
   ProgressButton,
-  RecipientSelector,
+  RecipientInput,
   RegionCard,
   RegionSelector,
 } from '@/components';
@@ -297,7 +297,7 @@ const TransferPage = () => {
           >
             Transfer to:
           </Typography>
-          <RecipientSelector recipient={newOwner} setRecipient={setNewOwner} />
+          <RecipientInput recipient={newOwner} setRecipient={setNewOwner} />
         </Stack>
         {asset === AssetType.TOKEN &&
           originChain !== ChainType.NONE &&