Skip to content
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

Jump to bottom

add loader #20

Open
wants to merge 4 commits into
base: alph
Choose a base branch
from
Open

add loader #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5d444c0
add loader
Pakistanka Apr 1, 2024
09d8b06
createModalStyles + sortTokensFuncstion+searchById
dmetree Apr 1, 2024
005934b
nodata
dmetree Apr 1, 2024
238131a
fix No Data
Pakistanka Apr 1, 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
1 change: 1 addition & 0 deletions components/Create/ui/SelectTokenModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,6 +177,7 @@ const SelectTokenModal: React.FC<SelectTokenModalProps> = ({
<div
ref={modalRef}
className="w-full h-3/4 bg-white p-5 max-w-md mx-auto rounded-md shadow-lg"
style={{ maxHeight: "600px" }}
>
{/* Modal Header */}
<div className="flex justify-between items-center mb-4">
Expand Down
254 changes: 100 additions & 154 deletions components/Hodltoken/Hodltoken.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -36,111 +37,49 @@ 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<string>('');
const [tokensList, setTokensList] = useState<HodlToken[]>([]);
const [tokensList, setTokensList] = useState<TokenData[]>([]);
const [displayList, setDisplayList] = useState<TokenData[]>([]);
const [ascendingOrder, setAscendingOrder] = useState<boolean>(true);
const [loading, setLoading] = useState<boolean>(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.length > 0) {
setLoading(false);
}
sortTokens();
}, [tokensList, ascendingOrder, searchQuery]);


