var loaded = 0; State.init({ // Define current screen. currentScreen: 0, // 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, }); // 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) => { console.log(JSON.parse(result.body)); State.update({ abiJson: JSON.parse(result.body).abi, }); }); const reloadConfig = () => { asyncFetch(`${API}/whitelist`).then((result) => { const tokens = result.body; const mapping = {}; tokens.forEach((token) => { mapping[token.address] = token; }); State.update({ whiteLists: mapping, }); }); }; const handleGetPocket = async (id) => { try { asyncFetch(`${API}/pool/${id}/decimals-formatted`).then((result) => { console.log("fetch id"); console.log(result.body, result.body.targetTokenAddress); 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 = () => { console.log({ contract }); if (contract === undefined) return; contract.depositEther(state.pocket._id, { value: 0.001 * Math.pow(10, 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) { 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; } console.log(state.sender); if (state.whiteLists !== {} && state.sender) { // Get pocket data when config has been loaded. handleGetPockets(state.sender); } // Setup contract if (state.sender && state.abiJson) { console.log( "config", state.sender, state.abiJson, CONTRACT_DATA.programAddress ); console.log(Ethers.provider().getSigner()); contract = new ethers.Contract( CONTRACT_DATA.programAddress, 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} .my-pockets-mini, .my-pockets-mini * { box-sizing: border-box; } .my-pockets-mini { border-radius: 12px; border-style: solid; border-color: var(--greyscale-black-80, #353c4b); border-width: 1px; padding: 16px 16px 16px 16px; display: flex; flex-direction: column; gap: 0px; align-items: flex-end; justify-content: flex-start; align-self: stretch; flex-shrink: 0; position: relative; width: 775px; margin: 0 auto; cursor: pointer; } .frame-48098175 { display: flex; flex-direction: row; gap: 16px; align-items: flex-start; justify-content: flex-start; align-self: stretch; flex-shrink: 0; position: relative; } .frame-48097709 { background: var(--greyscale-black-10, #f0f3fa); border-radius: 26.54px; padding: 0px 6.15px 0px 6.15px; display: flex; flex-direction: row; gap: 0px; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; position: relative; } .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 { border-radius: 18.46px; flex-shrink: 0; width: 36.92px; height: 36.92px; position: relative; } .frame-48098168 { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; justify-content: flex-start; flex-shrink: 0; position: relative; } .sol-btc { color: #ffffff; text-align: left; font: var(--body-medium-medium, 500 14px/20px "Poppins", sans-serif); position: relative; display: flex; align-items: center; justify-content: flex-start; } ._146-423 { color: var(--text, #7886a0); text-align: left; font: var(--body-small-regular, 400 12px/135% "Poppins", sans-serif); position: relative; width: 62px; } .button3 { padding: 12px 50px; cursor: pointer; } .button3 .button2 { margin: 0 auto; } `, }); } 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: 1 }); }} > <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> ); ƒ; })} </> ) : ( <> <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="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"> {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> );