Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve send form #227

Merged
merged 6 commits into from
Feb 16, 2023
Merged

Improve send form #227

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a6aaa96
show associated bns name in send form
Imamah-Zafar Feb 2, 2023
238deb0
add icon in send form
Imamah-Zafar Feb 2, 2023
2ff1369
fix nft send screen
Imamah-Zafar Feb 2, 2023
93ee16a
Merge branch 'develop' of https://github.com/secretkeylabs/xverse-web…
Imamah-Zafar Feb 6, 2023
cfc0b2b
fix alignment
Imamah-Zafar Feb 13, 2023
2a89ac5
Merge branch 'develop' into imamahzafar/improve-send-form
yknl Feb 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 28 additions & 15 deletions src/app/components/sendForm/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,11 @@ import { useSelector } from 'react-redux';
import Info from '@assets/img/info.svg';
import ActionButton from '@components/button';
import { useNavigate } from 'react-router-dom';
import { useBNSResolver, useDebounce } from '@hooks/useBnsName';
import { useBnsName, useBNSResolver, useDebounce } from '@hooks/useBnsName';
import { getFiatEquivalent } from '@secretkeylabs/xverse-core/transactions';
import InfoContainer from '@components/infoContainer';
import useNetworkSelector from '@hooks/useNetwork';
import TokenImage from '@components/tokenImage';

interface ContainerProps {
error: boolean;
Expand Down Expand Up @@ -195,6 +197,13 @@ const ColumnContainer = styled.div((props) => ({
flexDirection: 'column',
marginLeft: props.theme.spacing(8),
}));

const TokenContainer = styled.div((props) => ({
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
marginTop: props.theme.spacing(8),
}));
interface Props {
onPressSend: (recipientID: string, amount: string, memo?: string) => void;
currencyType: CurrencyTypes;
Expand Down Expand Up @@ -243,7 +252,9 @@ function SendForm({
} = useSelector(
(state: StoreState) => state.walletState,
);
const network = useNetworkSelector();
const debouncedSearchTerm = useDebounce(recipientAddress, 300);
const associatedBnsName = useBnsName(recipientAddress, network);
const associatedAddress = useBNSResolver(
debouncedSearchTerm,
stxAddress,
Expand All @@ -260,16 +271,6 @@ function SendForm({
}
}, [recepientError, associatedAddress]);

function getTokenIcon() {
if (currencyType === 'STX') {
return <TickerImage src={IconStacks} />;
}
if (currencyType === 'BTC') {
return <TickerImage src={IconBitcoin} />;
}
return null;
}

function getTokenCurrency() {
if (fungibleToken) {
if (fungibleToken?.ticker) {
Expand Down Expand Up @@ -311,10 +312,7 @@ function SendForm({
<InputFieldContainer>
<InputField value={amount} placeholder="0" onChange={onInputChange} />
</InputFieldContainer>
<TickerContainer>
<Text>{getTokenCurrency()}</Text>
{getTokenIcon()}
</TickerContainer>
<Text>{getTokenCurrency()}</Text>
</AmountInputContainer>
<SubText>{`~ $ ${fiatAmount} ${fiatCurrency}`}</SubText>
</Container>
Expand Down Expand Up @@ -342,6 +340,12 @@ function SendForm({
<AssociatedText>{associatedAddress}</AssociatedText>
</>
)}
{associatedBnsName && currencyType !== 'BTC' && (
<>
<SubText>{t('ASSOCIATED_BNS_DOMAIN')}</SubText>
<AssociatedText>{associatedBnsName}</AssociatedText>
</>
)}
</Container>
);

Expand Down Expand Up @@ -375,6 +379,15 @@ function SendForm({
return (
<>
<ScrollContainer>
{currencyType !== 'NFT' && (
<TokenContainer>
<TokenImage
token={currencyType || undefined}
loading={false}
fungibleToken={fungibleToken || undefined}
/>
</TokenContainer>
)}
<OuterContainer>
{!disableAmountInput && renderEnterAmountSection}
<ErrorContainer>
Expand Down
41 changes: 18 additions & 23 deletions src/app/screens/sendNft/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,10 +53,6 @@ const NFtContainer = styled.div((props) => ({
marginBottom: props.theme.spacing(12),
}));

const SendFormContainer = styled.div((props) => ({
marginBottom: props.theme.spacing(5),
}));

const NftTitleText = styled.h1((props) => ({
...props.theme.headline_s,
color: props.theme.colors.white['0'],
Expand Down Expand Up @@ -229,25 +225,24 @@ function SendNft() {
)}
<ScrollContainer>
{!isGalleryOpen && <TopRow title={t('SEND_NFT')} onClick={handleBackButtonClick} />}
<SendFormContainer>
<SendForm
processing={isLoading}
currencyType="NFT"
disableAmountInput
recepientError={error}
recipient={address}
onPressSend={onPressSendNFT}
>
<Container>
<NFtContainer>
<NftImage
metadata={nft?.token_metadata!}
/>
</NFtContainer>
<NftTitleText>{nft?.token_metadata?.name}</NftTitleText>
</Container>
</SendForm>
</SendFormContainer>
<SendForm
processing={isLoading}
currencyType="NFT"
disableAmountInput
recepientError={error}
recipient={address}
onPressSend={onPressSendNFT}
>
<Container>
<NFtContainer>
<NftImage
metadata={nft?.token_metadata!}
/>
</NFtContainer>
<NftTitleText>{nft?.token_metadata?.name}</NftTitleText>
</Container>
</SendForm>

<BottomBarContainer>
{!isGalleryOpen && <BottomBar tab="nft" />}
</BottomBarContainer>
Expand Down
3 changes: 2 additions & 1 deletion src/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,8 @@
"INSUFFICIENT_BALANCE_FEES": "Insufficient balance when including transaction fees",
"NFT_SEND_DETAIL": "This Nft is already sent and is in pending state"
},
"SEND_NFT": "Send NFT"
"SEND_NFT": "Send NFT",
"ASSOCIATED_BNS_DOMAIN": "Associated BNS Name"
},
"CONFIRM_TRANSACTION": {
"SEND": "Send",
Expand Down