Skip to content

Slider manual token input #28

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

Open
firerum wants to merge 15 commits into
base: beta
Choose a base branch
from
Open

Slider manual token input #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
2623559
wip
firerum Aug 22, 2024
3b801cc
tweaked the code to handle both slider and manual input
firerum Aug 22, 2024
f3edb7f
:art: Update
r0zar Aug 22, 2024
0aa7d44
:art: Update
r0zar Aug 22, 2024
30ca4c4
:art: Update
r0zar Aug 22, 2024
768f75e
:art: Add pixel rozar
r0zar Aug 22, 2024
5c77f34
:art: Update
r0zar Aug 22, 2024
31cab5c
:art: Update
r0zar Aug 22, 2024
3e7cb89
:art: Update
r0zar Aug 22, 2024
29062ad
:art: Update
r0zar Aug 22, 2024
ea331d2
:art: Update
r0zar Aug 22, 2024
117dc3e
:art: Update
r0zar Aug 22, 2024
19965bc
:art: Update
r0zar Aug 22, 2024
f14c15a
:art: Update
r0zar Aug 22, 2024
069303b
:art: Update
r0zar Aug 22, 2024
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
76 changes: 56 additions & 20 deletions components/liquidity/lands.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { useState } from 'react';
import { Slider } from '@components/ui/slider';
import Link from 'next/link';
import { Button } from '@components/ui/button';
Expand All @@ -12,28 +13,63 @@ const LandControls = ({
metadata,
hadLand
}: any) => {
const hasRequiredTokens = Math.abs(min) !== Math.abs(max)
const tokenPrecision = Math.pow(10, metadata.wraps.decimals);
const [manualInput, setManualInput] = useState(tokensSelected / tokenPrecision);

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
let value = parseFloat(e.target.value);
if (isNaN(value)) {
value = 0;
}
value = Math.max(min / tokenPrecision, Math.min(value, max / tokenPrecision));
setManualInput(value);
onSetTokensSelected(value * tokenPrecision);
};

const handleSliderChange = (value: number[]) => {
setManualInput(value[0] / tokenPrecision);
onSetTokensSelected(value[0]);
};

return (
<div className="flex flex-col space-y-2">
{hasRequiredTokens && <div className="flex flex-col space-y-2">
<div className='flex justify-between'>
<div>Token Amount</div>
<div>{Math.abs(tokensSelected) / Math.pow(10, metadata.wraps.decimals)} {metadata.wraps.symbol}</div>
</div>
<div className="">
<Slider
value={[tokensSelected]}
defaultValue={[0]}
min={min}
max={max}
step={1}
className="w-full"
onValueChange={(v: any) => onSetTokensSelected(v[0])}
/>
{Math.abs(min) !== Math.abs(max) && (
<div className="flex flex-col space-y-2">
<div className="flex justify-between">
<div>Token Amount</div>
<div>{(tokensSelected / tokenPrecision).toLocaleString()} {metadata.wraps.symbol}</div>
</div>
<div className="">
<Slider
value={[tokensSelected]}
defaultValue={[0]}
min={min}
max={max}
step={tokenPrecision}
className="w-full"
onValueChange={handleSliderChange}
/>
</div>
<div className="flex flex-col space-y-1">
<label htmlFor="manual-input" className="text-sm font-medium text-gray-700">
Enter Manually
</label>
<div className="flex items-center space-x-2">
<input
id="manual-input"
type="number"
value={manualInput}
min={min / tokenPrecision}
max={max / tokenPrecision}
step="1"
onChange={handleInputChange}
className="p-2 border rounded-md w-full text-red-700"
/>
<span>{metadata.wraps.symbol}</span>
</div>
</div>
</div>
</div>}
)}
<div className="z-20 flex items-center justify-between w-full space-x-1">
<Link href="/staking">
<Button variant="ghost" className="z-30">
Expand All @@ -46,7 +82,7 @@ const LandControls = ({
</div>
</div>
</div>
)
}
);
};

