Skip to content

Commit

Permalink
💄Improved UI in buy section
Browse files Browse the repository at this point in the history
  • Loading branch information
@MattPoblete
MattPoblete committed Aug 22, 2024
1 parent de4d081 commit 007e182
Show file tree
Hide file tree
Showing 4 changed files with 142 additions and 50 deletions.
65 changes: 42 additions & 23 deletions src/components/Buy/BuyComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { StyledSelect } from 'components/Layout/StyledSelect'
import { RowFixed } from 'components/Row'
import SwapHeader from 'components/Swap/SwapHeader'
import { SwapSection } from 'components/Swap/SwapComponent'
import { BodyPrimary } from 'components/Text'
import { BodyPrimary, ButtonText } from 'components/Text'
import { getChallengeTransaction, submitChallengeTransaction } from 'functions/buy/sep10Auth/stellarAuth'
import { initInteractiveDepositFlow } from 'functions/buy/sep24Deposit/InteractiveDeposit'
import { getCurrencies } from 'functions/buy/SEP-1'
Expand All @@ -31,28 +31,41 @@ export interface currency {
status?: string;
};

const anchors: anchor[] = [
const anchors = [
{
name: 'Stellar TestAnchor 1',
home_domain: 'testanchor.stellar.org',
currency: 'SRT'
},
{
name: 'MoneyGram',
home_domain: 'stellar.moneygram.com',
currency: 'USD'
},
{
name: 'MyKobo',
home_domain: 'mykobo.co',
currency: 'EUR'
network: 'testnet',
anchors: [{
name: 'Stellar TestAnchor 1',
home_domain: 'testanchor.stellar.org',
currency: 'SRT'
},
{
name: 'MoneyGram',
home_domain: 'stellar.moneygram.com',
currency: 'USD'
},
{
name: 'MyKobo',
home_domain: 'mykobo.co',
currency: 'EUR'
},
{
name: 'Anclap',
home_domain: 'api-stage.anclap.ar',
currency: 'ARS/PEN'
},]
},
{
name: 'Anclap',
home_domain: 'api-stage.anclap.ar',
currency: 'ARS/PEN'
},
];
network: 'mainnet',
anchors: [
{
name: 'Anclap',
home_domain: 'api-stage.anclap.ar',
currency: 'ARS/PEN'
}
]
}
]

function BuyComponent() {
const sorobanContext = useSorobanReact();
Expand Down Expand Up @@ -300,6 +313,10 @@ function BuyComponent() {
}
}

const getAnchors = () => {
return anchors.find((anchor) => anchor.network === activeChain?.id)?.anchors;
}

