Skip to content

[UI]: Sideshift ui edits #447

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

Merged
Klakurka merged 3 commits into from
Jan 17, 2025
Merged

[UI]: Sideshift ui edits #447

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
60ffefe
Sideshift ui edits
johnkuney Jan 14, 2025
419d099
style edits
johnkuney Jan 14, 2025
2085cc4
hover effects for copy button, increase min height, more button like …
johnkuney Jan 14, 2025
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
159 changes: 123 additions & 36 deletions react/lib/components/Widget/AltpaymentWidget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,19 +180,22 @@ export const AltpaymentWidget: React.FunctionComponent<AltpaymentProps> = props
const copiedMessage = document.createElement("div");
copiedMessage.textContent = "Copied!";
copiedMessage.style.position = "absolute";
copiedMessage.style.width = "100%";
copiedMessage.style.top = "-5px";
copiedMessage.style.width = "calc(100% - 10px)";
copiedMessage.style.height = "calc(100% - 20px)";
copiedMessage.style.alignItems = "center";
copiedMessage.style.top = "0";
copiedMessage.style.left = "0";
copiedMessage.style.backgroundColor = "rgb(232 232 237)";
copiedMessage.style.padding = "5px 0 5px 5px";
copiedMessage.style.backgroundColor = "#fff";
copiedMessage.style.borderRadius = "5px";
copiedMessage.style.padding = "10px 0 10px 10px";
copiedMessage.style.zIndex = "10";
copiedMessage.style.display = "none";

