warlock/callfi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CalloutModal

Browse Source
This commit is contained in:
sewmina7@gmail.com 2024-06-26 23:12:31 +05:30
parent c2de1d317b
commit 6081953ed5
4 changed files with 196 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
app/callout.tsx
View File

@ -1,13 +1,39 @@
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { motion } from 'framer-motion';
const CalloutModal = ({ isOpen, onClose, onSubmit }) => {
const [tokenId, setTokenId] = useState('');
const [searchResults, setSearchResults] = useState([]);
const [showDropdown, setShowDropdown] = useState(false);
useEffect(() => {
if (tokenId) {
const fetchData = async () => {
try {
const response = await axios.get(`https://api.dexscreener.io/latest/dex/search/?q=${tokenId}`);
setSearchResults(response.data.pairs || []);
setShowDropdown(true);
} catch (error) {
console.error('Error fetching data:', error);
setShowDropdown(false);
}
};
fetchData();
} else {
setShowDropdown(false);
}
}, [tokenId]);
const handleTokenChange = (e) => {
setTokenId(e.target.value);
};
const handleSelectToken = (token) => {
setTokenId(token);
setShowDropdown(false);
};
const handleSubmit = () => {
onSubmit(tokenId);
onClose();
@ -20,27 +46,52 @@ const CalloutModal = ({ isOpen, onClose, onSubmit }) => {
exit={{ opacity: 0 }}
className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 modal-bg"
>
<div className="bg-white p-4 rounded shadow-lg w-11/12 max-w-md modal">
<div className={`bg-white p-4 rounded shadow-lg w-11/12 max-w-md modal ${showDropdown ? 'h-1/2' : 'h-auto'}`}>
<div className="flex items-start">
<h2 className="text-xl font-bold mb-2">Make a new call!</h2>
<button
className="p-1 ml-auto bg-transparent border-0 text-black float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
onClick={onClose}
>
<span className="bg-transparent text-white h-10 w-6 text-2xl block outline-none focus:outline-none">x</span>
</button>
<h2 className="text-xl font-bold mb-2">Make a new call!</h2>
<button
className="p-1 ml-auto bg-transparent border-0 text-black float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
onClick={onClose}
>
<span className="bg-transparent text-black h-10 w-6 text-2xl block outline-none focus:outline-none">x</span>
</button>
</div>
<p className="text-lg mb-4">Type in a tokens short code, that you will think boom anytime soon</p>
<input
type="text"
value={tokenId}
onChange={handleTokenChange}
className="w-full p-2 mb-4 border rounded glassmorphism"
placeholder="Enter token short code"
/>
<div className="relative">
<input
type="text"
value={tokenId}
onChange={handleTokenChange}
className="w-full p-2 mb-4 border rounded glassmorphism"
placeholder="Enter token short code"
/>
{showDropdown && (
<ul className="absolute z-10 w-full bg-black border rounded shadow-lg max-h-60 overflow-y-auto">
{searchResults.map((result) => (
<li
key={result.pairId}
onClick={() => handleSelectToken(result.baseToken.symbol)}
className="p-2 hover:bg-gray-400 cursor-pointer flex justify-between items-center glassmorphism-scroller"
>
<div className="flex flex-col w-3/4">
<div className="flex justify-between">
<span>{result.baseToken.symbol} - {result.baseToken.name}</span>
<span>{result.chain}</span>
</div>
<div className="flex justify-between text-sm">
<span>24H Vol: ${result.volume.h24.toLocaleString()}</span>
<span>0x...{result.baseToken.address.slice(-4)}</span>
</div>
</div>
<div className="w-1/2 text-right">
<span className="text-lg font-bold ml-2">${result.priceUsd}</span>
</div>
</li>
))}
</ul>
)}
</div>
<button
onClick={handleSubmit}
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full glassmorphism"

8
app/globals.css
View File

@ -56,6 +56,14 @@ body {
pointer-events: none;
}
.glassmorphism-scroller {
background: var(--glassmorphism-gradient), var(--glassmorphism-bg);
backdrop-filter: blur(var(--glassmorphism-blur));
border: 1px solid var(--glassmorphism-border);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: background 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
}
/* globals.css or your relevant CSS file */
.leaderboard-card {
background: var(--glassmorphism-gradient), var(--glassmorphism-bg);

116
package-lock.json generated
View File

@ -11,8 +11,10 @@
"@heroicons/react": "^1.0.6",
"@privy-io/react-auth": "^1.70.0",
"@radix-ui/react-icons": "^1.3.0",
"axios": "^1.7.2",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"framer-motion": "^11.2.12",
"next": "14.2.4",
"react": "^18",
"react-dom": "^18",
@ -3118,6 +3120,11 @@
"integrity": "sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==",
"dev": true
},
"node_modules/asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
},
"node_modules/atomic-sleep": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/atomic-sleep/-/atomic-sleep-1.0.0.tgz",
@ -3149,6 +3156,16 @@
"node": ">=4"
}
},
"node_modules/axios": {
"version": "1.7.2",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
"integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
"dependencies": {
"follow-redirects": "^1.15.6",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
},
"node_modules/axobject-query": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
@ -3576,6 +3593,17 @@
"resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
"integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w=="
},
"node_modules/combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"dependencies": {
"delayed-stream": "~1.0.0"
},
"engines": {
"node": ">= 0.8"
}
},
"node_modules/commander": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@ -3855,6 +3883,14 @@
"resolved": "https://registry.npmjs.org/defu/-/defu-6.1.4.tgz",
"integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg=="
},
"node_modules/delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
"engines": {
"node": ">=0.4.0"
}
},
"node_modules/dequal": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@ -4912,6 +4948,25 @@
"integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
"dev": true
},
"node_modules/follow-redirects": {
"version": "1.15.6",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
"integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
"funding": [
{
"type": "individual",
"url": "https://github.com/sponsors/RubenVerborgh"
}
],
"engines": {
"node": ">=4.0"
},
"peerDependenciesMeta": {
"debug": {
"optional": true
}
}
},
"node_modules/for-each": {
"version": "0.3.3",
"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@ -4935,6 +4990,43 @@
"url": "https://github.com/sponsors/isaacs"
}
},
"node_modules/form-data": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"dependencies": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/framer-motion": {
"version": "11.2.12",
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.2.12.tgz",
"integrity": "sha512-lCjkV4nA9rWOy2bhR4RZzkp2xpB++kFmUZ6D44V9VQaxk+JDmbDd5lq+u58DjJIIllE8AZEXp9OG/TyDN4FB/w==",
"dependencies": {
"tslib": "^2.4.0"
},
"peerDependencies": {
"@emotion/is-prop-valid": "*",
"react": "^18.0.0",
"react-dom": "^18.0.0"
},
"peerDependenciesMeta": {
"@emotion/is-prop-valid": {
"optional": true
},
"react": {
"optional": true
},
"react-dom": {
"optional": true
}
}
},
"node_modules/fs.realpath": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@ -6317,6 +6409,25 @@
"node": ">=10.0.0"
}
},
"node_modules/mime-db": {
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
"engines": {
"node": ">= 0.6"
}
},
"node_modules/mime-types": {
"version": "2.1.35",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"dependencies": {
"mime-db": "1.52.0"
},
"engines": {
"node": ">= 0.6"
}
},
"node_modules/mimic-fn": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
@ -7298,6 +7409,11 @@
"resolved": "https://registry.npmjs.org/proxy-compare/-/proxy-compare-2.5.1.tgz",
"integrity": "sha512-oyfc0Tx87Cpwva5ZXezSp5V9vht1c7dZBhvuV/y3ctkgMVUmiAGDVeeB0dKhGSyT0v1ZTEQYpe/RXlBVBNuCLA=="
},
"node_modules/proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
},
"node_modules/pump": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",

2
package.json
View File

@ -12,8 +12,10 @@
"@heroicons/react": "^1.0.6",
"@privy-io/react-auth": "^1.70.0",
"@radix-ui/react-icons": "^1.3.0",
"axios": "^1.7.2",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"framer-motion": "^11.2.12",
"next": "14.2.4",
"react": "^18",
"react-dom": "^18",