useEffect(() => {
checkTrustline();
}, [selectedAsset, address, activeChain, selectedAnchor, activeConnector])
Expand Down Expand Up @@ -408,7 +425,7 @@ function BuyComponent() {
depositError={statusModalState.status.depositError} />
<BuyModal
isOpen={modalState.anchorModal.visible}
anchors={anchors}
anchors={getAnchors()}
onClose={() => { handleClose('anchor') }}
handleSelect={(e) => handleSelect('anchor', e)} />
<BuyModal
Expand Down Expand Up @@ -448,7 +465,7 @@ function BuyComponent() {
<Aligner>
<RowFixed sx={{ my: 1 }}>
{modalState.assetModal.isLoading && (
<Skeleton variant="rounded" animation="wave" sx={{ borderRadius: 16 }}>
<Skeleton variant="rounded" animation="pulse" sx={{ borderRadius: 16 }}>
<StyledSelect visible='true' selected={!!selectedAsset} onClick={() => fetchCurrencies()} disabled={!!!selectedAnchor}>
<StyledTokenName
data-testid="Swap__Panel__Selector"
Expand Down Expand Up @@ -489,7 +506,9 @@ function BuyComponent() {
{isLoading ?
<CircularProgress /> :
<BodyPrimary>
{buttonText}
<ButtonText fontSize={20} fontWeight={600}>
{buttonText}
</ButtonText>
</BodyPrimary>
}
</ButtonPrimary>) :
Expand Down
4 changes: 2 additions & 2 deletions src/components/Buy/BuyModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { useEffect } from 'react'
import ModalBox from 'components/Modals/ModalBox'
import { styled } from 'soroswap-ui';
import { Box, Container, Modal, useMediaQuery } from '@mui/material';
import { BodyPrimary, BodySmall, Caption } from 'components/Text';
import { BodyPrimary, BodySmall, Caption, SubHeaderLarge } from 'components/Text';
import { anchor, currency } from './BuyComponent'

const ContentWrapper = styled('div') <{ isMobile: boolean }>`
Expand Down Expand Up @@ -75,7 +75,7 @@ const BuyModal = ({
<Container sx={{ width: 500 }}>
<ContentWrapper isMobile={false}>
<Box>
{anchors ? <h3>Pay</h3> : <h3>Receive</h3>}
{anchors ? <SubHeaderLarge>Pay</SubHeaderLarge> : <SubHeaderLarge>Receive</SubHeaderLarge>}
{anchors ? <BodySmall>Select a fiat currency to pay.</BodySmall> : <BodySmall>Select a crypto asset to receive</BodySmall>}
</Box>
<BoxGroup>
Expand Down
113 changes: 90 additions & 23 deletions src/components/Buy/BuyStatusModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,74 @@
import { useEffect } from 'react'
import ModalBox from 'components/Modals/ModalBox'
import { styled } from 'soroswap-ui';
import { Box, Button, CircularProgress, Container, Modal, Typography, useMediaQuery } from 'soroswap-ui';
import { BodyPrimary, BodySmall, Caption } from 'components/Text';
import { Step, StepContent, StepLabel, Stepper } from '@mui/material';
import { Box, Button, CircularProgress, Container, Modal } from 'soroswap-ui';
import { BodyPrimary, BodySmall, ButtonText, Caption, HeadlineSmall } from 'components/Text';
import { Step, StepContent, StepIconProps, StepLabel, Stepper } from '@mui/material';
import StepConnector, { stepConnectorClasses } from '@mui/material/StepConnector';
import { AlertTriangle, CheckCircle } from 'react-feather'
import { useTheme } from '@mui/material'
import { Check } from '@mui/icons-material';

const StepperConnector = styled(StepConnector)(({ theme }) => ({
[`&.${stepConnectorClasses.alternativeLabel}`]: {
top: 10,
left: 'calc(-50% + 16px)',
right: 'calc(50% + 16px)',
},
[`&.${stepConnectorClasses.active}`]: {
[`& .${stepConnectorClasses.line}`]: {
borderColor: '#784af4',
},
},
[`&.${stepConnectorClasses.completed}`]: {
[`& .${stepConnectorClasses.line}`]: {
borderColor: '#784af4',
},
},
[`& .${stepConnectorClasses.line}`]: {
borderColor: theme.palette.mode === 'dark' ? theme.palette.grey[800] : '#eaeaf0',
borderTopWidth: 3,
borderRadius: 1,
},
}));

const StepperIconRoot = styled('div')<{ ownerState: { active?: boolean } }>(
({ theme, ownerState }) => ({
color: theme.palette.mode === 'dark' ? theme.palette.grey[700] : '#eaeaf0',
display: 'flex',
height: 22,
alignItems: 'center',
...(ownerState.active && {
color: '#784af4',
}),
'& .StepperIcon-completedIcon': {
color: '#784af4',
zIndex: 1,
fontSize: 18,
},
'& .StepperIcon-circle': {
width: 8,
height: 8,
borderRadius: '50%',
backgroundColor: 'currentColor',
},
}),
);

function StepperIcon(props: StepIconProps) {
const { active, completed, className } = props;

return (
<StepperIconRoot ownerState={{ active }} className={className}>
{completed ? (
<Check className="StepperIcon-completedIcon" />
) : (
<div className="StepperIcon-circle" />
)}
</StepperIconRoot>
);
}



const ContentWrapper = styled('div') <{ isMobile: boolean }>`
display: flex;
Expand All @@ -16,7 +79,7 @@ const ContentWrapper = styled('div') <{ isMobile: boolean }>`
`;

const stepperStyle = {

border: '1px solid red',
};


Expand Down Expand Up @@ -55,7 +118,7 @@ function BuyStatusModal({
<ContentWrapper isMobile={false}>
{trustline ? (
<>
<Typography variant="h5">Setting up trustline</Typography>
<HeadlineSmall>Setting up trustline</HeadlineSmall>
<BodyPrimary>
Setting up trustline is required to buy this token. This will allow you to receive the token after the purchase.
</BodyPrimary>
Expand Down Expand Up @@ -87,41 +150,41 @@ function BuyStatusModal({
)}
</>
) :
((depositError === '') ? (<Stepper orientation='vertical' activeStep={activeStep} >
((depositError === '') ? (<Stepper orientation='vertical' activeStep={activeStep} connector={<StepperConnector />}>
<Step>
<StepLabel style={stepperStyle}>
<Typography sx={{ color: '#fff' }}>
<StepLabel StepIconComponent={StepperIcon}>
<HeadlineSmall fontWeight={400}>
Requesting authorization
</Typography>
</HeadlineSmall>
</StepLabel>
<StepContent>
<Typography sx={{ fontWeight: 200, fontSize: '12px' }}>Please, confirm the transaction in your wallet to allow Soroswap send your addres to anchor.</Typography>
<BodySmall>Please, confirm the transaction in your wallet to allow Soroswap send your addres to anchor.</BodySmall>
<Box sx={{ mt: 4 }} textAlign={'center'}>
<CircularProgress />
</Box>
</StepContent>
</Step>
<Step>
<StepLabel>
<Typography sx={{ color: '#fff' }}>
<StepLabel StepIconComponent={StepperIcon}>
<HeadlineSmall fontWeight={400}>
Fill the interactive deposit
</Typography>
</HeadlineSmall>
</StepLabel>
<StepContent>
<Typography sx={{ fontWeight: 200, fontSize: '12px' }}>Please, fill the requested information in the new window and wait for the deposit</Typography>
<BodySmall>Please, fill the requested information in the new window and wait for the deposit</BodySmall>
<Box sx={{ mt: 4 }} textAlign={'center'}>
<CircularProgress />
</Box>
</StepContent>
</Step>
<Step>
<StepLabel>
<Typography sx={{ color: '#fff' }}>
<StepLabel StepIconComponent={StepperIcon}>
<HeadlineSmall fontWeight={400}>
Await for the deposit:
</Typography>
</HeadlineSmall>
</StepLabel>
<StepContent>
<Typography sx={{ fontWeight: 200, fontSize: '12px' }}>Everything is handled on our end. Please relax and take a break. Your funds should update automatically once the anchor completes the deposit.</Typography>
<BodySmall>Everything is handled on our end. Please relax and take a break. Your funds should update automatically once the anchor completes the deposit.</BodySmall>
<Box sx={{ mb: 2, pt: 4 }} textAlign={'center'}>
<CheckCircle data-testid="pending-modal-success-icon" strokeWidth={2} color={theme.palette.success.main} size="48px" />
</Box>
Expand All @@ -134,7 +197,9 @@ function BuyStatusModal({
onClick={handleClose}
sx={{ mt: 2, mr: 1 }}
>
Close
<ButtonText>
Close
</ButtonText>
</Button>
</Box>
</StepContent>
Expand All @@ -143,15 +208,17 @@ function BuyStatusModal({
<>
<Box textAlign={'center'} sx={{ my: 2 }}>
<AlertTriangle data-testid="pending-modal-failure-icon" strokeWidth={2} color={theme.palette.error.main} size="48px" />
<BodySmall sx={{ my: 2 }}>
<BodySmall sx={{ my: 2 }}>
{depositError}
</BodySmall>
</BodySmall>
<Button
sx={{ mt: 2 }}
variant="outlined"
onClick={handleClose}
>
Close
<ButtonText>
Close
</ButtonText>
</Button>
</Box>
</>
Expand Down
10 changes: 8 additions & 2 deletions src/components/Swap/SwapHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Link, styled, useTheme } from 'soroswap-ui';
import { RowBetween, RowFixed } from '../Row';
import SettingsTab from '../Settings/index';
import { useMediaQuery } from 'soroswap-ui';
import { useState } from 'react';
import { useEffect, useState } from 'react';
const StyledSwapHeader = styled(RowBetween)(({ theme }) => ({
marginBottom: 10,
color: theme.palette.secondary.main,
Expand Down Expand Up @@ -49,7 +49,13 @@ export default function SwapHeader({
const [activeAction, setActiveAction] = useState<'swap' | 'buy'>('swap');
const href = window.location.pathname;


useEffect(() => {
if (href == '/swap') {
setActiveAction('swap');
} else if (href == '/buy') {
setActiveAction('buy');
}
}, [href]);

return (
<StyledSwapHeader>
Expand Down

0 comments on commit 007e182

Please sign in to comment.