if (contentElement) {
const content = contentElement.textContent || "";
navigator.clipboard.writeText(content);
contentElement.appendChild(copiedMessage);
copiedMessage.style.display = "inline-block";
copiedMessage.style.display = "flex";

setTimeout(() => {
copiedMessage.style.display = "none";
Expand All @@ -205,7 +208,7 @@ export const AltpaymentWidget: React.FunctionComponent<AltpaymentProps> = props

const useStyles = makeStyles({
select_box: {
minWidth: '300px'
minWidth: '240px'
},
option_outer_ctn: {
display: 'flex',
Expand Down Expand Up @@ -235,7 +238,11 @@ export const AltpaymentWidget: React.FunctionComponent<AltpaymentProps> = props
padding: '20px 0',
alignItems: 'center',
display: 'flex',
flexDirection: 'column'
flexDirection: 'column',
minHeight: '350px',
position: 'relative',
minWidth: '240px',
maxWidth: '300px'
},
header: {
marginBottom:'30px',
Expand Down Expand Up @@ -269,24 +276,17 @@ export const AltpaymentWidget: React.FunctionComponent<AltpaymentProps> = props
'& h4': {
margin: '0',
fontSize: '20px',
borderBottom: '1px solid #000',
paddingBottom: '10px',
textAlign: 'center',
},
'& span': {
marginTop: '20px',
marginBottom: '2px',
fontSize: '16px',
fontWeight: '600'
},
},
copy_ctn: {
display: 'flex',
alignItems: 'center',
'& > div': {
position: 'relative'
},
'& img': {
width: '15px',
marginLeft: '5px'
},
},
editAmount: {
width: '100%',
Expand All @@ -300,6 +300,64 @@ export const AltpaymentWidget: React.FunctionComponent<AltpaymentProps> = props
marginLeft: '4px',
fontSize: '16px',
}
},
amount_error: {
position: 'absolute',
bottom: '10px',
textAlign: 'center',
background: '#00000014',
padding: '10px',
borderRadius: '5px'
},
error_msg: {
textAlign: 'center',
background: '#ee010119',
padding: '10px',
borderRadius: '5px',
color: 'red'
},
shift_label: {
fontSize: '14px',
marginLeft: '5px',
marginTop: '20px',
marginBottom: '2px',
fontWeight: 600
},
shift_input: {
background: '#ffffff',
padding: '10px',
borderRadius: '5px',
fontSize: '14px',
border: '1px solid #b3b3b3',
wordBreak: 'break-all',
flexGrow: 1,
position: 'relative',
},
copy_btn: {
background: '#ffffff',
padding: '10px',
borderRadius: '5px',
border: '1px solid #b3b3b3',
marginLeft: '5px',
display: 'flex',
alignItems: 'center',
cursor: 'pointer',
alignSelf: 'stretch',
transition: 'all ease-in-out 200ms',
'&:hover': {
background: '#f1f1f1'
},
'& img': {
width: '15px',
},
},
shift_complete: {
display: 'flex',
alignItems: 'center',
height: '100%',
flex: '1',
width: '100%',
fontSize: '18px'
}
});

Expand All @@ -320,31 +378,55 @@ export const AltpaymentWidget: React.FunctionComponent<AltpaymentProps> = props
<div className={classes.sideshift_ctn}>
{altpaymentError ? (
<>
<p>Error: {altpaymentError.errorMessage}</p>
<p className={classes.error_msg}>Error: {altpaymentError.errorMessage}</p>
<div className={classes.back_link} onClick={resetTrade}>Back</div>
</>
) : (
<>
{
altpaymentShift ? (
shiftCompleted ? (
<p>Shift Completed!</p>
<div className={classes.shift_complete}>Shift Completed!</div>
) : (
<div className={classes.shift_ready}>
<h4>Shift Ready!</h4>
<span>Send</span>
<div>{altpaymentShift.depositAmount}{' '}{altpaymentShift.depositCoin}</div>
<span>To</span>
<span className={classes.shift_label}>Send</span>
<div className={classes.copy_ctn}>
<div className={classes.shift_input}>
<span id="shift_amount">{altpaymentShift.depositAmount}</span>{' '}{altpaymentShift.depositCoin}
</div>
<div className={classes.copy_btn} onClick={() => copyToClipboard('shift_amount')}>
<img
src={copyIcon}
alt="Copy"
/>
</div>
</div>
<span className={classes.shift_label}>To</span>
<div className={classes.copy_ctn}>
<div id="to_address">{altpaymentShift.depositAddress}</div>
<img src={copyIcon} alt="Copy" onClick={() => copyToClipboard('to_address')}/>
<div id="to_address" className={classes.shift_input}>
{altpaymentShift.depositAddress}
</div>
<div className={classes.copy_btn} onClick={() => copyToClipboard('to_address')}>
<img
src={copyIcon}
alt="Copy"
/>
</div>
</div>
<span>Network</span>
<div>{selectedCoinNetwork}</div>
<span>SideShift ID</span>
<span className={classes.shift_label}>Network</span>
<div className={classes.shift_input}>{selectedCoinNetwork}</div>
<span className={classes.shift_label}>SideShift ID</span>
<div className={classes.copy_ctn}>
<div id="sideshift_id">{altpaymentShift.id}</div>
<img src={copyIcon} alt="Copy" onClick={() => copyToClipboard('sideshift_id')}/>
<div id="sideshift_id" className={classes.shift_input}>
{altpaymentShift.id}
</div>
<div className={classes.copy_btn} onClick={() => copyToClipboard('sideshift_id')}>
<img
src={copyIcon}
alt="Copy"
/>
</div>
</div>
</div>
)
Expand All @@ -361,15 +443,21 @@ export const AltpaymentWidget: React.FunctionComponent<AltpaymentProps> = props
<Grid
container
spacing={2}
alignItems="flex-end"
style={{ margin: '6px auto' }}
alignItems="center"
justifyContent="center"
style={{ margin: '6px auto', width: '100%' }}
>
<Grid item xs={6}>
<Grid item>
<TextField
label="Amount"
value={pairAmount ?? 0}
onChange={handlePairAmountChange}
inputProps={{ maxLength: pairAmountMaxLength }}
inputProps={{
maxLength: pairAmountMaxLength,
type: 'number',
pattern: '[0-9]*',
inputMode: 'numeric'
}}
/>
</Grid>
</Grid>
Expand Down Expand Up @@ -399,10 +487,10 @@ export const AltpaymentWidget: React.FunctionComponent<AltpaymentProps> = props
/>
</div>
{!isAboveMinimumAltpaymentAmount && (
<p>Amount is below minimum.</p>
<p className={classes.amount_error}>Amount is below minimum.</p>
)}
{!isBelowMaximumAltpaymentAmount && (
<p>Amount is above maximum.</p>
<p className={classes.amount_error}>Amount is above maximum.</p>
)}
</>
) : (
Expand Down Expand Up @@ -487,7 +575,6 @@ export const AltpaymentWidget: React.FunctionComponent<AltpaymentProps> = props
</>
)}
<div className={classes.spacer} />
<div className={classes.spacer} />
{loadingPair ||
selectedCoin === undefined ||
selectedCoinNetwork === undefined ? null : (
Expand Down
18 changes: 9 additions & 9 deletions react/lib/components/Widget/Widget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,8 +147,14 @@ const useStyles = makeStyles({
sideShiftLink: ({ theme }: StyleProps) => ({
fontSize: '14px',
cursor: 'pointer',
padding: '6px 12px',
marginTop: '20px',
background: '#e9e9e9',
borderRadius: '5px',
transition: 'all ease-in-out 200ms',
'&:hover': {
color: `${theme.palette.primary}`,
background: `${theme.palette.primary}`,
color: `${theme.palette.secondary}`,
},
}),
editAmount: {
Expand Down Expand Up @@ -777,14 +783,8 @@ export const Widget: React.FunctionComponent<WidgetProps> = props => {
</Box>
)}
{isPropsTrue(enableAltpayment) && (
<Box py={1}>
<Typography>
{
(isAboveMinimumAltpaymentUSDAmount || altpaymentEditable) && <a className={classes.sideShiftLink} onClick={tradeWithAltpayment}>Don't have any {addressType}?</a>
}
</Typography>
</Box>
)}
isAboveMinimumAltpaymentUSDAmount || altpaymentEditable) && <a className={classes.sideShiftLink} onClick={tradeWithAltpayment}>Don't have any {addressType}?</a>
}
</>
}
{foot && (
Expand Down
Loading