fix(teleport): 修复资产列表显示重复问题并优化兑换信息展示

miniapps/teleport/src/App.stories.tsx

@@ -212,11 +212,9 @@ export const InputAmountStep: Story = {
       await expect(canvas.getByText('选择资产')).toBeInTheDocument()
     }, { timeout: 3000 })
 
-    // Click on ETH asset by finding the card-title with ETH text
-    const ethAssets = canvas.getAllByText('ETH')
-    const ethCardTitle = ethAssets.find(el => el.getAttribute('data-slot') === 'card-title')
-    const ethCard = ethCardTitle?.closest('[data-slot="card"]')
-    if (ethCard) await userEvent.click(ethCard)
+    // Click on ETH asset using data-testid
+    const ethCard = canvas.getByTestId('asset-card-ETH')
+    await userEvent.click(ethCard)
 
     // Verify amount input is shown
     await waitFor(async () => {
@@ -242,10 +240,8 @@ export const SelectTargetStep: Story = {
 
     // Wait for and click asset
     await waitFor(() => expect(canvas.getByText('选择资产')).toBeInTheDocument(), { timeout: 3000 })
-    const ethAssets = canvas.getAllByText('ETH')
-    const ethCardTitle = ethAssets.find(el => el.getAttribute('data-slot') === 'card-title')
-    const ethCard = ethCardTitle?.closest('[data-slot="card"]')
-    if (ethCard) await userEvent.click(ethCard)
+    const ethCard = canvas.getByTestId('asset-card-ETH')
+    await userEvent.click(ethCard)
 
     // Enter amount
     await waitFor(() => expect(canvas.getByRole('spinbutton')).toBeInTheDocument(), { timeout: 3000 })
@@ -277,10 +273,8 @@ export const ConfirmStep: Story = {
 
     // Select asset
     await waitFor(() => expect(canvas.getByText('选择资产')).toBeInTheDocument(), { timeout: 3000 })
-    const ethAssets = canvas.getAllByText('ETH')
-    const ethCardTitle = ethAssets.find(el => el.getAttribute('data-slot') === 'card-title')
-    const ethCard = ethCardTitle?.closest('[data-slot="card"]')
-    if (ethCard) await userEvent.click(ethCard)
+    const ethCard = canvas.getByTestId('asset-card-ETH')
+    await userEvent.click(ethCard)
 
     // Enter amount
     await waitFor(() => expect(canvas.getByRole('spinbutton')).toBeInTheDocument(), { timeout: 3000 })

miniapps/teleport/src/App.tsx

@@ -348,40 +348,46 @@ export default function App() {
                 <WalletCard label={t('wallet.source')} address={sourceAccount?.address} name={sourceAccount?.name} chain={sourceAccount?.chain} />
 
                 <div className="space-y-3">
-                  <CardDescription className="px-1">{t('asset.select')}</CardDescription>
+                  <div className="px-1">
+                    <CardDescription>{t('asset.select')}</CardDescription>
+                    <CardDescription className="text-xs text-muted-foreground/70">{t('asset.selectDesc')}</CardDescription>
+                  </div>
                   {availableAssets.length === 0 ? (
                     <Card>
                       <CardContent className="py-8 text-center text-muted-foreground">
                         {t('asset.noAssets')}
                       </CardContent>
                     </Card>
                   ) : (
-                    availableAssets.map((asset, i) => (
-                      <motion.div
-                        key={asset.id}
-                        initial={{ opacity: 0, y: 10 }}
-                        animate={{ opacity: 1, y: 0 }}
-                        transition={{ delay: i * 0.05 }}
-                      >
-                        <Card 
-                          data-testid={`asset-card-${asset.symbol}`}
-                          className="cursor-pointer transition-colors hover:bg-accent"
-                          onClick={() => handleSelectAsset(asset)}
+                    availableAssets.map((asset, i) => {
+                      const rate = (Number(asset.ratio.numerator) / Number(asset.ratio.denominator)).toFixed(4).replace(/\.?0+$/, '')
+                      return (
+                        <motion.div
+                          key={asset.id}
+                          initial={{ opacity: 0, y: 10 }}
+                          animate={{ opacity: 1, y: 0 }}
+                          transition={{ delay: i * 0.05 }}
                         >
-                          <CardContent className="py-3 flex items-center gap-3">
-                            <AssetAvatar symbol={asset.symbol} chain={asset.chain} />
-                            <div className="flex-1 min-w-0">
-                              <CardTitle className="text-base">{asset.symbol}</CardTitle>
-                              <CardDescription>{t('asset.transfer', { from: asset.chain, to: asset.targetChain })}</CardDescription>
-                            </div>
-                            <div className="text-right">
-                              <div className="font-semibold">{asset.balance || '-'}</div>
-                              <CardDescription>{t('asset.balance')}</CardDescription>
-                            </div>
-                          </CardContent>
-                        </Card>
-                      </motion.div>
-                    ))
+                          <Card 
+                            data-testid={`asset-card-${asset.symbol}`}
+                            className="cursor-pointer transition-colors hover:bg-accent"
+                            onClick={() => handleSelectAsset(asset)}
+                          >
+                            <CardContent className="py-3 flex items-center gap-3">
+                              <AssetAvatar symbol={asset.symbol} chain={asset.chain} />
+                              <div className="flex-1 min-w-0">
+                                <CardTitle className="text-base">{asset.symbol} {t('common.arrow')} {asset.targetAsset}</CardTitle>
+                                <CardDescription>{t('asset.ratio', { from: asset.symbol, rate, to: asset.targetAsset })}</CardDescription>
+                              </div>
+                              <div className="text-right">
+                                <div className="font-semibold">{asset.balance || '-'}</div>
+                                <CardDescription>{t('asset.balance')}</CardDescription>
+                              </div>
+                            </CardContent>
+                          </Card>
+                        </motion.div>
+                      )
+                    })
                   )}
                 </div>
               </motion.div>

miniapps/teleport/src/api/hooks.ts

@@ -53,9 +53,9 @@ export function useTransmitAssetTypeList() {
           assets.push({
             id: `${chainKey}-${assetKey}`,
             chain: chainKey as ChainName,
-            assetType: config.assetType,
-            symbol: config.assetType,
-            name: config.assetType,
+            assetType: assetKey,
+            symbol: assetKey,
+            name: assetKey,
             balance: '0', // 余额需要从钱包获取
             decimals: 8, // 默认精度，实际需要从链上获取
             recipientAddress: config.recipientAddress,

miniapps/teleport/src/i18n/locales/en.json

@@ -17,9 +17,12 @@
   },
   "asset": {
     "select": "Select Asset",
+    "selectDesc": "BFM Ecosystem Foundation Community Token Exchange",
     "balance": "Available",
     "noAssets": "No assets available for transfer on this chain",
-    "transfer": "{{from}} → {{to}}"
+    "transfer": "{{from}} → {{to}}",
+    "exchangeTo": "Exchange to {{target}} ({{chain}})",
+    "ratio": "1 {{from}} = {{rate}} {{to}}"
   },
   "wallet": {
     "source": "Source Wallet",

miniapps/teleport/src/i18n/locales/zh-CN.json

@@ -17,9 +17,12 @@
   },
   "asset": {
     "select": "选择资产",
+    "selectDesc": "BFM 生态基金会社区代币兑换",
     "balance": "可用",
     "noAssets": "当前链暂无可传送资产",
-    "transfer": "{{from}} → {{to}}"
+    "transfer": "{{from}} → {{to}}",
+    "exchangeTo": "兑换为 {{target}}（{{chain}}）",
+    "ratio": "1 {{from}} = {{rate}} {{to}}"
   },
   "wallet": {
     "source": "源钱包",

miniapps/teleport/src/i18n/locales/zh-TW.json

@@ -17,9 +17,12 @@
   },
   "asset": {
     "select": "選擇資產",
+    "selectDesc": "BFM 生態基金會社區代幣兌換",
     "balance": "可用",
     "noAssets": "當前鏈暫無可傳送資產",
-    "transfer": "{{from}} → {{to}}"
+    "transfer": "{{from}} → {{to}}",
+    "exchangeTo": "兌換為 {{target}}（{{chain}}）",
+    "ratio": "1 {{from}} = {{rate}} {{to}}"
   },
   "wallet": {
     "source": "源錢包",

miniapps/teleport/src/i18n/locales/zh.json

@@ -17,9 +17,12 @@
   },
   "asset": {
     "select": "选择资产",
+    "selectDesc": "BFM 生态基金会社区代币兑换",
     "balance": "可用",
     "noAssets": "当前链暂无可传送资产",
-    "transfer": "{{from}} → {{to}}"
+    "transfer": "{{from}} → {{to}}",
+    "exchangeTo": "兑换为 {{target}}（{{chain}}）",
+    "ratio": "1 {{from}} = {{rate}} {{to}}"
   },
   "wallet": {
     "source": "源钱包",