From 5d444c0e2d38a47d6ddbe98f29bfbcad76ea460d Mon Sep 17 00:00:00 2001 From: Anastasia Polozova Date: Mon, 1 Apr 2024 16:12:17 -0300 Subject: [PATCH 1/4] add loader --- components/Loader.tsx | 14 ++++- components/shared/LoadingPlaceHolder.tsx | 16 ++++- styles/style.css | 75 ++++++++++++++++++++++++ 3 files changed, 100 insertions(+), 5 deletions(-) diff --git a/components/Loader.tsx b/components/Loader.tsx index 1fda7e5..59bdb9f 100644 --- a/components/Loader.tsx +++ b/components/Loader.tsx @@ -4,7 +4,7 @@ const Loader = () => { return ( <>
- + */} +
+
+
+
+
+
+
+
+
+
); diff --git a/components/shared/LoadingPlaceHolder.tsx b/components/shared/LoadingPlaceHolder.tsx index 84168bc..38f7dad 100644 --- a/components/shared/LoadingPlaceHolder.tsx +++ b/components/shared/LoadingPlaceHolder.tsx @@ -3,7 +3,17 @@ import React from 'react' const LoadingPlaceHolder = () => { return (
- + */}
) } -export default LoadingPlaceHolder \ No newline at end of file +export default LoadingPlaceHolder diff --git a/styles/style.css b/styles/style.css index afe3623..d423021 100644 --- a/styles/style.css +++ b/styles/style.css @@ -212,3 +212,78 @@ input[type='number'] { overflow: hidden !important; } } + +.loading { + position: fixed; + top: 0; + left: 0; + min-width: 100%; + min-height: 100%; + display: flex; + justify-content: center; + align-items: center; + z-index:10000 !important; +} +.loading .lds-cube { + position: relative; +} +.loading .lds-cube div { + position: absolute; + width: 80px; + height: 80px; + top: 10px; + left: 10px; + background: #fc4309; + -webkit-animation: lds-cube 1s cubic-bezier(0, 0.5, 0.5, 1) infinite; + animation: lds-cube 1s cubic-bezier(0, 0.5, 0.5, 1) infinite; + -webkit-animation-delay: -0.3s; + animation-delay: -0.3s; +} +.loading .lds-cube div:nth-child(2) { + top: 10px; + left: 110px; + background: #ff765c; + -webkit-animation-delay: -0.2s; + animation-delay: -0.2s; +} +.loading .lds-cube div:nth-child(3) { + top: 110px; + left: 110px; + background: #ff9900; + -webkit-animation-delay: 0s; + animation-delay: 0s; +} +.loading .lds-cube div:nth-child(4) { + top: 110px; + left: 10px; + background: #ffb646; + -webkit-animation-delay: -0.1s; + animation-delay: -0.1s; +} +.loading .lds-cube { + width: 200px !important; + height: 200px !important; + -webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px); + transform: translate(-100px, -100px) scale(1) translate(100px, 100px); +} +@keyframes lds-cube { + 0% { + -webkit-transform: scale(1.5); + transform: scale(1.5); + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + } +} +@-webkit-keyframes lds-cube { + 0% { + -webkit-transform: scale(1.5); + transform: scale(1.5); + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + } +} + From 09d8b06081c70db53a208b7b1e0c23addc2e3efa Mon Sep 17 00:00:00 2001 From: Dmitrii Date: Mon, 1 Apr 2024 17:33:37 -0300 Subject: [PATCH 2/4] createModalStyles + sortTokensFuncstion+searchById --- components/Create/ui/SelectTokenModal.tsx | 1 + components/Hodltoken/Hodltoken.tsx | 164 +++++++--------------- components/Hodltoken/ui/SearchBarHodl.tsx | 2 +- 3 files changed, 55 insertions(+), 112 deletions(-) diff --git a/components/Create/ui/SelectTokenModal.tsx b/components/Create/ui/SelectTokenModal.tsx index 236f5c8..6eccf84 100644 --- a/components/Create/ui/SelectTokenModal.tsx +++ b/components/Create/ui/SelectTokenModal.tsx @@ -177,6 +177,7 @@ const SelectTokenModal: React.FC = ({
{/* Modal Header */}
diff --git a/components/Hodltoken/Hodltoken.tsx b/components/Hodltoken/Hodltoken.tsx index 0b89a90..4ace05a 100644 --- a/components/Hodltoken/Hodltoken.tsx +++ b/components/Hodltoken/Hodltoken.tsx @@ -36,111 +36,53 @@ interface GameData { tvl: string; } -interface HodlToken { - id: number; - contractId: string; +interface TokenData { + bankFee: number; + baseToken: string; baseTokenId: string; + contractId: string; decimals: number; - baseToken: string; + gameData: { + currentPrice: string; + circulatingSupply: string; + tvl: string; + }; + id: number; title: string; - bankFee: number; - gameData: GameData; } -const tokenData = [ - { - id: 1001, - baseToken: 'COMET', - title: 'hodlCOMET', - bankFee: 3, - gameData: { - currentPrice: 1, - circulatingSupply: 1, - tvl: 1 - } - }, - { - id: 1002, - baseToken: 'SigUSD', - title: 'hodlSigUSD', - bankFee: 4, - gameData: { - currentPrice: 1, - circulatingSupply: 1, - tvl: 1 - } - }, - { - id: 1003, - baseToken: 'SigUSD', - title: 'hodlSigUSD', - bankFee: 14, - gameData: { - currentPrice: 1, - circulatingSupply: 1, - tvl: 1 - } - }, - { - id: 1004, - baseToken: 'SPF', - title: 'hodlSPF', - bankFee: 2, - gameData: { - currentPrice: 1, - circulatingSupply: 1, - tvl: 1 - } - }, - { - id: 1005, - baseToken: 'SPF', - title: 'hodlSPF', - bankFee: 20, - gameData: { - currentPrice: 1, - circulatingSupply: 1, - tvl: 1 - } - }, - { - id: 1006, - baseToken: 'SPF', - title: 'hodlSPF', - bankFee: 7, - gameData: { - currentPrice: 1, - circulatingSupply: 1, - tvl: 1 - } - }, - { - id: 1007, - baseToken: 'SPF', - title: 'hodlSPF', - bankFee: 10, - gameData: { - currentPrice: 1, - circulatingSupply: 1, - tvl: 1 - } - } - // Add more tokens if needed -]; const Hodltoken = (props: IProps) => { const { network } = props; const [searchQuery, setSearchQuery] = useState(''); - const [tokensList, setTokensList] = useState([]); + const [tokensList, setTokensList] = useState([]); + const [displayList, setDisplayList] = useState([]); const [ascendingOrder, setAscendingOrder] = useState(true); const { advancedSettings } = useAdvancedSettings(); - // const sortTokens = () => { - // const sortedTokens = [...tokenData] - // .filter((token) => token.baseToken.toLowerCase().includes(searchQuery.toLowerCase())) - // .sort((a, b) => (ascendingOrder ? a.bankFee - b.bankFee : b.bankFee - a.bankFee)); - // setTokensList(sortedTokens); - // }; + + const sortTokens = () => { + const sortedTokens = [...tokensList] + .filter((token) => + token.baseToken.toLowerCase().includes(searchQuery.toLowerCase()) || + token.id.toString().toLowerCase().includes(searchQuery.toLowerCase()) + ) + .sort((a, b) => (ascendingOrder ? a.bankFee - b.bankFee : b.bankFee - a.bankFee)); + setDisplayList(sortedTokens); + }; + + useEffect(() => { + if (tokensList) { + setDisplayList(tokensList) + } + }, [tokensList]) + + + useEffect(() => { + sortTokens(); + }, [searchQuery, ascendingOrder]) + + useEffect(() => { // sortTokens(); @@ -234,27 +176,27 @@ const Hodltoken = (props: IProps) => { return (
- {/**/} - {/*
*/} - {/* */} - {/* setAscendingOrder(!ascendingOrder)}*/} - {/* className="w-1/4 flex items-center justify-center cursor-pointer text-center text-xs lg:text-lg lg:font-bold"*/} - {/* >*/} - {/* Bank Fee*/} - {/* */} - {/* {ascendingOrder ?*/} - {/* img :*/} - {/* img}*/} - {/* */} - {/*
*/} - {/*
*/} - - {tokensList.length === 0 ? ( + {/* */} +
+ +
setAscendingOrder(!ascendingOrder)} + className="w-1/4 flex items-center justify-center cursor-pointer text-center text-xs lg:text-lg lg:font-bold" + > + Bank Fee + + {ascendingOrder ? + img : + img} + +
+
+ + {displayList.length === 0 ? ( ) : ( <> - {tokensList.map( + {displayList.map( ({ id, baseToken, title, bankFee, gameData, contractId, baseTokenId, decimals }) => (
diff --git a/components/Hodltoken/ui/SearchBarHodl.tsx b/components/Hodltoken/ui/SearchBarHodl.tsx index 8d16e2f..60808b1 100644 --- a/components/Hodltoken/ui/SearchBarHodl.tsx +++ b/components/Hodltoken/ui/SearchBarHodl.tsx @@ -14,7 +14,7 @@ const SearchBar: React.FC = ({ searchQuery, setSearchQuery }) =>
Date: Mon, 1 Apr 2024 17:48:02 -0300 Subject: [PATCH 3/4] nodata --- components/Hodltoken/Hodltoken.tsx | 6 +++++- components/Hodltoken/ui/NoData.tsx | 11 +++++++++++ 2 files changed, 16 insertions(+), 1 deletion(-) create mode 100644 components/Hodltoken/ui/NoData.tsx diff --git a/components/Hodltoken/Hodltoken.tsx b/components/Hodltoken/Hodltoken.tsx index 4ace05a..47421ef 100644 --- a/components/Hodltoken/Hodltoken.tsx +++ b/components/Hodltoken/Hodltoken.tsx @@ -25,6 +25,7 @@ import { formatBigIntWithDecimalsRounded } from '@/common/utils'; import MintingHodlAlph from '@/components/Hodlerg/HodlAlph/MintingHodlAlph'; import BurningHodlAlph from '@/components/Hodlerg/HodlAlph/BurningHodlAlph'; import { ALPH_NODE_URL } from '@/blockchain/alephium/constants'; +import NoData from './ui/NoData'; interface IProps { network: string | null; @@ -58,6 +59,7 @@ const Hodltoken = (props: IProps) => { const [tokensList, setTokensList] = useState([]); const [displayList, setDisplayList] = useState([]); const [ascendingOrder, setAscendingOrder] = useState(true); + const [loading, setLoading] = useState(false); const { advancedSettings } = useAdvancedSettings(); @@ -192,8 +194,10 @@ const Hodltoken = (props: IProps) => {
+ {tokensList.length === 0 && } + {displayList.length === 0 ? ( - + ) : ( <> {displayList.map( diff --git a/components/Hodltoken/ui/NoData.tsx b/components/Hodltoken/ui/NoData.tsx new file mode 100644 index 0000000..3a37d37 --- /dev/null +++ b/components/Hodltoken/ui/NoData.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +const NoData = () => { + return ( +
+ No Data +
+ ) +} + +export default NoData; From 238131a854cbb3989a2619cf3d3e894947eb09d6 Mon Sep 17 00:00:00 2001 From: Anastasia Polozova Date: Mon, 1 Apr 2024 18:27:53 -0300 Subject: [PATCH 4/4] fix No Data --- components/Hodltoken/Hodltoken.tsx | 144 ++++++++++++++--------------- 1 file changed, 72 insertions(+), 72 deletions(-) diff --git a/components/Hodltoken/Hodltoken.tsx b/components/Hodltoken/Hodltoken.tsx index 47421ef..8008674 100644 --- a/components/Hodltoken/Hodltoken.tsx +++ b/components/Hodltoken/Hodltoken.tsx @@ -59,7 +59,7 @@ const Hodltoken = (props: IProps) => { const [tokensList, setTokensList] = useState([]); const [displayList, setDisplayList] = useState([]); const [ascendingOrder, setAscendingOrder] = useState(true); - const [loading, setLoading] = useState(false); + const [loading, setLoading] = useState(true); const { advancedSettings } = useAdvancedSettings(); @@ -74,16 +74,11 @@ const Hodltoken = (props: IProps) => { }; useEffect(() => { - if (tokensList) { - setDisplayList(tokensList) + if (tokensList.length > 0) { + setLoading(false); } - }, [tokensList]) - - - useEffect(() => { sortTokens(); - }, [searchQuery, ascendingOrder]) - + }, [tokensList, ascendingOrder, searchQuery]); useEffect(() => { @@ -179,73 +174,78 @@ const Hodltoken = (props: IProps) => { return (
{/* */} -
- -
setAscendingOrder(!ascendingOrder)} - className="w-1/4 flex items-center justify-center cursor-pointer text-center text-xs lg:text-lg lg:font-bold" - > - Bank Fee - - {ascendingOrder ? - img : - img} - -
-
- - {tokensList.length === 0 && } - - {displayList.length === 0 ? ( - + {loading ? ( + ) : ( <> - {displayList.map( - ({ id, baseToken, title, bankFee, gameData, contractId, baseTokenId, decimals }) => ( -
-
-
-
- {title} {bankFee}% +
+ +
setAscendingOrder(!ascendingOrder)} + className="w-1/4 flex items-center justify-center cursor-pointer text-center text-xs lg:text-lg lg:font-bold" + > + Bank Fee + + {ascendingOrder ? + img : + img} + +
+
+ + + {displayList.length === 0 ? ( + + ) : ( + <> + {displayList.map( + ({ id, baseToken, title, bankFee, gameData, contractId, baseTokenId, decimals }) => ( +
+
+
+
+ {title} {bankFee}% +
+ + + +
+
+ + + {advancedSettings && } +
- - - -
-
- - - {advancedSettings && }
-
-
- ) + ) + )} + )} )}