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 ( + + Recipient + setRecipient(e.target.value)} + fullWidth + type='text' + placeholder='Address of the recipient' + endAdornment={ + + + + } + sx={{ height: '3rem' }} + error={recipient.length > 0 && !isValidAddress(recipient)} + /> + + ); +}; 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 ( -
- - Recipient - - - {recipientKind === 'Other' && ( - - )} -
- ); -}; 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 = ({ /> - diff --git a/src/components/Modals/Transfer/index.tsx b/src/components/Modals/Transfer/index.tsx index a0497542..52e1ebd6 100644 --- a/src/components/Modals/Transfer/index.tsx +++ b/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)} /> diff --git a/src/pages/regions.tsx b/src/pages/regions.tsx index b2c5d51a..0eaa2d2b 100644 --- a/src/pages/regions.tsx +++ b/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. 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: - + {asset === AssetType.TOKEN && originChain !== ChainType.NONE &&