Skip to content

Commit

Permalink
Merge pull request #104 from P4-Games/feature/transfer-card
Browse files Browse the repository at this point in the history 
added mock gamma transfer-card
  • Loading branch information
@dappsar
dappsar authored Nov 14, 2023
2 parents 4ce6e74 + 5e6e7e1 commit 408755a
Show file tree
Hide file tree
Showing 2 changed files with 221 additions and 1 deletion.
143 changes: 142 additions & 1 deletion src/sections/Gamma/InfoCard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,98 @@ const InfoCard = React.forwardRef((props, book) => {
}

const handleTransferClick = async () => {
// TODO
Swal.fire({
text: `${t('wallet_destinatario')}`,
html: `<h5>${t('wallet_destinatario')}</h5><input type="text" id="quiero" class="swal2-input" placeholder=${t('wallet').toLowerCase()} pattern="[0-9,]+" >`,
showDenyButton: false,
showCancelButton: true,
confirmButtonText: `${t('trasnferir')}`,
confirmButtonColor: '#005EA3',
color: 'black',
background: 'white',
customClass: {
image: 'cardalertimg',
input: 'alertinput'
// container: 'cardcontainer',
// confirmButton: 'alertbuttonvender',
// cancelButton: 'alertcancelbutton',
}
}).then((result) => {
/* Read more about isConfirmed, isDenied below */
if (result.isConfirmed) {
// const input = Swal.getPopup().querySelector('#quiero')
// setWantedCards(input.value)
Swal.fire({
title: '',
text: t('confirmado'),
icon: 'success',
showConfirmButton: false,
timer: 1500
})
// Swal.fire({
// text: 'Publicar?',
// showCancelButton: true,
// confirmButtonText: 'Confirmar publicacion',
// showLoaderOnConfirm: true,
// preConfirm: (login) => {
// return fetch(`//api.github.com/users/${login}`)
// .then(response => {
// if (!response.ok) {
// throw new Error(response.statusText)
// }
// return response.json()
// })
// .catch(error => {
// Swal.showValidationMessage(
// `Request failed: ${error}`
// )
// })
// },
// allowOutsideClick: () => !Swal.isLoading()
// }).then((result) => {
// if (result.isConfirmed) {
// Swal.fire({
// text: `El precio elegido es ${result.value.login}`,
// imageUrl:`${storageUrlGamma}/T1/${props.imageNumber}.png`,
// color:`whitesmoke`,
// backdrop:"#0000009e",
// customClass: {
// image: 'cardalertimg',
// input: 'alertinput',
// // container: 'cardcontainer',
// popup: 'cardcontainer',
// confirmButton: 'alertbuttonvender',
// cancelButton: 'alertcancelbutton',
// },
// })
// }
// })
// } else if (result.isDenied) {
// Swal.fire({
// text: `Selecciona la carta que te gustaria intercambiar por la tuya`,
// // imageUrl:`${storageUrlGamma}/T1/${props.imageNumber}.png`,
// color:`black`,
// backdrop:"#0000009e",
// customClass: {
// image: 'cardalertimg',
// input: 'alertinput',
// // container: 'cardcontainer',
// popup: 'cardspopup',
// confirmButton: 'okbutton',
// cancelButton: 'alertcancelbutton',
// },
// })
}
})
/*
console.log('click transfer card')
const modal = document.getElementsByClassName('gamma_transfer_modal')[0]
modal.setAttribute('class', 'alpha_transfer_modal')
*/
}

const handleTransferModalClick = async () => {
// TODO
}

const handleMintClick = async () => {
Expand Down Expand Up @@ -204,6 +295,52 @@ const InfoCard = React.forwardRef((props, book) => {
)
}

const TrasnferModal = () => {
return (
<div className='gamma_transfer_modal gamma_display_none'>
<button
className='gamma_transfer_modal_close gamma_modal_close'
onClick={() => {
const modal = document.getElementsByClassName(
'gamma_transfer_modal'
)[0]
modal.setAttribute(
'class',
'gamma_transfer_modal gamma_display_none'
)
// setTransferError('')
// setReceiverAccount('')
}}
>
X
</button>
<span style={{ fontSize: '0.9rem' }}>
{t('carta_de_coleccion')}{' '}
{/*cards[cardIndex]
? ethers.BigNumber.from(
cards[cardIndex].collection
).toNumber()
: ethers.BigNumber.from(
cards[cardIndex - 1].collection
).toNumber()*/}
</span>
<input
placeholder={t('wallet_destinatario')}
// value={receiverAccount}
// onChange={(e) => setReceiverAccount(e.target.value)}
/>
<button
className='gamma_button'
onClick={() => handleTransferModalClick()}
// disabled={disableTransfer}
>
{t('transferir')}
</button>
{/*<span className='gamma_transfer_error'>{transferError}</span>*/}
</div>
)
}

return (
<HTMLFlipBook
id='Book'
Expand Down Expand Up @@ -251,6 +388,10 @@ const InfoCard = React.forwardRef((props, book) => {
<PublishButton/>
<OfferButton/>
</div>

<div className='modals'>
<TrasnferModal/>
</div>
</div>
{/* {pagination.page2.map((item, index) => {
return (
Expand Down
79 changes: 79 additions & 0 deletions src/styles/gamma.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@import './media-queries.scss';
.gammaFigures {
position: absolute;
bottom: 32%;
Expand Down Expand Up @@ -826,3 +827,81 @@
outline: 0 !important;
}
}

.gamma_transfer_modal {
position: absolute;
background-color: rgba(230, 230, 230, 0.95);
box-shadow:
inset -4px 4px 1px 1px grey,
inset -4px -4px 1px 1px lightgrey,
inset 4px 0px 1px 1px lightgrey;
border-radius: 5px;
width: 25rem;
height: 20rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
opacity: 1;
transition: opacity 1s;
}

.gamma_transfer_modal input {
width: 90%;
height: 35px;
margin: 25px 0;
font-family: 'Press Start 2P', 'Share Tech Mono', 'Share Tech', sans-serif;
font-size: 0.5rem;
box-shadow:
inset -4px 4px 1px 1px grey,
inset -4px -4px 1px 1px lightgrey,
inset 4px 0px 1px 1px lightgrey;
padding-left: 10px;
}

.gamma_transfer_modal_close {
top: 1rem;
right: 1rem;
}

.gamma_transfer_error {
bottom: 40px;
position: absolute;
margin-top: 10px;
text-align: center;
line-height: 15px;
font-size: 0.6rem;
color: red;
}

.gamma_display_none {
display: none !important;
opacity: 0;
transition: opacity 1s;
}

.gamma_modal_close {
position: absolute;
background-color: transparent;
font-family: 'Press Start 2P', 'Share Tech Mono', 'Share Tech', sans-serif;
cursor: pointer;
border: 0px;
}

.gamma_button {
cursor: pointer;
font-family: 'Press Start 2P', 'Share Tech Mono', 'Share Tech', sans-serif;
box-shadow:
inset -4px 4px 1px 1px grey,
inset -4px -4px 1px 1px lightgrey,
inset 4px 0px 1px 1px lightgrey;
height: 50px;
background-color: #ffce00;
padding: 10px;
text-align: center;
font-size: 0.5em;
width: 7rem;
@include mobile {
width: 6rem;
}
}

0 comments on commit 408755a

Please sign in to comment.