var loaded = 0; State.init({ pocket: {}, whiteLists: {}, }); // HOST NAME API. const API = "https://dev-pocket-api.hamsterbox.xyz/api"; const reloadConfig = () => { asyncFetch(`${API}/whitelist`).then((result) => { const tokens = result.body; const mapping = {}; console.log(tokens); tokens.forEach((_) => { if (_.address != "So11111111111111111111111111111111111111112") { res[_.address] = _; } }); State.update({ whiteLists: mapping, }); }); }; const handleGetPocket = async (id) => { try { asyncFetch(`${API}/pool/${id}`).then((result) => { console.log(result); State.update({ pocket: result.body, }); }); } catch (err) { console.log(err); } }; console.log("state reload", state); if (!loaded) { reloadConfig(); loaded += 1; } 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"> <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> <div class="pocket-detail">Pocket Detail</div> </div> <div class="frame-48098194"> <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="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.png" /> </div> <div class="sol-usdc">SOL/BLOCK</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="frame-48098143"> <div class="ellipse-2142"></div> <div class="ellipse-2143"></div> </div> <div class="_146-4232">#146..423</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"> <div class="_10-usdc-monthly">78 SOL</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"> 16/02/2023 16:00 (+07) </div> </div> </div> </div> </div> </div> <div class="progress-desk"> <div class="progress">Progress</div> <div class="frame-480978473"> <div class="frame-48097849"> <div class="strategy2">Total invested</div> <div class="frame-48097840"> <div class="frame-48098084"> <div class="_10-usdc-monthly">78 SOL</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">10 BATCHES</div> </div> </div> </div> <div class="frame-48097845"> <div class="strategy2">Token hold</div> <div class="frame-48097840"> <div class="frame-48098084"> <div class="_10-usdc-monthly2">593,492,491.38 BLOCK</div> </div> </div> </div> <div class="frame-48097850"> <div class="strategy2">Average price</div> <div class="frame-48097840"> <div class="frame-48098084"> <div class="_10-usdc-monthly2"> 0.001 SOL = 1000 BLOCK </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"> 16/02/2023 16:00 (+07) </div> </div> </div> </div> <div class="frame-48097849"> <div class="strategy2">Outstanding deposit</div> <div class="frame-48097840"> <div class="frame-48098084"> <div class="_10-usdc-monthly2">3.4 SOL</div> <svg class="ic-24-info" width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg" > <path fill-rule="evenodd" clip-rule="evenodd" d="M10.6251 1.50195C5.93192 1.50195 2.12736 5.30651 2.12736 9.99967C2.12736 14.6928 5.93192 18.4974 10.6251 18.4974C15.3182 18.4974 19.1228 14.6928 19.1228 9.99967C19.1228 5.30651 15.3182 1.50195 10.6251 1.50195ZM10.6251 3.0026C14.4895 3.0026 17.6222 6.1353 17.6222 9.99967C17.6222 13.8641 14.4895 16.9967 10.6251 16.9967C6.7607 16.9967 3.62801 13.8641 3.62801 9.99967C3.62801 6.1353 6.7607 3.0026 10.6251 3.0026ZM10.6251 8.33301C10.1648 8.33301 9.79175 8.7061 9.79175 9.16634V14.1663C9.79175 14.6266 10.1648 14.9997 10.6251 14.9997C11.0853 14.9997 11.4584 14.6266 11.4584 14.1663V9.16634C11.4584 8.7061 11.0853 8.33301 10.6251 8.33301ZM10.6251 4.99967C10.1648 4.99967 9.79175 5.37277 9.79175 5.83301C9.79175 6.29325 10.1648 6.66634 10.6251 6.66634C11.0853 6.66634 11.4584 6.29325 11.4584 5.83301C11.4584 5.37277 11.0853 4.99967 10.6251 4.99967Z" fill="#B6B6B6" /> </svg> </div> </div> </div> <div class="button3"> <div class="button2">Deposit Now</div> </div> <div class="group-48096785"> <div class="group-48096776"> <div class="frame-48098087"> <div class="deposit-amount-the-amount-each-batch-the-current-source-token-in-pocket"> Deposit amount = The amount each batch - The current source token in pocket </div> </div> </div> <svg class="polygon-1" width="11" height="9" viewBox="0 0 11 9" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M5.19618 9L3.05176e-05 0H10.3923L5.19618 9Z" fill="#242636" /> </svg> </div> </div> </div> <div class="end-conditions-desk"> <div class="end-conditions">End Conditions</div> <div class="frame-480978474"> <div class="frame-480978472"> <div class="strategy2">Time</div> <div class="frame-48097840"> <div class="frame-48098084"> <div class="_10-usdc-monthly2"> 16/08/2023 16:00 (+07) </div> </div> </div> </div> <div class="frame-48097849"> <div class="strategy2">or</div> <div class="frame-48097840"> <div class="frame-48098084"> <div class="_10-usdc-monthly2">300 SOL</div> </div> </div> </div> <div class="frame-48097850"> <div class="strategy2">or</div> <div class="frame-48097840"> <div class="frame-48098084"> <div class="_10-usdc-monthly2">1,000,000,000 BLOCK</div> </div> </div> </div> <div class="frame-48097851"> <div class="strategy2">or</div> <div class="frame-48097840"> <div class="frame-48098084"> <div class="_10-usdc-monthly2">10 BATCHES</div> </div> </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">at price 0.50 SOL</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">at price 0.30 SOL</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> );