Transaction: 6PPaJBH...HXWL

{ "data": { "dydx4.near": { "widget": { "Index": { "": "const defaultChainId = 11155111;\n\nconst orderOpen = \"OPEN\";\nconst orderFilled = \"FILLED\";\nconst orderCancelled = \"CANCELED\";\nconst orderPending = \"PENDING\";\n\nif (state === undefined) {\n State.init({\n orderSize: \"0.002\",\n orderPrice: \"2500\",\n orderMarketId: \"ETH-USD\",\n orderType: \"MARKET\",\n nonce: 0,\n orderFilter: orderOpen,\n });\n\n // Auto refresh orders and account\n setInterval(() => {\n State.update((state) => ({\n ...state,\n nonce: state.account ? state.nonce + 1 : state.nonce,\n }));\n }, 3000);\n}\n\nconst css = fetch(\n \"https://plum-dear-manatee-739.mypinata.cloud/ipfs/QmQWyLP4c4XW36yUdx9AV7Ck8Zcqes9z8eX7aevySdYtHW\"\n).body;\n\nif (!css) return \"\";\n\nif (!state.theme) {\n State.update({\n theme: styled.div`\n${css}\n\n.order-tabs ul {\n position: relative;\n width: fit-content;\n margin-top: -1px;\n font-family: \"Lexend\",Helvetica;\n font-weight: 400;\n color: transparent;\n font-size: 14px;\n color: #818099; \n letter-spacing: 0;\n line-height: normal;\n white-space: nowrap;\n}\n\n.order-tabs .nav-link {\n color: #ffffff99;\n cursor: pointer;\n}\n\n.order-tabs .nav-link.active {\n color: #101019\n}\n`,\n });\n}\n\nconst Theme = state.theme;\n\nconst updateOrders = () => {\n const nonce = state.nonce ?? 0;\n State.update({ nonce: nonce + 1 });\n};\n\nconst OrderMarket = styled.div`{\n display: inline-block;\n min-width: 180px;\n }`;\nconst OrderSide = styled.div`{\n min-width: 50px;\n text-align: center;\n display: inline-block;\n border-radius: 0.25rem;\n letter-spacing: 0.04em;\n user-select: none;\n padding: 0.156rem 0.219rem 0.156rem 0.25rem;\n color: ${(props) =>\n [\"BUY\", \"LONG\"].includes(props.side) ? \"#21a677\" : \"#e45353\"};\n background-color: ${(props) =>\n [\"BUY\", \"LONG\"].includes(props.side) ? \"#3eb68a29\" : \"#d57676a1\"};\n}`;\n\nconst OrderSize = styled.div`{\n display: inline-block;\n text-align: center;\n min-width: 190px;\n border-radius: 0.25rem;\n letter-spacing: 0.04em;\n user-select: none;\n padding: 0.156rem 0.219rem 0.156rem 0.25rem;\n color: #757575;\n background-color: #d1d4dc;\n}`;\n\nconst OrderAction = styled.div`{\n display: inline;\n text-align: center;\n min-width: 190px;\n border-radius: 0.25rem;\n letter-spacing: 0.04em;\n user-select: none;\n padding: 0.156rem 0.219rem 0.156rem 0.25rem;\n}`;\n\nconst etherProviderEnabled = !!Ethers?.provider();\n\nconst switchNetwork = (chainId) => {\n if (etherProviderEnabled && chainId) {\n Ethers.send(\"wallet_switchEthereumChain\", [\n { chainId: ethers.utils.hexValue(chainId) },\n ]);\n }\n};\n\nif (etherProviderEnabled) {\n Ethers.provider()\n .send(\"eth_chainId\", [])\n .then((chainId) => {\n chainId = parseInt(chainId, 16);\n if (state.chainId !== chainId) {\n console.log(\"Set chainId\", chainId);\n State.update({ chainId });\n }\n });\n\n Ethers.provider()\n .send(\"eth_requestAccounts\", [])\n .then((accounts) => {\n if (accounts.length && state.sender !== accounts[0]) {\n console.log(\"Set sender\", accounts[0]);\n State.update({ sender: accounts[0] });\n }\n });\n}\n\nif (!state.sender) {\n return (\n <div class=\"mb-3\">\n <Web3Connect connectLabel=\"Connect Web3 Wallet to continue\" />\n </div>\n );\n}\n\nconst stripHexPrefix = (input) => {\n if (input.indexOf(\"0x\") === 0) {\n return input.slice(2);\n }\n\n return input;\n};\n\nconst exportMnemonicAndPrivateKey = (entropy, path) => {\n const mnemonic = ethers.utils.entropyToMnemonic(entropy);\n // console.log(\"mnemonic\", mnemonic);\n const seed = ethers.utils.mnemonicToSeed(mnemonic);\n const hdNode = ethers.utils.HDNode.fromSeed(seed);\n\n return {\n mnemonic,\n privateKey: hdNode.privateKey,\n publicKey: hdNode.publicKey,\n };\n};\n\nconst deriveHDKeyFromEthereumSignature = (signature) => {\n const buffer = Buffer.from(stripHexPrefix(signature), \"hex\");\n\n if (buffer.length !== 65) {\n throw new Error(\"Signature must be 65 bytes\");\n }\n\n // Remove the 'v' value by taking only the first 64 bytes of the signature\n const rsValues = buffer.subarray(0, 64);\n // Hash the 'r' and 's' values down to 32 bytes (256 bits) using Keccak-256\n const entropy = ethers.utils.keccak256(rsValues);\n\n return exportMnemonicAndPrivateKey(entropy);\n};\n\nlet wallet;\n\nconst getWalletFromEvmSignature = (signature) => {\n console.log(signature);\n const { mnemonic, privateKey, publicKey } =\n deriveHDKeyFromEthereumSignature(signature);\n\n DirectSecp256k1HdWallet.fromMnemonic(mnemonic, {\n prefix: \"dydx\",\n }).then((_wallet) => {\n wallet = new DirectSecp256k1HdWallet(mnemonic, {\n prefix: \"dydx\",\n seed: _wallet.seed,\n });\n console.log(\"derrived wallet\", wallet);\n\n wallet\n .getAccounts()\n .then(([dydx_account]) => {\n console.log(\"dYdX account derived\", dydx_account);\n State.update({\n dydx_account: dydx_account.address,\n wallet: wallet,\n mnemonic,\n });\n updateOrders();\n })\n .catch((err) =>\n State.update({ is_loading: false, error_msg: JSON.stringify(err) })\n );\n });\n};\n\n// console.log(\"state wallet\", state.wallet);\n\nconst apiUrl = \"https://indexer.v4testnet.dydx.exchange/v4\";\nconst accountId = state.dydx_account;\nconst headers = {\n Accept: \"application/json\",\n};\n\nconst fundAccount = () => {\n faucetDydx(state.dydx_account, 0)\n .then((r) => {\n if (!r.ok) {\n State.update({\n error_msg: JSON.stringify(r),\n });\n } else {\n console.log(\"fundAccount\", r);\n loadAccount();\n }\n })\n .catch((ex) =>\n State.update({\n error_msg: `${state.error_msg}. Error: ${JSON.stringify(ex)}`,\n })\n );\n};\n\nconst loadAccount = () => {\n if (accountId) {\n asyncFetch(`${apiUrl}/addresses/${accountId}`, { headers })\n .then((status) => {\n if (status.ok) {\n State.update({\n account: status?.body?.subaccounts[0],\n all_accounts: status?.body,\n });\n } else {\n State.update({\n error_msg: \"Account not found. Trying to run faucet\",\n });\n fundAccount();\n }\n })\n .catch((err) => {\n console.log(\"err\", err);\n State.update({ error_msg: JSON.stringify(err) });\n });\n }\n};\n\nconst loadOrders = () => {\n if (accountId) {\n asyncFetch(\n `${apiUrl}/orders?address=${accountId}&subaccountNumber=0&limit=100`,\n {\n headers,\n }\n )\n .then((r) => {\n console.log(\"orders num\", r?.body.length);\n State.update({ orders: r?.body });\n })\n .catch((err) => State.update({ error_msg: JSON.stringify(err) }));\n }\n};\n\nfunction getRandomClientId() {\n let min = 1000000;\n let max = 99999999;\n return Math.floor(Math.random() * (max - min + 1)) + min;\n}\n\nconst updateMarketPrice = () => {\n if (state.dydx_account && state.orderMarketId) {\n const url = `https://indexer.v4testnet.dydx.exchange/v4/perpetualMarkets?ticker=${state.orderMarketId}`;\n let data = fetch(url);\n if (data.ok) {\n let price = data?.body?.markets?.[state.orderMarketId]?.oraclePrice;\n if (price) {\n State.update({ orderPrice: price });\n if (state.userOrderPrice === undefined) {\n State.update({ userOrderPrice: price });\n }\n }\n }\n }\n};\n\nlet tokenImage =\n \"https://plum-dear-manatee-739.mypinata.cloud/ipfs/Qme6bjSGWP8vjXqrXgbjHCNSwrc16cPYTREbo9aL2Uuuok\";\nif (state.orderMarketId == \"BTC-USD\") {\n tokenImage =\n \"https://assets.coingecko.com/coins/images/1/standard/bitcoin.png\";\n}\n\nconst getNetwork = () => {\n let network_config = {\n env: \"dydx-testnet-4\",\n indexerConfig: {\n restEndpoint: \"https://indexer.v4testnet.dydx.exchange\",\n websocketEndpoint: \"wss://indexer.v4testnet.dydx.exchange\",\n },\n validatorConfig: {\n restEndpoint: \"https://test-dydx.kingnodes.com\",\n chainId: \"dydx-testnet-4\",\n denoms: {\n USDC_DENOM:\n \"ibc/8E27BA2D5493AF5636760E354E46004562C46AB7EC0CC4C1CA14E9E20E2545B5\",\n USDC_DECIMALS: 6,\n USDC_GAS_DENOM: \"uusdc\",\n CHAINTOKEN_DENOM: \"adv4tnt\",\n CHAINTOKEN_DECIMALS: 18,\n },\n broadcastOptions: {\n broadcastPollIntervalMs: 3000,\n broadcastTimeoutMs: 60000,\n },\n },\n };\n\n return new Network(\n network_config.env,\n network_config.indexerConfig,\n network_config.validatorConfig\n );\n};\n\nconst cancelUserOrder = (clientId, orderFlags, marketId) => {\n State.update({ is_loading: true, error_msg: \"\" });\n let params = {\n clientId,\n orderFlags,\n marketId,\n goodTilBlock: 0,\n goodTilTimeInSeconds: 999999,\n };\n\n cancelDydxOrder(getNetwork(), state.mnemonic, \"dydx\", 0, params)\n .then((cancelOrderResp) => {\n console.log(\"cancelOrderResp resp \", cancelOrderResp);\n State.update({ is_loading: false });\n updateOrders();\n })\n .catch((err) => State.update({ error_msg: JSON.stringify(err) }));\n};\n\nconst placeUserOrder = (side) => {\n State.update({ is_loading: true, error_msg: \"\" });\n\n if (!state.orderMarketId || !state.orderSize || !state.orderType) {\n State.update({ is_loading: false, error_msg: \"NO DATA\" });\n return;\n }\n\n if (!state.orderPrice && type == \"LIMIT\") {\n State.update({ is_loading: false, error_msg: \"NO PRICE FOR LIMIT ORDER\" });\n return;\n }\n\n let marketId = state.orderMarketId;\n let type = state.orderType;\n let price = Number(state.userOrderPrice);\n let size = Number(state.orderSize);\n let clientId = getRandomClientId();\n let timeInForce = \"GTT\";\n let execution = \"DEFAULT\";\n let postOnly = false;\n let reduceOnly = false;\n\n let params = {\n marketId,\n type,\n side,\n price,\n size,\n clientId,\n timeInForce,\n goodTilTimeInSeconds: 999999,\n execution,\n postOnly,\n reduceOnly,\n triggerPrice: price,\n };\n\n console.log(params);\n\n if (type == \"MARKET\") {\n getDydxLatestBlockHeight(getNetwork()).then((latestBlockHeight) => {\n console.log(\"latestBlockHeight\", latestBlockHeight);\n params.goodTilBlock = latestBlockHeight + 11;\n placeDydxShortOrder(getNetwork(), state.mnemonic, \"dydx\", 0, params)\n .then((placeOrderResp) => {\n console.log(\"placeDydxShortOrder resp \", placeOrderResp);\n State.update({ is_loading: false, error_msg: \"\" });\n updateOrders();\n })\n .catch((err) =>\n State.update({ is_loading: false, error_msg: JSON.stringify(err) })\n );\n });\n } else {\n placeDydxOrder(getNetwork(), state.mnemonic, \"dydx\", 0, params)\n .then((placeOrderResp) => {\n console.log(\"placeOrder resp \", placeOrderResp);\n State.update({ is_loading: false, error_msg: \"\" });\n updateOrders();\n })\n .catch((err) =>\n State.update({ is_loading: false, error_msg: JSON.stringify(err) })\n );\n }\n};\n\nconst isOrderOpen = () => [orderOpen].includes(state.orderFilter);\nconst isOrderFilled = () => [orderFilled].includes(state.orderFilter);\nconst isOrderCancelled = () => [orderCancelled].includes(state.orderFilter);\nconst isOrderPending = () => [orderPending].includes(state.orderFilter);\n\nconst SignInWithMetamask = () => {\n const toSign = {\n domain: {\n name: \"dYdX V4\",\n chainId: defaultChainId,\n },\n primaryType: \"dYdX\",\n types: {\n dYdX: [{ name: \"action\", type: \"string\" }],\n },\n message: {\n action: \"dYdX Chain Onboarding\",\n },\n };\n\n /*return getWalletFromEvmSignature(\n \"0x7eb5d09152acb9662b30d9bceb6e2142d5876439cbc9983df598c364b48f7eb76d41fc70436d93ad4875d307c891d104a3e8e33d23c17d041af4e0bb1057b6031c\"\n );*/\n\n Ethers.provider()\n .getSigner()\n ._signTypedData(toSign.domain, { dYdX: toSign.types.dYdX }, toSign.message)\n .then((signature) => getWalletFromEvmSignature(signature));\n};\n\nif (state.dydx_account == undefined && state.chainId == defaultChainId) {\n SignInWithMetamask();\n} else {\n if (!!state.chainId && state.chainId !== defaultChainId) {\n return (\n <div>\n <div>{`Please switch to chainId ${defaultChainId}`}</div>\n <div>\n <button onClick={() => switchNetwork(defaultChainId)}>Switch</button>\n </div>\n </div>\n );\n }\n\n useEffect(() => {\n loadAccount();\n }, [state.account]);\n\n useEffect(() => {\n loadOrders();\n updateMarketPrice();\n }, [state.nonce]);\n\n /*if (state?.account?.address) {\n getDydxAccountBalances(getNetwork(), state?.account?.address).then(\n (data) => {\n console.log(\"getDydxAccountBalances\", data);\n }\n );\n }*/\n\n return (\n <Theme class=\"mb-5\">\n {state.error_msg && (\n <div class=\"alert alert-primary\" role=\"alert\">\n {state.error_msg}\n </div>\n )}\n\n {state.is_loading && (\n <div class=\"alert alert-primary\" role=\"alert\">\n LOADING...\n </div>\n )}\n\n <div class=\"dydx-component-not\">\n <div class=\"container-wrapper\">\n <div class=\"container\">\n <div class=\"header\">\n <img\n class=\"dydx\"\n src=\"https://plum-dear-manatee-739.mypinata.cloud/ipfs/QmStvRnpZbR1xxHgduM3diTswqgM9w4WtTJHYt4aN25ukL\"\n />\n <div class=\"dydx-account\">{state.dydx_account}</div>\n <div class=\"balance\">\n <div class=\"collateral\">\n <div class=\"text-wrapper\">Equity</div>\n <div class=\"div\">\n ${Number(state.account.equity).toLocaleString()}\n </div>\n </div>\n <div class=\"collateral\">\n <div class=\"text-wrapper\">Free collateral</div>\n <div class=\"div\">\n ${Number(state.account.freeCollateral).toLocaleString()}\n </div>\n </div>\n <div class=\"collateral\">\n <div class=\"text-wrapper\">{state.orderMarketId}</div>\n <div class=\"div\">\n ${Number(state.orderPrice).toLocaleString()}\n </div>\n </div>\n </div>\n </div>\n <div class=\"content\">\n <div class=\"component\">\n <div class=\"heading\">\n <img\n class=\"img\"\n src=\"https://plum-dear-manatee-739.mypinata.cloud/ipfs/QmbEJL2wNjLQ948Sa6fwvoidRWVWULeaXJsFYpNZ9qG9Kh\"\n />\n <div class=\"title\">Place Order {state.orderMarketId}</div>\n <div class=\"tab\">\n <div\n class={\n state.orderType == \"LIMIT\"\n ? \"active-type\"\n : \"inactive-type\"\n }\n onClick={(e) => State.update({ orderType: \"LIMIT\" })}\n >\n <div class=\"text-wrapper-2\">Limit</div>\n </div>\n <div\n class={\n state.orderType == \"MARKET\"\n ? \"active-type\"\n : \"inactive-type\"\n }\n onClick={(e) => State.update({ orderType: \"MARKET\" })}\n >\n <div class=\"text-wrapper-3\">Market</div>\n </div>\n </div>\n </div>\n <div class=\"inputs\">\n <div class=\"div-2\">\n <div class=\"token-label\">\n <img class=\"img\" src={tokenImage} />\n <div class=\"text-wrapper-4\">Amount</div>\n </div>\n <div class=\"amount\">\n <input\n type=\"text\"\n class=\"text-wrapper-5 dark-bg input-textbox\"\n id=\"orderSize\"\n value={state.orderSize}\n onChange={(e) =>\n State.update({ orderSize: e.target.value })\n }\n />\n </div>\n </div>\n\n {state.orderType == \"LIMIT\" && (\n <div class=\"div-2\">\n <div class=\"token-label\">\n <div class=\"img\" />\n <div class=\"text-wrapper-4\">Price</div>\n </div>\n <div class=\"amount\">\n <input\n type=\"text\"\n class=\"text-wrapper-5 dark-bg input-textbox\"\n id=\"orderSize\"\n value={state.userOrderPrice}\n onChange={(e) =>\n State.update({ userOrderPrice: e.target.value })\n }\n />\n </div>\n </div>\n )}\n\n <div class=\"div-2\">\n <div class=\"token-label\">\n <div class=\"token\">\n <div class=\"text-wrapper-6\">$</div>\n </div>\n <div class=\"text-wrapper-4\">USD</div>\n </div>\n <div class=\"amount\">\n <div class=\"text-wrapper-5\">\n $\n {(\n Number(state.userOrderPrice ?? 0) *\n Number(state.orderSize ?? 0)\n ).toLocaleString()}\n </div>\n </div>\n </div>\n </div>\n <div class=\"summary\">\n <div class=\"div-3\">\n <div class=\"text-wrapper-7\">Market price</div>\n <div\n class=\"text-wrapper-8\"\n style={{ cursor: \"pointer\" }}\n onClick={() =>\n State.update({ userOrderPrice: state.orderPrice })\n }\n >\n ${state.orderPrice}\n </div>\n </div>\n </div>\n <div class=\"CTA\">\n <div class=\"buy\">\n <div\n class=\"text-wrapper-12\"\n onClick={() => placeUserOrder(\"BUY\")}\n >\n Buy\n </div>\n </div>\n <div class=\"sell\">\n <div\n class=\"text-wrapper-12\"\n onClick={() => placeUserOrder(\"SELL\")}\n >\n Sell\n </div>\n </div>\n </div>\n </div>\n <div class=\"orders-log\">\n <div class=\"heading\">\n <img\n class=\"img\"\n src=\"https://plum-dear-manatee-739.mypinata.cloud/ipfs/QmbEJL2wNjLQ948Sa6fwvoidRWVWULeaXJsFYpNZ9qG9Kh\"\n />\n <div class=\"title\">\n Orders log{\" \"}\n <select\n aria-label=\"Select a pair\"\n onChange={(e) => {\n State.update({\n orderMarketId: e.target.value,\n });\n updateOrders();\n }}\n >\n <option value=\"BTC-USD\">BTC-USD</option>\n <option value=\"ETH-USD\" selected>\n ETH-USD\n </option>\n </select>\n </div>\n <div class=\"refresh\">\n <div\n class=\"text-wrapper-3 btn-refresh\"\n onClick={() => {\n updateOrders();\n }}\n >\n Refresh\n </div>\n </div>\n </div>\n\n <div class=\"order-tabs\">\n <ul class=\"nav nav-tabs\">\n <li class=\"nav-item\">\n <a\n class={`nav-link ${isOrderOpen() ? \"active\" : \"\"}`}\n onClick={() => State.update({ orderFilter: orderOpen })}\n aria-current=\"page\"\n href=\"#\"\n >\n Open\n </a>\n </li>\n <li class=\"nav-item\">\n <a\n class={`nav-link ${isOrderFilled() ? \"active\" : \"\"}`}\n onClick={() =>\n State.update({ orderFilter: orderFilled })\n }\n href=\"#\"\n >\n Filled\n </a>\n </li>\n <li class=\"nav-item\">\n <a\n class={`nav-link ${isOrderCancelled() ? \"active\" : \"\"}`}\n onClick={() =>\n State.update({ orderFilter: orderCancelled })\n }\n href=\"#\"\n >\n Canceled\n </a>\n </li>\n <li class=\"nav-item\">\n <a\n class={`nav-link ${isOrderPending() ? \"active\" : \"\"}`}\n onClick={() =>\n State.update({ orderFilter: orderPending })\n }\n href=\"#\"\n >\n Pending\n </a>\n </li>\n </ul>\n </div>\n\n <div class=\"transactions\">\n {(state.orders ?? []).length == 0 && (\n <div class=\"text-wrapper-10\">No transactions yet</div>\n )}\n {(state.orders ?? [])\n .filter((order) => {\n if (isOrderPending()) {\n return (\n !(\n order.status == orderCancelled ||\n order.status == orderFilled ||\n order.status == orderOpen\n ) &&\n order.ticker.toLowerCase() ==\n state.orderMarketId.toLowerCase()\n );\n } else {\n return (\n [state.orderFilter].includes(order.status) &&\n order.ticker.toLowerCase() ==\n state.orderMarketId.toLowerCase()\n );\n }\n })\n .sort((a, b) => {\n return b.updatedAtHeight - a.updatedAtHeight;\n })\n .map((order) => (\n <div class=\"transaction\">\n <div class=\"pair\">\n <div\n class={`order-log-${order.side.toLowerCase()}-wrapper`}\n >\n <div\n class={`order-log-${order.side.toLowerCase()}`}\n title={order.status}\n >\n {order.side}\n </div>\n </div>\n <div class=\"text-wrapper-14\" title={order.status}>\n {order.ticker}\n </div>\n </div>\n <div class=\"p\">\n <span class=\"span\">at</span>{\" \"}\n <span class=\"text-wrapper-15\"> ${order.price}</span>\n </div>\n <div class=\"p\">\n <span class=\"span\">size</span>\n <span class=\"text-wrapper-15\"> {order.size} </span>\n <span class=\"span\">/ filled</span>\n <span class=\"text-wrapper-15\">\n {\" \"}\n {order.totalFilled}\n </span>\n </div>\n <div class=\"time\">\n {order.updatedAt\n ? new Date(order.updatedAt).toLocaleString()\n : \"\"}\n </div>\n\n {order.status == \"OPEN\" && (\n <div class=\"cancel\">\n <div\n type=\"button\"\n class=\"text-wrapper-2\"\n aria-label=\"Close\"\n onClick={() => {\n cancelUserOrder(\n order.clientId,\n 64,\n order.ticker\n );\n }}\n >\n Cancel\n </div>\n </div>\n )}\n {order.status != \"OPEN\" && (\n <div class=\"empty-cancel\">\n <div class=\"text-wrapper-2\"></div>\n </div>\n )}\n </div>\n ))}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n {/*JSON.stringify(state.orders)*/}\n </Theme>\n );\n}\n\nreturn (\n <>\n <h1>DyDx v4</h1>\n <h4>Sign message with Metamask to sign in</h4>\n <button onClick={() => SignInWithMetamask()}>Sign In</button>\n <hr />\n <div>Your Ethereum Account: {state.sender}</div>\n <Web3Connect connectLabel=\"Connect Web3 Wallet to continue\" />\n </>\n);\n" } } } } }