From dfce8d6a126609a897ebcacb91fd3288d6a8e441 Mon Sep 17 00:00:00 2001
From: Bob van der Helm <34470358+bobthebuidlr@users.noreply.github.com>
Date: Thu, 14 Dec 2023 10:37:54 +0100
Subject: [PATCH] add execute message page (#694)

---
 src/components/Routes.tsx                 |  2 +
 src/pages/ExecuteMessagePage.tsx          | 93 +++++++++++++++++++++++
 src/store/slices/broadcast.ts             | 14 ++++
 src/types/interfaces/route.d.ts           |  1 +
 src/types/interfaces/store/broadcast.d.ts |  1 +
 src/utils/route.ts                        |  1 +
 6 files changed, 112 insertions(+)
 create mode 100644 src/pages/ExecuteMessagePage.tsx

diff --git a/src/components/Routes.tsx b/src/components/Routes.tsx
index 4561dbde..4196b49e 100644
--- a/src/components/Routes.tsx
+++ b/src/components/Routes.tsx
@@ -2,6 +2,7 @@ import { Navigate, Outlet, Route, Routes as RoutesWrapper } from 'react-router-d
 
 import Layout from 'pages/_layout'
 import BorrowPage from 'pages/BorrowPage'
+import ExecuteMessagePage from 'pages/ExecuteMessagePage'
 import FarmPage from 'pages/FarmPage'
 import HLSFarmPage from 'pages/HLSFarmPage'
 import HLSStakingPage from 'pages/HLSStakingPage'
@@ -35,6 +36,7 @@ export default function Routes() {
         {ENABLE_HLS && <Route path='/hls-farm' element={<HLSFarmPage />} />}
         <Route path='/' element={<TradePage />} />
         <Route path='/wallets/:address'>
+          <Route path='execute' element={<ExecuteMessagePage />} />
           <Route path='trade' element={<TradePage />} />
           <Route path='trade-advanced' element={<TradePage />} />
           {ENABLE_PERPS && <Route path='perps' element={<PerpsPage />} />}
diff --git a/src/pages/ExecuteMessagePage.tsx b/src/pages/ExecuteMessagePage.tsx
new file mode 100644
index 00000000..1a1a665f
--- /dev/null
+++ b/src/pages/ExecuteMessagePage.tsx
@@ -0,0 +1,93 @@
+import { useState } from 'react'
+import { useSearchParams } from 'react-router-dom'
+
+import Text from 'components/Text'
+import WarningMessages from 'components/WarningMessages'
+import { ENV } from 'constants/env'
+import useStore from 'store'
+
+import ActionButton from '../components/Button/ActionButton'
+
+export default function ExecuteMessagePage() {
+  const [searchParams] = useSearchParams()
+
+  const [contract, setContract] = useState<string>(
+    searchParams.get('contract') ?? ENV.ADDRESS_CREDIT_MANAGER,
+  )
+  const [message, setMessage] = useState<string>(atob(searchParams.get('msg') ?? ''))
+  const [funds, setFunds] = useState<string>(atob(searchParams.get('funds') ?? ''))
+
+  const [messageWarnings, setMessageWarnings] = useState<string[]>([])
+  const [fundsWarnings, setFundsWarnings] = useState<string[]>([])
+
+  const execute = useStore((s) => s.execute)
+
+  function onChangeTextArea(value: string) {
+    setMessage(value)
+
+    try {
+      if (value !== '') JSON.parse(value)
+      setMessageWarnings([])
+    } catch {
+      setMessageWarnings(['Invalid JSON'])
+    }
+  }
+
+  function onChangeFunds(value: string) {
+    setFunds(value)
+
+    try {
+      if (value !== '') JSON.parse(value)
+      setFundsWarnings([])
+    } catch {
+      setFundsWarnings(['Invalid JSON'])
+    }
+  }
+
+  return (
+    <div className='w-full flex flex-col gap-4'>
+      <Text>Execute Custom Message</Text>
+      <label>
+        <Text className='text-white/60 mb-1 text-xs'>Contract address</Text>
+        <input
+          value={contract}
+          onChange={(e) => setContract(e.target.value)}
+          className='bg-white/5 p-4 w-full text-sm'
+        />
+      </label>
+
+      <label>
+        <div className='flex items-center h-6 gap-2'>
+          <Text className='text-white/60 mb-1 text-xs'>Message</Text>
+          <WarningMessages messages={messageWarnings} />
+        </div>
+
+        <textarea
+          value={message}
+          onChange={(e) => onChangeTextArea(e.target.value)}
+          className='text-white h-90 bg-white/5 p-4 w-full text-sm'
+        />
+      </label>
+      <label>
+        <div className='flex items-center h-6 gap-2'>
+          <Text className='text-white/60 mb-1 text-xs'>Funds</Text>
+          <WarningMessages messages={fundsWarnings} />
+        </div>
+
+        <textarea
+          value={funds}
+          onChange={(e) => onChangeFunds(e.target.value)}
+          className='text-white h-40 bg-white/5 p-4 w-full text-sm'
+        />
+      </label>
+
+      <ActionButton
+        text='Execute'
+        onClick={() => {
+          execute(contract, JSON.parse(message), funds ? JSON.parse(funds) : [])
+        }}
+        disabled={fundsWarnings.length > 0 || !contract || messageWarnings.length > 0 || !message}
+      />
+    </div>
+  )
+}
diff --git a/src/store/slices/broadcast.ts b/src/store/slices/broadcast.ts
index fe50d381..8289c77e 100644
--- a/src/store/slices/broadcast.ts
+++ b/src/store/slices/broadcast.ts
@@ -14,6 +14,7 @@ import {
   ActionCoin,
   Action as CreditManagerAction,
   ExecuteMsg as CreditManagerExecuteMsg,
+  ExecuteMsg,
 } from 'types/generated/mars-credit-manager/MarsCreditManager.types'
 import { AccountKind } from 'types/generated/mars-rover-health-types/MarsRoverHealthTypes.types'
 import { getAssetByDenom, getAssetBySymbol, getPythAssets } from 'utils/assets'
@@ -184,6 +185,7 @@ export default function createBroadcastSlice(
 
       get().setToast({
         response,
+
         options: {
           action: 'hls-staking',
           accountId: options.accountId,
@@ -194,6 +196,18 @@ export default function createBroadcastSlice(
 
       return response.then((response) => !!response.result)
     },
+    execute: async (contract: string, msg: ExecuteMsg, funds: Coin[]) => {
+      const response = get().executeMsg({
+        messages: [generateExecutionMessage(get().address, contract, msg, funds)],
+      })
+
+      get().setToast({
+        response,
+        options: { action: 'deposit', message: `Executed message` },
+      })
+
+      return response
+    },
     borrow: async (options: { accountId: string; coin: BNCoin; borrowToWallet: boolean }) => {
       const borrowAction: Action = { borrow: options.coin.toCoin() }
       const withdrawAction: Action = { withdraw: options.coin.toActionCoin() }
diff --git a/src/types/interfaces/route.d.ts b/src/types/interfaces/route.d.ts
index 216b8c56..cbd0f1c5 100644
--- a/src/types/interfaces/route.d.ts
+++ b/src/types/interfaces/route.d.ts
@@ -10,3 +10,4 @@ type Page =
   | 'hls-farm'
   | 'hls-staking'
   | 'governance'
+  | 'execute'
diff --git a/src/types/interfaces/store/broadcast.d.ts b/src/types/interfaces/store/broadcast.d.ts
index 4b8bfb05..6849e131 100644
--- a/src/types/interfaces/store/broadcast.d.ts
+++ b/src/types/interfaces/store/broadcast.d.ts
@@ -107,6 +107,7 @@ interface BroadcastSlice {
     isCreate: boolean
     kind: import('types/generated/mars-rover-health-types/MarsRoverHealthTypes.types').AccountKind
   }) => Promise<boolean>
+  execute: (contract: string, msg: ExecuteMsg, funds: Coin[]) => Promise<BroadcastResult>
   executeMsg: (options: { messages: MsgExecuteContract[] }) => Promise<BroadcastResult>
   lend: (options: { accountId: string; coin: BNCoin; isMax?: boolean }) => Promise<boolean>
   reclaim: (options: { accountId: string; coin: BNCoin; isMax?: boolean }) => Promise<boolean>
diff --git a/src/utils/route.ts b/src/utils/route.ts
index 1ca2b6a8..c8697554 100644
--- a/src/utils/route.ts
+++ b/src/utils/route.ts
@@ -28,6 +28,7 @@ export function getRoute(
 
 export function getPage(pathname: string): Page {
   const pages: Page[] = [
+    'execute',
     'trade',
     'trade-advanced',
     'perps',