22 |
50 | );
51 | };
52 |
53 | export default PriceLiquidity;
--------------------------------------------------------------------------------
/src/components/TokenDetails/Chats.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, useMemo } from 'react';
2 | import Image from 'next/image';
3 | import { getChatMessages, addChatMessage } from '@/utils/api';
4 | import { useAccount } from 'wagmi';
5 | import { toast } from 'react-toastify';
6 | import { formatTimestamp, getRandomAvatarImage, shortenAddress } from '@/utils/chatUtils';
7 | import { motion, AnimatePresence } from 'framer-motion';
8 | import { TokenWithTransactions } from '@/interface/types';
9 | import SiweAuth from '@/components/auth/SiweAuth';
10 | import { Reply, X } from 'lucide-react';
11 |
12 | interface ChatMessage {
13 | id: number;
14 | user: string;
15 | token: string;
16 | message: string;
17 | reply_to: number | null;
18 | timestamp: string;
19 | }
20 |
21 | interface ChatsProps {
22 | tokenAddress: string;
23 | tokenInfo: TokenWithTransactions;
24 | }
25 |
26 | const Chats: React.FC
23 |
28 | Current Price
24 |25 | {currentPrice ? formatAmount(currentPrice.toString()) : 'Loading...'} BONE 26 |
27 |
29 |
49 | Current Liquidity
30 |31 | {liquidityData && liquidityData[2] ? `${formatAmountV2(liquidityData[2].toString())} BONE` : '0 BONE'} 32 |
33 | {liquidityData && liquidityData[2] && ( 34 | <> 35 |
36 |
40 |
46 |
47 | )}
48 |
43 | {calculateProgress(liquidityData[2]).toFixed(2)}%
44 |
45 |
102 | setIsAuthenticated(true)} />
103 |
104 | );
105 | }
106 |
107 | return (
108 |
109 |
194 | );
195 | };
196 |
197 | export default Chats;
198 |
--------------------------------------------------------------------------------
/src/components/TokenDetails/TokenHolders.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { ChevronLeftIcon, ChevronRightIcon, ExternalLinkIcon } from 'lucide-react';
3 | import { TokenHolder } from '@/interface/types';
4 | import { formatAmountV3, shortenAddress, getBondingCurveAddress } from '@/utils/blockchainUtils';
5 |
6 | interface TokenHoldersProps {
7 | tokenHolders: TokenHolder[];
8 | currentPage: number;
9 | totalPages: number;
10 | tokenSymbol: string;
11 | creatorAddress: string;
12 | tokenAddress: string;
13 | onPageChange: (page: number) => void;
14 | allHolders: TokenHolder[];
15 | }
16 |
17 | const TokenHolders: React.FC
110 |
111 | {messages.map((message) => {
112 | const parentMessage = findParentMessage(message.reply_to);
113 | return (
114 |
121 | {parentMessage && (
122 |
156 | );
157 | })}
158 |
159 |
160 |
161 |
193 |
123 | {shortenAddress(parentMessage.user)}:
124 | {parentMessage.message}
125 |
126 | )}
127 |
128 |
155 |
136 |
154 |
137 |
138 | {shortenAddress(message.user)}
139 | {message.user.toLowerCase() === tokenInfo.creatorAddress.toLowerCase() &&
140 | (dev)
141 | }
142 |
143 | {formatTimestamp(message.timestamp)}
144 |
145 | {message.message}
146 | 153 |
79 |
80 |
81 |
133 |
134 | {filteredHolders.length === 0 && (
135 |
172 | );
173 | };
174 |
175 | export default TokenHolders;
--------------------------------------------------------------------------------
/src/components/TokenDetails/TransactionHistory.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { ChevronLeftIcon, ChevronRightIcon, ExternalLinkIcon, ChevronDownIcon } from 'lucide-react';
3 | import { formatTimestamp, formatAmountV3, shortenAddress } from '@/utils/blockchainUtils';
4 | import { Transaction } from '@/interface/types';
5 |
6 | interface TransactionHistoryProps {
7 | transactions: Transaction[];
8 | transactionPage: number;
9 | totalTransactionPages: number;
10 | tokenSymbol: string;
11 | handlePageChange: (page: number) => void;
12 | }
13 |
14 | const TransactionHistory: React.FC| Holder | 83 |Percentage | 84 |
|---|---|
|
90 |
96 | Bonding Curve |
99 | 100 | {bondingCurveHolder ? calculatePercentage(bondingCurveHolder.balance, bondingCurveHolder.address) : '0%'} 101 | | 102 |
|
106 | {holder.address === creatorAddress ? (
107 |
113 | Creator |
126 | 127 | {calculatePercentage(holder.balance, holder.address)} 128 | | 129 |
136 | No token holder data available
137 |
138 | )}
139 |
140 | {actualTotalPages > 1 && (
141 |
142 |
149 | {Array.from({ length: actualTotalPages }, (_, i) => i + 1).map((page) => (
150 |
161 | ))}
162 |
169 |
170 | )}
171 | | Maker | 51 |Type | 52 |BONE | 53 |{tokenSymbol} | 54 |Date | 55 |Tx | 56 |
|---|---|---|---|---|---|
| 62 | 68 | {shortenAddress(tx.senderAddress)} 69 | 70 | | 71 |{tx.type} | 72 |{formatAmountV3(tx.ethAmount)} | 73 |{formatAmountV3(tx.tokenAmount)} | 74 |{formatTimestamp(tx.timestamp)} | 75 |76 | 82 | {tx.txHash.slice(0, 8)} 83 | 84 | | 85 |
94 | {transactions.map((tx) => (
95 |
152 | );
153 |
154 | return (
155 |
96 |
150 | ))}
151 | setExpandedRow(expandedRow === tx.id ? null : tx.id)}
99 | >
100 |
149 |
101 |
117 |
118 | {expandedRow === tx.id && (
119 |
102 |
116 |
103 | {tx.type}
104 |
111 |
112 | {formatAmountV3(tx.ethAmount)} BONE
113 | {formatAmountV3(tx.tokenAmount)} {tokenSymbol}
114 |
115 |
120 |
147 | )}
148 |
121 | Maker:
122 |
128 | {shortenAddress(tx.senderAddress)}
129 |
130 |
131 |
132 | Date:
133 | {formatTimestamp(tx.timestamp)}
134 |
135 |
136 | Transaction:
137 |
143 | View
146 |
156 |
202 | );
203 | };
204 |
205 | export default TransactionHistory;
--------------------------------------------------------------------------------
/src/components/auth/SiweAuth.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { useAccount, useSignMessage } from 'wagmi';
3 | import { SiweMessage } from 'siwe';
4 | import { toast } from 'react-toastify';
5 |
6 | interface SiweAuthProps {
7 | onAuthSuccess: () => void;
8 | }
9 |
10 | const SiweAuth: React.FC
161 | No transactions yet
162 |
163 | )}
164 |
165 | {totalTransactionPages > 1 && (
166 |
167 |
174 | {getPaginationRange(transactionPage, totalTransactionPages).map((page, index) => (
175 |
176 | {page === '...' ? (
177 | ...
178 | ) : (
179 |
189 | )}
190 |
191 | ))}
192 |
199 |
200 | )}
201 |
73 |
90 |
91 | );
92 | };
93 |
94 | export default SiweAuth;
95 |
--------------------------------------------------------------------------------
/src/components/charts/TradingViewChart.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useRef, useState } from 'react';
2 | import { createChart, CrosshairMode, IChartApi, Time } from 'lightweight-charts';
3 | import Image from 'next/image';
4 | import { formatAmountV3 } from '@/utils/blockchainUtils';
5 | import Spinner from '@/components/ui/Spinner';
6 |
7 | // TODO: add different chart types (bars, line, area, etc)
8 |
9 | interface ChartDataPoint {
10 | time: number;
11 | open: number;
12 | high: number;
13 | low: number;
14 | close: number;
15 | }
16 |
17 | interface PriceChartProps {
18 | data: ChartDataPoint[];
19 | liquidityEvents: any;
20 | tokenInfo: any;
21 | }
22 |
23 | const PriceChart: React.FC
181 |
183 | );
184 | }
185 |
186 | if (showUniswapInfo && liquidityEvents.liquidityEvents.length > 0) {
187 | const event = liquidityEvents.liquidityEvents[0];
188 | return (
189 |
190 |
193 |
222 | );
223 | }
224 |
225 | if (data.length < 2) {
226 | return (
227 | {tokenInfo.name} Listed on Chewyswap
192 |193 |
194 |
203 |
195 |
198 | Token
196 |{formatAmountV3(event.tokenAmount)} {tokenInfo.symbol}
197 |
199 |
202 | BONE
200 |{formatAmountV3(event.ethAmount)} BONE
201 |
204 |
210 | View TXID
211 |
212 |
218 | Buy on Chewy
219 |
220 |
221 |
228 |
230 | );
231 | }
232 |
233 | return (
234 |
235 | );
236 | };
237 |
238 | function enhanceSmallCandles(data: ChartDataPoint[]): ChartDataPoint[] {
239 | const minCandleSize = 1e-9;
240 | return data.map(item => {
241 | const bodySize = Math.abs(item.open - item.close);
242 | if (bodySize < minCandleSize) {
243 | const midPoint = (item.open + item.close) / 2;
244 | const adjustment = minCandleSize / 2;
245 | return {
246 | ...item,
247 | open: midPoint - adjustment,
248 | close: midPoint + adjustment,
249 | high: Math.max(item.high, midPoint + adjustment),
250 | low: Math.min(item.low, midPoint - adjustment)
251 | };
252 | }
253 | return item;
254 | });
255 | }
256 |
257 | function formatPrice(price: number) {
258 | return price.toFixed(9);
259 | }
260 |
261 | export default PriceChart;
--------------------------------------------------------------------------------
/src/components/events/ChristmasEvent.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import styled from 'styled-components';
3 |
4 | const ChristmasEventWrapper = styled.div`
5 | position: fixed;
6 | top: 0;
7 | left: 0;
8 | width: 100%;
9 | height: 100%;
10 | pointer-events: none;
11 | z-index: 1000;
12 | overflow: hidden;
13 | `;
14 |
15 | const Snow = styled.div`
16 | position: fixed;
17 | top: 0;
18 | left: 0;
19 | width: 100%;
20 | height: 100%;
21 | z-index: 1000;
22 | pointer-events: none;
23 | background-image:
24 | url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/flake1.png"),
25 | url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/flake2.png"),
26 | url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/flake3.png");
27 | animation: snow 60s linear infinite;
28 |
29 | @keyframes snow {
30 | 0% {
31 | background-position: 0px 0px, 0px 0px, 0px 0px;
32 | }
33 | 50% {
34 | background-position: 500px 500px, 100px 200px, -100px 150px;
35 | }
36 | 100% {
37 | background-position: 1000px 1000px, 200px 400px, -200px 300px;
38 | }
39 | }
40 | `;
41 |
42 | const Santa = styled.img`
43 | width: 150px;
44 | height: auto;
45 | position: fixed;
46 | z-index: 1001;
47 | animation: flyingSanta 60s linear infinite;
48 | transform-origin: center;
49 |
50 | @media (max-width: 768px) {
51 | width: 120px;
52 | }
53 |
54 | @media (max-width: 480px) {
55 | width: 90px;
56 | }
57 |
58 | @keyframes flyingSanta {
59 | 0% {
60 | left: -150px;
61 | top: 50%;
62 | transform: scaleX(1);
63 | }
64 | /* Straight left to right */
65 | 12% {
66 | left: 100%;
67 | top: 50%;
68 | transform: scaleX(1);
69 | }
70 | /* Reset position for diagonal up right to left */
71 | 13% {
72 | left: 100%;
73 | top: 80%;
74 | transform: scaleX(-1);
75 | }
76 | /* Diagonal up right to left */
77 | 25% {
78 | left: -150px;
79 | top: 20%;
80 | transform: scaleX(-1);
81 | }
82 | /* Reset for straight right to left */
83 | 26% {
84 | left: 100%;
85 | top: 30%;
86 | transform: scaleX(-1);
87 | }
88 | /* Straight right to left */
89 | 38% {
90 | left: -150px;
91 | top: 30%;
92 | transform: scaleX(-1);
93 | }
94 | /* Reset for diagonal down left to right */
95 | 39% {
96 | left: -150px;
97 | top: 20%;
98 | transform: scaleX(1);
99 | }
100 | /* Diagonal down left to right */
101 | 51% {
102 | left: 100%;
103 | top: 70%;
104 | transform: scaleX(1);
105 | }
106 | /* Reset for diagonal up left to right */
107 | 52% {
108 | left: -150px;
109 | top: 70%;
110 | transform: scaleX(1);
111 | }
112 | /* Diagonal up left to right */
113 | 64% {
114 | left: 100%;
115 | top: 20%;
116 | transform: scaleX(1);
117 | }
118 | /* Reset for diagonal down right to left */
119 | 65% {
120 | left: 100%;
121 | top: 20%;
122 | transform: scaleX(-1);
123 | }
124 | /* Diagonal down right to left */
125 | 77% {
126 | left: -150px;
127 | top: 70%;
128 | transform: scaleX(-1);
129 | }
130 | /* Reset for straight left to right high */
131 | 78% {
132 | left: -150px;
133 | top: 15%;
134 | transform: scaleX(1);
135 | }
136 | /* Straight left to right high */
137 | 90% {
138 | left: 100%;
139 | top: 15%;
140 | transform: scaleX(1);
141 | }
142 | /* Reset for straight right to left low */
143 | 91% {
144 | left: 100%;
145 | top: 85%;
146 | transform: scaleX(-1);
147 | }
148 | /* Straight right to left low */
149 | 99% {
150 | left: -150px;
151 | top: 85%;
152 | transform: scaleX(-1);
153 | }
154 | 100% {
155 | left: -150px;
156 | top: 50%;
157 | transform: scaleX(1);
158 | }
159 | }
160 | `;
161 |
162 | const ChristmasEvent = () => {
163 | return (
164 | Not enough data to display chart
229 |
14 | {/*
18 | {children}
19 |
20 |
21 |
22 | )
23 | }
24 |
25 | export default Layout
--------------------------------------------------------------------------------
/src/components/layout/Navbar.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import Link from 'next/link'
3 | import { ConnectButton } from '@rainbow-me/rainbowkit'
4 | import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
5 | import { shortenAddress } from '@/utils/blockchainUtils'
6 | import { useAccount } from 'wagmi'
7 | import { useRouter } from 'next/router'
8 | import { toast } from 'react-toastify'
9 | import HowItWorksPopup from '@/components/notifications/HowItWorksPopup'
10 |
11 | const CustomConnectButton = () => {
12 | return (
13 |
36 | {(() => {
37 | if (!connected) {
38 | return (
39 |
42 | )
43 | }
44 |
45 | if (chain.unsupported) {
46 | return (
47 |
50 | )
51 | }
52 |
53 | return (
54 |
93 | )
94 | }}
95 |
55 |
82 |
83 |
89 |
90 | )
91 | })()}
92 |
29 |
60 | );
61 | };
62 |
63 | export default HowItWorksPopup;
64 |
--------------------------------------------------------------------------------
/src/components/notifications/LiveNotifications.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, useRef } from 'react';
2 | import Image from 'next/image';
3 | import { useWebSocket } from '@/components/providers/WebSocketProvider';
4 | import { formatAmountV2 } from '@/utils/blockchainUtils';
5 |
6 | interface Notification {
7 | message: string;
8 | secondPart: string;
9 | type: 'buy' | 'sell' | 'tokenCreated';
10 | logo?: string;
11 | }
12 |
13 | const LiveNotifications: React.FC = () => {
14 | const [currentNotification, setCurrentNotification] = useState
30 |
36 |
37 |
59 |
38 |
58 | How It Works
39 | 40 |
41 | {steps.map((step, index) => (
42 |
50 |
51 |
57 |
43 |
48 | ))}
49 |
44 |
46 | {step.text}
47 |
128 |
148 | );
149 | };
150 |
151 | export default LiveNotifications;
--------------------------------------------------------------------------------
/src/components/notifications/Modal.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | interface ModalProps {
4 | isOpen: boolean;
5 | onClose: () => void;
6 | children: React.ReactNode;
7 | }
8 |
9 | const Modal: React.FC
129 |
147 |
130 |
131 | {currentNotification.message}
132 | {currentNotification.logo && (
133 |
134 |
146 |
14 |
20 | );
21 | };
22 |
23 | export default Modal;
--------------------------------------------------------------------------------
/src/components/notifications/PurchaseConfirmationPopup.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { X as XIcon } from 'lucide-react';
3 | import { parseUnits } from 'viem';
4 |
5 | interface PurchaseConfirmationPopupProps {
6 | onConfirm: (amount: bigint) => void;
7 | onCancel: () => void;
8 | tokenSymbol: string;
9 | }
10 |
11 | const PurchaseConfirmationPopup: React.FC
15 |
19 |
16 | {children}
17 |
18 |
21 |
60 | );
61 | };
62 |
63 | export default PurchaseConfirmationPopup;
--------------------------------------------------------------------------------
/src/components/providers/WebSocketProvider.tsx:
--------------------------------------------------------------------------------
1 | import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
2 | import { Token } from '@/interface/types';
3 |
4 | interface WebSocketContextType {
5 | newTokens: Token[];
6 | newTransactions: any[];
7 | }
8 |
9 | const WebSocketContext = createContext
22 |
29 |
59 | How many {tokenSymbol} do you want to buy? - amount in Bone
30 |31 | Tip: It's optional, but buying a small amount helps protect your coin from snipers. 32 | When creating, creators can buy up to 5% of the trading supply; any excess BONE is refunded. 33 |
34 | setPurchaseAmount(e.target.value)} 38 | className="w-full py-2 px-3 bg-[var(--card2)] border border-[var(--card-boarder)] rounded-md text-white mb-3 text-xs focus:outline-none focus:ring-2 focus:ring-[var(--primary)] focus:border-[var(--primary)] transition-colors" 39 | placeholder={`0.0 (optional)`} 40 | /> 41 |
42 |
48 |
54 |
55 | 56 | Cost to deploy: ~0 BONE 57 |
58 |
25 |
35 | );
36 | };
37 |
38 | export default OGPreview;
--------------------------------------------------------------------------------
/src/components/seo/SEO.tsx:
--------------------------------------------------------------------------------
1 | import Head from 'next/head';
2 | import { useRouter } from 'next/router';
3 |
4 | interface SEOProps {
5 | title?: string;
6 | description?: string;
7 | image?: string;
8 | token?: {
9 | name: string;
10 | symbol: string;
11 | description: string;
12 | logo: string;
13 | };
14 | }
15 |
16 | const SEO: React.FCOpen Graph Preview
26 |
27 | {ogData.image && (
28 | 
29 | )}
30 |
34 | {ogData.title}
31 |{ogData.description}
32 |{ogData.url}
33 | e.stopPropagation()}>
60 | {token.website && (
61 |
67 |
115 | );
116 |
117 | const handleClick = () => {
118 | onTokenClick(token.address);
119 | };
120 |
121 | if (isEnded && 'liquidityEvents' in token && token.liquidityEvents.length > 0) {
122 | const liquidityEvent = token.liquidityEvents[0];
123 | const uniswapLink = `https://chewyswap.dog/swap/?outputCurrency=${token.address}&chain=shibarium`;
124 |
125 | return (
126 |
127 |
177 | );
178 | }
179 |
180 | return (
181 |
128 |
176 |
129 |
175 |
130 |
144 |
145 |
131 | 
136 |
137 |
138 |
143 | 139 | {token.name} {token.symbol} 140 |
141 |{token.description}
142 |
146 |
156 |
157 |
147 | Progress to DEX
148 | Completed
149 |
150 |
151 |
154 |
155 |
158 | e.stopPropagation()}
164 | >
165 | Trade
166 |
167 |
171 | View
172 |
173 |
174 |
182 |
229 | );
230 | };
231 |
232 | export default TokenCard;
--------------------------------------------------------------------------------
/src/components/tokens/TokenList.tsx:
--------------------------------------------------------------------------------
1 | import React, { useMemo, useState } from 'react';
2 | import TokenCard from './TokenCard';
3 | import { Token, TokenWithLiquidityEvents } from '@/interface/types';
4 | import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
5 | import { useRouter } from 'next/router';
6 | import LoadingBar from '@/components/ui/LoadingBar';
7 | import { SortOption } from '../ui/SortOptions';
8 |
9 | interface TokenListProps {
10 | tokens: (Token | TokenWithLiquidityEvents)[];
11 | currentPage: number;
12 | totalPages: number;
13 | onPageChange: (page: number) => void;
14 | isEnded: boolean;
15 | sortType: SortOption;
16 | itemsPerPage: number;
17 | isFullList?: boolean;
18 | }
19 |
20 | interface TokenLiquidityData {
21 | [key: string]: bigint;
22 | }
23 |
24 | const TokenList: React.FC
183 |
228 |
185 |
227 |
186 |
200 |
201 |
187 |
192 |
193 |
194 |
199 | 195 | {token.name} {token.symbol} 196 |
197 |{token.description}
198 |
202 |
226 |
203 |
206 |
207 |
208 |
225 |
209 | Progress to DEX
210 |
211 | {isCompleted
212 | ? 'Completed'
213 | : liquidityData && liquidityData[2]
214 | ? `${calculateProgress(liquidityData[2].toString()).toFixed(2)}%`
215 | : '0%'}
216 |
217 |
218 |
219 |
223 |
224 |
76 | {displayTokens.map((token) => (
77 | updateLiquidityData(token.address, amount)}
83 | />
84 | ))}
85 |
86 |
87 | {isLoading && (
88 |
89 |
91 | )}
92 |
93 | {totalPages > 1 && (
94 |
95 |
102 |
103 |
127 | )}
128 |
129 | );
130 | };
131 |
132 | export default TokenList;
--------------------------------------------------------------------------------
/src/components/ui/LoadingBar.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | interface LoadingBarProps {
4 | size?: 'small' | 'medium' | 'large';
5 | color?: string;
6 | }
7 |
8 | const LoadingBar: React.FC
104 | {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
105 |
116 | ))}
117 |
118 |
119 |
126 |
20 |
31 | );
32 | };
33 |
34 | export default LoadingBar;
--------------------------------------------------------------------------------
/src/components/ui/SearchFilter.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, forwardRef } from 'react';
2 | import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
3 | import { useDebounce } from 'use-debounce';
4 |
5 | interface SearchFilterProps {
6 | onSearch: (query: string) => void;
7 | }
8 |
9 | const SearchFilter = forwardRef
21 |
28 |
29 | Loading...
30 |
23 |
31 |
33 | );
34 | });
35 |
36 | SearchFilter.displayName = 'SearchFilter';
37 |
38 | export default SearchFilter;
--------------------------------------------------------------------------------
/src/components/ui/ShareButton.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import { Share2Icon, X } from 'lucide-react';
3 | import {
4 | TwitterIcon,
5 | FacebookIcon,
6 | InstagramIcon,
7 | LinkedinIcon,
8 | Send as TelegramIcon,
9 | MessageCircle as DiscordIcon
10 | } from 'lucide-react';
11 |
12 | interface TokenInfo {
13 | name: string;
14 | description: string;
15 | logo: string;
16 | }
17 |
18 | interface ShareModalProps {
19 | tokenInfo: TokenInfo;
20 | isOpen: boolean;
21 | onClose: () => void;
22 | }
23 |
24 | interface SocialPlatform {
25 | name: string;
26 | icon: React.ElementType;
27 | color: string;
28 | getShareUrl: (shareText: string, shareUrl: string, logoUrl: string) => string;
29 | }
30 |
31 | const ShareModal: React.FC
84 |
118 | );
119 | };
120 |
121 | interface ShareButtonProps {
122 | tokenInfo: TokenInfo;
123 | className?: string;
124 | }
125 |
126 | const ShareButton: React.FC
85 |
117 |
86 |
95 | Share {tokenInfo.name} on
87 | 94 |
96 | 
101 |
102 |
103 | {socialPlatforms.map((platform) => (
104 |
112 |
116 |
132 |
139 |
140 |
22 | {/* Trending Section with Market Cap */}
23 |
74 | );
75 | };
76 |
77 | export default SortOptions;
--------------------------------------------------------------------------------
/src/components/ui/Spinner.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | interface SpinnerProps {
4 | size?: 'small' | 'medium' | 'large';
5 | }
6 |
7 | const Spinner: React.FC
24 |
34 |
35 | {/* Market Cap option only shows when Trending is selected */}
36 | {(currentSort === 'trending' || currentSort === 'marketcap') && (
37 |
47 | )}
48 |
49 |
50 | {/* New tokens */}
51 |
61 |
62 | {/* Finalized = listed */}
63 |
73 |
16 |
22 |
23 | );
24 | };
25 |
26 | export default Spinner;
--------------------------------------------------------------------------------
/src/components/ui/ldspinner.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | interface LdSpinnerProps {
4 | size?: 'small' | 'medium' | 'large';
5 | color?: string;
6 | }
7 |
8 | const LdSpinner: React.FC
20 |
27 |
28 | );
29 | };
30 |
31 | export default LdSpinner;
--------------------------------------------------------------------------------
/src/components/ui/switch.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import * as SwitchPrimitives from "@radix-ui/react-switch"
3 |
4 | const Switch = React.forwardRef<
5 | React.ElementRef
15 |
26 | Not Found
17 |18 | Wait and try again later. It seems like what you are looking for doesn't exist or is still indexing. 19 |
20 | 21 | 24 | 25 |
38 |
67 | Frequently Asked Questions
39 | 40 |
41 | {faqs.map((faq, index) => (
42 |
66 |
43 |
54 |
64 | ))}
65 |
59 |
63 |
60 |
62 | {faq.answer}
61 |
9 |
73 | About Bondle
10 | 11 |
12 |
30 |
31 |
13 |
29 | What is Bondle?
14 |
15 |
28 | 16 | Bondle is a revolutionary decentralized platform that empowers individuals to create and trade tokens using innovative bonding curve technology. 17 |
18 |19 | Our mission is to democratize token creation and provide a dynamic, fair trading environment for the crypto community. 20 |
21 |22 | Our mission is to democratize token creation for the crypto community. 23 |
24 |25 | We provide a dynamic and fair trading environment using bonding curve technology. 26 |
27 |
32 |
49 |
50 | How It Works
33 |
34 | {[
35 | { icon: CubeTransparentIcon, title: "Token Creation", description: "Users easily create tokens by setting a name, symbol, and description." },
36 | { icon: ChartBarIcon, title: "Bonding Curve", description: "Each token's price is determined by its unique bonding curve." },
37 | { icon: CurrencyDollarIcon, title: "Trading", description: "Users can buy and sell tokens, with prices dynamically adjusted by the curve." },
38 | { icon: ArrowPathIcon, title: "Liquidity Pool", description: "Each token has its own liquidity pool that grows and shrinks with trades." },
39 | { icon: BeakerIcon, title: "Customization", description: "Various curve shapes allow for different token economics." },
40 | ].map((item, index) => (
41 |
48 |
42 |
46 | ))}
47 | {item.title}
44 |{item.description}
45 |
51 |
72 | Benefits of Bonding Curves
52 |
53 |
71 | -
54 | {[
55 | { title: "Continuous Liquidity", description: "Tokens can always be bought or sold, ensuring a fluid market." },
56 | { title: "Algorithmic Price Discovery", description: "Market price is determined automatically based on supply and demand." },
57 | { title: "Incentivized Participation", description: "Early supporters benefit from potential price appreciation as demand grows." },
58 | { title: "Flexible Token Economics", description: "Different curve shapes allow for various economic models to suit project needs." },
59 | ].map((item, index) => (
60 |
-
61 |
64 | 65 | {item.title}: {item.description} 66 |67 |
68 | ))}
69 |
{title}
18 |{description}
19 |
31 | {/* Hero Section */}
32 |
33 |
68 |
69 | {/* Features Section */}
70 |
71 |
92 |
93 | {/* How It Works Section */}
94 |
95 |
119 |
120 | {/* Call to Action */}
121 |
122 |
131 |
132 |
34 |
63 |
35 |
41 | Welcome to Bondle
42 |
43 |
49 | Create, trade, and grow your tokens with bonding curves
50 |
51 |
56 |
57 | Enter App
58 |
59 |
60 |
61 |
62 |
64 |
67 |
72 |
91 | Why Choose Bondle?
73 |
74 |
90 |
96 |
118 | How It Works
97 |
98 | {[
99 | "Create your token",
100 | "Set bonding curve parameters",
101 | "Users buy and sell tokens",
102 | "Watch your token grow"
103 | ].map((step, index) => (
104 |
110 |
115 | ))}
116 |
117 |
111 | {index + 1}
112 |
113 | {step}
114 |
123 |
130 | Ready to revolutionize token trading?
124 |Join Bondle today and experience the future of decentralized finance.
125 | 126 | Launch Your Token Now 127 | 128 | 129 |