Merge pull request #946 from bobanetwork/fix/issues-reported

Fix/issues reported

Author: sk-enya

src/components/common/tokenImage.tsx

@@ -11,6 +11,13 @@ const TokenImage: FC<TokenImageProps> = ({
   className
 }) => {
 
+  if (symbol === 'Token') {
+    return (
+      <div className={`w-8 h-8 rounded-full bg-gray-400 dark:bg-gray-700`}>
+      </div>
+    )
+  }
+
   return (
     <img
       src={`${DATA_URL_TOKEN_ASSET}/${symbol.toLowerCase()}.svg`}

src/layout/bridge/TokenAmountSelection.tsx

@@ -15,8 +15,8 @@ export const TokenSelection: React.FC = () => {
     <Button
       onClick={() => { openModal(ModalIds.TokenPicker) }}
       className="flex h-11 justify-start items-center gap-1 w-full rounded-s-full shadow-sm px-[12px] py-2 text-gray-800 border border-gray-500 dark:border-dark-gray-300 bg-transperant">
-      <TokenImage symbol={selectedToken?.symbol ?? 'BOBA'} />
-      <Text variant="small"  >{selectedToken?.symbol ?? 'Boba'}</Text>
+      <TokenImage symbol={selectedToken?.symbol ?? 'Token'} />
+      <Text variant="small"  >{selectedToken?.symbol ?? 'Token'}</Text>
     </Button>
   </div>
 }

src/layout/hub/TokenMarketChart.tsx

@@ -12,6 +12,7 @@ interface IChartColors {
 
 export const TokenMarketChart = () => {
   const { currentFilter, chartData, refetch } = useTokenMarketChart();
+
   const [colors, setColors] = useState<IChartColors>({
     backgroundColor: 'rgba(255, 255, 255, 0)',
     lineColor: '#91D065',
@@ -105,7 +106,7 @@ export const TokenMarketChart = () => {
         fixLeftEdge: true,
         fixRightEdge: true,
         tickMarkFormatter: (time: number) => {
-          const date = new Date(time * 1000);
+          const date = new Date(time);
           switch (currentFilter) {
             case '1D':
               return new Intl.DateTimeFormat('en-US', {

src/layout/stake/StakeHistory.tsx

@@ -66,6 +66,7 @@ const StakeHistory: React.FC<StakeHistoryProps> = ({
 
   const calculateTotalEarned = () => {
     return stakingHistory.reduce((total, stake) => {
+      if (!stake.isActive) return total;
       const earned = calculateStakeEarnings(
         Number(stake.depositAmount),
         stake.depositTimestamp
@@ -80,7 +81,7 @@ const StakeHistory: React.FC<StakeHistoryProps> = ({
     <div className="space-y-4">
       <div className="flex justify-between items-center">
         <Text variant="h5" className="text-gray-800 dark:text-dark-gray-50">Staking History</Text>
-        <Text variant="small" className="text-muted-foreground">Total Earned: {formatNumberWithIntl(totalEarned, 2)} BOBA</Text>
+        <Text variant="small" className="text-muted-foreground">Total Locked Earnings: {formatNumberWithIntl(totalEarned, 2)} BOBA</Text>
       </div>
 
       <div className="space-y-4">

src/layout/stake/StakeHistoryItem.tsx

@@ -70,7 +70,9 @@ const StakeHistoryItem: React.FC<StakeHistoryItemProps> = ({ stake, onUnstake })
         </div>
         <div>
           <Text variant="small" className="text-gray-600 dark:text-dark-gray-100">Earned</Text>
-          <p className="text-sm text-gray-900 dark:text-gray-100">{formatNumberWithIntl(earned, 4)}</p>
+          <p className={`text-sm ${stake.isActive ? "text-gray-900 dark:text-gray-100" : "text-muted-foreground"}`}>
+            {!stake.isActive ? "claimed" : formatNumberWithIntl(earned, 4)}
+          </p>
         </div>
       </div>