export default LandControls
export default LandControls;
8 changes: 4 additions & 4 deletions components/quest/token-select-dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,16 +69,16 @@ export const TokenSelectDialog = ({ lands, contractId, buttonText = 'Complete Qu

<DialogDescription className='grid gap-2 grid-cols-2 sm:grid-cols-4 space-x-4 py-4'>
{lands.map((land: any) => (
<div className={`relative flex flex-col items-center space-y-2 ${!land.whitelisted || tapped[land.id] ? 'opacity-20 grayscale' : 'cursor-pointer'} group/token`}>
<div className={`relative flex flex-col items-center space-y-2 ${!land.whitelisted || tapped[land.id] || !land.balances?.energy ? 'opacity-20 grayscale' : 'cursor-pointer'} group/token`}>
<Image
alt={'token-logo'}
src={land.image}
width={100}
height={100}
onClick={() => (land.whitelisted && !tapped[land.id] && tap(land.id))}
className={`z-20 border rounded-full h-32 w-32 ${(land.whitelisted && !tapped[land.id]) && 'group-hover/token:z-40 group-hover/token:shadow-xl group-hover/token:scale-110 transition-all'}`}
onClick={() => (land.whitelisted && !tapped[land.id] && land.balances?.energy && tap(land.id))}
className={`z-20 border rounded-full h-32 w-32 ${(land.whitelisted && !tapped[land.id] && land.balances?.energy) && 'group-hover/token:z-40 group-hover/token:shadow-xl group-hover/token:scale-110 transition-all'}`}
/>
<div className={`z-30 opacity-0 absolute text-center px-3 py-1 border min-w-6 font-bold rounded-full top-0 text-md bg-card text-accent-foreground flex ${(land.whitelisted && !tapped[land.id]) && 'group-hover/token:-top-6 group-hover/token:opacity-100 group-hover/token:z-50 group-hover/token:shadow-xl group-hover/token:scale-150 transition-all'}`}>
<div className={`z-30 opacity-0 absolute text-center px-3 py-1 border min-w-6 font-bold rounded-full top-0 text-md bg-card text-accent-foreground flex ${(land.whitelisted && !tapped[land.id] && land.balances?.energy) && 'group-hover/token:-top-6 group-hover/token:opacity-100 group-hover/token:z-50 group-hover/token:shadow-xl group-hover/token:scale-150 transition-all'}`}>
<div className='z-30 text-white'>{numeral(land.balances?.energy).format('0a')} ⚡</div>
</div>
</div>
Expand Down
22 changes: 20 additions & 2 deletions lib/events/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ export const handleContractEvent = async (event: any, builder: any) => {
// contract ids
const kraqenLottoContractId = 'SPGYCP878RYFVT03ZT8TWGPKNYTSQB1578VVXHGE.kraqen-lotto';
const spellScrollsContractId = 'SP2ZNGJ85ENDY6QRHQ5P2D4FXKGZWCKTB2T0Z55KS.spell-scrolls-fire-bolt';
const pixelRozarContractId = 'SP2ZNGJ85ENDY6QRHQ5P2D4FXKGZWCKTB2T0Z55KS.pixel-rozar';

if (contractId === kraqenLottoContractId) {
symbol = '🐙'
Expand All @@ -84,7 +85,7 @@ export const handleContractEvent = async (event: any, builder: any) => {

builder.addField({
name: `${symbol} ${event.type}`,
value: `${event.data.recipient} gained ${event.data.amount / Math.pow(10, 6)} experience.`
value: JSON.stringify(event.data).slice(0, 300)
});

}
Expand All @@ -102,7 +103,24 @@ export const handleContractEvent = async (event: any, builder: any) => {

builder.addField({
name: `${symbol} ${event.type}`,
value: `${event.data.recipient} gained ${event.data.amount / Math.pow(10, 6)} experience.`
value: JSON.stringify(event.data).slice(0, 300)
});

}

else if (contractId === pixelRozarContractId) {
symbol = '💩'

const pixelRozarContract = contractFactory(contracts.kraqenLotto, pixelRozarContractId);
const tokensMinted = await clarigen.roOk(pixelRozarContract.getLastTokenId());
const nftMetadata = await getNftCollectionMetadata(pixelRozarContractId)
nftMetadata.properties.minted = Number(tokensMinted)
await setNftCollectionMetadata(pixelRozarContractId, nftMetadata)

builder.setThumbnail({ url: 'https://beta.charisma.rocks/quests/pixel-rozar/pixel-rozar.png' })
builder.addField({
name: `${symbol} ${event.type}`,
value: JSON.stringify(event.data).slice(0, 300)
});

}
Expand Down
3 changes: 1 addition & 2 deletions pages/api/v0/lands/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,8 +82,7 @@ export default async function landsIndexApi(
if (tx.metadata.success) {
let builder = new EmbedBuilder()
// send message to discord
builder.setAuthor({ name: `Stake-to-Earn Pools`, icon_url: 'https://beta.charisma.rocks/charisma.png', url: 'https://beta.charisma.rocks/staking' })
builder.setTitle('New Event')
builder.setAuthor({ name: `Charisma Event`, icon_url: 'https://beta.charisma.rocks/charisma.png', url: 'https://beta.charisma.rocks/staking' })
builder.setThumbnail({ url: 'https://beta.charisma.rocks/charisma.png' })

for (const event of tx.metadata.receipt.events) {
Expand Down
6 changes: 3 additions & 3 deletions pages/quest-deployer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,13 +197,13 @@ export default function ContractDeployer({ data }: any) {
<PiPackage className="size-5" />
<div className="grid gap-0.5">
<p>
NFT{" "}
Utility{" "}
<span className="font-medium text-foreground">
Collection
NFT Collection
</span>
</p>
<p className="text-xs" data-description>
Create an NFT collection to sell on Charisma
Create non-unique utility NFTs to sell on Charisma
</p>
</div>
</div>
Expand Down
Loading