https://github.com/unisat-wallet/extension/pull/271

package.json

@@ -1,6 +1,6 @@
 {
   "name": "unisat-extension",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "private": true,
   "homepage": "https://github.com/unisat-wallet/extension#readme",
   "bugs": {

release-notes.md

@@ -1,5 +1,11 @@
 # UniSat Wallet Release Notes
 
+## v1.7.3
+
+New Features
+
+- Added support for BRC 2.0
+
 ## v1.7.2
 
 New Features

src/background/controller/wallet.ts

@@ -2867,5 +2867,18 @@ export class WalletController extends BaseController {
   getBRC20RecentHistory(address: string, ticker: string): Promise<BRC20HistoryItem[]> {
     return openapiService.getBRC20RecentHistory(address, ticker);
   }
+
+  getBRC20ProgList = async (address: string, currentPage: number, pageSize: number) => {
+    const cursor = (currentPage - 1) * pageSize;
+    const size = pageSize;
+    const { total, list } = await openapiService.getBRC20ProgList(address, cursor, size);
+
+    return {
+      currentPage,
+      pageSize,
+      total,
+      list
+    };
+  };
 }
 export default new WalletController();

src/background/service/openapi.ts

@@ -967,6 +967,14 @@ export class OpenApiService {
       feeRate
     });
   }
+
+  async getBRC20ProgList(
+    address: string,
+    cursor: number,
+    size: number
+  ): Promise<{ list: TokenBalance[]; total: number }> {
+    return this.httpGet('/v5/brc20-prog/list', { address, cursor, size, type: 5 });
+  }
 }
 
 export default new OpenApiService();

src/shared/constant/index.ts

