Release/v1.0.19

src/_components/AddressDetail/components/Events/columnConfig.tsx

@@ -15,13 +15,13 @@ export default function getColumns({ timeFormat, handleTimeChange }): ColumnsTyp
       title: (
         <div className="flex items-center font-medium">
           <span>Txn Hash</span>
-          <IconFont className="text-xs ml-1" type="question-circle" />
+          <IconFont className="ml-1 text-xs" type="question-circle" />
         </div>
       ),
       render: (text) => {
         return (
           <div className="flex items-center">
-            <Link className="text-link text-xs block w-[120px] truncate leading-5" href={`tx/${text}`}>
+            <Link className="block w-[120px] truncate text-xs leading-5 text-link" href={`tx/${text}`}>
               {text}
             </Link>
           </div>
@@ -34,18 +34,18 @@ export default function getColumns({ timeFormat, handleTimeChange }): ColumnsTyp
       dataIndex: 'blockHeight',
       key: 'blockHeight',
       render: (text) => (
-        <Link className="text-link text-xs block leading-5" href={`block/${text}`}>
+        <Link className="block text-xs leading-5 text-link" href={`block/${text}`}>
           {text}
         </Link>
       ),
     },
     {
       title: (
         <div
-          className="time flex items-center text-link cursor-pointer font-medium"
+          className="time flex cursor-pointer items-center font-medium text-link"
           onClick={handleTimeChange}
           onKeyDown={handleTimeChange}>
-          <IconFont className="text-xs mr-1" type="Rank" />
+          <IconFont className="mr-1 text-xs" type="Rank" />
           {timeFormat}
         </div>
       ),
@@ -66,14 +66,15 @@ export default function getColumns({ timeFormat, handleTimeChange }): ColumnsTyp
     {
       title: (
         <div>
-          <IconFont className="text-xs leading-5 mr-1" type="log" />
+          <IconFont className="mr-1 text-xs leading-5" type="log" />
           <span>Logs</span>
         </div>
       ),
       width: 672,
       dataIndex: 'logs',
       key: 'logs',
-      render: (text) => <LogItems data={text} />,
+      // render: (text) => <LogItems data={text} />,
+      render: (text) => <div>code</div>,
     },
   ];
 }

src/_components/AddressDetail/components/Events/mock.ts

