fix(devtools): fix dispute-template presets

Author: nikhilverma360

web-devtools/src/app/(main)/dispute-template/FetchDisputeRequestInput.tsx

@@ -46,12 +46,12 @@ const StyledA = styled.a`
 const presets = [
   {
     title: "Escrow",
-    txnHash: "0xfa24d589a0c26c71d06f6e0a151460783f70b51c174a08c04768f458c7817cd1",
+    txnHash: "0x85e60cb407c9a38e625263cc762ff4283d01f38201825e1d20109d8664cfa7d4",
     chainId: 421614,
   },
   {
     title: "Curated Lists",
-    txnHash: "0xd9ab4908fc5447d532bc287f49e2f2beb754fc62024b806f05a9abf706be7c06",
+    txnHash: "0x6e5ad6f7436ef8570b50b0fbec76a11ccedbed85030c670e59d8f6617a499108",
     chainId: 421614,
   },
   {

web-devtools/src/app/(main)/dispute-template/page.tsx

@@ -115,8 +115,13 @@ const StyledForm = styled.form`
 
 const StyledRow = styled.div`
   display: flex;
-  flex-direction: row;
-  gap: 24px;
+  flex-direction: column;
+  ${landscapeStyle(
+    () => css`
+      flex-direction: row;
+      gap: 24px;
+    `
+  )}
 `;
 
 const StyledP = styled.p`
@@ -127,6 +132,13 @@ const StyledHeader = styled.h2`
   margin-top: 24px;
 `;
 
+const StyledTitle = styled.div`
+  margin-top: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
 const LongText = styled.div`
   display: flex;
   flex-direction: column;
@@ -202,11 +214,14 @@ const DisputeTemplateView = () => {
 
   return (
     <>
+      <StyledTitle>
+        <h1>Dispute Preview</h1>
+      </StyledTitle>
       <UpperContainer>
         <StyledForm>
           <StyledHeader>Dispute Request event parameters</StyledHeader>
           <StyledRow>
-            <StyledP>{"{{ arbitrator }}"}</StyledP>
+            <StyledP>{"arbitrator :"}</StyledP>
             <Field
               type="text"
               name="_arbitrator"
@@ -216,7 +231,7 @@ const DisputeTemplateView = () => {
             />
           </StyledRow>
           <StyledRow>
-            <StyledP>{"{{ arbitrable }}"}</StyledP>
+            <StyledP>{"arbitrable :"}</StyledP>
             <Field
               type="text"
               name="_arbitrable"
@@ -226,7 +241,7 @@ const DisputeTemplateView = () => {
             />
           </StyledRow>
           <StyledRow>
-            <StyledP>{"{{ arbitrableDisputeID }}"}</StyledP>
+            <StyledP>{"arbitrableDisputeID :"}</StyledP>
             <Field
               type="text"
               name="_arbitrableDisputeID"
@@ -236,7 +251,7 @@ const DisputeTemplateView = () => {
             />
           </StyledRow>
           <StyledRow>
-            <StyledP>{"{{ externalDisputeID }}"}</StyledP>
+            <StyledP>{"externalDisputeID :"}</StyledP>
             <Field
               type="text"
               name="_externalDisputeID"
@@ -246,7 +261,7 @@ const DisputeTemplateView = () => {
             />
           </StyledRow>
           <StyledRow>
-            <StyledP>{"{{ templateID }}"}</StyledP>
+            <StyledP>{"templateID :"}</StyledP>
             <Field
               type="text"
               name="_templateId"
@@ -256,7 +271,7 @@ const DisputeTemplateView = () => {
             />
           </StyledRow>
           <StyledRow>
-            <StyledP>{"{{ templateUri }}"}</StyledP>
+            <StyledP>{"templateUri :"}</StyledP>
             <Field
               type="text"
               name="_templateUri"