@@ -247,6 +247,7 @@ export type TypeChain = {
   showPrice: boolean;
   defaultExplorer: 'mempool-space' | 'unisat-explorer';
   enableBrc20SingleStep?: boolean;
+  enableBrc20Prog?: boolean;
 };
 
 export const CHAINS_MAP: { [key: string]: TypeChain } = {
@@ -264,7 +265,8 @@ export const CHAINS_MAP: { [key: string]: TypeChain } = {
     unisatExplorerUrl: 'https://uniscan.cc',
     okxExplorerUrl: '',
     showPrice: true,
-    defaultExplorer: 'unisat-explorer'
+    defaultExplorer: 'unisat-explorer',
+    enableBrc20Prog: true
   },
   [ChainType.BITCOIN_TESTNET]: {
     enum: ChainType.BITCOIN_TESTNET,
@@ -312,7 +314,8 @@ export const CHAINS_MAP: { [key: string]: TypeChain } = {
     unisatExplorerUrl: 'https://uniscan.cc/signet',
     okxExplorerUrl: '',
     showPrice: false,
-    defaultExplorer: 'unisat-explorer'
+    defaultExplorer: 'unisat-explorer',
+    enableBrc20Prog: true
   },
   [ChainType.FRACTAL_BITCOIN_MAINNET]: {
     enum: ChainType.FRACTAL_BITCOIN_MAINNET,

src/shared/types.ts

@@ -442,6 +442,7 @@ export interface AddressSummary {
   atomicalsCount: number;
   brc20Count: number;
   brc20Count5Byte: number;
+  brc20Count6Byte: number;
   arc20Count: number;
   runesCount: number;
   loading?: boolean;

src/ui/pages/BRC20/BRC20TokenScreen.tsx

@@ -292,36 +292,66 @@ export default function BRC20TokenScreen() {
   const chainType = useChainType();
   const chain = useChain();
 
+  const isBrc20Prog = useMemo(() => {
+    if (chainType === ChainType.BITCOIN_MAINNET || chainType === ChainType.BITCOIN_SIGNET) {
+      if (ticker.length == 6) {
+        return true;
+      }
+    }
+    return false;
+  }, [ticker, chainType]);
+
   const enableTrade = useMemo(() => {
+    if (isBrc20Prog) {
+      return false;
+    }
     if (chainType === ChainType.BITCOIN_MAINNET || chainType === ChainType.FRACTAL_BITCOIN_MAINNET) {
       return true;
     } else {
       return false;
     }
-  }, [chainType]);
+  }, [chainType, isBrc20Prog]);
+
+  const enableHistory = isBrc20Prog ? false : true;
 
   const shouldUseTwoRowLayout = useMemo(() => {
     return enableTrade && chain.enableBrc20SingleStep;
   }, [enableTrade, chain.enableBrc20SingleStep]);
 
   const marketPlaceUrl = useBRC20MarketPlaceWebsite(ticker);
 
+  const inscribePlaceUrl = useMemo(() => {
+    if (isBrc20Prog) {
+      return `${unisatWebsite}/inscribe?tab=brc20-prog&tick=${encodeURIComponent(ticker)}`;
+    }
+    return `${unisatWebsite}/inscribe?tick=${encodeURIComponent(ticker)}`;
+  }, [isBrc20Prog, ticker, unisatWebsite]);
+
   const tabItems = useMemo(() => {
-    const items = [
-      {
-        key: TabKey.HISTORY,
-        label: t('history')
-      },
-      {
-        key: TabKey.DETAILS,
-        label: t('details')
-      }
-    ];
-    return items;
-  }, [t]);
+    if (enableHistory) {
+      const items = [
+        {
+          key: TabKey.HISTORY,
+          label: t('history')
+        },
+        {
+          key: TabKey.DETAILS,
+          label: t('details')
+        }
+      ];
+      return items;
+    } else {
+      return [
+        {
+          key: TabKey.DETAILS,
+          label: t('details')
+        }
+      ];
+    }
+  }, [t, enableHistory]);
 
   const renderTabChildren = useMemo(() => {
-    if (activeTab === TabKey.HISTORY) {
+    if (activeTab === TabKey.HISTORY && enableHistory) {
       return <BRC20TokenHistory ticker={ticker} />;
     }
 
@@ -375,7 +405,7 @@ export default function BRC20TokenScreen() {
         </Column>
       );
     }
-  }, [activeTab, deployInscription]);
+  }, [activeTab, deployInscription, enableHistory, tokenSummary]);
 
   return (
     <Layout>
@@ -399,7 +429,11 @@ export default function BRC20TokenScreen() {
                   color={'ticker_color2'}
                 />
                 <Row style={{ backgroundColor: 'rgba(244, 182, 44, 0.15)', borderRadius: 4 }} px="md" py="sm">
-                  <Text text={'brc-20'} style={{ color: 'rgba(244, 182, 44, 0.85)' }} />
+                  {isBrc20Prog ? (
+                    <Text text={'brc2.0'} style={{ color: 'rgba(244, 182, 44, 0.85)' }} />
+                  ) : (
+                    <Text text={'brc-20'} style={{ color: 'rgba(244, 182, 44, 0.85)' }} />
+                  )}
                 </Row>
               </Row>
               <Column itemsCenter fullX justifyCenter>
@@ -420,7 +454,7 @@ export default function BRC20TokenScreen() {
                     disabled={!enableMint}
                     icon="pencil"
                     onClick={(e) => {
-                      window.open(`${unisatWebsite}/inscribe?tick=${encodeURIComponent(ticker)}`);
+                      window.open(inscribePlaceUrl);
                     }}
                     full
                   />
@@ -489,7 +523,7 @@ export default function BRC20TokenScreen() {
                   disabled={!enableMint}
                   icon="pencil"
                   onClick={(e) => {
-                    window.open(`${unisatWebsite}/brc20/${encodeURIComponent(ticker)}`);
+                    window.open(inscribePlaceUrl);
                   }}
                   style={{
                     ...(!enableMint ? { backgroundColor: 'rgba(255,255,255,0.15)' } : {}),
@@ -536,26 +570,27 @@ export default function BRC20TokenScreen() {
                       });
                     }}
                   />
-                ) : enableTrade ? (
+                ) : (
                   <Button
                     text={t('trade')}
                     preset="home"
                     icon="trade"
+                    disabled={!enableTrade}
                     onClick={(e) => {
                       window.open(marketPlaceUrl);
                     }}
                     style={{
                       width: '101px'
                     }}
                   />
-                ) : null}
+                )}
               </Row>
             )}
           </Column>
 
           <TabBar
