fix: show correct step details label

lifinance · Jul 15, 2022 · 931a67d · 931a67d
1 parent 8d36f1c
commit 931a67d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/packages/widget/src/components/StepActions/StepActions.tsx b/packages/widget/src/components/StepActions/StepActions.tsx
@@ -57,7 +57,11 @@ export const StepActions: React.FC<StepActionsProps> = ({
           {(step as LifiStep).includedSteps.map((step) => (
             <MuiStep key={step.id} expanded>
               <StepLabel StepIconComponent={StepIcon}>
-                <StepDetailsLabel step={step} />
+                {step.type === 'cross' || step.type === 'lifi' ? (
+                  <CrossStepDetailsLabel step={step} />
+                ) : (
+                  <SwapStepDetailsLabel step={step} />
+                )}
               </StepLabel>
               <StepContent>
                 <StepDetailsContent step={step} />
@@ -102,7 +106,6 @@ export const StepDetailsContent: React.FC<{ step: Step }> = ({ step }) => {
 export const CrossStepDetailsLabel: React.FC<{ step: Step }> = ({ step }) => {
   const { t } = useTranslation();
   const { getChainById } = useChains();
-
   return (
     <Typography fontSize={12} fontWeight="500" color="text.secondary">
       {t('swap.crossStepDetails', {
@@ -116,10 +119,12 @@ export const CrossStepDetailsLabel: React.FC<{ step: Step }> = ({ step }) => {
 
 export const SwapStepDetailsLabel: React.FC<{ step: Step }> = ({ step }) => {
   const { t } = useTranslation();
+  const { getChainById } = useChains();
   return (
     <Typography fontSize={12} fontWeight="500" color="text.secondary">
       {t('swap.swapStepDetails', {
-        value: step.toolDetails.name,
+        chain: getChainById(step.action.fromChainId)?.name,
+        tool: step.toolDetails.name,
       })}
     </Typography>
   );

diff --git a/packages/widget/src/i18n/en/translation.json b/packages/widget/src/i18n/en/translation.json
@@ -52,7 +52,7 @@
     "estimatedTime": "~{{value}} min.",
     "networkIsBusy": "Network is busy...",
     "crossStepDetails": "Bridge {{from}} to {{to}} via {{tool}}",
-    "swapStepDetails": "Swap on {{value}}",
+    "swapStepDetails": "Swap on {{chain}} via {{tool}}",
     "tags": {
       "recommended": "Recommended",
       "fastest": "Fast",