var loaded = 0; State.init({ // Define current screen. currentScreen: 1, // Tokens which were whitelised in hamster server. whiteLists: {}, // Define list pocket of wallet. pocketList: [], // Define pocket data which was fetched after user retrive pocket. pocket: null, // Get target token data. targetToken: null, // Get base token data. baseToken: null, abiJson: null, selectedTokenAddress: "", }); // HOST NAME API. var contract; const API = "https://dev-pocket-api.hamsterbox.xyz/api"; const CONTRACT_DATA = { wagmiKey: "bsc", chainName: "BNB", chainLogo: "https://s3.coinmarketcap.com/static/img/portraits/62876e92bedeb632050eb4ae.png", rpcUrl: "https://bsc-rpc.hamsterbox.xyz", chainId: 56, programAddress: "0xd74Ad94208935a47b1Bd289d28d45Bce6369E064", vaultAddress: "0x4bcD48D0Af9b48716EDb30BFF560d08036439871", registryAddress: "0xb9599963729Acf22a18629355dA23e0bA4fBa611", explorerUrl: "https://bscscan.com/", whitelistedRouters: [ { address: "0x5Dc88340E1c5c6366864Ee415d6034cadd1A9897", isV3: true, ammTag: "uniswap", ammName: "Uniswap", dexUrl: "https://app.uniswap.org/#/swap/", }, { address: "0x10ED43C718714eb63d5aA57B78B54704E256024E", isV3: false, ammTag: "pancakeswap", ammName: "Pancake Swap", dexUrl: "https://pancakeswap.finance/swap/", }, ], }; asyncFetch( "https://raw.githubusercontent.com/CaviesLabs/hamsterpocket-frontend/main/src/providers/program/evm/artifacts/contracts/PocketChef.sol/PocketChef.json" ).then((result) => { State.update({ abiJson: JSON.parse(result.body).abi, }); }); const reloadConfig = () => { asyncFetch(`${API}/whitelist`).then((result) => { const tokens = result.body; const mapping = {}; tokens.forEach((token) => { if (token.chainId === "bnb") { mapping[token.address] = token; } }); State.update({ whiteLists: mapping, selectedTokenAddress: Object.keys(mapping).length > 0 ? Object.keys(mapping)[0] : "", }); }); }; const handleGetPocket = async (id) => { try { asyncFetch(`${API}/pool/${id}/decimals-formatted`).then((result) => { State.update({ pocket: result.body, targetToken: state.whiteLists[result.body.targetTokenAddress], baseToken: state.whiteLists[result.body.baseTokenAddress], }); }); } catch (err) { console.log(err); } }; const handleGetPockets = (walletAddress) => { try { asyncFetch( `${API}/pool/decimals-formatted?limit=20&offset=0&chainId=bnb&ownerAddress=${walletAddress}&statuses=POOL_STATUS%3A%3AACTIVE&sortBy=DATE_START_DESC` ).then((result) => { State.update({ pocketList: result.body, }); }); } catch (err) { console.log(err); } }; const handleDepositPocket = () => { if (contract === undefined) return; contract.depositEther(state.pocket._id, { value: 0.001 * Math.pow(10, state.baseToken.decimals), }); }; // DETECT SENDER if (state.sender === undefined) { State.update({ sender: Ethers.send("eth_requestAccounts", [])[0] }); } // Forbith // if (!state.sender) return "Please login first"; // FETCH SENDER BALANCE if (state.balance === undefined && state.sender) { Ethers.provider() .getBalance(state.sender) .then((balance) => { State.update({ balance: Big(balance).div(Big(10).pow(18)).toFixed(10) }); }); } console.log("state reload", state); if (!loaded) { reloadConfig(); loaded += 1; } if (state.whiteLists !== {} && state.sender) { // Get pocket data when config has been loaded. handleGetPockets(state.sender); } // Setup contract if (state.sender && state.abiJson) { contract = new ethers.Contract( CONTRACT_DATA.programAddress, state.abiJson, Ethers.provider().getSigner() ); } const cssFont = fetch( "https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800" ).body; const css = fetch( "https://raw.githubusercontent.com/hleemors/unrepo/main/style.css" ).body; if (!cssFont || !css) return ""; if (!state.theme) { State.update({ theme: styled.div` font-family: Manrope, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; ${cssFont} ${css} `, }); } const Theme = state.theme; return ( <Theme> <div class="on-going"> <div class="frame-48098139"> {state.currentScreen > 0 && ( <button onClick={() => State.update({ currentScreen: 0 })}> <svg class="arrow-chevron-big-left" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M16.285 3.51465L7.80005 11.9996L16.285 20.4846L17.7 19.0706L10.628 11.9996L17.7 4.92865L16.285 3.51465Z" fill="white" /> </svg> </button> )} <div class="pocket-detail"> {state.currentScreen ? "Pocket Detail" : "Pocket List"} </div> </div> <div class="frame-48098194"> {state.currentScreen === 0 ? ( <> {state.pocketList.map((pocket, index) => { const pocketBaseToken = state.whiteLists[pocket.baseTokenAddress]; const pocketTargetToken = state.whiteLists[pocket.targetTokenAddress]; return ( <div class="my-pockets-mini" key={`pocket-${index}`} onClick={() => { handleGetPocket(pocket._id); State.update({ currentScreen: 2 }); }} > <div class="frame-48098175"> <div class="frame-48097709"> <img class="nft-uk-r-4-u-7-w-kxy-9-q-la-x-2-t-gvd-9-o-zs-wo-mo-4-jq-s-jqd-mb-7-nk-1" src={pocketTargetToken.image} /> </div> <div class="frame-48098168"> <div class="sol-btc"> {pocketTargetToken.symbol}/{pocketBaseToken.symbol} </div> <div class="_146-423">#{pocket._id}</div> </div> </div> </div> ); ƒ; })} </> ) : state.currentScreen === 1 ? ( <div class="dca-pair"> <div class="dca-pair2">DCA Pair</div> <div class="frame-48098210"> <div class="frame-48097868"> <div class="frame-48098208"> <div class="frame-48097854"> <div class="bnb-bnb-logo-1"> <svg class="group" width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg" > <path fill-rule="evenodd" clip-rule="evenodd" d="M32.4922 0.00585938C50.1664 0.00585938 64.4919 14.3313 64.4919 32.0055C64.4919 49.6797 50.1664 64.0052 32.4922 64.0052C14.818 64.0052 0.492432 49.6797 0.492432 32.0055C0.492432 14.3313 14.818 0.00585938 32.4922 0.00585938Z" fill="#F0B90B" /> <path d="M18.0722 32.0187L18.0952 40.4802L25.2849 44.7109V49.6647L13.8876 42.9802V29.5444L18.0722 32.0187ZM18.0722 23.5573V28.488L13.885 26.0111V21.0804L18.0722 18.6035L22.2798 21.0804L18.0722 23.5573ZM28.2875 21.0804L32.4746 18.6035L36.6823 21.0804L32.4746 23.5573L28.2875 21.0804Z" fill="white" /> <path d="M21.1077 38.7264V33.7726L25.2948 36.2495V41.1802L21.1077 38.7264ZM28.2974 46.4853L32.4845 48.9622L36.6922 46.4853V51.416L32.4845 53.8929L28.2974 51.416V46.4853ZM42.6972 21.0804L46.8844 18.6035L51.0921 21.0804V26.0111L46.8844 28.488V23.5573L42.6972 21.0804ZM46.8844 40.4802L46.9075 32.0188L51.0946 29.5419V42.9776L39.6973 49.6622V44.7084L46.8844 40.4802Z" fill="white" /> <path d="M43.8905 38.7116L39.7034 41.1654V36.2347L43.8905 33.7578V38.7116Z" fill="white" /> <path d="M43.8818 25.2974L43.9049 30.2512L36.6947 34.4819V42.9638L32.5076 45.4177L28.3204 42.9638V34.4819L21.1102 30.2512V25.2974L25.3153 22.8205L32.4819 27.0717L39.6921 22.8205L43.8998 25.2974H43.8818ZM21.1077 16.8385L32.4845 10.1309L43.8818 16.8385L39.6947 19.3154L32.4845 15.0641L25.2948 19.3154L21.1077 16.8385Z" fill="white" /> </svg> </div> <div class="frame-48098207"> <div class="frame-48097853"> <div class="bnb">BNB</div> </div> </div> </div> <div class="balance-319-23-bnb">Balance: 319.23 BNB</div> </div> <svg class="frame-48097866" width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg" > <g clip-path="url(#clip0_4112_41594)"> <path fill-rule="evenodd" clip-rule="evenodd" d="M24.5 47.9995C37.7548 47.9995 48.5 37.2543 48.5 23.9995C48.5 10.7447 37.7548 -0.000488281 24.5 -0.000488281C11.2452 -0.000488281 0.5 10.7447 0.5 23.9995C0.5 37.2543 11.2452 47.9995 24.5 47.9995ZM29.9196 14.3535C29.4765 13.8815 28.7582 13.8815 28.3152 14.3535C27.8721 14.8255 27.8721 15.5907 28.3152 16.0626L32.626 20.6548H13.6345C13.0079 20.6548 12.5 21.1959 12.5 21.8633C12.5 22.5308 13.0079 23.0719 13.6345 23.0719L35.3649 23.0719C35.8237 23.0719 36.2374 22.7774 36.413 22.3258C36.5886 21.8742 36.4915 21.3544 36.1671 21.0087L29.9196 14.3535ZM13.6351 24.9272C13.1763 24.9272 12.7626 25.2216 12.587 25.6732C12.4114 26.1248 12.5085 26.6446 12.8329 26.9903L19.0804 33.6455C19.5235 34.1175 20.2418 34.1175 20.6848 33.6455C21.1279 33.1736 21.1279 32.4084 20.6848 31.9364L16.374 27.3443L35.3655 27.3443C35.9921 27.3443 36.5 26.8032 36.5 26.1357C36.5 25.4682 35.9921 24.9272 35.3655 24.9272L13.6351 24.9272Z" fill="#7886A0" /> </g> <defs> <clipPath id="clip0_4112_41594"> <rect width="48" height="48" fill="white" transform="translate(0.5 -0.000488281)" /> </clipPath> </defs> </svg> <div class="frame-48098209"> <div class="frame-480978682"> <div class="solana-sol"> <div class="solana-sol2"> <div class="solana-sol3"></div> {state.selectedTokenAddress && state.selectedTokenAddress && ( <img class="token-select-icon" src={ state.whiteLists[state.selectedTokenAddress] .image } /> )} </div> </div> <div class="frame"> <select class="token-select"> {state.whiteLists !== {} && Object.keys(state.whiteLists).map( (address, index) => { if (state.whiteLists[address].symbol === "WBNB") return null; return ( <option value={address} key={`token-inde${index}`} > {state.whiteLists[address].symbol} </option> ); } )} </select> </div> </div> <div class="balance-25-5">Balance: 25.5</div> </div> </div> <div class="frame-38649"> <div class="provider">Provider</div> <div class="frame-48097959"> <img class="nft-uk-r-4-u-7-w-kxy-9-q-la-x-2-t-gvd-9-o-zs-wo-mo-4-jq-s-jqd-mb-7-nk-1" src="nft-uk-r-4-u-7-w-kxy-9-q-la-x-2-t-gvd-9-o-zs-wo-mo-4-jq-s-jqd-mb-7-nk-1.png" /> <div class="raydium">Raydium</div> </div> </div> </div> </div> ) : ( <> <div class="pocket-pecent"> <div class="frame-48098246"> <div class="frame-48098141"> <div class="frame-480977092"> <img class="nft-uk-r-4-u-7-w-kxy-9-q-la-x-2-t-gvd-9-o-zs-wo-mo-4-jq-s-jqd-mb-7-nk-12" src={state.targetToken.image && state.targetToken.image} /> </div> {state.targetToken && state.baseToken && ( <div class="sol-usdc"> {state.targetToken.symbol}/{state.baseToken.symbol} </div> )} </div> </div> <svg class="popup-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path fill-rule="evenodd" clip-rule="evenodd" d="M15.5975 2.53324H21.4502C21.8924 2.53324 22.2502 2.88152 22.2502 3.31191L22.2503 9.00856C22.2503 9.43893 21.8925 9.78727 21.4503 9.78727C21.0081 9.78727 20.6502 9.43895 20.6502 9.00856V5.19714L12.3765 13.2503C12.2291 13.3938 12.0186 13.4757 11.808 13.4757C11.5975 13.4757 11.387 13.3938 11.2396 13.2503C10.9238 12.943 10.9238 12.4511 11.2396 12.1439L19.5133 4.09066H15.5975C15.1553 4.09066 14.7975 3.74233 14.7975 3.31195C14.7975 2.88158 15.1553 2.53324 15.5975 2.53324ZM17.4922 12.0823C17.4922 11.6519 17.8501 11.3036 18.2923 11.3036C18.7345 11.3036 19.0921 11.6724 19.1131 12.1026L19.1133 17.6354C19.1133 20.0533 17.0922 22 14.629 22H6.73424C4.24998 22 2.25 20.0533 2.25 17.6558V9.97148C2.25 7.57408 4.24994 5.60684 6.73424 5.62728H12.4396C12.8817 5.62728 13.2396 5.97559 13.2396 6.40599C13.2396 6.83637 12.8817 7.18471 12.4396 7.18471H6.73424C5.15529 7.18471 3.87106 8.43469 3.87106 9.97155V17.6354C3.87106 19.1723 5.15529 20.4222 6.73424 20.4222L14.629 20.4224C16.208 20.4224 17.4922 19.1724 17.4922 17.6355V12.0823Z" fill="white" /> </svg> <div class="_146-4232" style={{ left: "580px!important", top: "20px!important" }} > #{state.pocket && state.pocket._id} </div> </div> <div class="frame-48098193"> <div class="frame-48098188"> <div class="strategy-desk"> <div class="strategy">Strategy</div> <div class="frame-48097840"> <div class="frame-48098084"></div> <div class="_10-sol-100-517-06-block"> 10 SOL <= 100,517.06 BLOCK </div> </div> </div> <div class="pool-info-desk"> <div class="pool-info">Pool Info</div> <div class="frame-48097847"> <div class="frame-480978472"> <div class="strategy2">Total deposited</div> <div class="frame-48097840"> <div class="frame-48098084"> {state.pocket && state.baseToken && ( <div class="_10-usdc-monthly"> {state.pocket.depositedAmount}{" "} {state.baseToken.symbol} </div> )} </div> </div> </div> <div class="frame-48097849"> <div class="strategy2">Start date</div> <div class="frame-48097840"> <div class="frame-48098084"> <div class="_10-usdc-monthly2"> {state.pocket && `${new Date( state.pocket.startTime ).toLocaleTimeString()} ${new Date( state.pocket.startTime ).toDateString()}`} </div> </div> </div> </div> </div> </div> <div class="progress-desk"> <div class="end-conditions">Progress</div> <div class="frame-480978473"> <div class="frame-48097849"> <div class="strategy2">Total invested</div> <div class="frame-48097840"> <div class="frame-48098084"> {state.pocket && state.baseToken && ( <div class="_10-usdc-monthly"> {state.pocket.currentSpentBaseToken}{" "} {state.baseToken.symbol} </div> )} </div> </div> </div> <div class="frame-48097843"> <div class="strategy2">Batch bought</div> <div class="frame-48097840"> <div class="frame-48098084"> <div class="_10-usdc-monthly"> {state.pocket && `${state.pocket.currentBatchAmount} BATCHES`} </div> </div> </div> </div> <div class="frame-48097845"> <div class="strategy2">Token hold</div> <div class="frame-48097840"> <div class="frame-48098084"> {state.pocket && state.targetToken && ( <div class="_10-usdc-monthly2"> {state.pocket.currentReceivedTargetToken}{" "} {state.targetToken.symbol} </div> )} </div> </div> </div> <div class="frame-48097850"> <div class="strategy2">Average price</div> <div class="frame-48097840"> <div class="frame-48098084"> {state.pocket && state.targetToken && state.baseToken && ( <div class="_10-usdc-monthly2"> 1 {state.baseToken?.symbol} ={" "} {( state.pocket.currentReceivedTargetToken / state.pocket.currentSpentBaseToken ).toFixed(3)}{" "} {state.targetToken?.symbol} </div> )} </div> </div> </div> <div class="frame-48097848"> <div class="strategy2">APL (ROI)</div> <div class="frame-48097840"> <div class="frame-48098084"> <div class="_10-usdc-monthly3"> + 0.00 SOL (0.00%) </div> </div> </div> </div> </div> </div> </div> <div class="frame-48098192"> <div class="next-batch-desk"> <div class="next-batch">Next Batch</div> <div class="frame-480978482"> <div class="frame-480978472"> <div class="strategy2">Next batch time</div> <div class="frame-48097840"> <div class="frame-48098084"> <div class="_10-usdc-monthly2"> {state.pocket && state.pocket.nextExecutionAt && `${new Date( state.pocket.nextExecutionAt ).toLocaleTimeString()} ${new Date( state.pocket.nextExecutionAt ).toDateString()}`} </div> </div> </div> </div> <div class="frame-48097849"> <div class="strategy2">Outstanding deposit</div> <div class="frame-48097840"> <div class="frame-48098084"> {state.pocket && state.baseToken && ( <div class="_10-usdc-monthly2"> {state.pocket.batchVolume - state.pocket.remainingBaseTokenBalance > 0 ? state.pocket.batchVolume - state.pocket.remainingBaseTokenBalance : 0} {state.baseToken.symbol} </div> )} </div> </div> </div> <div class="button3" onClick={() => handleDepositPocket()}> <div class="button2">Deposit Now</div> </div> </div> </div> <div class="tp-sl"> <div class="tp-sl2">TP/SL</div> <div class="frame-48097847"> <div class="frame-480978472"> <div class="strategy2">Take profit</div> <div class="frame-48097840"> <div class="frame-48098084"> <div class="_10-usdc-monthly"> {state.pocket && state.pocket.takeProfitCondition ? `at price ${state.pocket.takeProfitCondition.value} ${state.baseToken.symbol}` : `N/A`} </div> </div> </div> </div> <div class="frame-48097849"> <div class="strategy2">Stop loss</div> <div class="frame-48097840"> <div class="frame-48098084"> <div class="_10-usdc-monthly"> {state.pocket && state.pocket.stopLossCondition ? `at price ${state.pocket.stopLossCondition.value} ${state.baseToken.symbol}` : `N/A`} </div> </div> </div> </div> </div> </div> <div class="status-desk"> <div class="status">Status</div> <div class="frame-48098267"> <div class="frame-48097882"> <div class="tag"> <div class="tag-marker">Ongoing</div> </div> </div> </div> </div> <div class="button-desk"> <div class="button-primary"> <div class="frame-48098095"> <div class="iconly-light-arrow-right"></div> <div class="button4">Close Pocket</div> <div class="iconly-light-arrow-right"></div> </div> </div> </div> </div> </div> </> )} </div> </div> </Theme> );