From 007e1822bc6990c1d5138f79295d4864974ce013 Mon Sep 17 00:00:00 2001 From: Matias Poblete <86752543+MattPoblete@users.noreply.github.com> Date: Thu, 22 Aug 2024 09:09:16 -0400 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84Improved=20UI=20in=20buy=20section?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Buy/BuyComponent.tsx | 65 +++++++++------ src/components/Buy/BuyModal.tsx | 4 +- src/components/Buy/BuyStatusModal.tsx | 113 ++++++++++++++++++++------ src/components/Swap/SwapHeader.tsx | 10 ++- 4 files changed, 142 insertions(+), 50 deletions(-) diff --git a/src/components/Buy/BuyComponent.tsx b/src/components/Buy/BuyComponent.tsx index e21765fb..93834090 100644 --- a/src/components/Buy/BuyComponent.tsx +++ b/src/components/Buy/BuyComponent.tsx @@ -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' @@ -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(); @@ -300,6 +313,10 @@ function BuyComponent() { } } + const getAnchors = () => { + return anchors.find((anchor) => anchor.network === activeChain?.id)?.anchors; + } + useEffect(() => { checkTrustline(); }, [selectedAsset, address, activeChain, selectedAnchor, activeConnector]) @@ -408,7 +425,7 @@ function BuyComponent() { depositError={statusModalState.status.depositError} /> { handleClose('anchor') }} handleSelect={(e) => handleSelect('anchor', e)} /> {modalState.assetModal.isLoading && ( - + fetchCurrencies()} disabled={!!!selectedAnchor}> : - {buttonText} + + {buttonText} + } ) : diff --git a/src/components/Buy/BuyModal.tsx b/src/components/Buy/BuyModal.tsx index 581a5b8a..b1ac98c7 100644 --- a/src/components/Buy/BuyModal.tsx +++ b/src/components/Buy/BuyModal.tsx @@ -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 }>` @@ -75,7 +75,7 @@ const BuyModal = ({ - {anchors ?

Pay

:

Receive

} + {anchors ? Pay : Receive} {anchors ? Select a fiat currency to pay. : Select a crypto asset to receive} diff --git a/src/components/Buy/BuyStatusModal.tsx b/src/components/Buy/BuyStatusModal.tsx index d9a22367..8c2e9045 100644 --- a/src/components/Buy/BuyStatusModal.tsx +++ b/src/components/Buy/BuyStatusModal.tsx @@ -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 ( + + {completed ? ( + + ) : ( +
+ )} + + ); +} + + const ContentWrapper = styled('div') <{ isMobile: boolean }>` display: flex; @@ -16,7 +79,7 @@ const ContentWrapper = styled('div') <{ isMobile: boolean }>` `; const stepperStyle = { - + border: '1px solid red', }; @@ -55,7 +118,7 @@ function BuyStatusModal({ {trustline ? ( <> - Setting up trustline + Setting up trustline Setting up trustline is required to buy this token. This will allow you to receive the token after the purchase. @@ -87,41 +150,41 @@ function BuyStatusModal({ )} ) : - ((depositError === '') ? ( + ((depositError === '') ? (}> - - + + Requesting authorization - + - Please, confirm the transaction in your wallet to allow Soroswap send your addres to anchor. + Please, confirm the transaction in your wallet to allow Soroswap send your addres to anchor. - - + + Fill the interactive deposit - + - Please, fill the requested information in the new window and wait for the deposit + Please, fill the requested information in the new window and wait for the deposit - - + + Await for the deposit: - + - Everything is handled on our end. Please relax and take a break. Your funds should update automatically once the anchor completes the deposit. + Everything is handled on our end. Please relax and take a break. Your funds should update automatically once the anchor completes the deposit. @@ -134,7 +197,9 @@ function BuyStatusModal({ onClick={handleClose} sx={{ mt: 2, mr: 1 }} > - Close + + Close + @@ -143,15 +208,17 @@ function BuyStatusModal({ <> - + {depositError} - + diff --git a/src/components/Swap/SwapHeader.tsx b/src/components/Swap/SwapHeader.tsx index 9b3f8658..b434631d 100644 --- a/src/components/Swap/SwapHeader.tsx +++ b/src/components/Swap/SwapHeader.tsx @@ -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, @@ -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 (