|  | @@ -13,11 +13,15 @@
 | 
	
		
			
				|  |  |          class="icon-currency"
 | 
	
		
			
				|  |  |          :src="currencyInfo.iconPath"/>
 | 
	
		
			
				|  |  |        <div class="amount">
 | 
	
		
			
				|  |  | -        <div class="balance">
 | 
	
		
			
				|  |  | -          <a-tooltip :title="'$'+currencyInfo.totalBalance">
 | 
	
		
			
				|  |  | -              ${{ getBit(currencyInfo.totalBalance) }}
 | 
	
		
			
				|  |  | +        <div class="balance"
 | 
	
		
			
				|  |  | +             :class="{'direction-column': (currencyInfo.totalBalance.length + currencyInfo.tokenSymbol.length) > 12}">
 | 
	
		
			
				|  |  | +             
 | 
	
		
			
				|  |  | +          <a-tooltip :title="currencyInfo.totalBalance">
 | 
	
		
			
				|  |  | +              {{ getBit(currencyInfo.totalBalance) }}
 | 
	
		
			
				|  |  |            </a-tooltip> 
 | 
	
		
			
				|  |  | -          {{currencyInfo.tokenSymbol}}
 | 
	
		
			
				|  |  | +          <span class="symbol">
 | 
	
		
			
				|  |  | +             {{currencyInfo.tokenSymbol}}
 | 
	
		
			
				|  |  | +          </span>
 | 
	
		
			
				|  |  |          </div>
 | 
	
		
			
				|  |  |          <div class="final">
 | 
	
		
			
				|  |  |            <a-tooltip :title="'$'+currencyInfo.totalUsdEstimateBalance">
 | 
	
	
		
			
				|  | @@ -59,7 +63,10 @@ import currencySelect from "@/view/components/currency-select.vue";
 | 
	
		
			
				|  |  |  import { getBit } from "@/uilts/help";
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  let currenciesData = ref([]);
 | 
	
		
			
				|  |  | -let currencyInfo = ref({});
 | 
	
		
			
				|  |  | +let currencyInfo = ref({
 | 
	
		
			
				|  |  | +  totalBalance: '',
 | 
	
		
			
				|  |  | +  tokenSymbol: ''
 | 
	
		
			
				|  |  | +});
 | 
	
		
			
				|  |  |  let showCurrencySelect = ref(false);
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  let currencyOpertionType = '';
 | 
	
	
		
			
				|  | @@ -220,6 +227,17 @@ onMounted(() => {
 | 
	
		
			
				|  |  |          box-sizing: border-box;
 | 
	
		
			
				|  |  |          width: 100%;
 | 
	
		
			
				|  |  |          word-break: break-word;
 | 
	
		
			
				|  |  | +        display: flex;
 | 
	
		
			
				|  |  | +        align-items: center;
 | 
	
		
			
				|  |  | +        justify-content: center;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .symbol{
 | 
	
		
			
				|  |  | +          word-break: break-all;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +      .direction-column {
 | 
	
		
			
				|  |  | +        flex-direction: column;
 | 
	
		
			
				|  |  |        }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |        .final {
 |