diff --git a/miniapps/teleport/src/App.stories.tsx b/miniapps/teleport/src/App.stories.tsx index 33da845a5..f24d04c7a 100644 --- a/miniapps/teleport/src/App.stories.tsx +++ b/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 }) diff --git a/miniapps/teleport/src/App.tsx b/miniapps/teleport/src/App.tsx index 0abff6def..eecdb65e3 100644 --- a/miniapps/teleport/src/App.tsx +++ b/miniapps/teleport/src/App.tsx @@ -348,7 +348,10 @@ export default function App() {
- {t('asset.select')} +
+ {t('asset.select')} + {t('asset.selectDesc')} +
{availableAssets.length === 0 ? ( @@ -356,32 +359,35 @@ export default function App() { ) : ( - availableAssets.map((asset, i) => ( - - handleSelectAsset(asset)} + availableAssets.map((asset, i) => { + const rate = (Number(asset.ratio.numerator) / Number(asset.ratio.denominator)).toFixed(4).replace(/\.?0+$/, '') + return ( + - - -
- {asset.symbol} - {t('asset.transfer', { from: asset.chain, to: asset.targetChain })} -
-
-
{asset.balance || '-'}
- {t('asset.balance')} -
- - - - )) + handleSelectAsset(asset)} + > + + +
+ {asset.symbol} {t('common.arrow')} {asset.targetAsset} + {t('asset.ratio', { from: asset.symbol, rate, to: asset.targetAsset })} +
+
+
{asset.balance || '-'}
+ {t('asset.balance')} +
+ + + + ) + }) )}
diff --git a/miniapps/teleport/src/api/hooks.ts b/miniapps/teleport/src/api/hooks.ts index d66045a21..459a0be21 100644 --- a/miniapps/teleport/src/api/hooks.ts +++ b/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, diff --git a/miniapps/teleport/src/i18n/locales/en.json b/miniapps/teleport/src/i18n/locales/en.json index e5accf9f1..9af8eb21d 100644 --- a/miniapps/teleport/src/i18n/locales/en.json +++ b/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", diff --git a/miniapps/teleport/src/i18n/locales/zh-CN.json b/miniapps/teleport/src/i18n/locales/zh-CN.json index ae9934b91..2e58faf34 100644 --- a/miniapps/teleport/src/i18n/locales/zh-CN.json +++ b/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": "源钱包", diff --git a/miniapps/teleport/src/i18n/locales/zh-TW.json b/miniapps/teleport/src/i18n/locales/zh-TW.json index b7ecfb4cc..d78485f72 100644 --- a/miniapps/teleport/src/i18n/locales/zh-TW.json +++ b/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": "源錢包", diff --git a/miniapps/teleport/src/i18n/locales/zh.json b/miniapps/teleport/src/i18n/locales/zh.json index ae9934b91..2e58faf34 100644 --- a/miniapps/teleport/src/i18n/locales/zh.json +++ b/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": "源钱包",