| 6 | "": "const troveManageABI = [\\\\n {\\\\n inputs: [\\\\n { internalType: \\\\\\\"address\\\\\\\", name: \\\\\\\"_borrower\\\\\\\", type: \\\\\\\"address\\\\\\\" },\\\\n { internalType: \\\\\\\"uint256\\\\\\\", name: \\\\\\\"_price\\\\\\\", type: \\\\\\\"uint256\\\\\\\" },\\\\n ],\\\\n name: \\\\\\\"getCurrentICR\\\\\\\",\\\\n outputs: [{ internalType: \\\\\\\"uint256\\\\\\\", name: \\\\\\\"\\\\\\\", type: \\\\\\\"uint256\\\\\\\" }],\\\\n stateMutability: \\\\\\\"view\\\\\\\",\\\\n type: \\\\\\\"function\\\\\\\",\\\\n },\\\\n {\\\\n inputs: [{ internalType: \\\\\\\"address\\\\\\\", name: \\\\\\\"_borrower\\\\\\\", type: \\\\\\\"address\\\\\\\" }],\\\\n name: \\\\\\\"getTroveColl\\\\\\\",\\\\n outputs: [{ internalType: \\\\\\\"uint256\\\\\\\", name: \\\\\\\"\\\\\\\", type: \\\\\\\"uint256\\\\\\\" }],\\\\n stateMutability: \\\\\\\"view\\\\\\\",\\\\n type: \\\\\\\"function\\\\\\\",\\\\n },\\\\n {\\\\n inputs: [{ internalType: \\\\\\\"address\\\\\\\", name: \\\\\\\"_borrower\\\\\\\", type: \\\\\\\"address\\\\\\\" }],\\\\n name: \\\\\\\"getTroveDebt\\\\\\\",\\\\n outputs: [{ internalType: \\\\\\\"uint256\\\\\\\", name: \\\\\\\"\\\\\\\", type: \\\\\\\"uint256\\\\\\\" }],\\\\n stateMutability: \\\\\\\"view\\\\\\\",\\\\n type: \\\\\\\"function\\\\\\\",\\\\n },\\\\n {\\\\n inputs: [{ internalType: \\\\\\\"uint256\\\\\\\", name: \\\\\\\"_price\\\\\\\", type: \\\\\\\"uint256\\\\\\\" }],\\\\n name: \\\\\\\"getTCR\\\\\\\",\\\\n outputs: [{ internalType: \\\\\\\"uint256\\\\\\\", name: \\\\\\\"\\\\\\\", type: \\\\\\\"uint256\\\\\\\" }],\\\\n stateMutability: \\\\\\\"view\\\\\\\",\\\\n type: \\\\\\\"function\\\\\\\",\\\\n },\\\\n {\\\\n inputs: [{ internalType: \\\\\\\"uint256\\\\\\\", name: \\\\\\\"_LUSDDebt\\\\\\\", type: \\\\\\\"uint256\\\\\\\" }],\\\\n name: \\\\\\\"getBorrowingFeeWithDecay\\\\\\\",\\\\n outputs: [{ internalType: \\\\\\\"uint256\\\\\\\", name: \\\\\\\"\\\\\\\", type: \\\\\\\"uint256\\\\\\\" }],\\\\n stateMutability: \\\\\\\"view\\\\\\\",\\\\n type: \\\\\\\"function\\\\\\\",\\\\n },\\\\n {\\\\n inputs: [],\\\\n name: \\\\\\\"getBorrowingRateWithDecay\\\\\\\",\\\\n outputs: [{ internalType: \\\\\\\"uint256\\\\\\\", name: \\\\\\\"\\\\\\\", type: \\\\\\\"uint256\\\\\\\" }],\\\\n stateMutability: \\\\\\\"view\\\\\\\",\\\\n type: \\\\\\\"function\\\\\\\",\\\\n },\\\\n];\\\\nconst priceFeedABI = [\\\\n {\\\\n inputs: [],\\\\n name: \\\\\\\"lastGoodPrice\\\\\\\",\\\\n outputs: [{ internalType: \\\\\\\"uint256\\\\\\\", name: \\\\\\\"\\\\\\\", type: \\\\\\\"uint256\\\\\\\" }],\\\\n stateMutability: \\\\\\\"view\\\\\\\",\\\\n type: \\\\\\\"function\\\\\\\",\\\\n },\\\\n];\\\\nconst borrowerOperationsABI = [\\\\n {\\\\n inputs: [\\\\n { internalType: \\\\\\\"address\\\\\\\", name: \\\\\\\"_upperHint\\\\\\\", type: \\\\\\\"address\\\\\\\" },\\\\n { internalType: \\\\\\\"address\\\\\\\", name: \\\\\\\"_lowerHint\\\\\\\", type: \\\\\\\"address\\\\\\\" },\\\\n ],\\\\n name: \\\\\\\"addColl\\\\\\\",\\\\n outputs: [],\\\\n stateMutability: \\\\\\\"payable\\\\\\\",\\\\n type: \\\\\\\"function\\\\\\\",\\\\n },\\\\n {\\\\n inputs: [\\\\n { internalType: \\\\\\\"uint256\\\\\\\", name: \\\\\\\"_collWithdrawal\\\\\\\", type: \\\\\\\"uint256\\\\\\\" },\\\\n { internalType: \\\\\\\"address\\\\\\\", name: \\\\\\\"_upperHint\\\\\\\", type: \\\\\\\"address\\\\\\\" },\\\\n { internalType: \\\\\\\"address\\\\\\\", name: \\\\\\\"_lowerHint\\\\\\\", type: \\\\\\\"address\\\\\\\" },\\\\n ],\\\\n name: \\\\\\\"withdrawColl\\\\\\\",\\\\n outputs: [],\\\\n stateMutability: \\\\\\\"nonpayable\\\\\\\",\\\\n type: \\\\\\\"function\\\\\\\",\\\\n },\\\\n {\\\\n inputs: [\\\\n { internalType: \\\\\\\"uint256\\\\\\\", name: \\\\\\\"_LUSDAmount\\\\\\\", type: \\\\\\\"uint256\\\\\\\" },\\\\n { internalType: \\\\\\\"address\\\\\\\", name: \\\\\\\"_upperHint\\\\\\\", type: \\\\\\\"address\\\\\\\" },\\\\n { internalType: \\\\\\\"address\\\\\\\", name: \\\\\\\"_lowerHint\\\\\\\", type: \\\\\\\"address\\\\\\\" },\\\\n ],\\\\n name: \\\\\\\"repayLUSD\\\\\\\",\\\\n outputs: [],\\\\n stateMutability: \\\\\\\"nonpayable\\\\\\\",\\\\n type: \\\\\\\"function\\\\\\\",\\\\n },\\\\n {\\\\n inputs: [\\\\n { internalType: \\\\\\\"uint256\\\\\\\", name: \\\\\\\"_maxFeePercentage\\\\\\\", type: \\\\\\\"uint256\\\\\\\" },\\\\n { internalType: \\\\\\\"uint256\\\\\\\", name: \\\\\\\"_LUSDAmount\\\\\\\", type: \\\\\\\"uint256\\\\\\\" },\\\\n { internalType: \\\\\\\"address\\\\\\\", name: \\\\\\\"_upperHint\\\\\\\", type: \\\\\\\"address\\\\\\\" },\\\\n { internalType: \\\\\\\"address\\\\\\\", name: \\\\\\\"_lowerHint\\\\\\\", type: \\\\\\\"address\\\\\\\" },\\\\n ],\\\\n name: \\\\\\\"withdrawLUSD\\\\\\\",\\\\n outputs: [],\\\\n stateMutability: \\\\\\\"nonpayable\\\\\\\",\\\\n type: \\\\\\\"function\\\\\\\",\\\\n },\\\\n];\\\\nconst sortedTrovesABI = [\\\\n {\\\\n inputs: [],\\\\n name: \\\\\\\"getSize\\\\\\\",\\\\n outputs: [{ internalType: \\\\\\\"uint256\\\\\\\", name: \\\\\\\"\\\\\\\", type: \\\\\\\"uint256\\\\\\\" }],\\\\n stateMutability: \\\\\\\"view\\\\\\\",\\\\n type: \\\\\\\"function\\\\\\\",\\\\n },\\\\n {\\\\n inputs: [\\\\n { internalType: \\\\\\\"uint256\\\\\\\", name: \\\\\\\"_NICR\\\\\\\", type: \\\\\\\"uint256\\\\\\\" },\\\\n { internalType: \\\\\\\"address\\\\\\\", name: \\\\\\\"_prevId\\\\\\\", type: \\\\\\\"address\\\\\\\" },\\\\n { internalType: \\\\\\\"address\\\\\\\", name: \\\\\\\"_nextId\\\\\\\", type: \\\\\\\"address\\\\\\\" },\\\\n ],\\\\n name: \\\\\\\"findInsertPosition\\\\\\\",\\\\n outputs: [\\\\n { internalType: \\\\\\\"address\\\\\\\", name: \\\\\\\"\\\\\\\", type: \\\\\\\"address\\\\\\\" },\\\\n { internalType: \\\\\\\"address\\\\\\\", name: \\\\\\\"\\\\\\\", type: \\\\\\\"address\\\\\\\" },\\\\n ],\\\\n stateMutability: \\\\\\\"view\\\\\\\",\\\\n type: \\\\\\\"function\\\\\\\",\\\\n },\\\\n];\\\\nconst hintHelpersABI = [\\\\n {\\\\n inputs: [\\\\n { internalType: \\\\\\\"uint256\\\\\\\", name: \\\\\\\"_CR\\\\\\\", type: \\\\\\\"uint256\\\\\\\" },\\\\n { internalType: \\\\\\\"uint256\\\\\\\", name: \\\\\\\"_numTrials\\\\\\\", type: \\\\\\\"uint256\\\\\\\" },\\\\n { internalType: \\\\\\\"uint256\\\\\\\", name: \\\\\\\"_inputRandomSeed\\\\\\\", type: \\\\\\\"uint256\\\\\\\" },\\\\n ],\\\\n name: \\\\\\\"getApproxHint\\\\\\\",\\\\n outputs: [\\\\n { internalType: \\\\\\\"address\\\\\\\", name: \\\\\\\"hintAddress\\\\\\\", type: \\\\\\\"address\\\\\\\" },\\\\n { internalType: \\\\\\\"uint256\\\\\\\", name: \\\\\\\"diff\\\\\\\", type: \\\\\\\"uint256\\\\\\\" },\\\\n { internalType: \\\\\\\"uint256\\\\\\\", name: \\\\\\\"latestRandomSeed\\\\\\\", type: \\\\\\\"uint256\\\\\\\" },\\\\n ],\\\\n stateMutability: \\\\\\\"view\\\\\\\",\\\\n type: \\\\\\\"function\\\\\\\",\\\\n },\\\\n];\\\\n\\\\nconst ManageWrapper = styled.div`\\\\n width: 100%;\\\\n display: flex;\\\\n flex-direction: column;\\\\n align-items: center;\\\\n\\\\n .option-wrapper {\\\\n width: 100%;\\\\n height: 2rem;\\\\n }\\\\n .option {\\\\n height: 100%;\\\\n border-radius: 10px;\\\\n padding: 0 1rem 0 1rem;\\\\n }\\\\n .input-wrapper {\\\\n display: flex;\\\\n width: 100%;\\\\n border: rgb(220, 220, 220) 1px solid;\\\\n margin: 0.5rem;\\\\n border-radius: 10px;\\\\n overflow: hidden;\\\\n }\\\\n .token-wrapper {\\\\n display: flex;\\\\n }\\\\n .token {\\\\n padding: 0 0.5rem 0 0.5rem;\\\\n }\\\\n .error-message {\\\\n }\\\\n .confirm-wrapper {\\\\n width: 100%;\\\\n display: flex;\\\\n justify-content: center;\\\\n }\\\\n .confirm {\\\\n border: none;\\\\n border-radius: 1000px;\\\\n width: 75%;\\\\n height: 2rem;\\\\n transition: 0.5s all;\\\\n font-size: 1.1rem;\\\\n font-weight: 600;\\\\n display: flex;\\\\n align-items: center;\\\\n justify-content: center;\\\\n &.ok {\\\\n background-color: #3a0ca3;\\\\n color: white;\\\\n }\\\\n &.not-ok {\\\\n background-color: #8e9aaf;\\\\n color: white;\\\\n }\\\\n }\\\\n .info-wrapper {\\\\n margin: 2rem 0 2rem 0;\\\\n width: 100%;\\\\n div {\\\\n height: 1.75rem;\\\\n display: flex;\\\\n align-items: center;\\\\n }\\\\n span {\\\\n }\\\\n }\\\\n .info {\\\\n width: 100%;\\\\n display: flex;\\\\n justify-content: space-between;\\\\n color: #8e9aaf;\\\\n // color: black;\\\\n }\\\\n .after {\\\\n // transition: 0.5s all;\\\\n font-weight: 500;\\\\n margin: 0 0 0 0.5rem;\\\\n &.ok {\\\\n color: green;\\\\n }\\\\n &.not-ok {\\\\n color: red;\\\\n }\\\\n }\\\\n .current-info {\\\\n }\\\\n .unit {\\\\n margin-left: 0.5rem;\\\\n &.ok {\\\\n color: green;\\\\n }\\\\n &.not-ok {\\\\n color: red;\\\\n }\\\\n }\\\\n .connect-wallet {\\\\n background-color: #3a0ca3;\\\\n color: white;\\\\n border-radius: 1000px;\\\\n &:hover {\\\\n background-color: #3a0ca3;\\\\n color: white;\\\\n }\\\\n }\\\\n button {\\\\n border: none;\\\\n transition: 0.3s all;\\\\n &.active {\\\\n background-color: black;\\\\n color: white;\\\\n }\\\\n &.disabled {\\\\n background-color: rgb(240, 240, 240);\\\\n color: gray;\\\\n }\\\\n }\\\\n input {\\\\n border: none;\\\\n }\\\\n input:focus {\\\\n outline: none;\\\\n }\\\\n input[type=\\\\\\\"number\\\\\\\"]::-webkit-outer-spin-button,\\\\n input[type=\\\\\\\"number\\\\\\\"]::-webkit-inner-spin-button {\\\\n -webkit-appearance: none;\\\\n margin: 0;\\\\n }\\\\n`;\\\\n\\\\nState.init({\\\\n option: \\\\\\\"withdraw\\\\\\\",\\\\n token: \\\\\\\"ETH\\\\\\\",\\\\n address: null,\\\\n check: false,\\\\n value: \\\\\\\"\\\\\\\",\\\\n complete: false,\\\\n});\\\\nconst troveManageAddress = \\\\\\\"0xA39739EF8b0231DbFA0DcdA07d7e29faAbCf4bb2\\\\\\\";\\\\nconst priceFeedAddress = \\\\\\\"0x4c517D4e2C851CA76d7eC94B805269Df0f2201De\\\\\\\";\\\\nconst borrowerOperationsAddress = \\\\\\\"0x24179CD81c9e782A4096035f7eC97fB8B783e007\\\\\\\";\\\\nconst sortedTrovesAddress = \\\\\\\"0x8FdD3fbFEb32b28fb73555518f8b361bCeA741A6\\\\\\\";\\\\nconst hintHelpersAddress = \\\\\\\"0xE84251b93D9524E0d2e621Ba7dc7cb3579F997C0\\\\\\\";\\\\n\\\\nconst troveManageInterface = new ethers.utils.Interface(troveManageABI);\\\\nconst priceFeedInterface = new ethers.utils.Interface(priceFeedABI);\\\\nconst EPSILON = 2.2e-16;\\\\n\\\\nconst infoHandler = () => {\\\\n Ethers.provider()\\\\n .getNetwork()\\\\n .then((chainIdData) => {\\\\n if (chainIdData?.chainId) {\\\\n State.update({ chainId: chainIdData.chainId });\\\\n }\\\\n });\\\\n\\\\n // get ethereum price\\\\n const encodedForPrice = priceFeedInterface.encodeFunctionData(\\\\n \\\\\\\"lastGoodPrice\\\\\\\",\\\\n []\\\\n );\\\\n Ethers.provider()\\\\n .call({\\\\n to: priceFeedAddress,\\\\n data: encodedForPrice,\\\\n })\\\\n .then((raw) => {\\\\n const receiverBalanceHex = priceFeedInterface.decodeFunctionResult(\\\\n \\\\\\\"lastGoodPrice\\\\\\\",\\\\n raw\\\\n );\\\\n const result = receiverBalanceHex[0].div(\\\\\\\"1000000000000000000\\\\\\\");\\\\n State.update({\\\\n currentPrice: result.toString(),\\\\n currentPriceRaw: receiverBalanceHex[0].toString(),\\\\n });\\\\n });\\\\n // get ICR\\\\n const encodedForICR = troveManageInterface.encodeFunctionData(\\\\n \\\\\\\"getCurrentICR\\\\\\\",\\\\n [state.address, state.currentPriceRaw || \\\\\\\"2000000000000000000000\\\\\\\"]\\\\n );\\\\n Ethers.provider()\\\\n .call({\\\\n to: troveManageAddress,\\\\n data: encodedForICR,\\\\n })\\\\n .then((raw) => {\\\\n const receiverBalanceHex = troveManageInterface.decodeFunctionResult(\\\\n \\\\\\\"getCurrentICR\\\\\\\",\\\\n raw\\\\n );\\\\n const result = receiverBalanceHex[0].div(\\\\\\\"10000000000000000\\\\\\\");\\\\n State.update({\\\\n currentICR: (Number(result.toString()) / 100).toString(),\\\\n });\\\\n });\\\\n\\\\n // get collateral\\\\n const encodedForColl = troveManageInterface.encodeFunctionData(\\\\n \\\\\\\"getTroveColl\\\\\\\",\\\\n [state.address]\\\\n );\\\\n Ethers.provider()\\\\n .call({\\\\n to: troveManageAddress,\\\\n data: encodedForColl,\\\\n })\\\\n .then((raw) => {\\\\n const receiverBalanceHex = troveManageInterface.decodeFunctionResult(\\\\n \\\\\\\"getTroveColl\\\\\\\",\\\\n raw\\\\n );\\\\n State.update({\\\\n currentColl: ethers.utils\\\\n .formatEther(receiverBalanceHex[0].toString())\\\\n .toString(),\\\\n });\\\\n });\\\\n\\\\n // get debt\\\\n const encodedForDebt = troveManageInterface.encodeFunctionData(\\\\n \\\\\\\"getTroveDebt\\\\\\\",\\\\n [state.address]\\\\n );\\\\n Ethers.provider()\\\\n .call({\\\\n to: troveManageAddress,\\\\n data: encodedForDebt,\\\\n })\\\\n .then((raw) => {\\\\n const receiverBalanceHex = troveManageInterface.decodeFunctionResult(\\\\n \\\\\\\"getTroveDebt\\\\\\\",\\\\n raw\\\\n );\\\\n const result = receiverBalanceHex[0].div(\\\\\\\"1000000000000000000\\\\\\\");\\\\n State.update({ currentDebt: result.toString() });\\\\n });\\\\n\\\\n // get TCR\\\\n const encodedForTCR = troveManageInterface.encodeFunctionData(\\\\\\\"getTCR\\\\\\\", [\\\\n state.currentPriceRaw || \\\\\\\"2000000000000000000\\\\\\\",\\\\n ]);\\\\n Ethers.provider()\\\\n .call({\\\\n to: troveManageAddress,\\\\n data: encodedForTCR,\\\\n })\\\\n .then((raw) => {\\\\n const receiverBalanceHex = troveManageInterface.decodeFunctionResult(\\\\n \\\\\\\"getTCR\\\\\\\",\\\\n raw\\\\n );\\\\n const result = receiverBalanceHex[0].div(\\\\\\\"10000000000000000\\\\\\\");\\\\n State.update({ tcr: result.toString() });\\\\n });\\\\n};\\\\nconst checkFunc = () => {\\\\n const tcr = Number(state.tcr);\\\\n if (state.token === \\\\\\\"ETH\\\\\\\") {\\\\n if (!state.value) {\\\\n State.update({ check: false });\\\\n return;\\\\n }\\\\n if (\\\\n (tcr >= 150 && state.updatedICR < 1.1) ||\\\\n (tcr < 150 && state.updatedICR < 1.5) ||\\\\n (tcr < 150 && state.currentICR > state.updatedICR)\\\\n ) {\\\\n State.update({ check: false });\\\\n return;\\\\n }\\\\n } else if (state.token === \\\\\\\"LUSD\\\\\\\") {\\\\n if (!state.value) {\\\\n State.update({ check: false });\\\\n return;\\\\n }\\\\n if (\\\\n (tcr >= 150 && state.updatedICR < 1.1) ||\\\\n (tcr < 150 && state.updatedICR < 1.5) ||\\\\n (tcr < 150 && state.currentICR > state.updatedICR)\\\\n ) {\\\\n State.update({ check: false });\\\\n return;\\\\n }\\\\n if (state.updatedDebt < 2000) {\\\\n State.update({ check: false });\\\\n return;\\\\n }\\\\n }\\\\n State.update({ check: true });\\\\n};\\\\n\\\\nconst changeHandler = (e) => {\\\\n const value = e.target.value;\\\\n State.update({ value: e.target.value === 0 ? \\\\\\\"\\\\\\\" : e.target.value });\\\\n\\\\n // deposit-ETH\\\\n if (\\\\n state.option === \\\\\\\"deposit\\\\\\\" &&\\\\n state.token === \\\\\\\"ETH\\\\\\\" &&\\\\n state.currentDebt &&\\\\n state.currentDebt !== \\\\\\\"0\\\\\\\"\\\\n ) {\\\\n State.update({\\\\n updatedColl: Number(state.currentColl) + Number(value),\\\\n updatedICR:\\\\n e.target.value === \\\\\\\"\\\\\\\"\\\\n ? null\\\\n : Math.round(\\\\n (((Number(state.currentColl) + Number(value)) /\\\\n Number(state.currentDebt)) *\\\\n Number(state.currentPrice) +\\\\n EPSILON) *\\\\n 1000\\\\n ) / 1000,\\\\n });\\\\n }\\\\n // withdraw-ETH\\\\n else if (\\\\n state.option === \\\\\\\"withdraw\\\\\\\" &&\\\\n state.token === \\\\\\\"ETH\\\\\\\" &&\\\\n state.currentDebt &&\\\\n state.currentDebt !== \\\\\\\"0\\\\\\\"\\\\n ) {\\\\n State.update({\\\\n updatedColl: Number(state.currentColl) - Number(value),\\\\n updatedICR:\\\\n e.target.value === \\\\\\\"\\\\\\\"\\\\n ? null\\\\n : Math.round(\\\\n (((Number(state.currentColl) - Number(value)) /\\\\n Number(state.currentDebt)) *\\\\n Number(state.currentPrice) +\\\\n EPSILON) *\\\\n 1000\\\\n ) / 1000,\\\\n });\\\\n }\\\\n // deposit-LUSD\\\\n else if (\\\\n state.option === \\\\\\\"deposit\\\\\\\" &&\\\\n state.token === \\\\\\\"LUSD\\\\\\\" &&\\\\n state.currentDebt &&\\\\n state.currentDebt !== \\\\\\\"0\\\\\\\"\\\\n ) {\\\\n State.update({\\\\n updatedDebt: Number(state.currentDebt) - Number(value),\\\\n updatedICR:\\\\n e.target.value === \\\\\\\"\\\\\\\"\\\\n ? null\\\\n : Math.round(\\\\n ((Number(state.currentColl) /\\\\n (Number(state.currentDebt) - Number(value))) *\\\\n Number(state.currentPrice) +\\\\n EPSILON) *\\\\n 1000\\\\n ) / 1000,\\\\n });\\\\n }\\\\n // withdraw-LUSD\\\\n else if (\\\\n state.option === \\\\\\\"withdraw\\\\\\\" &&\\\\n state.token === \\\\\\\"LUSD\\\\\\\" &&\\\\n state.currentDebt &&\\\\n state.currentDebt !== \\\\\\\"0\\\\\\\"\\\\n ) {\\\\n const updateTemp = ethers.utils\\\\n .parseUnits(Number(value).toString(), \\\\\\\"ether\\\\\\\")\\\\n .toString();\\\\n const encodedForFeeRate = troveManageInterface.encodeFunctionData(\\\\n \\\\\\\"getBorrowingRateWithDecay\\\\\\\",\\\\n []\\\\n );\\\\n Ethers.provider()\\\\n .call({\\\\n to: troveManageAddress,\\\\n data: encodedForFeeRate,\\\\n })\\\\n .then((raw) => {\\\\n const receiverBalanceHex = troveManageInterface.decodeFunctionResult(\\\\n \\\\\\\"getBorrowingRateWithDecay\\\\\\\",\\\\n raw\\\\n );\\\\n const result = receiverBalanceHex[0];\\\\n State.update({ withdrawFeeRate: result.toString() });\\\\n });\\\\n\\\\n const encodedForFee = troveManageInterface.encodeFunctionData(\\\\n \\\\\\\"getBorrowingFeeWithDecay\\\\\\\",\\\\n [updateTemp]\\\\n );\\\\n Ethers.provider()\\\\n .call({\\\\n to: troveManageAddress,\\\\n data: encodedForFee,\\\\n })\\\\n .then((raw) => {\\\\n const receiverBalanceHex = troveManageInterface.decodeFunctionResult(\\\\n \\\\\\\"getBorrowingFeeWithDecay\\\\\\\",\\\\n raw\\\\n );\\\\n const estimatedFee =\\\\n Number(receiverBalanceHex[0].div(\\\\\\\"10000000000000000\\\\\\\")) / 100;\\\\n console.log(updateTemp);\\\\n State.update({\\\\n withdrawFee: estimatedFee.toString(),\\\\n updatedDebt:\\\\n Number(state.currentDebt) +\\\\n Number(ethers.utils.formatEther(updateTemp)) +\\\\n estimatedFee,\\\\n updatedICR:\\\\n e.target.value === \\\\\\\"\\\\\\\"\\\\n ? null\\\\n : Math.round(\\\\n ((Number(state.currentColl) /\\\\n (Number(state.currentDebt) +\\\\n Number(value) +\\\\n estimatedFee)) *\\\\n Number(state.currentPrice) +\\\\n EPSILON) *\\\\n 1000\\\\n ) / 1000,\\\\n });\\\\n });\\\\n }\\\\n checkFunc();\\\\n};\\\\n\\\\nconst optionHandler = (option) => {\\\\n State.update({ option: option });\\\\n changeHandler({ target: { value: Number(state.value) } });\\\\n};\\\\n\\\\nconst tokenHandler = (token) => {\\\\n State.update({ token: token });\\\\n changeHandler({ target: { value: Number(state.value) } });\\\\n};\\\\n\\\\nconst confirmHandler = () => {\\\\n if (state.complete) {\\\\n State.update({ complete: false, hash: null });\\\\n checkFunc();\\\\n }\\\\n if (!state.check) {\\\\n return;\\\\n }\\\\n const borrowerOperationsContract = new ethers.Contract(\\\\n borrowerOperationsAddress,\\\\n borrowerOperationsABI,\\\\n Ethers.provider().getSigner()\\\\n );\\\\n const amount = ethers.utils\\\\n .parseUnits(state.value.toString(), \\\\\\\"ether\\\\\\\")\\\\n .toString();\\\\n const sortedTrovesContract = new ethers.Contract(\\\\n sortedTrovesAddress,\\\\n sortedTrovesABI,\\\\n Ethers.provider().getSigner()\\\\n );\\\\n const hintHelpersContract = new ethers.Contract(\\\\n hintHelpersAddress,\\\\n hintHelpersABI,\\\\n Ethers.provider().getSigner()\\\\n );\\\\n\\\\n const _1e20 = ethers.BigNumber.from(ethers.utils.parseEther(\\\\\\\"100\\\\\\\"));\\\\n\\\\n const coll = ethers.BigNumber.from(\\\\n ethers.utils.parseEther(state.currentColl)\\\\n );\\\\n const debt = ethers.BigNumber.from(\\\\n ethers.utils.parseEther(state.currentDebt)\\\\n );\\\\n const NICR = coll.mul(_1e20).div(debt);\\\\n\\\\n sortedTrovesContract.getSize().then((numTroves) => {\\\\n const numTrials = numTroves.mul(ethers.BigNumber.from(\\\\\\\"15\\\\\\\"));\\\\n\\\\n hintHelpersContract\\\\n .getApproxHint(NICR.toString(), numTrials.toString(), 42)\\\\n .then((approxHintRes) => {\\\\n const approxHint = approxHintRes[0];\\\\n\\\\n sortedTrovesContract\\\\n .findInsertPosition(NICR.toString(), approxHint, approxHint)\\\\n .then((hintRes) => {\\\\n const upperHint = hintRes[0];\\\\n const lowerHint = hintRes[1];\\\\n\\\\n if (state.option === \\\\\\\"deposit\\\\\\\" && state.token === \\\\\\\"ETH\\\\\\\") {\\\\n borrowerOperationsContract\\\\n .addColl(upperHint, lowerHint, { value: amount })\\\\n .then((transactionHash) => {\\\\n State.update({\\\\n loading: true,\\\\n hash: transactionHash.hash,\\\\n value: \\\\\\\"\\\\\\\",\\\\n updatedColl: null,\\\\n updatedDebt: null,\\\\n updatedICR: null,\\\\n });\\\\n console.log(transactionHash.hash);\\\\n });\\\\n } else if (state.option === \\\\\\\"withdraw\\\\\\\" && state.token === \\\\\\\"ETH\\\\\\\") {\\\\n borrowerOperationsContract\\\\n .withdrawColl(amount.toString(), upperHint, lowerHint)\\\\n .then((transactionHash) => {\\\\n State.update({\\\\n loading: true,\\\\n hash: transactionHash.hash,\\\\n value: \\\\\\\"\\\\\\\",\\\\n updatedColl: null,\\\\n updatedDebt: null,\\\\n updatedICR: null,\\\\n });\\\\n console.log(transactionHash.hash);\\\\n });\\\\n } else if (state.option === \\\\\\\"deposit\\\\\\\" && state.token === \\\\\\\"LUSD\\\\\\\") {\\\\n borrowerOperationsContract\\\\n .repayLUSD(amount.toString(), upperHint, lowerHint)\\\\n .then((transactionHash) => {\\\\n State.update({\\\\n loading: true,\\\\n hash: transactionHash.hash,\\\\n value: \\\\\\\"\\\\\\\",\\\\n updatedColl: null,\\\\n updatedDebt: null,\\\\n updatedICR: null,\\\\n });\\\\n console.log(transactionHash.hash);\\\\n });\\\\n } else if (state.option === \\\\\\\"withdraw\\\\\\\" && state.token === \\\\\\\"LUSD\\\\\\\") {\\\\n borrowerOperationsContract\\\\n .withdrawLUSD(\\\\n state.withdrawFeeRate,\\\\n amount.toString(),\\\\n upperHint,\\\\n lowerHint\\\\n )\\\\n .then((transactionHash) => {\\\\n State.update({\\\\n loading: true,\\\\n hash: transactionHash.hash,\\\\n value: \\\\\\\"\\\\\\\",\\\\n updatedColl: null,\\\\n updatedDebt: null,\\\\n updatedICR: null,\\\\n });\\\\n console.log(transactionHash.hash);\\\\n });\\\\n }\\\\n });\\\\n });\\\\n });\\\\n};\\\\n\\\\nconst cutDecimal = (data) => {\\\\n if (isNaN(Number(data))) {\\\\n return data;\\\\n }\\\\n return Math.round((Number(data) + EPSILON) * 1000) / 1000;\\\\n};\\\\n\\\\nif (Ethers.provider()) {\\\\n const signer = Ethers.provider().getSigner();\\\\n signer.getAddress().then((address) => {\\\\n State.update({ address });\\\\n });\\\\n state.address && infoHandler();\\\\n}\\\\n\\\\nEthers.provider() &&\\\\n Ethers.provider()\\\\n .waitForTransaction(state.hash)\\\\n .then((res) => {\\\\n State.update({ loading: false, value: \\\\\\\"\\\\\\\", complete: true });\\\\n infoHandler();\\\\n })\\\\n .catch((err) => {\\\\n State.update({ loading: false });\\\\n });\\\\n\\\\nreturn (\\\\n <ManageWrapper>\\\\n <div className=\\\\\\\"option-wrapper\\\\\\\">\\\\n <button\\\\n className={`option ${\\\\n state.option === \\\\\\\"deposit\\\\\\\" ? \\\\\\\"active\\\\\\\" : \\\\\\\"disabled\\\\\\\"\\\\n }`}\\\\n onClick={() => {\\\\n optionHandler(\\\\\\\"deposit\\\\\\\");\\\\n }}\\\\n >\\\\n deposit\\\\n </button>\\\\n <button\\\\n className={`option ${\\\\n state.option === \\\\\\\"withdraw\\\\\\\" ? \\\\\\\"active\\\\\\\" : \\\\\\\"disabled\\\\\\\"\\\\n }`}\\\\n onClick={() => {\\\\n optionHandler(\\\\\\\"withdraw\\\\\\\");\\\\n }}\\\\n >\\\\n withdraw\\\\n </button>\\\\n </div>\\\\n <div className=\\\\\\\"input-wrapper\\\\\\\">\\\\n <input\\\\n type=\\\\\\\"number\\\\\\\"\\\\n placeholder={state.token === \\\\\\\"ETH\\\\\\\" ? \\\\\\\"0.0000 ETH\\\\\\\" : \\\\\\\"0.0000 LUSD\\\\\\\"}\\\\n onChange={changeHandler}\\\\n value={state.value}\\\\n ></input>\\\\n <div className={`token-wrapper`}>\\\\n <button\\\\n onClick={() => {\\\\n tokenHandler(\\\\\\\"ETH\\\\\\\");\\\\n }}\\\\n className={`token ${state.token === \\\\\\\"ETH\\\\\\\" ? \\\\\\\"active\\\\\\\" : \\\\\\\"disabled\\\\\\\"}`}\\\\n >\\\\n ETH\\\\n </button>\\\\n <button\\\\n onClick={() => {\\\\n tokenHandler(\\\\\\\"LUSD\\\\\\\");\\\\n }}\\\\n className={`token ${state.token === \\\\\\\"LUSD\\\\\\\" ? \\\\\\\"active\\\\\\\" : \\\\\\\"disabled\\\\\\\"}`}\\\\n >\\\\n LUSD\\\\n </button>\\\\n </div>\\\\n </div>\\\\n <div className=\\\\\\\"info-wrapper\\\\\\\">\\\\n <div className=\\\\\\\"info\\\\\\\">\\\\n <div>Your Collateral Ratio</div>\\\\n <div>\\\\n <span className=\\\\\\\"current-info\\\\\\\">\\\\n {!isNaN(\\\\n (((Number(state.currentColl) / Number(state.currentDebt)) *\\\\n Number(state.currentPrice) +\\\\n EPSILON) *\\\\n 1000) /\\\\n 1000\\\\n )\\\\n ? Math.round(\\\\n ((Number(state.currentColl) / Number(state.currentDebt)) *\\\\n Number(state.currentPrice) +\\\\n EPSILON) *\\\\n 1000\\\\n ) / 1000\\\\n : \\\\\\\"-\\\\\\\"}\\\\n </span>\\\\n {state.updatedICR &&\\\\n Number(state.updatedICR) !==\\\\n Number(\\\\n Math.round(\\\\n ((Number(state.currentColl) / Number(state.currentDebt)) *\\\\n Number(state.currentPrice) +\\\\n EPSILON) *\\\\n 1000\\\\n ) / 1000\\\\n ) &&\\\\n state.updatedICR && (\\\\n <span\\\\n className={`after ${\\\\n (Number(state.tcr) >= 150 && state.updatedICR >= 1.1) ||\\\\n (Number(state.tcr) < 150 && state.updatedICR > 1.5)\\\\n ? \\\\\\\"ok\\\\\\\"\\\\n : \\\\\\\"not-ok\\\\\\\"\\\\n }`}\\\\n >{`=> ${\\\\n state.updatedICR >= 0 ? cutDecimal(state.updatedICR) : 0\\\\n }`}</span>\\\\n )}\\\\n </div>\\\\n </div>\\\\n <div className=\\\\\\\"info\\\\\\\">\\\\n <div>Your Collateral</div>\\\\n <div>\\\\n <span className=\\\\\\\"current-info\\\\\\\">{state.currentColl}</span>\\\\n {state.updatedColl &&\\\\n Number(state.updatedColl) !== Number(state.currentColl) && (\\\\n <span\\\\n className={`after ${state.updatedColl > 0 ? \\\\\\\"ok\\\\\\\" : \\\\\\\"not-ok\\\\\\\"}`}\\\\n >{`=> ${\\\\n state.updatedColl >= 0 ? cutDecimal(state.updatedColl) : 0\\\\n }`}</span>\\\\n )}\\\\n <span className={`unit`}>ETH</span>\\\\n </div>\\\\n </div>\\\\n <div className=\\\\\\\"info\\\\\\\">\\\\n <div>Your Debt</div>\\\\n <div>\\\\n <span className=\\\\\\\"current-info\\\\\\\">{state.currentDebt}</span>\\\\n {state.updatedDebt &&\\\\n state.updatedDebt.toString() !== state.currentDebt.toString() &&\\\\n Number(state.updatedDebt) > 0 && (\\\\n <span\\\\n className={`after ${\\\\n state.updatedDebt >= 2000 ? \\\\\\\"ok\\\\\\\" : \\\\\\\"not-ok\\\\\\\"\\\\n }`}\\\\n >{`=> ${cutDecimal(state.updatedDebt)}`}</span>\\\\n )}\\\\n <span className={`unit`}>LUSD</span>\\\\n </div>\\\\n </div>\\\\n <div className=\\\\\\\"info\\\\\\\">\\\\n <div>Ethereum Price</div>\\\\n <div>\\\\n <span className=\\\\\\\"current-info\\\\\\\">{state.currentPrice}</span>\\\\n <span className={`unit`}>$</span>\\\\n </div>\\\\n </div>\\\\n </div>\\\\n <div className=\\\\\\\"confirm-wrapper\\\\\\\">\\\\n {state.address ? (\\\\n <button\\\\n onClick={confirmHandler}\\\\n className={`confirm ${state.check ? \\\\\\\"ok\\\\\\\" : \\\\\\\"not-ok\\\\\\\"}`}\\\\n >\\\\n {state.chainId !== 1\\\\n ? \\\\\\\"Change network to Ethereum\\\\\\\"\\\\n : state.loading\\\\n ? \\\\\\\"Loadig...\\\\\\\"\\\\n : state.complete\\\\n ? \\\\\\\"Done \\\\u{2705}\\\\\\\"\\\\n : state.check\\\\n ? `Confirm ${state.option}`\\\\n : !state.value\\\\n ? \\\\\\\"Enter input value\\\\\\\"\\\\n : \\\\\\\"Check stats\\\\\\\"}\\\\n </button>\\\\n ) : (\\\\n <Web3Connect className={`connect-wallet`} />\\\\n )}\\\\n </div>\\\\n </ManageWrapper>\\\\n);\\\\n", |