Improve code content and ux

src/components/BuildingWithMsgport/DesktopBuildingWithMsgport.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import PrettyCode from "../PrettyCode";
 import RightArrowRound from "../RightArrowRound";
 import { link, menu, title } from "./data";
@@ -8,6 +8,14 @@ export default function DesktopBuildingWithMsgport() {
   const { isDesktopHeight } = useApp();
   const [activeTitle, setActiveTitle] = useState(menu[0].title);
   const activeMenu = menu.find(({ title }) => title === activeTitle) || menu[0];
+  const ref = useRef<HTMLDivElement | null>(null);
+  const [refHeight, setRefHeight] = useState<number>(0);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setRefHeight(ref.current?.clientHeight ?? 0);
+    }, 0);
+  }, [activeTitle]);
 
   return (
     <div className={`flex gap-[6.875rem] ${isDesktopHeight ? "" : "items-center"}`}>
@@ -46,15 +54,25 @@ export default function DesktopBuildingWithMsgport() {
         <TryItNow link={link} />
       </div>
 
-      <div className="bg-app-black rounded-[2.5rem] px-[3.3125rem] pt-[3.375rem] pb-[4.5rem] flex flex-col gap-[3.125rem] w-[68.875rem]">
-        <div className="flex flex-col gap-[0.375rem] items-center">
+      <div
+        className={`bg-app-black rounded-[2.5rem] px-[3.3125rem] pt-[3.375rem] pb-[4.5rem] flex flex-col justify-center gap-[3.125rem] w-[68.875rem] ${
+          isDesktopHeight ? "h-[42.875rem]" : "h-[40.375rem]"
+        }`}
+      >
+        <div className="flex flex-col gap-[0.375rem] items-center shrink-0 h-fit" ref={ref}>
           <h2 className="text-h2 text-app-white">{activeMenu.title}</h2>
-          <span className="text-t16 text-app-white">{activeMenu.description}</span>
+          <span className="text-t16 text-app-white text-center inline-block">{activeMenu.description}</span>
         </div>
         <PrettyCode
-          language="solidity"
+          language={activeMenu.language}
           code={activeMenu.code}
-          customStyle={{ height: isDesktopHeight ? "27.5rem" : "25rem", padding: "1.875rem", borderRadius: "1.25rem" }}
+          customStyle={{
+            height: `calc(${
+              isDesktopHeight ? "42.875rem" : "40.375rem"
+            } - 3.375rem - 4.5rem - 3.125rem - ${refHeight}px)`,
+            padding: "1.875rem",
+            borderRadius: "1.25rem",
+          }}
         />
       </div>
     </div>

src/components/BuildingWithMsgport/MobileBuildingWithMsgport.tsx

@@ -19,6 +19,7 @@ export default function MobileBuildingWithMsgport() {
             title={m.title}
             description={m.description}
             code={m.code}
+            language={m.language}
             onChange={setActiveActive}
           />
         ))}

src/components/BuildingWithMsgport/MobileMenuItem.tsx

@@ -6,6 +6,7 @@ interface Props {
   activeTitle: string;
   description: string;
   code: string;
+  language: "solidity" | "javascript";
   onChange?: (title: string) => void;
 }
 
