Transaction: 6mwGbQY...AiQe

{ "data": { "cavies.near": { "widget": { "hamsterpocket": { "": "State.init({\n loaded: false, // Initialize the 'loaded' state property to false\n currentScreen: 0, // Initialize the 'currentScreen' state property to 0\n whiteLists: {}, // Initialize the 'whiteLists' state property as an empty object\n pocketList: [], // Initialize the 'pocketList' state property as an empty array\n pocket: null, // Initialize the 'pocket' state property to null\n targetToken: null, // Initialize the 'targetToken' state property to null\n baseToken: null, // Initialize the 'baseToken' state property to null\n abiJson: null, // Initialize the 'abiJson' state property to null\n selectedTokenAddress: \"\", // Initialize the 'selectedTokenAddress' state property as an empty string\n batchAmount: 0, // Initialize the 'batchAmount' state property to 0\n depositAmount: 0, // Initialize the 'depositAmount' state property to 0\n balance: 0, // Initialize the 'balance' state property to 0\n sender: null, // initialize sender as null\n chainId: null, // initialize chain id as null\n frequency: \"3600\", // Define frequency option to create pocket, default is 1 hour.\n});\n\n// HOST NAME API.\nconst CONFIRMATION_AWAIT = 1;\nconst ACTIVE_STATUS = \"POOL_STATUS::ACTIVE\";\nvar contract; // Declare a variable 'contract' (presumably for holding a contract instance)\nconst API = \"https://dev-pocket-api.hamsterbox.xyz/api\"; // Set the API endpoint URL\nconst CONTRACT_DATA = {\n wagmiKey: \"bsc\", // Set a property 'wagmiKey' with value \"bsc\"\n chainName: \"BNB\", // Set a property 'chainName' with value \"BNB\"\n chainLogo:\n \"https://s3.coinmarketcap.com/static/img/portraits/62876e92bedeb632050eb4ae.png\", // Set a property 'chainLogo' with an image URL\n rpcUrl: \"https://bsc-rpc.hamsterbox.xyz\", // Set the RPC URL\n chainId: 56, // Set the chain ID to 56\n programAddress: \"0xd74Ad94208935a47b1Bd289d28d45Bce6369E064\", // Set the program address\n vaultAddress: \"0x4bcD48D0Af9b48716EDb30BFF560d08036439871\", // Set the vault address\n registryAddress: \"0xb9599963729Acf22a18629355dA23e0bA4fBa611\", // Set the registry address\n explorerUrl: \"https://bscscan.com/\", // Set the explorer URL\n whitelistedRouters: [\n {\n address: \"0x5Dc88340E1c5c6366864Ee415d6034cadd1A9897\",\n isV3: true,\n ammTag: \"uniswap\",\n ammName: \"Uniswap\",\n dexUrl: \"https://app.uniswap.org/#/swap/\",\n },\n {\n address: \"0x10ED43C718714eb63d5aA57B78B54704E256024E\",\n isV3: false,\n ammTag: \"pancakeswap\",\n ammName: \"Pancake Swap\",\n dexUrl: \"https://pancakeswap.finance/swap/\",\n },\n ], // Set an array of whitelisted routers with their addresses, AMM tags, names, and DEX URLs\n};\n\n// Frequency options.\nconst TIME_CONDITIONS = [\n {\n label: \"Hourly\",\n value: { hours: 1 },\n secondValue: 60,\n },\n {\n label: \"Daily\",\n value: { days: 1 },\n secondValue: 60 * 24,\n },\n {\n label: \"Weekly\",\n value: { weeks: 1 },\n secondValue: 60 * 24 * 7,\n },\n {\n label: \"Every 2 Weeks\",\n value: { weeks: 2 },\n secondValue: 60 * 24 * 7 * 2,\n },\n {\n label: \"Monthly\",\n value: { months: 1 },\n secondValue: 60 * 24 * 30,\n },\n {\n label: \"Every 3 Months\",\n value: { months: 3 },\n secondValue: 60 * 24 * 30 * 3,\n },\n {\n label: \"Every 6 Months\",\n value: { months: 6 },\n secondValue: 60 * 24 * 30 * 6,\n },\n {\n label: \"Yearly\",\n value: { years: 1 },\n secondValue: 60 * 24 * 365,\n },\n];\n\n// Fetch the JSON file from the given URL and update the 'abiJson' state property\nif (!state.abiJson) {\n asyncFetch(\n \"https://raw.githubusercontent.com/CaviesLabs/hamsterpocket-assets/main/pocketchef.json\"\n ).then((result) => {\n State.update({\n abiJson: JSON.parse(result.body), // Parse the JSON response and update the 'abiJson' state property\n });\n });\n}\n\n// Function to reload configuration data\nconst reloadConfig = () => {\n // Fetch whitelist data from the API\n asyncFetch(`${API}/whitelist`).then((result) => {\n const tokens = result.body;\n const mapping = {};\n\n // Create a mapping of tokens with their addresses\n tokens.forEach((token) => {\n if (token.chainId === \"bnb\") {\n mapping[token.address] = token;\n }\n });\n\n State.update({\n whiteLists: mapping, // Update the 'whiteLists' state property with the token mapping\n selectedTokenAddress:\n Object.keys(mapping).length > 1 ? Object.keys(mapping)[1] : \"\", // Set the 'selectedTokenAddress' to the second token address if there are more than one, otherwise set it to an empty string\n });\n });\n\n // DETECT SENDER\n if (ethers !== undefined && Ethers.send(\"eth_requestAccounts\", [])[0]) {\n Ethers.provider()\n .getNetwork()\n .then((chainIdData) => {\n if (chainIdData?.chainId) {\n State.update({\n loaded: true,\n chainId: chainIdData.chainId,\n sender: ethers.utils.getAddress(\n Ethers.send(\"eth_requestAccounts\", [])[0]\n ),\n });\n }\n });\n }\n\n // Get sender balance.\n if (state.sender) {\n Ethers.provider()\n .getBalance(state.sender)\n .then((balance) => {\n State.update({\n balance: Big(balance).div(Big(10).pow(18)).toFixed(10),\n }); // Get the sender's balance and update the 'balance' state property\n });\n }\n};\n\nif (!state.loaded) {\n reloadConfig(); // Call the 'reloadConfig' function to load configuration data\n}\n\n// Function to handle getting pocket data by ID\nconst handleGetPocket = async (id) => {\n try {\n // Fetch pocket data from the API for the given ID\n asyncFetch(`${API}/pool/${id}/decimals-formatted`).then((result) => {\n State.update({\n pocket: result.body, // Update the 'pocket' state property with the fetched pocket data\n targetToken: state.whiteLists[result.body.targetTokenAddress], // Set the 'targetToken' state property to the token from 'whiteLists' based on the target token address\n baseToken: state.whiteLists[result.body.baseTokenAddress], // Set the 'baseToken' state property to the token from 'whiteLists' based on the base token address\n });\n });\n } catch (err) {\n console.log(err);\n }\n};\n\n// Function to handle getting pockets for a wallet address\nconst handleGetPockets = (walletAddress, cb) => {\n try {\n // Fetch pocket data from the API for the given wallet address\n asyncFetch(\n `${API}/pool/decimals-formatted?limit=9999&offset=0&chainId=bnb&ownerAddress=${walletAddress}&statuses=POOL_STATUS%3A%3AACTIVE&statuses=POOL_STATUS%3A%3ACLOSED&sortBy=DATE_START_DESC`\n ).then((result) => {\n State.update({\n pocketList: result.body, // Update the 'pocketList' state property with the fetched pocket data\n });\n\n if (cb) {\n cb();\n }\n });\n } catch (err) {\n console.log(err);\n }\n};\n\n// Function to sync the wallet data\nconst handleSyncWallet = (cb) => {\n if (!state.sender) return; // Return if the 'sender' state property is not defined\n asyncFetch(`${API}/pool/user/evm/${state.sender}/sync?chainId=bnb`, {\n method: \"POST\",\n headers: {\n \"content-type\": \"text/plain;charset=UTF-8\",\n },\n }).then(() => {\n handleGetPockets(state.sender, cb); // Sync the wallet data and then fetch the pockets for the wallet\n });\n};\n\n// Function to sync a pocket\nconst handleSyncPocket = (cb) => {\n if (!state.pocket) return; // Return if the 'pocket' state property is not defined\n asyncFetch(`${API}/pool/evm/${state.pocket._id}/sync`, {\n method: \"POST\",\n headers: {\n \"content-type\": \"text/plain;charset=UTF-8\",\n },\n }).then(() => {\n handleGetPocket(state.pocket._id); // Sync the pocket and then fetch the updated pocket data\n\n if (cb) {\n cb();\n }\n });\n};\n\n// Function to handle depositing into a pocket\nconst handleDepositPocket = () => {\n if (contract === undefined) return; // Return if the 'contract' variable is undefined\n\n const desiredAmount = ethers.BigNumber.from(\n `0x${parseFloat(\n (\n parseFloat(state.pocketDepositedAmount) *\n parseFloat(Math.pow(10, state.baseToken.decimals))\n ).toFixed(0)\n ).toString(16)}`\n );\n\n contract\n .depositEther(state.pocket._id, {\n value: desiredAmount,\n })\n .then((tx) => {\n console.log(\"tx hash\", tx);\n return tx.wait(CONFIRMATION_AWAIT).then(() => {\n handleSyncPocket();\n });\n }); // Deposit the desired amount of Ether into the specified pocket\n};\n\nconst convertDurationsTime = (duration) => {\n /** @dev Initilize duration result. */\n const swapDuration = (val) => val.toString();\n\n /** @dev Condition for each */\n if (duration.hours) {\n return swapDuration(duration.hours * 3600);\n } else if (duration.days) {\n return swapDuration(duration.days * 24 * 3600);\n } else if (duration.weeks) {\n return swapDuration(duration.weeks * 7 * 24 * 3600);\n } else if (duration.months) {\n return swapDuration(duration.months * 30 * 24 * 3600);\n } else if (duration.years) {\n return swapDuration(duration.years * 365 * 24 * 3600);\n }\n};\n\n// Function to handle creating a new pocket\nconst handleCreatePocket = () => {\n asyncFetch(`${API}/pool/bnb/${state.sender}`, {\n method: \"POST\",\n headers: {\n \"content-type\": \"text/plain;charset=UTF-8\",\n },\n }).then(async (result) => {\n const createdParams = {\n id: result.body._id,\n owner: state.sender,\n baseTokenAddress: \"0xbb4CdB9CBd36B01bD1cBaEBF2De08d9173bc095c\", // Default BNB\n targetTokenAddress: state.selectedTokenAddress, // Use the selected token address\n ammRouterVersion: \"0\",\n ammRouterAddress: CONTRACT_DATA.whitelistedRouters[0].address, // Use the address of the first whitelisted router\n startAt: parseInt(\n ((new Date().getTime() + 30000) / 1000).toString()\n ).toString(),\n batchVolume: ethers.BigNumber.from(\n `0x${parseFloat(\n (state.batchAmount * Math.pow(10, 18)).toFixed(0)\n ).toString(16)}`\n ),\n stopConditions: [],\n frequency: state.frequency,\n openingPositionCondition: {\n value0: \"0\",\n value1: \"0\",\n operator: \"0\",\n },\n takeProfitCondition: {\n stopType: \"0\",\n value: \"0\",\n },\n stopLossCondition: {\n stopType: \"0\",\n value: \"0\",\n },\n };\n\n try {\n contract\n .createPocketAndDepositEther(createdParams, {\n value: ethers.BigNumber.from(\n `0x${parseFloat(\n (state.depositAmount * Math.pow(10, 18)).toFixed(0)\n ).toString(16)}`\n ),\n })\n .then((tx) => {\n console.log(\"tx hash\", tx);\n return tx.wait(CONFIRMATION_AWAIT).then(() => {\n handleSyncWallet(() => {\n State.update({ frequency: \"3600\" });\n State.update({ currentScreen: 0 });\n });\n });\n });\n } catch (err) {\n console.error(err);\n }\n });\n};\n\n// Function to close a pocket\nconst handleClosePocket = () => {\n if (!state.pocket) return; // Return if the 'pocket' state property is not defined\n try {\n contract\n .closePocket(state.pocket._id)\n .then((tx) => {\n console.log(\"txHash\", tx);\n return tx.wait(CONFIRMATION_AWAIT).then(() => {\n handleSyncPocket();\n });\n })\n .finally(() => {\n handleSyncPocket();\n });\n } catch {}\n};\n\n// Function to handle withdrawing from a pocket\nconst handleWithdraw = () => {\n if (!state.pocket) return; // Return if the 'pocket' state property is not defined\n try {\n console.log(\"Withdraw\", state.pocket._id);\n contract\n .withdraw(state.pocket._id)\n .then((tx) => {\n console.log(\"txHash\", tx);\n return tx.wait(CONFIRMATION_AWAIT).then(() => {\n handleSyncPocket(() => {\n handleGetPockets(state.sender, () => {\n State.update({ currentScreen: 0 });\n });\n });\n });\n })\n .catch(() => {\n handleGetPockets(state.sender, () => {\n State.update({ currentScreen: 0 });\n });\n });\n } catch {}\n};\n\nif (state.whiteLists !== {} && state.sender && state.currentScreen === 0) {\n // Get pocket data when config has been loaded.\n handleGetPockets(state.sender); // Fetch the pockets for the sender if the whiteLists and sender are defined\n}\n\n// Setup contract\nif (state.sender && state.abiJson) {\n contract = new ethers.Contract(\n CONTRACT_DATA.programAddress,\n state.abiJson,\n Ethers.provider().getSigner()\n ); // Setup the contract instance with the program address, ABI JSON, and signer\n}\n\nconst cssFont = fetch(\n \"https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800\"\n).body;\nconst css = fetch(\n \"https://raw.githubusercontent.com/CaviesLabs/hamsterpocket-assets/main/style.css?v=18\"\n).body;\n\nif (!cssFont || !css) return \"\";\n\nif (!state.theme) {\n State.update({\n theme: styled.div`\n font-family: \"Poppins\", sans-serif;\n color: white;\n ${cssFont}\n ${css}\n .button-primary-36-px,\n .button-primary-36-px * {\n box-sizing: border-box;\n }\n .button-primary-36-px {\n background: var(--primary-purple, #735cf7);\n border-radius: 100px;\n display: flex;\n flex-direction: row;\n gap: 0px;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 170px;\n height: 36px;\n position: relative;\n }\n .sync-button {\n display: flex;\n justify-items: center !important;\n align-items: center !important;\n padding: 0 10px !important;\n border: 2px solid #606060 !important;\n border-radius: 12px !important;\n font-family: \"Poppins\", sans-serif !important;\n font-size: 12px;\n }\n .ic-16-refresh,\n .ic-16-refresh * {\n box-sizing: border-box;\n }\n .ic-16-refresh {\n flex-shrink: 0;\n width: 16px;\n height: 16px;\n position: relative;\n }\n .refresh-2 {\n position: absolute;\n left: 0px;\n top: 0px;\n overflow: visible;\n }\n .text-white {\n color: white !important;\n }\n `,\n });\n}\n\nconst Theme = state.theme;\n\nconst pocketListScreen = () => {\n if (state.sender === null || state.chainId !== 56) {\n return (\n <>\n <div style={{ textAlign: \"center\" }}>\n Please connect to BNB chain wallet 🚀\n </div>\n </>\n );\n }\n\n if (state.pocketList.length === 0) {\n return (\n <>\n <div style={{ textAlign: \"center\" }}>\n You don't have any strategies, create one 🚀\n </div>\n </>\n );\n }\n\n return (\n <>\n {state.pocketList?.map((pocket, index) => {\n const pocketBaseToken = state.whiteLists[pocket.baseTokenAddress];\n const pocketTargetToken = state.whiteLists[pocket.targetTokenAddress];\n return (\n <div\n class=\"my-pockets-mini\"\n key={`pocket-${index}`}\n onClick={() => {\n handleGetPocket(pocket._id);\n State.update({ currentScreen: 2 });\n }}\n >\n <div class=\"frame-48098175\">\n <div class=\"frame-48097709\">\n <img\n 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\"\n src={pocketTargetToken.image}\n />\n </div>\n <div class=\"frame-48098168\">\n <div class=\"sol-btc\">\n {pocketTargetToken.symbol}/{pocketBaseToken.symbol}\n </div>\n <div class=\"_146-423\">#{pocket._id}</div>\n </div>\n\n <div\n style={{\n display: \"flex\",\n width: \"100%\",\n justifyContent: \"end\",\n }}\n >\n <div\n style={{\n textAlign: \"right\",\n color: (pocket?.currentROIValue || \"0\").includes(\"-\")\n ? \"red\"\n : \"#26c673\",\n }}\n >\n 💵 {pocket?.currentROIValue} {pocket?.baseTokenInfo[0].symbol}{\" \"}\n ({pocket?.currentROI}\n %)\n </div>\n </div>\n </div>\n </div>\n );\n })}\n </>\n );\n};\n\nconst createPocketScreen = () => {\n return (\n <div class=\"dca-pair\">\n <div class=\"dca-pair2\">🔄 Select trading pair</div>\n <div class=\"frame-48098210\">\n <div class=\"frame-48097868\">\n <div class=\"frame-48098208\">\n <div\n class=\"frame-48097854\"\n style={{ position: \"relative\", top: \"12px\" }}\n >\n <div\n class=\"bnb-bnb-logo-1\"\n style={{ position: \"relative\", top: \"6px\" }}\n >\n {Object.keys(state.whiteLists).length && (\n <img\n class=\"token-select-icon\"\n src={\n state.whiteLists[Object.keys(state.whiteLists)[0]].image\n }\n />\n )}\n </div>\n\n <div class=\"frame-48098207\">\n <div class=\"frame-48097853\">\n <div class=\"bnb\">BNB</div>\n </div>\n </div>\n </div>\n\n <div class=\"balance-319-23-bnb\">Balance: {state.balance} BNB</div>\n </div>\n\n <svg\n class=\"frame-48097866\"\n width=\"49\"\n height=\"48\"\n viewBox=\"0 0 49 48\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g clip-path=\"url(#clip0_4112_41594)\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n 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\"\n fill=\"#7886A0\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_4112_41594\">\n <rect\n width=\"48\"\n height=\"48\"\n fill=\"white\"\n transform=\"translate(0.5 -0.000488281)\"\n />\n </clipPath>\n </defs>\n </svg>\n\n <div class=\"frame-48098209\" style={{ marginTop: 14 }}>\n <div class=\"frame-480978682\">\n <div class=\"solana-sol\">\n <div class=\"solana-sol2\">\n {state.selectedTokenAddress && state.whiteLists && (\n <img\n class=\"token-select-icon\"\n src={state.whiteLists[state.selectedTokenAddress].image}\n />\n )}\n </div>\n </div>\n\n <div class=\"frame\" style={{ marginTop: 8 }}>\n {state.whiteLists && Object.keys(state.whiteLists).length > 0 && (\n <Typeahead\n defaultSelected={[\n {\n id: state.selectedTokenAddress,\n label:\n state.whiteLists[state.selectedTokenAddress].symbol,\n },\n ]}\n filterBy={() => true}\n options={Object.keys(state.whiteLists)\n .filter((w) => state.whiteLists[w].symbol !== \"WBNB\")\n .map((address) => {\n return {\n id: address,\n label: state.whiteLists[address].symbol,\n };\n })}\n onChange={(value) => {\n if (value[0].id) {\n State.update({ selectedTokenAddress: value[0].id });\n }\n }}\n />\n )}\n </div>\n </div>\n {/* <div class=\"balance-25-5\">Balance: 25.5</div> */}\n </div>\n </div>\n <div class=\"frame-38649\">\n <div class=\"provider\">Provider</div>\n <div class=\"frame-48097959\">\n <div class=\"raydium\">Uniswap V3</div>\n </div>\n </div>\n </div>\n <div style={{ display: \"flex\" }}>\n <div class=\"frame\" style={{ float: \"left\", width: \"50%\" }}>\n <div class=\"amount\">\n <div class=\"frame-48097891\">\n <div class=\"amount-each-batch\">\n <span>\n <span class=\"amount-each-batch-span\">💰 Buy amount</span>\n <span class=\"amount-each-batch-span2\"> </span>\n <span class=\"amount-each-batch-span3\">*</span>\n </span>\n </div>\n\n <div class=\"input-field-52-with-icon\">\n <div class=\"frame-48097890\">\n <div class=\"binance-coin-bnb\">\n <svg\n class=\"binance-coin-bnb2\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M23.641 14.9029C22.0381 21.3315 15.5262 25.2438 9.09606 23.6407C2.66863 22.0381 -1.24415 15.5265 0.359423 9.09837C1.96159 2.66903 8.47349 -1.24361 14.9016 0.359081C21.3313 1.96177 25.2438 8.47405 23.6408 14.903L23.6409 14.9029H23.641Z\"\n fill=\"#F3BA2F\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12.0079 7.616L8.90024 10.7233L8.9003 10.7232L7.09216 8.9152L12.0079 4L16.9253 8.91667L15.1171 10.7247L12.0079 7.616ZM5.81449 10.1917L4.00623 12L5.81437 13.8077L7.62263 11.9996L5.81449 10.1917ZM8.89889 13.2769L12.0066 16.384L15.1157 13.2754L16.9248 15.0824L16.9239 15.0834L12.0066 20L7.09082 15.0848L7.08826 15.0822L8.89889 13.2769ZM18.2012 10.1927L16.3929 12.0008L18.2011 13.8087L20.0094 12.0007L18.2012 10.1927Z\"\n fill=\"white\"\n />\n <path\n d=\"M13.8338 11.9992H13.8346L11.9999 10.1646L10.6437 11.5201V11.5201L10.4879 11.676L10.1666 11.9973L10.1641 11.9998L10.1666 12.0024L11.9999 13.8357L13.8347 12.0011L13.8356 12.0001L13.8339 11.9992\"\n fill=\"white\"\n />\n </svg>\n </div>\n\n {/* <div class=\"from-0-1-sol\">From 0.1 BNB</div> */}\n <input\n type=\"number\"\n class=\"from-0-1-sol\"\n placeholder=\"Amout BNB of each batch\"\n onChange={(e) =>\n State.update({\n batchAmount: parseFloat(e.target.value || 0),\n })\n }\n />\n </div>\n <div class=\"frame-38748\">\n <div class=\"sol\">BNB</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div\n class=\"frame\"\n style={{ float: \"left\", width: \"50%\", paddingLeft: \"20px\" }}\n >\n <div class=\"amount\">\n <div class=\"frame-48097891\">\n <div class=\"amount-each-batch\">\n <span>\n <span class=\"amount-each-batch-span\">💳 Deposit amount</span>\n <span class=\"amount-each-batch-span2\"> </span>\n <span class=\"amount-each-batch-span3\">*</span>\n </span>\n </div>\n\n <div class=\"input-field-52-with-icon\">\n <div class=\"frame-48097890\">\n <div class=\"binance-coin-bnb\">\n <svg\n class=\"binance-coin-bnb2\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M23.641 14.9029C22.0381 21.3315 15.5262 25.2438 9.09606 23.6407C2.66863 22.0381 -1.24415 15.5265 0.359423 9.09837C1.96159 2.66903 8.47349 -1.24361 14.9016 0.359081C21.3313 1.96177 25.2438 8.47405 23.6408 14.903L23.6409 14.9029H23.641Z\"\n fill=\"#F3BA2F\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12.0079 7.616L8.90024 10.7233L8.9003 10.7232L7.09216 8.9152L12.0079 4L16.9253 8.91667L15.1171 10.7247L12.0079 7.616ZM5.81449 10.1917L4.00623 12L5.81437 13.8077L7.62263 11.9996L5.81449 10.1917ZM8.89889 13.2769L12.0066 16.384L15.1157 13.2754L16.9248 15.0824L16.9239 15.0834L12.0066 20L7.09082 15.0848L7.08826 15.0822L8.89889 13.2769ZM18.2012 10.1927L16.3929 12.0008L18.2011 13.8087L20.0094 12.0007L18.2012 10.1927Z\"\n fill=\"white\"\n />\n <path\n d=\"M13.8338 11.9992H13.8346L11.9999 10.1646L10.6437 11.5201V11.5201L10.4879 11.676L10.1666 11.9973L10.1641 11.9998L10.1666 12.0024L11.9999 13.8357L13.8347 12.0011L13.8356 12.0001L13.8339 11.9992\"\n fill=\"white\"\n />\n </svg>\n </div>\n\n {/* <div class=\"from-0-1-sol\">From 0.1 BNB</div> */}\n <input\n type=\"number\"\n class=\"from-0-1-sol\"\n placeholder=\"Amout BNB to deposit\"\n onChange={(e) =>\n State.update({\n depositAmount: parseFloat(e.target.value || 0),\n })\n }\n />\n </div>\n\n <div class=\"frame-38748\">\n <div class=\"sol\">BNB</div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"frame-625057\">\n <div class=\"available\">Available:</div>\n\n <div class=\"frame-625056\">\n <div class=\"binance-coin-bnb10\">\n <svg\n class=\"binance-coin-bnb11\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M15.7606 9.93524C14.6921 14.221 10.3508 16.8292 6.06404 15.7605C1.77909 14.692 -0.829432 10.351 0.239615 6.06558C1.30772 1.77935 5.64899 -0.82907 9.93441 0.239387C14.2208 1.30785 16.8292 5.64936 15.7605 9.93532L15.7606 9.93524H15.7606Z\"\n fill=\"#F3BA2F\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M8.00524 5.07717L5.93345 7.14872L5.9335 7.14864L4.72807 5.9433L8.00524 2.6665L11.2835 5.94429L10.078 7.14962L8.00524 5.07717ZM3.87629 6.79427L2.67078 7.99982L3.8762 9.20494L5.08171 7.99956L3.87629 6.79427ZM5.93255 8.85108L8.00434 10.9225L10.0771 8.8501L11.2832 10.0548L11.2826 10.0554L8.00434 13.3332L4.72717 10.0564L4.72546 10.0547L5.93255 8.85108ZM12.1341 6.795L10.9286 8.00038L12.1341 9.20567L13.3395 8.00029L12.1341 6.795Z\"\n fill=\"white\"\n />\n <path\n d=\"M9.22249 7.99945H9.223L7.99986 6.77637L7.09578 7.68009V7.68009L6.99192 7.78398L6.77771 7.99821L6.776 7.99988L6.77771 8.00163L7.99986 9.22381L9.22308 8.00073L9.22368 8.00005L9.22257 7.99945\"\n fill=\"white\"\n />\n </svg>\n </div>\n\n <div class=\"_2-043-54-bnb\">{state.balance} BNB</div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"frame\">\n <div class=\"amount\">\n <div class=\"frame-48097891\">\n <div class=\"amount-each-batch\">\n <span>\n <span class=\"amount-each-batch-span\">⏰ Frequency</span>\n <span class=\"amount-each-batch-span2\"> </span>\n </span>\n </div>\n <div>\n <div class=\"frame\" style={{ marginBottom: \"32px\" }}>\n <select\n class=\"token-select\"\n onChange={(e) => {\n const option = TIME_CONDITIONS.find(\n (item) => item.label === e.target.value\n );\n const proccessFrequency = convertDurationsTime(\n option.value\n );\n State.update({\n frequency: proccessFrequency,\n });\n }}\n >\n {TIME_CONDITIONS.map((item, index) => {\n return (\n <option\n style={{ color: \"black\" }}\n value={item.label}\n key={`frequency-item${index}`}\n >\n {item.label}\n </option>\n );\n })}\n </select>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"button-group\" style={{ display: \"flex\" }}>\n <div\n class=\"frame-48098259\"\n onClick={() => {\n State.update({ currentScreen: 0 });\n State.update({ frequency: \"3600\" });\n }}\n style={{ float: \"left \", cursor: \"pointer\" }}\n >\n <div class=\"deposit\">Back</div>\n </div>\n\n {!!state.balance && state.balance > 0 && (\n <div\n onClick={() => handleCreatePocket()}\n class=\"frame-48098260\"\n style={{\n float: \"left \",\n marginLeft: \"20px\",\n cursor: \"pointer\",\n }}\n >\n <div class=\"deposit\" style={{ cursor: \"pointer\" }}>\n ✅ Save\n </div>\n </div>\n )}\n </div>\n </div>\n );\n};\n\nconst pocketDetailScreen = () => {\n return (\n <>\n <div class=\"pocket-pecent\">\n <div class=\"frame-48098246\">\n <div class=\"frame-48098141\">\n <div class=\"frame-480977092\">\n <img\n 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\"\n src={state.targetToken.image && state.targetToken.image}\n />\n </div>\n\n {state.targetToken && state.baseToken && (\n <div class=\"sol-usdc\">\n {state.targetToken.symbol}/{state.baseToken.symbol}\n </div>\n )}\n </div>\n </div>\n\n <a\n target=\"_blank\"\n href={`https://app.uniswap.org/#/swap/?inputCurrency=${state.baseToken?.address}&outputCurrency=${state.targetToken?.address}`}\n >\n <svg\n class=\"popup-2\"\n width=\"25\"\n height=\"24\"\n viewBox=\"0 0 25 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n 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\"\n fill=\"white\"\n />\n </svg>\n </a>\n </div>\n <div class=\"frame-48098193\">\n <div class=\"frame-48098188\">\n <div class=\"pool-info-desk\">\n <div class=\"pool-info\">💼 Pool Info</div>\n\n <div class=\"frame-48097847\">\n <div class=\"frame-480978472\">\n <div class=\"strategy2\">ID</div>\n\n <div class=\"frame-48097840\">\n <div class=\"frame-48098084\">\n #{state.pocket && state.pocket._id}\n </div>\n </div>\n </div>\n\n <div class=\"frame-480978472\">\n <div class=\"strategy2\">Frequency</div>\n\n <div class=\"frame-48097840\">\n <div class=\"frame-48098084\">\n {TIME_CONDITIONS.find(\n (item) =>\n item.secondValue * 60 === state.pocket.frequency.seconds\n ).label || \"⏰\"}\n </div>\n </div>\n </div>\n\n <div class=\"frame-480978472\">\n <div class=\"strategy2\">Total deposited</div>\n\n <div class=\"frame-48097840\">\n <div class=\"frame-48098084\">\n {state.pocket && state.baseToken && (\n <div class=\"_10-usdc-monthly\">\n {state.pocket.depositedAmount} {state.baseToken.symbol}\n </div>\n )}\n </div>\n </div>\n </div>\n\n <div class=\"frame-48097849\">\n <div class=\"strategy2\">Start date</div>\n <div class=\"frame-48097840\">\n <div class=\"frame-48098084\">\n <div class=\"_10-usdc-monthly2\">\n {state.pocket &&\n `${new Date(\n state.pocket.startTime\n ).toLocaleTimeString()} ${new Date(\n state.pocket.startTime\n ).toDateString()}`}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"progress-desk\">\n <div class=\"end-conditions\">💰 Progress</div>\n <div class=\"frame-480978473\">\n <div class=\"frame-48097849\">\n <div class=\"strategy2\">Total invested</div>\n\n <div class=\"frame-48097840\">\n <div class=\"frame-48098084\">\n {state.pocket && state.baseToken && (\n <div class=\"_10-usdc-monthly\">\n {state.pocket.currentSpentBaseToken}{\" \"}\n {state.baseToken.symbol}\n </div>\n )}\n </div>\n </div>\n </div>\n\n <div class=\"frame-48097843\">\n <div class=\"strategy2\">Batch bought</div>\n\n <div class=\"frame-48097840\">\n <div class=\"frame-48098084\">\n <div class=\"_10-usdc-monthly\">\n {state.pocket &&\n `${state.pocket.currentBatchAmount} BATCH(ES)`}\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"frame-48097845\">\n <div class=\"strategy2\">Token hold</div>\n <div class=\"frame-48097840\">\n <div class=\"frame-48098084\">\n {state.pocket && state.targetToken && (\n <div class=\"_10-usdc-monthly2\">\n {state.pocket.currentReceivedTargetToken}{\" \"}\n {state.targetToken.symbol}\n </div>\n )}\n </div>\n </div>\n </div>\n\n <div class=\"frame-48097850\">\n <div class=\"strategy2\">Average price</div>\n\n <div class=\"frame-48097840\">\n <div class=\"frame-48098084\">\n <div class=\"_10-usdc-monthly2\">\n 1 {state.targetToken?.symbol} = {state.pocket?.avgPrice}{\" \"}\n {state.baseToken?.symbol}\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"frame-48097848\">\n <div class=\"strategy2\">APL (ROI)</div>\n <div class=\"frame-48097840\">\n <div class=\"frame-48098084\">\n <div\n class=\"_10-usdc-monthly3\"\n style={{\n color: (state.pocket?.currentROIValue || \"0\").includes(\n \"-\"\n )\n ? \"red\"\n : undefined,\n }}\n >\n {state.pocket?.currentROIValue} {state.baseToken?.symbol}{\" \"}\n ({state.pocket?.currentROI}%)\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"frame-48098192\">\n <div class=\"next-batch-desk\">\n <div class=\"next-batch\">🔥 Next Batch</div>\n\n <div class=\"frame-480978482\">\n <div class=\"frame-480978472\">\n <div class=\"strategy2\">Next batch time</div>\n\n <div class=\"frame-48097840\">\n <div class=\"frame-48098084\">\n <div class=\"_10-usdc-monthly2\">\n {state.pocket &&\n state.pocket.nextExecutionAt &&\n `${new Date(\n state.pocket.nextExecutionAt\n ).toLocaleTimeString()} ${new Date(\n state.pocket.nextExecutionAt\n ).toDateString()}`}\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"frame-48097849\">\n <div class=\"strategy2\">Outstanding deposit</div>\n\n <div class=\"frame-48097840\">\n <div class=\"frame-48098084\">\n {state.pocket && state.baseToken && (\n <div class=\"_10-usdc-monthly2\">\n {state.pocket.batchVolume -\n state.pocket.remainingBaseTokenBalance >\n 0\n ? state.pocket.batchVolume -\n state.pocket.remainingBaseTokenBalance\n : 0}\n {state.baseToken.symbol}\n </div>\n )}\n </div>\n </div>\n </div>\n {state.pocket && state.pocket.status === ACTIVE_STATUS && (\n <>\n <div\n class=\"input-field-52-with-icon\"\n style={{ background: \"#22232f !important\" }}\n >\n <div class=\"frame-48097890\">\n <div class=\"binance-coin-bnb\">\n <svg\n class=\"binance-coin-bnb2\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M23.641 14.9029C22.0381 21.3315 15.5262 25.2438 9.09606 23.6407C2.66863 22.0381 -1.24415 15.5265 0.359423 9.09837C1.96159 2.66903 8.47349 -1.24361 14.9016 0.359081C21.3313 1.96177 25.2438 8.47405 23.6408 14.903L23.6409 14.9029H23.641Z\"\n fill=\"#F3BA2F\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12.0079 7.616L8.90024 10.7233L8.9003 10.7232L7.09216 8.9152L12.0079 4L16.9253 8.91667L15.1171 10.7247L12.0079 7.616ZM5.81449 10.1917L4.00623 12L5.81437 13.8077L7.62263 11.9996L5.81449 10.1917ZM8.89889 13.2769L12.0066 16.384L15.1157 13.2754L16.9248 15.0824L16.9239 15.0834L12.0066 20L7.09082 15.0848L7.08826 15.0822L8.89889 13.2769ZM18.2012 10.1927L16.3929 12.0008L18.2011 13.8087L20.0094 12.0007L18.2012 10.1927Z\"\n fill=\"white\"\n />\n <path\n d=\"M13.8338 11.9992H13.8346L11.9999 10.1646L10.6437 11.5201V11.5201L10.4879 11.676L10.1666 11.9973L10.1641 11.9998L10.1666 12.0024L11.9999 13.8357L13.8347 12.0011L13.8356 12.0001L13.8339 11.9992\"\n fill=\"white\"\n />\n </svg>\n </div>\n\n {/* <div class=\"from-0-1-sol\">From 0.1 BNB</div> */}\n <input\n type=\"number\"\n class=\"from-0-1-sol\"\n placeholder=\"Amout BNB to deposit\"\n style={{ background: \"#22232f !important\" }}\n onChange={(e) =>\n State.update({\n pocketDepositedAmount: parseFloat(\n e.target.value || 0\n ),\n })\n }\n />\n </div>\n\n <div class=\"frame-38748\">\n <div class=\"sol\">BNB</div>\n </div>\n </div>\n <div\n class=\"button3\"\n onClick={() => handleDepositPocket()}\n style={{ marginTop: \"10px\" }}\n >\n <div class=\"button2\">💸 Deposit Now</div>\n </div>\n </>\n )}\n </div>\n </div>\n <div class=\"tp-sl\">\n <div class=\"tp-sl2\">💵 TP/SL</div>\n\n <div class=\"frame-48097847\">\n <div class=\"frame-480978472\">\n <div class=\"strategy2\">Take profit</div>\n\n <div class=\"frame-48097840\">\n <div class=\"frame-48098084\">\n <div class=\"_10-usdc-monthly\">\n {state.pocket && state.pocket.takeProfitCondition\n ? `at price ${state.pocket.takeProfitCondition.value} ${state.baseToken.symbol}`\n : `Coming soon`}\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"frame-48097849\">\n <div class=\"strategy2\">Stop loss</div>\n\n <div class=\"frame-48097840\">\n <div class=\"frame-48098084\">\n <div class=\"_10-usdc-monthly\">\n {state.pocket && state.pocket.stopLossCondition\n ? `at price ${state.pocket.stopLossCondition.value} ${state.baseToken.symbol}`\n : `Coming soon`}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"status-desk\">\n <div class=\"status\">Status</div>\n <div class=\"frame-48098267\">\n <div class=\"frame-48097882\">\n {state.pocket && (\n <div\n class=\"tag\"\n style={{\n background:\n state.pocket.status === ACTIVE_STATUS\n ? \"rgba(38, 198, 115, 0.12) !important\"\n : \"rgba(247, 85, 85, 0.12) !important\",\n }}\n >\n <div\n class=\"tag-marker\"\n style={{\n color:\n state.pocket.satus === ACTIVE_STATUS\n ? \"#26c673\"\n : \"#f44949\",\n }}\n >\n {state.pocket.status === ACTIVE_STATUS\n ? \"Ongoing\"\n : \"Closed\"}\n </div>\n </div>\n )}\n </div>\n </div>\n </div>\n\n <div\n class=\"button-desk\"\n style={{ cursor: \"pointer\" }}\n onClick={() =>\n state.pocket.status === \"POOL_STATUS::CLOSED\"\n ? handleWithdraw()\n : handleClosePocket()\n }\n >\n <div class=\"button-primary\">\n <div class=\"frame-48098095\">\n <div class=\"iconly-light-arrow-right\"></div>\n <div class=\"button4\">\n {state.pocket.status === \"POOL_STATUS::CLOSED\"\n ? \"💳 Withdraw Fund\"\n : \"💀 Close Strategy\"}\n </div>\n <div class=\"iconly-light-arrow-right\"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </>\n );\n};\nconst renderScreenTitle = () => {\n if (state.currentScreen === 0) return \"🏆 Your active strategies\";\n if (state.currentScreen === 1) return \"🚀 Create a strategy\";\n\n return \"🥽 Strategy performance\";\n};\n\nconst renderAppScreen = () => {\n if (state.currentScreen === 0) return pocketListScreen();\n if (state.currentScreen === 1) return createPocketScreen();\n\n return pocketDetailScreen();\n};\n\nreturn (\n <Theme>\n <div class=\"on-going\">\n <div class=\"frame-48098139\">\n {state.currentScreen > 0 && (\n <button\n onClick={() => {\n State.update({ currentScreen: 0 });\n State.update({ frequency: \"3600\" });\n }}\n >\n <svg\n class=\"arrow-chevron-big-left\"\n width=\"25\"\n height=\"24\"\n viewBox=\"0 0 25 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M16.285 3.51465L7.80005 11.9996L16.285 20.4846L17.7 19.0706L10.628 11.9996L17.7 4.92865L16.285 3.51465Z\"\n fill=\"white\"\n />\n </svg>\n </button>\n )}\n <div class=\"pocket-detail\">\n {renderScreenTitle()}\n {state.currentScreen === 2 && state.pocket._id && (\n <>\n <div\n class=\"sync-button\"\n style={{ cursor: \"pointer\", marginLeft: \"10px\" }}\n onClick={() => handleSyncPocket()}\n >\n <div class=\"sync\">Refresh</div>\n <div class=\"ic-16-refresh\" style={{ marginLeft: \"10px\" }}>\n <div class=\"ic-16-refresh\">\n <svg\n class=\"refresh-2\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M14.6668 7.99967C14.6668 11.6797 11.6802 14.6663 8.00016 14.6663C4.32016 14.6663 2.0735 10.9597 2.0735 10.9597M2.0735 10.9597H5.08683M2.0735 10.9597V14.293M1.3335 7.99967C1.3335 4.31967 4.2935 1.33301 8.00016 1.33301C12.4468 1.33301 14.6668 5.03967 14.6668 5.03967M14.6668 5.03967V1.70634M14.6668 5.03967H11.7068\"\n stroke=\"#735CF7\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n </div>\n </>\n )}\n </div>\n <div>\n <a\n class=\"sync-button\"\n style={{ height: 40, cursor: \"pointer\", marginLeft: \"10px\" }}\n href=\"https://bos.gg/#/cavies.near/widget/hamsterpocket-guide\"\n target=\"_blank\"\n >\n <div class=\"sync\" style={{ color: \"white\" }}>\n 📚 Watch tutorial\n </div>\n </a>{\" \"}\n </div>\n {state.currentScreen === 0 && (\n <>\n {state.sender !== null && state.chainId === 56 ? (\n <>\n <div\n class=\"button-primary-36-px\"\n style={{ cursor: \"pointer\" }}\n onClick={() => State.update({ currentScreen: 1 })}\n >\n <div class=\"button-connectwallet\" style={{ color: \"white\" }}>\n 🚀 Create\n </div>\n </div>\n <div\n class=\"sync-button\"\n style={{\n cursor: \"pointer\",\n marginLeft: \"10px\",\n height: \"40px\",\n }}\n onClick={() => handleSyncWallet()}\n >\n <div class=\"sync\" style={{ color: \"white\" }}>\n Refresh\n </div>\n <div class=\"ic-16-refresh\" style={{ marginLeft: \"10px\" }}>\n <div class=\"ic-16-refresh\">\n <svg\n class=\"refresh-2\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M14.6668 7.99967C14.6668 11.6797 11.6802 14.6663 8.00016 14.6663C4.32016 14.6663 2.0735 10.9597 2.0735 10.9597M2.0735 10.9597H5.08683M2.0735 10.9597V14.293M1.3335 7.99967C1.3335 4.31967 4.2935 1.33301 8.00016 1.33301C12.4468 1.33301 14.6668 5.03967 14.6668 5.03967M14.6668 5.03967V1.70634M14.6668 5.03967H11.7068\"\n stroke=\"#735CF7\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n </div>\n </>\n ) : (\n <Web3Connect\n style={{ color: \"white\" }}\n className=\"button-primary-36-px button-connectwallet text-white\"\n connectLabel=\"🧳 Connect wallet\"\n />\n )}\n </>\n )}\n </div>\n <div class=\"frame-48098194\">{renderAppScreen()}</div>\n </div>\n </Theme>\n);\n" } } } } }