-            defaultActiveKey={activeTab}
-            activeKey={activeTab}
+            defaultActiveKey={enableHistory ? activeTab : TabKey.DETAILS}
+            activeKey={enableHistory ? activeTab : TabKey.DETAILS}
             items={tabItems}
             preset="style3"
             onTabClick={(key) => {

src/ui/pages/Main/WalletTabScreen/BRC20ProgList.tsx

@@ -0,0 +1,96 @@
+import { useEffect, useState } from 'react';
+
+import { TickPriceItem, TokenBalance } from '@/shared/types';
+import { Column, Row } from '@/ui/components';
+import { useTools } from '@/ui/components/ActionComponent';
+import BRC20BalanceCard2 from '@/ui/components/BRC20BalanceCard2';
+import { Empty } from '@/ui/components/Empty';
+import { Pagination } from '@/ui/components/Pagination';
+import { useI18n } from '@/ui/hooks/useI18n';
+import { useCurrentAccount } from '@/ui/state/accounts/hooks';
+import { useChainType } from '@/ui/state/settings/hooks';
+import { useWallet } from '@/ui/utils';
+import { LoadingOutlined } from '@ant-design/icons';
+
+import { useNavigate } from '../../MainRoute';
+
+export function BRC20ProgList() {
+  const navigate = useNavigate();
+  const wallet = useWallet();
+  const currentAccount = useCurrentAccount();
+  const chainType = useChainType();
+  const { t } = useI18n();
+
+  const [tokens, setTokens] = useState<TokenBalance[]>([]);
+  const [total, setTotal] = useState(-1);
+  const [pagination, setPagination] = useState({ currentPage: 1, pageSize: 100 });
+  const [priceMap, setPriceMap] = useState<{ [key: string]: TickPriceItem }>();
+
+  const tools = useTools();
+  const fetchData = async () => {
+    try {
+      const { list, total } = await wallet.getBRC20ProgList(
+        currentAccount.address,
+        pagination.currentPage,
+        pagination.pageSize
+      );
+      setTokens(list);
+      setTotal(total);
+      if (list.length > 0) {
+        wallet.getBrc20sPrice(list.map((item) => item.ticker)).then(setPriceMap);
+      }
+    } catch (e) {
+      tools.toastError((e as Error).message);
+    } finally {
+      // tools.showLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, [pagination, currentAccount.address, chainType]);
+
+  if (total === -1) {
+    return (
+      <Column style={{ minHeight: 150 }} itemsCenter justifyCenter>
+        <LoadingOutlined />
+      </Column>
+    );
+  }
+
+  if (total === 0) {
+    return (
+      <Column style={{ minHeight: 150 }} itemsCenter justifyCenter>
+        <Empty text={t('empty')} />
+      </Column>
+    );
+  }
+
+  return (
+    <Column>
+      <Row style={{ flexWrap: 'wrap' }} gap="sm">
+        {tokens.map((data, index) => (
+          <BRC20BalanceCard2
+            key={'brc20-' + index + data.ticker}
+            tokenBalance={data}
+            showPrice={priceMap !== undefined}
+            price={priceMap?.[data.ticker]}
+            onClick={() => {
+              navigate('BRC20TokenScreen', { tokenBalance: data, ticker: data.ticker });
+            }}
+          />
+        ))}
+      </Row>
+
+      <Row justifyCenter mt="lg">
+        <Pagination
+          pagination={pagination}
+          total={total}
+          onChange={(pagination) => {
+            setPagination(pagination);
+          }}
+        />
+      </Row>
+    </Column>
+  );
+}

src/ui/pages/Main/WalletTabScreen/OrdinalsTab.tsx

@@ -9,6 +9,7 @@ import { useChain } from '@/ui/state/settings/hooks';
 import { useOrdinalsAssetTabKey } from '@/ui/state/ui/hooks';
 import { OrdinalsAssetTabKey, uiActions } from '@/ui/state/ui/reducer';
 
+import { BRC20ProgList } from './BRC20ProgList';
 import { BRC20List } from './Brc20List';
 import { InscriptionList } from './InscriptionList';
 
@@ -39,13 +40,13 @@ export function OrdinalsTab() {
       }
     ];
 
-    // if (!chain.isFractal) {
-    //   items.push({
-    //     key: OrdinalsAssetTabKey.BRC20_5BYTE,
-    //     label: `brc-20[5-byte] (${addressSummary.brc20Count5Byte || 0})`,
-    //     children: <BRC20List5Byte />
-    //   });
-    // }
+    if (chain.enableBrc20Prog) {
+      items.push({
+        key: OrdinalsAssetTabKey.BRC20_5BYTE,
+        label: `brc2.0 (${addressSummary.brc20Count6Byte || 0})`,
+        children: <BRC20ProgList />
+      });
+    }
     return items;
   }, [addressSummary, chain]);
 

src/ui/utils/WalletContext.tsx

@@ -299,6 +299,12 @@ export interface WalletController {
     pageSize: number
   ): Promise<{ currentPage: number; pageSize: number; total: number; list: TokenBalance[] }>;
 
+  getBRC20ProgList(
+    address: string,
+    currentPage: number,
+    pageSize: number
+  ): Promise<{ currentPage: number; pageSize: number; total: number; list: TokenBalance[] }>;
+
   getBRC20TransferableList(
     address: string,
     ticker: string,