Skip to content

Commit

Permalink
🚧Fix display bugs
Browse files Browse the repository at this point in the history
  • Loading branch information
@MattPoblete
MattPoblete committed Aug 15, 2024
1 parent f6b8d74 commit 5d02613
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 26 deletions.
79 changes: 60 additions & 19 deletions src/components/Buy/BuyComponent.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react'
import { CircularProgress } from '@mui/material'
import { CircularProgress, Skeleton } from '@mui/material'
import { setTrustline } from '@soroban-react/contracts'
import { useSorobanReact } from '@soroban-react/core'
import BuyModal from './BuyModal'
Expand Down Expand Up @@ -49,7 +49,7 @@ const anchors: anchor[] = [
},
{
name: 'Anclap',
home_domain: 'api.anclap.com',
home_domain: 'api-stage.anclap.ar',
currency: 'ARS/PEN'
},
];
Expand All @@ -67,19 +67,23 @@ function BuyComponent() {
anchorModal: {
visible: boolean,
selectedAnchor: anchor | undefined,
isLoading: boolean
},
assetModal: {
visible: boolean,
selectedAsset: anchor | undefined,
isLoading: boolean
},
}>({
anchorModal: {
visible: false,
selectedAnchor: undefined,
isLoading: false,
},
assetModal: {
visible: false,
selectedAsset: undefined,
isLoading: false,
}
});

Expand Down Expand Up @@ -234,7 +238,7 @@ function BuyComponent() {
clearInterval(popupCheckInterval);
}
}
let popupCheckInterval = setInterval(checkPopupClosed, 500);
let popupCheckInterval = setInterval(checkPopupClosed, 200);
} catch (error: any) {
setDepositError(error.toString());
console.error(error);
Expand Down Expand Up @@ -316,9 +320,23 @@ function BuyComponent() {

const fetchCurrencies = async () => {
setIsLoading(true);
setModalState({
...modalState,
assetModal: {
...modalState.assetModal,
isLoading: true,
}
})
const currencies = await getCurrencies(selectedAnchor?.home_domain!);
setCurrencies(currencies);
setIsLoading(false);
setModalState({
...modalState,
assetModal: {
...modalState.assetModal,
isLoading: false,
}
})
handleOpen('asset');
}

Expand All @@ -327,16 +345,18 @@ function BuyComponent() {
setModalState({
...modalState,
anchorModal: {
...modalState.anchorModal,
visible: true,
selectedAnchor: modalState.anchorModal.selectedAnchor
selectedAnchor: modalState.anchorModal.selectedAnchor,
}
});
} else if (modal == 'asset') {
setModalState({
...modalState,
assetModal: {
...modalState.assetModal,
visible: true,
selectedAsset: modalState.assetModal.selectedAsset
selectedAsset: modalState.assetModal.selectedAsset,
}
});
}
Expand All @@ -347,16 +367,18 @@ function BuyComponent() {
setModalState({
...modalState,
anchorModal: {
...modalState.anchorModal,
visible: false,
selectedAnchor: modalState.anchorModal.selectedAnchor
selectedAnchor: modalState.anchorModal.selectedAnchor,
}
});
} else if (modal == 'asset') {
setModalState({
...modalState,
assetModal: {
...modalState.assetModal,
visible: false,
selectedAsset: modalState.anchorModal.selectedAnchor
selectedAsset: modalState.anchorModal.selectedAnchor,
}
});
}
Expand Down Expand Up @@ -425,19 +447,38 @@ function BuyComponent() {
<div>Recieve:</div>
<Aligner>
<RowFixed sx={{ my: 1 }}>
<StyledSelect visible='true' selected={!!selectedAsset} onClick={() => fetchCurrencies()} disabled={!!!selectedAnchor}>
<StyledTokenName
data-testid="Swap__Panel__Selector"
sx={
{
paddingLeft: '4px',
{modalState.assetModal.isLoading && (
<Skeleton variant="rounded" animation="wave" sx={{ borderRadius: 16 }}>
<StyledSelect visible='true' selected={!!selectedAsset} onClick={() => fetchCurrencies()} disabled={!!!selectedAnchor}>
<StyledTokenName
data-testid="Swap__Panel__Selector"
sx={
{
paddingLeft: '4px',
}
}
>
{selectedAsset ? selectedAsset.code : 'Select asset'}
</StyledTokenName>
{<StyledDropDown selected={!!selectedAsset} />}
</StyledSelect>
</Skeleton>
)}
{!modalState.assetModal.isLoading && (
<StyledSelect visible='true' selected={!!selectedAsset} onClick={() => fetchCurrencies()} disabled={!!!selectedAnchor}>
<StyledTokenName
data-testid="Swap__Panel__Selector"
sx={
{
paddingLeft: '4px',
}
}
}
>
{selectedAsset ? selectedAsset.code : 'Select asset'}
</StyledTokenName>
{<StyledDropDown selected={!!selectedAsset} />}
</StyledSelect>
>
{selectedAsset ? selectedAsset.code : 'Select asset'}
</StyledTokenName>
{<StyledDropDown selected={!!selectedAsset} />}
</StyledSelect>
)}
</RowFixed>
</Aligner>
</Container>
Expand Down
20 changes: 13 additions & 7 deletions src/components/Buy/BuyStatusModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,33 +86,39 @@ function BuyStatusModal({
) :
((depositError === '') ? (<Stepper orientation='vertical' activeStep={activeStep} >
<Step>
<StepLabel>
Requesting authorization
<StepLabel StepIconProps={{ sx: {} }}>
<Typography sx={{ color: '#fff' }}>
Requesting authorization
</Typography>
</StepLabel>
<StepContent>
<Typography>Please, confirm the transaction in your wallet to allow Soroswap send your addres to anchor.</Typography>
<Typography sx={{ fontWeight: 200, fontSize: '12px' }}>Please, confirm the transaction in your wallet to allow Soroswap send your addres to anchor.</Typography>
<Box sx={{ mt: 4 }} textAlign={'center'}>
<CircularProgress />
</Box>
</StepContent>
</Step>
<Step>
<StepLabel>
Fill the interactive deposit
<Typography sx={{ color: '#fff' }}>
Fill the interactive deposit
</Typography>
</StepLabel>
<StepContent>
<Typography>Please, fill the requested information in the new window and wait for the deposit</Typography>
<Typography sx={{ fontWeight: 200, fontSize: '12px' }}>Please, fill the requested information in the new window and wait for the deposit</Typography>
<Box sx={{ mt: 4 }} textAlign={'center'}>
<CircularProgress />
</Box>
</StepContent>
</Step>
<Step>
<StepLabel>
Await for the deposit:
<Typography sx={{ color: '#fff' }}>
Await for the deposit:
</Typography>
</StepLabel>
<StepContent>
<Typography>Everything is handled on our end. Please relax and take a break. Your funds should update automatically once the anchor completes the deposit.</Typography>
<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>
<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 Down

0 comments on commit 5d02613

Please sign in to comment.