@goodaofi/bonds-sdk 3.0.125 → 3.0.126
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './Confetti';
|
package/dist/main.js
CHANGED
|
@@ -94551,14 +94551,101 @@ const BondRowsByChain = ({ contractsByChain }) => {
|
|
|
94551
94551
|
}) }));
|
|
94552
94552
|
};
|
|
94553
94553
|
|
|
94554
|
+
const Confetti = ({ trigger }) => {
|
|
94555
|
+
const canvasRef = useRef(null);
|
|
94556
|
+
const confettiTriggeredRef = useRef(false);
|
|
94557
|
+
useEffect(() => {
|
|
94558
|
+
if (trigger && !confettiTriggeredRef.current) {
|
|
94559
|
+
confettiTriggeredRef.current = true;
|
|
94560
|
+
triggerConfetti();
|
|
94561
|
+
}
|
|
94562
|
+
}, [trigger]);
|
|
94563
|
+
const triggerConfetti = () => {
|
|
94564
|
+
const canvas = canvasRef.current;
|
|
94565
|
+
if (!canvas)
|
|
94566
|
+
return;
|
|
94567
|
+
const ctx = canvas.getContext('2d');
|
|
94568
|
+
if (!ctx)
|
|
94569
|
+
return;
|
|
94570
|
+
canvas.width = window.innerWidth;
|
|
94571
|
+
canvas.height = window.innerHeight;
|
|
94572
|
+
const particles = [];
|
|
94573
|
+
const colors = ['#312E7A', '#5C4FAE', '#AD6568', '#AD6E66', '#FFD700', '#FF6B6B', '#4ECDC4'];
|
|
94574
|
+
// Create particles
|
|
94575
|
+
for (let i = 0; i < 150; i++) {
|
|
94576
|
+
particles.push({
|
|
94577
|
+
x: Math.random() * canvas.width,
|
|
94578
|
+
y: -10,
|
|
94579
|
+
vx: (Math.random() - 0.5) * 8,
|
|
94580
|
+
vy: Math.random() * 3 + 2,
|
|
94581
|
+
color: colors[Math.floor(Math.random() * colors.length)],
|
|
94582
|
+
size: Math.random() * 8 + 4,
|
|
94583
|
+
rotation: Math.random() * 360,
|
|
94584
|
+
rotationSpeed: (Math.random() - 0.5) * 10,
|
|
94585
|
+
});
|
|
94586
|
+
}
|
|
94587
|
+
let animationId;
|
|
94588
|
+
const animate = () => {
|
|
94589
|
+
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
94590
|
+
particles.forEach((particle, index) => {
|
|
94591
|
+
particle.x += particle.vx;
|
|
94592
|
+
particle.y += particle.vy;
|
|
94593
|
+
particle.vy += 0.15; // gravity
|
|
94594
|
+
particle.rotation += particle.rotationSpeed;
|
|
94595
|
+
ctx.save();
|
|
94596
|
+
ctx.translate(particle.x, particle.y);
|
|
94597
|
+
ctx.rotate((particle.rotation * Math.PI) / 180);
|
|
94598
|
+
ctx.fillStyle = particle.color;
|
|
94599
|
+
ctx.fillRect(-particle.size / 2, -particle.size / 2, particle.size, particle.size);
|
|
94600
|
+
ctx.restore();
|
|
94601
|
+
// Remove particles that are off screen
|
|
94602
|
+
if (particle.y > canvas.height) {
|
|
94603
|
+
particles.splice(index, 1);
|
|
94604
|
+
}
|
|
94605
|
+
});
|
|
94606
|
+
if (particles.length > 0) {
|
|
94607
|
+
animationId = requestAnimationFrame(animate);
|
|
94608
|
+
}
|
|
94609
|
+
else {
|
|
94610
|
+
// Clean up canvas after animation
|
|
94611
|
+
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
94612
|
+
}
|
|
94613
|
+
};
|
|
94614
|
+
animate();
|
|
94615
|
+
return () => {
|
|
94616
|
+
if (animationId)
|
|
94617
|
+
cancelAnimationFrame(animationId);
|
|
94618
|
+
};
|
|
94619
|
+
};
|
|
94620
|
+
return (jsx$2("canvas", { ref: canvasRef, style: {
|
|
94621
|
+
position: 'fixed',
|
|
94622
|
+
top: 0,
|
|
94623
|
+
left: 0,
|
|
94624
|
+
width: '100%',
|
|
94625
|
+
height: '100%',
|
|
94626
|
+
pointerEvents: 'none',
|
|
94627
|
+
zIndex: 9999,
|
|
94628
|
+
} }));
|
|
94629
|
+
};
|
|
94630
|
+
|
|
94554
94631
|
const ProgressBar = ({ saleInfo }) => {
|
|
94555
|
-
|
|
94556
|
-
const
|
|
94557
|
-
const
|
|
94558
|
-
|
|
94632
|
+
var _a;
|
|
94633
|
+
const nextStageNumber = (_a = saleInfo === null || saleInfo === void 0 ? void 0 : saleInfo.nextStage) === null || _a === void 0 ? void 0 : _a.stageNumber;
|
|
94634
|
+
const stage = (saleInfo === null || saleInfo === void 0 ? void 0 : saleInfo.isInBreakPeriod) && nextStageNumber
|
|
94635
|
+
? saleInfo === null || saleInfo === void 0 ? void 0 : saleInfo.stages.find((stage) => stage.stageNumber === nextStageNumber - 1)
|
|
94636
|
+
: saleInfo === null || saleInfo === void 0 ? void 0 : saleInfo.currentStage;
|
|
94637
|
+
const stageSoldOut = (stage === null || stage === void 0 ? void 0 : stage.progressPercentage) === 100;
|
|
94638
|
+
console.log('is in break', saleInfo === null || saleInfo === void 0 ? void 0 : saleInfo.isInBreakPeriod);
|
|
94639
|
+
console.log('next stage number', nextStageNumber);
|
|
94640
|
+
console.log('stage', stage);
|
|
94641
|
+
console.log('stage sold out', stageSoldOut);
|
|
94642
|
+
console.log('sale info', stage === null || stage === void 0 ? void 0 : stage.hasEnded);
|
|
94643
|
+
const value = useMemo(() => { var _a; return (_a = stage === null || stage === void 0 ? void 0 : stage.progressPercentage) !== null && _a !== void 0 ? _a : 0; }, [stage]);
|
|
94644
|
+
const hardCap = useMemo(() => { var _a; return ((_a = stage === null || stage === void 0 ? void 0 : stage.hardCapSats) !== null && _a !== void 0 ? _a : 0) / 100000000; }, [stage]);
|
|
94645
|
+
const billed = useMemo(() => { var _a; return ((_a = stage === null || stage === void 0 ? void 0 : stage.totalBilledSats) !== null && _a !== void 0 ? _a : 0) / 100000000; }, [stage]);
|
|
94646
|
+
const stageNumber = useMemo(() => { var _a; return (_a = stage === null || stage === void 0 ? void 0 : stage.stageNumber) !== null && _a !== void 0 ? _a : 1; }, [stage]);
|
|
94559
94647
|
const endTime = useMemo(() => {
|
|
94560
|
-
|
|
94561
|
-
const timestamp = (_a = saleInfo === null || saleInfo === void 0 ? void 0 : saleInfo.currentStage) === null || _a === void 0 ? void 0 : _a.endTime;
|
|
94648
|
+
const timestamp = stage === null || stage === void 0 ? void 0 : stage.endTime;
|
|
94562
94649
|
if (!timestamp)
|
|
94563
94650
|
return 'N/A';
|
|
94564
94651
|
// endTime is a Unix timestamp in seconds, multiply by 1000 for milliseconds
|
|
@@ -94570,17 +94657,32 @@ const ProgressBar = ({ saleInfo }) => {
|
|
|
94570
94657
|
hour: '2-digit',
|
|
94571
94658
|
minute: '2-digit',
|
|
94572
94659
|
});
|
|
94573
|
-
}, [
|
|
94574
|
-
|
|
94660
|
+
}, [stage]);
|
|
94661
|
+
const nextStageStartTime = useMemo(() => {
|
|
94662
|
+
var _a, _b;
|
|
94663
|
+
return ((_a = saleInfo === null || saleInfo === void 0 ? void 0 : saleInfo.nextStage) === null || _a === void 0 ? void 0 : _a.startTime)
|
|
94664
|
+
? new Date(((_b = saleInfo === null || saleInfo === void 0 ? void 0 : saleInfo.nextStage) === null || _b === void 0 ? void 0 : _b.startTime) * 1000).toLocaleString('en-US', {
|
|
94665
|
+
timeZone: 'UTC',
|
|
94666
|
+
hour12: false,
|
|
94667
|
+
month: 'long',
|
|
94668
|
+
day: 'numeric',
|
|
94669
|
+
hour: '2-digit',
|
|
94670
|
+
minute: '2-digit',
|
|
94671
|
+
})
|
|
94672
|
+
: 'N/A';
|
|
94673
|
+
}, [saleInfo]);
|
|
94674
|
+
return (jsxs(Fragment$1, { children: [jsx$2(Confetti, { trigger: stageSoldOut }), jsxs(Flex$1, { sx: { alignItems: 'end', justifyContent: 'space-between', flexDirection: 'row', mt: '1rem' }, children: [jsxs(Flex$1, { sx: { flexDirection: 'column', width: '200px' }, children: [jsx$2(Text, { sx: {
|
|
94575
94675
|
fontSize: '14px',
|
|
94576
94676
|
fontWeight: '700',
|
|
94577
94677
|
color: 'var(--theme-ui-colors-textDisabledButton)',
|
|
94578
94678
|
mb: '0.2rem',
|
|
94579
|
-
}, children:
|
|
94679
|
+
}, children: stageSoldOut ? 'Stage ' + stageNumber + ' Completed!' : 'Stage ' + stageNumber + ' Progress' }), jsx$2(Text, { sx: { fontSize: '22px', fontWeight: '700' }, children: `${billed.toFixed(2)} BTC/ ${hardCap} BTC` })] }), jsx$2(Text, { sx: {
|
|
94580
94680
|
fontSize: '12px',
|
|
94581
94681
|
fontWeight: '400',
|
|
94582
94682
|
color: 'var(--theme-ui-colors-textDisabledButton)',
|
|
94583
|
-
}, children:
|
|
94683
|
+
}, children: (stage === null || stage === void 0 ? void 0 : stage.hasEnded)
|
|
94684
|
+
? 'Stage ' + nextStageNumber + ' starts in: ' + nextStageStartTime + ' UTC'
|
|
94685
|
+
: 'Stage ' + stageNumber + ' Ends: ' + endTime + ' UTC' })] }), jsx$2(Flex$1, { sx: { width: ['100%'], alignItems: 'center', flexDirection: 'row', my: '1rem' }, children: jsx$2(Box$1, { style: {
|
|
94584
94686
|
width: '100%',
|
|
94585
94687
|
height: '11px',
|
|
94586
94688
|
backgroundColor: 'var(--theme-ui-colors-white4)',
|