@@ -4,7 +4,7 @@ const data = Array.from(new Array(25).keys()).map((item) => {
     logs: {
       address: '0a3b5e972db484b758109ef2f0d50bfadd88ac92862592427a034bf066c22275',
       eventName: 'MiningInformationUpdated',
-      indexed: [],
+      indexed: '',
       nonIndexed: '',
       contractInfo: {
         name: '0458ad2ec4d8944bff7f3ab7b56a90ffca784b0632bdf8c4a952da153b24b3fbbda5432f5ef293ab7ced791969f5fe02b0b5e6bc5af7ce074a9dc386c8dab0e6db',

src/_components/ChainSelect/index.tsx

@@ -21,10 +21,8 @@ export default function ChainSelect() {
 
   const onChangeHandler = (value: string) => {
     // microApp.setData('governance', { type: 'logoutSilently' });
-    setTimeout(() => {
-      dispatch(setDefaultChain(value));
-      router.push(`/?chainId=${value}`);
-    }, 0);
+    dispatch(setDefaultChain(value));
+    router.push(`/?chainId=${value}`);
   };
 
   useEffectOnce(() => {

src/_components/LogsContainer/index.tsx

@@ -13,7 +13,7 @@ function LogsContainer({ Logs = [] }: { Logs: ILogsProps[] }) {
     <div className="log-container">
       <div className="log-list">
         {Logs.map((item, index) => (
-          <div key={item.contractInfo?.address} className="">
+          <div key={index} className="">
             <DetailContainer
               infoList={[
                 {

src/_components/LogsContainer/logItems.tsx

@@ -1,30 +1,60 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { ILogsProps } from './type';
 import CodeBlock from '@_components/CodeBlock';
 import { Button } from 'aelf-design';
 import './logItem.css';
+import { deserializeLog } from '@_utils/deserializeLog';
+import { useParams } from 'next/navigation';
+import { message } from 'antd';
+import { useEffectOnce } from 'react-use';
+import { useMobileContext } from '@app/pageProvider';
 function LogItems({ data }: { data: ILogsProps }) {
-  const [result] = useState(
-    JSON.stringify(
-      {
-        indexed: data.indexed,
-        nonIndexed: data.nonIndexed,
-        decode: undefined,
-      },
-      null,
-      2,
-    ),
-  );
-  const [hasDecoded, setHasDecoded] = useState<boolean>(false);
+  const { config } = useMobileContext();
+  const originData = useMemo(() => {
+    return {
+      Indexed: data.indexed && JSON.parse(data.indexed),
+      NonIndexed: data.nonIndexed,
+      Address: data.contractInfo?.address,
+      Name: data.eventName,
+    };
+  }, [data]);
+  const [loading, setLoading] = useState(true);
+  const code = JSON.stringify(originData, null, 2);
+  const [result, setResult] = useState<any>();
+  const { chain } = useParams<{ chain: string }>();
+
+  const [hasDecoded, setHasDecoded] = useState<boolean>(true);
+
+  function decodeData() {
+    deserializeLog(originData, config['rpcUrl' + chain])
+      .then((res) => {
+        if (Object.keys(res).length === 0) {
+          throw new Error('Decode failed');
+        }
+        setResult(res);
+        setLoading(false);
+        setHasDecoded(true);
+      })
+      .catch(() => {
+        message.error('Decode failed');
+        setLoading(false);
+      });
+  }
+
+  useEffectOnce(() => {
+    decodeData();
+  });
+
   function decode() {
     setHasDecoded(!hasDecoded);
   }
+
   return (
     <div className="log-item">
       {
         <>
-          <CodeBlock value={hasDecoded ? JSON.stringify(data.contractInfo) : result} />
-          <Button type="primary" className="log-button mt-2 text-xs leading-5" onClick={decode}>
+          <CodeBlock value={hasDecoded ? JSON.stringify(result, null, 2) : code} />
+          <Button type="primary" className="log-button mt-2 text-xs leading-5" loading={loading} onClick={decode}>
             {hasDecoded ? 'Encode' : 'Decode'}
           </Button>
         </>

src/_components/LogsContainer/type.ts

@@ -8,6 +8,6 @@ export interface ILogsProps {
     isManager: boolean;
     isProducer: boolean;
   };
-  indexed: never[];
+  indexed: string;
   nonIndexed: string;
 }

src/_utils/deserializeLog.ts

@@ -0,0 +1,70 @@
+import { store } from '@_store';
+import AElf from 'aelf-sdk';
+
+const CONTRACT_PROTOS = {};
+
+export enum SupportedELFChainId {
+  MAIN_NET = 'AELF',
+  TDVV_NET = 'tDVV',
+  TDVW_NET = 'tDVW',
+}
+
+export function getAElf(rpcUrl: string) {
+  return new AElf(new AElf.providers.HttpProvider(rpcUrl, 60000));
+}
+
+async function getProto(address, rpc) {
+  const aelf = getAElf(rpc);
+  if (!CONTRACT_PROTOS[address]) {
+    try {
+      const file = await aelf.chain.getContractFileDescriptorSet(address);
+      CONTRACT_PROTOS[address] = AElf.pbjs.Root.fromDescriptor(file);
+    } catch (e) {
+      return null;
+    }
+  }
+  return CONTRACT_PROTOS[address];
+}
+
+function decodeBase64(str) {
+  const { util } = AElf.pbjs;
+  const buffer = util.newBuffer(util.base64.length(str));
+  util.base64.decode(str, buffer, 0);
+  return buffer;
+}
+export async function deserializeLog(log, rpc) {
+  const { Indexed = [], NonIndexed, Name, Address } = log;
+  const proto = await getProto(Address, rpc);
+  if (!proto) {
+    return {};
+  }
+  const serializedData = [...(Indexed || [])];
+  if (NonIndexed) {
+    serializedData.push(NonIndexed);
+  }
+  const dataType = proto.lookupType(Name);
+  let deserializeLogResult = serializedData.reduce((acc, v) => {
+    let deserialize = dataType.decode(decodeBase64(v));
+    deserialize = dataType.toObject(deserialize, {
+      enums: String, // enums as string names
+      longs: String, // longs as strings (requires long.js)
+      bytes: String, // bytes as base64 encoded strings
+      defaults: false, // includes default values
+      arrays: true, // populates empty arrays (repeated fields) even if defaults=false
+      objects: true, // populates empty objects (map fields) even if defaults=false
+      oneofs: true, // includes virtual oneof fields set to the present field's name
+    });
+    return {
+      ...acc,
+      ...deserialize,
+    };
+  }, {});
+  // eslint-disable-next-line max-len
+  deserializeLogResult = AElf.utils.transform.transform(
+    dataType,
+    deserializeLogResult,
+    AElf.utils.transform.OUTPUT_TRANSFORMERS,
+  );
+  deserializeLogResult = AElf.utils.transform.transformArrayToMap(dataType, deserializeLogResult);
+  return deserializeLogResult;
+}

src/app/[chain]/nft/[collectionSymbol]/[itemSymbol]/_overview/OverView.tsx

@@ -6,6 +6,7 @@ import OverViewProperty from './OverViewProperty';
 import { ItemSymbolDetailOverview } from '../type';
 import NFTImage from '@_components/NFTImage';
 import { Typography } from 'antd';
+import { useParams } from 'next/navigation';
 
 const { Paragraph } = Typography;
 
@@ -17,6 +18,7 @@ export interface OverViewProps {
 export default function OverView(props: OverViewProps) {
   const { overview, onHolderClick } = props;
   const { description, properties } = overview;
+  const { chain } = useParams();
   const collapseItems: CollapseProps['items'] = [
     {
       key: '1',
@@ -88,7 +90,7 @@ export default function OverView(props: OverViewProps) {
             <div className="nft-thumb-image-wrap">
               <NFTImage className="aspect-square w-full object-cover" src={overview.nftCollection?.imageUrl} />
             </div>
-            <Link href="/" className="text-link">
+            <Link href={`/${chain}/nft/${overview.nftCollection?.symbol}`} className="text-link">
               {overview.nftCollection?.name}
             </Link>
           </div>

src/app/[chain]/tx/[hash]/_components/baseInfo.tsx

@@ -144,10 +144,10 @@ export default function BaseInfo({ data }: { data: ITransactionDetailData }) {
                   return (
                     <div
                       key={idx}
-                      className={clsx(isMobile && 'flex-col !items-start gap-2', 'mb-4 flex items-center')}>
+                      className={clsx(isMobile && 'flex-col !items-start gap-2', 'mb-4 flex w-full items-center')}>
                       <div className="flex items-center">
                         <IconFont type="arrow" />
-                        <span className="mx-1 text-base-200">From</span>
+                        <div className="mx-1 shrink-0 text-base-200">From</div>
                         <ContractToken
                           address={tokenTransfer?.from?.address}
                           name={tokenTransfer?.from?.name}
@@ -156,7 +156,7 @@ export default function BaseInfo({ data }: { data: ITransactionDetailData }) {
                         />
                       </div>
                       <div className="flex items-center">
-                        <span className="mx-1 text-base-200">To</span>
+                        <div className="mx-1 shrink-0 text-base-200">To</div>
                         <ContractToken
                           address={tokenTransfer?.to?.address}
                           name={tokenTransfer?.to?.name}
@@ -165,7 +165,7 @@ export default function BaseInfo({ data }: { data: ITransactionDetailData }) {
                         />
                       </div>
                       <div className="flex items-center">
-                        <span className="mx-1 text-base-200">For</span>
+                        <div className="mx-1 shrink-0 text-base-200">For</div>
                         <span>{divDecimals(tokenTransfer.amount)}</span>
                         <DollarCurrencyRate nowPrice={tokenTransfer.nowPrice} tradePrice={tokenTransfer.tradePrice} />
                       </div>
@@ -209,19 +209,19 @@ export default function BaseInfo({ data }: { data: ITransactionDetailData }) {
 
                       <div className="nft-info ml-1">
                         <div className="text-xs leading-5">
-                          <span className="inline-block text-base-200">For</span>
-                          <span className="mx-1 inline-block">{idx + 1} Of NFT</span>
+                          <span className="inline-block shrink-0 text-base-200">For</span>
+                          <span className="mx-1 inline-block  shrink-0">{idx + 1} Of NFT</span>
                           <span className="inline-block text-link">{`${nftsTransfer.name}(${nftsTransfer.symbol})`}</span>
                         </div>
                         <div className="flex items-center">
-                          <span className="mr-1 inline-block">From</span>
+                          <span className="mr-1 inline-block shrink-0">From</span>
                           <ContractToken
                             address={nftsTransfer?.from?.address}
                             name={nftsTransfer?.from?.name}
                             type={nftsTransfer?.from?.addressType}
                             chainId={chain as string}
                           />
-                          <span className="mx-1 inline-block text-base-200">To</span>
+                          <span className="mx-1 inline-block shrink-0 text-base-200">To</span>
                           <ContractToken
                             address={nftsTransfer?.to?.address}
                             name={nftsTransfer?.to?.name}

src/app/layout.tsx

@@ -45,7 +45,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
   // const { price, previousPrice } = data;
   const headersList = headers();
   const isMobile = isMobileOnServer(headersList);
-  const { headerMenuList, footerMenuList, chainList, networkList } = await fetchCMS();
+  const { headerMenuList, footerMenuList, chainList, networkList, config } = await fetchCMS();
   console.log(footerMenuList, 'layout');
   return (
     <html lang="en">
@@ -71,7 +71,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
         <div className="relative box-border min-h-screen bg-global-grey">
           <PublicEnvProvider>
             <StyleRegistry>
-              <RootProvider isMobileSSR={isMobile}>
+              <RootProvider isMobileSSR={isMobile} config={config}>
                 <Suspense>
                   <Header chainList={chainList} networkList={networkList} headerMenuList={headerMenuList} />
                 </Suspense>

src/app/pageProvider.tsx

@@ -29,7 +29,7 @@ const useMobileContext = () => {
 };
 export { useMobileContext };
 
-function RootProvider({ children, isMobileSSR }) {
+function RootProvider({ children, isMobileSSR, config }) {
   const { NEXT_PUBLIC_REMOTE_URL } = useEnvContext();
   const storeRef = useRef<AppStore>();
   if (!storeRef.current) {
@@ -88,7 +88,7 @@ function RootProvider({ children, isMobileSSR }) {
   return (
     <AELFDProvider prefixCls={PREFIXCLS} theme={THEME_CONFIG}>
       <ConfigProvider prefixCls={PREFIXCLS} theme={THEME_CONFIG}>
-        <MobileContext.Provider value={{ isMobileSSR: isMobileSSR }}>
+        <MobileContext.Provider value={{ isMobileSSR: isMobileSSR, config }}>
           <ReduxProvider store={storeRef.current}>
             {isGovernance && (
               <>