@@ -14,6 +15,7 @@ export default function MobileMenuItem({
   activeTitle,
   description,
   code,
+  language,
   onChange = () => undefined,
 }: Props) {
   const [btnHeight, setBtnHeight] = useState<number>();
@@ -40,8 +42,8 @@ export default function MobileMenuItem({
         style={{ height: isActive ? ref.current?.clientHeight : 0 }}
       >
         <div className="flex flex-col gap-5 p-5" style={{ paddingTop: btnHeight }} ref={ref}>
-          <span className="text-t14 text-app-white">{description}</span>
-          <PrettyCode className="h-[36.375rem]" language="solidity" code={code} />
+          {description ? <span className="text-t14 text-app-white">{description}</span> : null}
+          <PrettyCode className="h-[36.375rem]" language={language} code={code} />
         </div>
       </div>
     </div>

src/components/BuildingWithMsgport/data.ts

@@ -1,33 +1,161 @@
-import { testCode } from "../../data/code/test";
-
 export const title: string[] = ["Start building with", "Darwinia Msgport"];
 
 export const link: string = "https://docs.darwinia.network/simplest-messaging-demo-045164a7d4d7413ba4a5dd65214e59e6"; // External link
 
-export const menu: { title: string; description: string; code: string }[] = [
+export const menu: { title: string; description: string; code: string; language: "solidity" | "javascript" }[] = [
   {
-    title: "Prepare to Receive Messages",
-    description: "Create a workspace for the contract that needs to be deployed on the target chain.",
-    code: testCode,
+    title: "Msgport Interface",
+    description:
+      "This interface provides developers with a generic message passing interface to send arbitrary data between contracts on different blockchain networks.",
+    code: `// This file is part of Darwinia.
+// Copyright (C) 2018-2023 Darwinia Network
+// SPDX-License-Identifier: GPL-3.0
+
+pragma solidity ^0.8.0;
+
+interface IMessagePort {
+    error MessageFailure(bytes errorData);
+
+    /// @dev Send a cross-chain message over the MessagePort.
+    /// @notice Send a cross-chain message over the MessagePort.
+    /// @param toChainId The message destination chain id. <https://eips.ethereum.org/EIPS/eip-155>
+    /// @param toDapp The user application contract address which receive the message.
+    /// @param message The calldata which encoded by ABI Encoding.
+    /// @param params Extend parameters to adapt to different message protocols.
+    function send(uint256 toChainId, address toDapp, bytes calldata message, bytes calldata params) external payable;
+
+    /// @notice Get a quote in source native gas, for the amount that send() requires to pay for message delivery.
+    ///         It should be noted that not all ports will implement this interface.
+    /// @dev If the messaging protocol does not support on-chain fetch fee, then revert with "Unimplemented!".
+    /// @param toChainId The message destination chain id. <https://eips.ethereum.org/EIPS/eip-155>
+    /// @param toDapp The user application contract address which receive the message.
+    /// @param message The calldata which encoded by ABI Encoding.
+    /// @param params Extend parameters to adapt to different message protocols.
+    function fee(uint256 toChainId, address toDapp, bytes calldata message, bytes calldata params)
+        external
+        view
+        returns (uint256);
+}`,
+    language: "solidity",
   },
   {
-    title: "Deploy MyReceiverDapp",
-    description: "Deploy the contract on the target chain.",
-    code: testCode,
+    title: "Deploy ExampleReceiverDapp",
+    description: "Deploy a receiver contract on the target chain to receive messages. (for example purposes only)",
+    code: `// This file is part of Darwinia.
+// Copyright (C) 2018-2023 Darwinia Network
+// SPDX-License-Identifier: GPL-3.0
+
+pragma solidity ^0.8.17;
+
+import "https://github.com/darwinia-network/darwinia-msgport/blob/main/src/user/Application.sol";
+
+contract ExampleReceiverDapp is Application {
+    event DappMessageRecv(uint256 fromChainId, address fromDapp, address localPort, bytes message);
+
+    // local port address
+    address public immutable PORT;
+    // remote dapp address
+    address public immutable DAPP;
+
+    constructor(address port, address dapp) {
+        PORT = port;
+        DAPP = dapp;
+    }
+
+    /// @notice You could check the fromDapp address or messagePort address.
+    function testReceive(bytes calldata message) external {
+        uint256 fromChainId = _fromChainId();
+        address fromDapp = _xmsgSender();
+        address localPort = _msgPort();
+        require(localPort == PORT);
+        require(fromDapp == DAPP);
+        emit DappMessageRecv(fromChainId, fromDapp, localPort, message);
+    }
+}`,
+    language: "solidity",
   },
   {
-    title: "Get Calldata",
-    description: "Input the message and retrieve the calldata.",
-    code: testCode,
+    title: "Encode calldata",
+    description: "Build the remote call data as the message payload.",
+    code: `import { ethers } from 'ethers';
+
+const privateKey = process.env.PRIVATE_KEY;
+const providerUrl = <Your RPC provider URL>;
+const receiverDappAddr = <Your ExampleReceiverDapp Address>;
+
+function encodeReceiveCall() {
+    const receiverABI = [{
+        "inputs": [
+            {
+                "internalType": "bytes",
+                "name": "message",
+                "type": "bytes"
+            }
+        ],
+        "name": "testReceive",
+        "outputs": [],
+        "stateMutability": "nonpayable",
+        "type": "function"
+    }];
+    const testMessage = "0x1234";
+    const provider = new ethers.JsonRpcProvider(providerUrl);
+    const signer = new ethers.Wallet(privateKey, provider);
+    const receiverDapp = new ethers.Contract(receiverDappAddr, receiverABI, signer);
+    const callData = receiverDapp.interface.encodeFunctionData('testReceive', [testMessage]);
+    console.log(callData);
+}
+
+encodeReceiveCall();`,
+    language: "javascript",
   },
   {
-    title: "Get Fee and Messaging Params",
-    description: "Use the MsgPort API to obtain the cross-chain message fee and messaging service parameters.",
-    code: testCode,
+    title: "Get fee and params from Msgport API",
+    description: "Estimate fee and get adaptation params from Msgport API.",
+    code: `import axios from 'axios';
+
+async function getFeeParams() {
+    const requestBody = {
+        'from_chain_id': <SourceChainID>,
+        'to_chain_id': <TargetChainID>,
+        'payload': <EncodeCallData>,
+        'from_address': <SenderAddress>,
+        'to_address': <ReceiverAddress>,
+        'refund_address': <RefundAddress>,
+    };
+    const result = await axios.get("https://msgport-api.darwinia.network/ormp/fee", { params: requestBody });
+    const { fee, params } = result.data.data;
+    console.log(fee, params);
+}
+
+await getFeeParams();`,
+    language: "javascript",
   },
   {
-    title: "Sending Message",
-    description: "Use the contract to send the message.",
-    code: testCode,
+    title: "Sending message",
+    description: "",
+    code: `// This file is part of Darwinia.
+// Copyright (C) 2018-2023 Darwinia Network
+// SPDX-License-Identifier: GPL-3.0
+
+pragma solidity ^0.8.17;
+
+import "https://github.com/darwinia-network/darwinia-msgport/blob/main/src/interfaces/IMessagePort.sol";
+
+contract ExampleSenderDapp {
+    event DappMessageSent(address localPort, bytes message);
+
+    // local port address
+    address public immutable PORT;
+
+    constructor(address port) {
+        PORT = port;
+    }
+
+    function testSend(uint256 toChainId, address toDapp, bytes calldata message, bytes calldata params) external payable{
+        IMessagePort(PORT).send{value: msg.value}(toChainId, toDapp, message, params);
+        emit DappMessageSent(PORT, message);
+    }
+}`,
+    language: "solidity",
   },
 ];

src/components/UseCase/Item.tsx

@@ -8,9 +8,10 @@ interface Props {
   code: string;
   link: string; // External link
   description: string;
+  language: "solidity" | "javascript";
 }
 
-export default function Item({ title, code, link, description }: Props) {
+export default function Item({ title, code, link, description, language }: Props) {
   const [isHovering, setIsHovering] = useState(false);
   const { isDesktopWidth, isDesktopHeight } = useApp();
 
@@ -36,10 +37,10 @@ export default function Item({ title, code, link, description }: Props) {
         className={`lg:w-[48.75rem] ${
           isDesktopWidth ? (isDesktopHeight ? "h-[26.5rem]" : "h-[19.25rem]") : "h-[26.5rem]"
         }`}
-        language="solidity"
+        language={language}
         code={code}
       />
       <span className="text-t14 text-app-white lg:mt-[0.1875rem]">{description}</span>
     </div>
   );
-}
+}