Update recipients (#103)

* validate new owner address

* fix comment

* update recipient fields

* update comments

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>
+  );
+};

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';

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';

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}
             />

src/components/Modals/Transfer/index.tsx

@@ -12,6 +12,7 @@ import {
 import { Region } from 'coretime-utils';
 import { useEffect, useState } from 'react';
 
+import { isValidAddress } from '@/utils/functions';
 import { transferRegionOnCoretimeChain } from '@/utils/transfers/native';
 
 import { ProgressButton, SimpleRegionCard } from '@/components/Elements';
@@ -120,6 +121,8 @@ export const TransferModal = ({
               value={newOwner}
               onChange={(e) => setNewOwner(e.target.value)}
               fullWidth
+              placeholder='Address of the new owner'
+              error={newOwner.length > 0 && !isValidAddress(newOwner)}
             />
           </Paper>
         </Box>

src/pages/regions.tsx

@@ -108,7 +108,7 @@ const Dashboard = () => {
     if (!selectedRegion) return false;
     if (selectedRegion.location === RegionLocation.CORETIME_CHAIN) {
       // regions on the coretime chain cannot be listed on sale. They first have to be
-      // transferred to the contacts chain.
+      // transferred to the RegionX chain.
       return action === 'sell' || action === 'unlist';
     } else if (selectedRegion.location === RegionLocation.REGIONX_CHAIN) {
       // XcRegions can only be transferred and listed on sale.

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 &&