useEffect(() => {
// sortTokens();
Expand Down Expand Up @@ -234,72 +173,79 @@ const Hodltoken = (props: IProps) => {

return (
<div className="flex flex-col items-center">
{/*<TopSlider />*/}
{/*<div className="relative bg-gray-200 shadow-lg flex content-between items-center rounded-md w-[350px] lg:w-[800px]">*/}
{/* <SearchBarHodl searchQuery={searchQuery} setSearchQuery={setSearchQuery} />*/}
{/* <div*/}
{/* onClick={() => 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*/}
{/* <span className="pl-2">*/}
{/* {ascendingOrder ?*/}
{/* <Image alt='img' src={filter_icon_descend} className={commonStyle.tokenIconImg} height='20' width='20' /> :*/}
{/* <Image alt='img' src={filter_icon} className={commonStyle.tokenIconImg} height='20' width='20' />}*/}
{/* </span>*/}
{/* </div>*/}
{/*</div>*/}

{tokensList.length === 0 ? (
{/* <TopSlider />*/}
{loading ? (
<LoadingPlaceHolder />
) : (
<>
{tokensList.map(
({ id, baseToken, title, bankFee, gameData, contractId, baseTokenId, decimals }) => (
<div key={id} className="max-w-l mx-auto font-inter my-10 mx-20">
<div className="bg-gray-200 shadow-lg flex content-between rounded-md w-[350px] lg:w-[800px] flex-col lg:flex-row p-2">
<div className="container mx-auto flex flex-col justify-between">
<div className="text-black mt-5 text-center text-2xl font-extrabold text-red-800">
{title} {bankFee}%
<div className="relative bg-gray-200 shadow-lg flex content-between items-center rounded-md w-[350px] lg:w-[800px] mt-5">
<SearchBarHodl searchQuery={searchQuery} setSearchQuery={setSearchQuery} />
<div
onClick={() => 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
<span className="pl-2">
{ascendingOrder ?
<Image alt='img' src={filter_icon_descend} className={commonStyle.tokenIconImg} height='20' width='20' /> :
<Image alt='img' src={filter_icon} className={commonStyle.tokenIconImg} height='20' width='20' />}
</span>
</div>
</div>


{displayList.length === 0 ? (
<NoData />
) : (
<>
{displayList.map(
({ id, baseToken, title, bankFee, gameData, contractId, baseTokenId, decimals }) => (
<div key={id} className="max-w-l mx-auto font-inter my-10 mx-20">
<div className="bg-gray-200 shadow-lg flex content-between rounded-md w-[350px] lg:w-[800px] flex-col lg:flex-row p-2">
<div className="container mx-auto flex flex-col justify-between">
<div className="text-black mt-5 text-center text-2xl font-extrabold text-red-800">
{title} {bankFee}%
</div>
<HeaderCardsV2
title="Price"
amount={parseFloat(gameData.currentPrice)}
token={baseToken}
/>
<HeaderCardsV2
title="Supply"
amount={parseFloat(gameData.circulatingSupply)}
token={`hodl${baseToken}`}
/>
<HeaderCardsV2
title="Reserve"
amount={parseFloat(gameData.tvl)}
token={baseToken}
/>
</div>
<div className="container mx-auto border lg:border-l-gray-300 flex flex-col items-center justify-around">
<MintingHodlAlph
network={network}
percent={bankFee.toString()}
baseTokenTicker={baseToken}
baseTokenId={baseTokenId}
contractId={contractId}
decimals={decimals}
/>
<BurningHodlAlph
network={network}
percent={bankFee.toString()}
baseTokenTicker={baseToken}
baseTokenId={baseTokenId}
contractId={contractId}
decimals={decimals}
/>
{advancedSettings && <DepositingHoldTOKEN token={baseToken} />}
</div>
</div>
<HeaderCardsV2
title="Price"
amount={parseFloat(gameData.currentPrice)}
token={baseToken}
/>
<HeaderCardsV2
title="Supply"
amount={parseFloat(gameData.circulatingSupply)}
token={`hodl${baseToken}`}
/>
<HeaderCardsV2
title="Reserve"
amount={parseFloat(gameData.tvl)}
token={baseToken}
/>
</div>
<div className="container mx-auto border lg:border-l-gray-300 flex flex-col items-center justify-around">
<MintingHodlAlph
network={network}
percent={bankFee.toString()}
baseTokenTicker={baseToken}
baseTokenId={baseTokenId}
contractId={contractId}
decimals={decimals}
/>
<BurningHodlAlph
network={network}
percent={bankFee.toString()}
baseTokenTicker={baseToken}
baseTokenId={baseTokenId}
contractId={contractId}
decimals={decimals}
/>
{advancedSettings && <DepositingHoldTOKEN token={baseToken} />}
</div>
</div>
</div>
)
)
)}
</>
)}
</>
)}
Expand Down
11 changes: 11 additions & 0 deletions components/Hodltoken/ui/NoData.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import React from 'react'

const NoData = () => {
return (
<div className="w-full h-[60vh] flex items-center justify-center">
No Data
</div>
)
}

export default NoData;
2 changes: 1 addition & 1 deletion components/Hodltoken/ui/SearchBarHodl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const SearchBar: React.FC<SearchBarProps> = ({ searchQuery, setSearchQuery }) =>
<div className="relative w-3/4">
<input
type="text"
placeholder="Search"
placeholder="Search by Title or by Id"
value={searchQuery}
onChange={handleChange}
className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-red-600"
Expand Down
14 changes: 12 additions & 2 deletions components/Loader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ const Loader = () => {
return (
<>
<div className="h-screen flex items-center justify-center">
<button
{/* <button
disabled
type="button"
className="text-white bg-primary font-medium rounded text-sm px-5 py-2.5 text-center mr-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 inline-flex items-center"
Expand All @@ -27,7 +27,17 @@ const Loader = () => {
/>
</svg>
Loading...
</button>
</button> */}
<section className="loading">
<div className="lds-css ng-scope">
<div className="lds-cube">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</section>
</div>
</>
);
Expand Down
16 changes: 13 additions & 3 deletions components/shared/LoadingPlaceHolder.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,17 @@ import React from 'react'
const LoadingPlaceHolder = () => {
return (
<div className="w-full h-[60vh] flex items-center justify-center">
<button
<section className="loading">
<div className="lds-css ng-scope">
<div className="lds-cube">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</section>
{/* <button
disabled
type="button"
className="text-white bg-primary font-medium rounded text-sm px-5 py-2.5 text-center mr-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 inline-flex items-center"
Expand All @@ -26,9 +36,9 @@ const LoadingPlaceHolder = () => {
/>
</svg>
Loading...
</button>
</button> */}
</div>
)
}

export default LoadingPlaceHolder
export default LoadingPlaceHolder
Loading