@rango-dev/ui 0.26.0 → 0.26.1-next.1

package/dist/translations/en.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../../translations/en.ts"],"names":[],"mappings":"AAAkB,eAAO,MAAM,QAAQ,KAAqla,CAAC"}
+{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../../translations/en.ts"],"names":[],"mappings":"AAAkB,eAAO,MAAM,QAAQ,KAAmxa,CAAC"}

package/dist/translations/es.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"es.d.ts","sourceRoot":"","sources":["../../../../translations/es.ts"],"names":[],"mappings":"AAAkB,eAAO,MAAM,QAAQ,KAAo3b,CAAC"}
+{"version":3,"file":"es.d.ts","sourceRoot":"","sources":["../../../../translations/es.ts"],"names":[],"mappings":"AAAkB,eAAO,MAAM,QAAQ,KAAkjc,CAAC"}

package/dist/translations/fr.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fr.d.ts","sourceRoot":"","sources":["../../../../translations/fr.ts"],"names":[],"mappings":"AAAkB,eAAO,MAAM,QAAQ,KAAgic,CAAC"}
+{"version":3,"file":"fr.d.ts","sourceRoot":"","sources":["../../../../translations/fr.ts"],"names":[],"mappings":"AAAkB,eAAO,MAAM,QAAQ,KAA8tc,CAAC"}

package/dist/translations/ja.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ja.d.ts","sourceRoot":"","sources":["../../../../translations/ja.ts"],"names":[],"mappings":"AAAkB,eAAO,MAAM,QAAQ,KAAs2W,CAAC"}
+{"version":3,"file":"ja.d.ts","sourceRoot":"","sources":["../../../../translations/ja.ts"],"names":[],"mappings":"AAAkB,eAAO,MAAM,QAAQ,KAAoiX,CAAC"}

package/dist/widget/ui/src/components/PriceImpact/PriceImpact.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PriceImpact.d.ts","sourceRoot":"","sources":["../../../../../../src/components/PriceImpact/PriceImpact.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBAuClD"}
+{"version":3,"file":"PriceImpact.d.ts","sourceRoot":"","sources":["../../../../../../src/components/PriceImpact/PriceImpact.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBAyDlD"}

package/dist/widget/ui/src/components/PriceImpact/PriceImpact.types.d.ts

@@ -1,9 +1,15 @@
+import type { PropTypes as TooltipPropTypes } from '../Tooltip/Tooltip.types';
 export type PriceImpactWarningLevel = 'low' | 'high' | undefined;
 export type PriceImpactProps = {
     size: 'small' | 'large';
     outputUsdValue?: string;
+    realOutputUsdValue?: string;
     error?: string;
     percentageChange?: string | null;
     warningLevel?: PriceImpactWarningLevel;
+    tooltipProps?: {
+        container?: TooltipPropTypes['container'];
+        side?: TooltipPropTypes['side'];
+    };
 };
 //# sourceMappingURL=PriceImpact.types.d.ts.map

package/dist/widget/ui/src/components/PriceImpact/PriceImpact.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PriceImpact.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/PriceImpact/PriceImpact.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,uBAAuB,GAAG,KAAK,GAAG,MAAM,GAAG,SAAS,CAAC;AAEjE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,OAAO,GAAG,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,YAAY,CAAC,EAAE,uBAAuB,CAAC;CACxC,CAAC"}
+{"version":3,"file":"PriceImpact.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/PriceImpact/PriceImpact.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,IAAI,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE9E,MAAM,MAAM,uBAAuB,GAAG,KAAK,GAAG,MAAM,GAAG,SAAS,CAAC;AAEjE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,OAAO,GAAG,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,YAAY,CAAC,EAAE,uBAAuB,CAAC;IACvC,YAAY,CAAC,EAAE;QACb,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;QAC1C,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;KACjC,CAAC;CACH,CAAC"}

package/dist/widget/ui/src/components/StepDetails/StepDetails.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StepDetails.d.ts","sourceRoot":"","sources":["../../../../../../src/components/StepDetails/StepDetails.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAG5D,OAAO,KAA8C,MAAM,OAAO,CAAC;AAyGnE,eAAO,MAAM,WAAW,oHAA6B,CAAC"}
+{"version":3,"file":"StepDetails.d.ts","sourceRoot":"","sources":["../../../../../../src/components/StepDetails/StepDetails.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAG5D,OAAO,KAA8C,MAAM,OAAO,CAAC;AAyHnE,eAAO,MAAM,WAAW,oHAA6B,CAAC"}

package/dist/widget/ui/src/components/StepDetails/StepDetails.types.d.ts

@@ -19,6 +19,7 @@ export type StepDetailsProps = {
     state?: 'default' | 'in-progress' | 'completed' | 'warning' | 'error';
     isFocused?: boolean;
     tabIndex?: number;
+    tooltipContainer?: HTMLElement;
 };
 export {};
 //# sourceMappingURL=StepDetails.types.d.ts.map

package/dist/widget/ui/src/components/StepDetails/StepDetails.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StepDetails.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/StepDetails/StepDetails.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAE/E,KAAK,QAAQ,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC,CAAC;AAElE,MAAM,MAAM,IAAI,GAAG;IACjB,OAAO,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IACjC,IAAI,EAAE,QAAQ,CAAC;IACf,EAAE,EAAE,QAAQ,CAAC;IACb,KAAK,CAAC,EAAE;QACN,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;IACF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,IAAI,CAAC;IACX,YAAY,EAAE,OAAO,CAAC;IACtB,IAAI,EAAE,eAAe,GAAG,eAAe,CAAC;IACxC,KAAK,CAAC,EAAE,SAAS,GAAG,aAAa,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,CAAC;IACtE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC"}
+{"version":3,"file":"StepDetails.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/StepDetails/StepDetails.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAE/E,KAAK,QAAQ,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC,CAAC;AAElE,MAAM,MAAM,IAAI,GAAG;IACjB,OAAO,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IACjC,IAAI,EAAE,QAAQ,CAAC;IACf,EAAE,EAAE,QAAQ,CAAC;IACb,KAAK,CAAC,EAAE;QACN,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;IACF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,IAAI,CAAC;IACX,YAAY,EAAE,OAAO,CAAC;IACtB,IAAI,EAAE,eAAe,GAAG,eAAe,CAAC;IACxC,KAAK,CAAC,EAAE,SAAS,GAAG,aAAa,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,CAAC;IACtE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,WAAW,CAAC;CAChC,CAAC"}

package/dist/widget/ui/src/components/SwapListItem/SwapListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SwapListItem.d.ts","sourceRoot":"","sources":["../../../../../../src/components/SwapListItem/SwapListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAiB1B,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,CAAC,SAAS,CAAC,qBA2C/D"}
+{"version":3,"file":"SwapListItem.d.ts","sourceRoot":"","sources":["../../../../../../src/components/SwapListItem/SwapListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAiB1B,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,CAAC,SAAS,CAAC,qBAgD/D"}

package/dist/widget/ui/src/components/SwapListItem/SwapListItem.types.d.ts

@@ -6,6 +6,7 @@ export interface SwapListItemProps {
     onClick: (requestId: string) => void;
     swapTokenData: SwapTokenData;
     onlyShowTime?: boolean;
+    tooltipContainer?: HTMLElement;
 }
 export interface LoadingProps {
     isLoading: true;
@@ -36,7 +37,7 @@ export interface SwapTokenData {
             image: string;
         };
         amount: string;
-        estimatedAmount?: string;
+        realAmount: string;
     };
 }
 //# sourceMappingURL=SwapListItem.types.d.ts.map

package/dist/widget/ui/src/components/SwapListItem/SwapListItem.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SwapListItem.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/SwapListItem/SwapListItem.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEtD,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,aAAa,EAAE,aAAa,CAAC;IAC7B,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,YAAY;IAC3B,SAAS,EAAE,IAAI,CAAC;CACjB;AAED,MAAM,MAAM,SAAS,GAAG,iBAAiB,GAAG,YAAY,CAAC;AAEzD,eAAO,MAAM,YAAY;;;;CAIxB,CAAC;AAEF,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE;QACJ,KAAK,EAAE;YACL,KAAK,EAAE,MAAM,CAAC;YACd,WAAW,EAAE,MAAM,CAAC;SACrB,CAAC;QACF,UAAU,EAAE;YACV,KAAK,EAAE,MAAM,CAAC;SACf,CAAC;QACF,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IAEF,EAAE,EAAE;QACF,KAAK,EAAE;YACL,KAAK,EAAE,MAAM,CAAC;YACd,WAAW,EAAE,MAAM,CAAC;SACrB,CAAC;QACF,UAAU,EAAE;YACV,KAAK,EAAE,MAAM,CAAC;SACf,CAAC;QACF,MAAM,EAAE,MAAM,CAAC;QACf,eAAe,CAAC,EAAE,MAAM,CAAC;KAC1B,CAAC;CACH"}
+{"version":3,"file":"SwapListItem.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/SwapListItem/SwapListItem.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEtD,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,aAAa,EAAE,aAAa,CAAC;IAC7B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,WAAW,CAAC;CAChC;AAED,MAAM,WAAW,YAAY;IAC3B,SAAS,EAAE,IAAI,CAAC;CACjB;AAED,MAAM,MAAM,SAAS,GAAG,iBAAiB,GAAG,YAAY,CAAC;AAEzD,eAAO,MAAM,YAAY;;;;CAIxB,CAAC;AAEF,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE;QACJ,KAAK,EAAE;YACL,KAAK,EAAE,MAAM,CAAC;YACd,WAAW,EAAE,MAAM,CAAC;SACrB,CAAC;QACF,UAAU,EAAE;YACV,KAAK,EAAE,MAAM,CAAC;SACf,CAAC;QACF,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IAEF,EAAE,EAAE;QACF,KAAK,EAAE;YACL,KAAK,EAAE,MAAM,CAAC;YACd,WAAW,EAAE,MAAM,CAAC;SACrB,CAAC;QACF,UAAU,EAAE;YACV,KAAK,EAAE,MAAM,CAAC;SACf,CAAC;QACF,MAAM,EAAE,MAAM,CAAC;QACf,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC;CACH"}

package/dist/widget/ui/src/components/SwapListItem/SwapToken.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SwapToken.d.ts","sourceRoot":"","sources":["../../../../../../src/components/SwapListItem/SwapToken.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAGnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAmB1B,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,qBA8HzC"}
+{"version":3,"file":"SwapToken.d.ts","sourceRoot":"","sources":["../../../../../../src/components/SwapListItem/SwapToken.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAGnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAoB1B,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,qBAmIzC"}

package/dist/widget/ui/src/components/SwapListItem/SwapToken.types.d.ts

@@ -2,6 +2,7 @@ import type { LoadingProps, Status, SwapTokenData } from './SwapListItem.types';
 export interface SwapTokenProps {
     data: SwapTokenData;
     status: Status;
+    tooltipContainer?: HTMLElement;
 }
 export type PropTypes = SwapTokenProps | LoadingProps;
 //# sourceMappingURL=SwapToken.types.d.ts.map

package/dist/widget/ui/src/components/SwapListItem/SwapToken.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SwapToken.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/SwapListItem/SwapToken.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAEhF,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,aAAa,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,SAAS,GAAG,cAAc,GAAG,YAAY,CAAC"}
+{"version":3,"file":"SwapToken.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/SwapListItem/SwapToken.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAEhF,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,aAAa,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,WAAW,CAAC;CAChC;AAED,MAAM,MAAM,SAAS,GAAG,cAAc,GAAG,YAAY,CAAC"}

package/dist/widget/ui/src/components/SwapListItem/mock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mock.d.ts","sourceRoot":"","sources":["../../../../../../src/components/SwapListItem/mock.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAQ/C,eAAO,MAAM,IAAI,EAAE,WA6RlB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,aAqB3B,CAAC"}
+{"version":3,"file":"mock.d.ts","sourceRoot":"","sources":["../../../../../../src/components/SwapListItem/mock.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAQ/C,eAAO,MAAM,IAAI,EAAE,WA6RlB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,aAsB3B,CAAC"}

package/dist/widget/ui/src/components/TokenAmount/TokenAmount.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TokenAmount.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TokenAmount/TokenAmount.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAErD,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,wBAAgB,WAAW,CAAC,KAAK,EAAE,SAAS,qBAoD3C"}
+{"version":3,"file":"TokenAmount.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TokenAmount/TokenAmount.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAErD,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,wBAAgB,WAAW,CAAC,KAAK,EAAE,SAAS,qBAmE3C"}

package/dist/widget/ui/src/components/TokenAmount/TokenAmount.types.d.ts

@@ -5,6 +5,7 @@ type BaseProps = Pick<SwapInputProps, 'token' | 'price'> & {
     direction?: 'vertical' | 'horizontal';
     centerAlign?: boolean;
     label?: string;
+    tooltipContainer?: HTMLElement;
 };
 type InputAmountProps = {
     type: 'input';

package/dist/widget/ui/src/components/TokenAmount/TokenAmount.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TokenAmount.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TokenAmount/TokenAmount.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4CAA4C,CAAC;AACjF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAEzE,KAAK,SAAS,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,OAAO,CAAC,GAAG;IACzD,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC;IAC9C,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACtC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,KAAK,gBAAgB,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC;AAE1C,KAAK,iBAAiB,GAAG,IAAI,CAC3B,gBAAgB,EAChB,kBAAkB,GAAG,cAAc,CACpC,GAAG;IACF,IAAI,EAAE,QAAQ,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,CAAC,gBAAgB,GAAG,iBAAiB,CAAC,CAAC"}
+{"version":3,"file":"TokenAmount.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TokenAmount/TokenAmount.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4CAA4C,CAAC;AACjF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAEzE,KAAK,SAAS,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,OAAO,CAAC,GAAG;IACzD,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC;IAC9C,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACtC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,WAAW,CAAC;CAChC,CAAC;AAEF,KAAK,gBAAgB,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC;AAE1C,KAAK,iBAAiB,GAAG,IAAI,CAC3B,gBAAgB,EAChB,kBAAkB,GAAG,cAAc,CACpC,GAAG;IACF,IAAI,EAAE,QAAQ,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,CAAC,gBAAgB,GAAG,iBAAiB,CAAC,CAAC"}

package/dist/widget/ui/src/components/Tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,wBAAgB,OAAO,CAAC,KAAK,EAAE,iBAAiB,CAAC,SAAS,CAAC,qBA0B1D"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,wBAAgB,OAAO,CAAC,KAAK,EAAE,iBAAiB,CAAC,SAAS,CAAC,qBA2B1D"}

package/dist/widget/ui/src/components/Tooltip/Tooltip.types.d.ts

@@ -1,4 +1,5 @@
 import type * as RadixTooltip from '@radix-ui/react-tooltip';
+import type { CSSProperties } from '@stitches/react';
 import type { ComponentProps, ReactNode } from 'react';
 type RadixTooltipContentProps = ComponentProps<typeof RadixTooltip.Content>;
 export interface PropTypes {
@@ -8,6 +9,7 @@ export interface PropTypes {
     sideOffset?: RadixTooltipContentProps['sideOffset'];
     container?: HTMLElement;
     open?: boolean;
+    style?: CSSProperties;
 }
 export {};
 //# sourceMappingURL=Tooltip.types.d.ts.map

package/dist/widget/ui/src/components/Tooltip/Tooltip.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Tooltip/Tooltip.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,YAAY,MAAM,yBAAyB,CAAC;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,KAAK,wBAAwB,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,OAAO,CAAC,CAAC;AAE5E,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,SAAS,CAAC;IACnB,IAAI,CAAC,EAAE,wBAAwB,CAAC,MAAM,CAAC,CAAC;IACxC,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;IACpD,UAAU,CAAC,EAAE,wBAAwB,CAAC,YAAY,CAAC,CAAC;IACpD,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB"}
+{"version":3,"file":"Tooltip.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Tooltip/Tooltip.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,YAAY,MAAM,yBAAyB,CAAC;AAC7D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,KAAK,wBAAwB,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,OAAO,CAAC,CAAC;AAE5E,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,SAAS,CAAC;IACnB,IAAI,CAAC,EAAE,wBAAwB,CAAC,MAAM,CAAC,CAAC;IACxC,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;IACpD,UAAU,CAAC,EAAE,wBAAwB,CAAC,YAAY,CAAC,CAAC;IACpD,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB"}

package/dist/widget/ui/src/containers/SwapInput/SwapInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SwapInput.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/SwapInput/SwapInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGxD,OAAO,KAAK,MAAM,OAAO,CAAC;AAmB1B,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,qBA8F9C"}
+{"version":3,"file":"SwapInput.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/SwapInput/SwapInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGxD,OAAO,KAAK,MAAM,OAAO,CAAC;AAyB1B,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,qBAuH9C"}

package/dist/widget/ui/src/containers/SwapInput/SwapInput.types.d.ts

@@ -11,6 +11,8 @@ export type BaseProps = {
     price: {
         value: string;
         usdValue?: string;
+        realValue?: string;
+        realUsdValue?: string;
         error?: string;
     };
     loading?: boolean;
@@ -19,6 +21,7 @@ export type BaseProps = {
     label: string;
     sharpBottomStyle?: boolean;
     onClickToken: () => void;
+    tooltipContainer?: HTMLElement;
 };
 type FromProps = {
     mode: 'From';

package/dist/widget/ui/src/containers/SwapInput/SwapInput.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SwapInput.types.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/SwapInput/SwapInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,gDAAgD,CAAC;AAE9F,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE;QACL,WAAW,EAAE,MAAM,CAAC;QACpB,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,KAAK,EAAE;QACL,WAAW,EAAE,MAAM,CAAC;QACpB,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,KAAK,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B,CAAC;AAEF,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,OAAO,CAAC;IACxB,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,aAAa,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,KAAK,OAAO,GAAG;IACb,IAAI,EAAE,IAAI,CAAC;IACX,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,YAAY,EAAE,uBAAuB,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,CAAC,SAAS,GAAG,OAAO,CAAC,CAAC"}
+{"version":3,"file":"SwapInput.types.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/SwapInput/SwapInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,gDAAgD,CAAC;AAE9F,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE;QACL,WAAW,EAAE,MAAM,CAAC;QACpB,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,KAAK,EAAE;QACL,WAAW,EAAE,MAAM,CAAC;QACpB,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,KAAK,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,gBAAgB,CAAC,EAAE,WAAW,CAAC;CAChC,CAAC;AAEF,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,OAAO,CAAC;IACxB,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,aAAa,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,KAAK,OAAO,GAAG;IACb,IAAI,EAAE,IAAI,CAAC;IACX,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,YAAY,EAAE,uBAAuB,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,CAAC,SAAS,GAAG,OAAO,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.26.0",
+  "version": "0.26.1-next.1",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -65,7 +65,7 @@
     "@radix-ui/react-radio-group": "^1.1.1",
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tooltip": "^1.0.2",
-    "@rango-dev/wallets-shared": "^0.25.0",
+    "@rango-dev/wallets-shared": "^0.25.1-next.0",
     "@stitches/react": "^1.2.8",
     "rango-sdk": "^0.1.44",
     "rango-types": "^0.1.57",
@@ -77,4 +77,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/PriceImpact/PriceImpact.tsx

@@ -2,12 +2,20 @@ import type { PriceImpactProps } from './PriceImpact.types';
 
 import React from 'react';
 
-import { Typography } from '..';
+import { Tooltip, Typography } from '..';
 
 import { Container, OutputUsdValue } from './PriceImpact.styles';
 
 export function PriceImpact(props: PriceImpactProps) {
-  const { size, outputUsdValue, percentageChange, warningLevel, error } = props;
+  const {
+    size,
+    outputUsdValue,
+    realOutputUsdValue,
+    percentageChange,
+    warningLevel,
+    error,
+    tooltipProps,
+  } = props;
 
   let percentageChangeColor = '$neutral600';
   if (!outputUsdValue || warningLevel === 'low') {
@@ -19,12 +27,22 @@ export function PriceImpact(props: PriceImpactProps) {
   return (
     <Container>
       {outputUsdValue && (
-        <OutputUsdValue
-          size={size === 'small' ? 'small' : 'medium'}
-          variant="body"
-          color="$neutral600">
-          {`~$${outputUsdValue}`}
-        </OutputUsdValue>
+        <Tooltip
+          content={realOutputUsdValue}
+          container={tooltipProps?.container}
+          open={
+            !realOutputUsdValue || realOutputUsdValue === '0'
+              ? false
+              : undefined
+          }
+          side={tooltipProps?.side}>
+          <OutputUsdValue
+            size={size === 'small' ? 'small' : 'medium'}
+            variant="body"
+            color="$neutral600">
+            {`~$${outputUsdValue}`}
+          </OutputUsdValue>
+        </Tooltip>
       )}
       {((outputUsdValue && percentageChange) || !outputUsdValue) && (
         <Typography

package/src/components/PriceImpact/PriceImpact.types.ts

@@ -1,9 +1,16 @@
+import type { PropTypes as TooltipPropTypes } from '../Tooltip/Tooltip.types';
+
 export type PriceImpactWarningLevel = 'low' | 'high' | undefined;
 
 export type PriceImpactProps = {
   size: 'small' | 'large';
   outputUsdValue?: string;
+  realOutputUsdValue?: string;
   error?: string;
   percentageChange?: string | null;
   warningLevel?: PriceImpactWarningLevel;
+  tooltipProps?: {
+    container?: TooltipPropTypes['container'];
+    side?: TooltipPropTypes['side'];
+  };
 };

package/src/components/StepDetails/StepDetails.tsx

@@ -7,6 +7,7 @@ import { ChainToken } from '../../components/ChainToken/ChainToken';
 import { NextIcon } from '../../icons';
 import { Image } from '../common';
 import { Divider } from '../Divider';
+import { Tooltip } from '../Tooltip';
 import { Typography } from '../Typography';
 
 import {
@@ -23,10 +24,17 @@ import {
 
 const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
   (props, parentRef) => {
-    const { step, hasSeparator, type, state, isFocused, tabIndex } = props;
+    const {
+      step,
+      hasSeparator,
+      type,
+      state,
+      isFocused,
+      tabIndex,
+      tooltipContainer,
+    } = props;
     const containerRef = useRef<HTMLDivElement>(null);
     const isCompleted = state === 'completed' || state === 'error';
-
     useEffect(() => {
       const parentElement = (parentRef as React.RefObject<HTMLDivElement>)
         ?.current;
@@ -73,12 +81,16 @@ const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
                 tokenImage={step.from.token.image}
                 size="small"
               />
-              <Typography
-                ml={4}
-                mr={4}
-                size="small"
-                color="$neutral700"
-                variant="body">{`${step.from.price.value} ${step.from.token.displayName}`}</Typography>
+              <Tooltip
+                content={step.from.price.realValue}
+                container={tooltipContainer}>
+                <Typography
+                  ml={4}
+                  mr={4}
+                  size="small"
+                  color="$neutral700"
+                  variant="body">{`${step.from.price.value} ${step.from.token.displayName}`}</Typography>
+              </Tooltip>
               <NextIcon color="gray" />
               <Divider size={4} direction="horizontal" />
               <ChainToken
@@ -86,13 +98,17 @@ const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
                 tokenImage={step.to.token.image}
                 size="small"
               />
-              <Typography
-                ml={4}
-                size="small"
-                color="$neutral700"
-                variant="body">{`${isCompleted ? '' : '~'}${
-                step.to.price.value
-              } ${step.to.token.displayName}`}</Typography>
+              <Tooltip
+                content={step.to.price.realValue}
+                container={tooltipContainer}>
+                <Typography
+                  ml={4}
+                  size="small"
+                  color="$neutral700"
+                  variant="body">{`${isCompleted ? '' : '~'}${
+                  step.to.price.value
+                } ${step.to.token.displayName}`}</Typography>
+              </Tooltip>
             </div>
             <Alerts pb={hasSeparator && type === 'quote-details'}>
               {step.alerts}

package/src/components/StepDetails/StepDetails.types.ts

@@ -22,4 +22,5 @@ export type StepDetailsProps = {
   state?: 'default' | 'in-progress' | 'completed' | 'warning' | 'error';
   isFocused?: boolean;
   tabIndex?: number;
+  tooltipContainer?: HTMLElement;
 };

package/src/components/SwapListItem/SwapListItem.tsx

@@ -40,6 +40,7 @@ export function SwapListItem(props: PropsWithChildren<PropTypes>) {
     onlyShowTime,
     status,
     swapTokenData,
+    tooltipContainer,
   } = props;
   return (
     <Main onClick={onClick.bind(null, requestId)}>
@@ -57,7 +58,11 @@ export function SwapListItem(props: PropsWithChildren<PropTypes>) {
             {getStatus(status)}
           </Typography>
         </Header>
-        <SwapToken data={swapTokenData} status={status} />
+        <SwapToken
+          data={swapTokenData}
+          status={status}
+          tooltipContainer={tooltipContainer}
+        />
       </Container>
     </Main>
   );

package/src/components/SwapListItem/SwapListItem.types.ts

@@ -7,6 +7,7 @@ export interface SwapListItemProps {
   onClick: (requestId: string) => void;
   swapTokenData: SwapTokenData;
   onlyShowTime?: boolean;
+  tooltipContainer?: HTMLElement;
 }
 
 export interface LoadingProps {
@@ -42,6 +43,6 @@ export interface SwapTokenData {
       image: string;
     };
     amount: string;
-    estimatedAmount?: string;
+    realAmount: string;
   };
 }

package/src/components/SwapListItem/SwapToken.tsx

@@ -7,6 +7,7 @@ import { NextIcon } from '../../icons';
 import { ChainToken } from '../ChainToken';
 import { Divider } from '../Divider';
 import { Skeleton } from '../Skeleton';
+import { Tooltip } from '../Tooltip';
 import { Typography } from '../Typography';
 
 import {
@@ -72,14 +73,16 @@ export function SwapToken(props: PropTypes) {
         blockchain: fromBlockchain,
       },
       to: {
-        estimatedAmount,
         token: toToken,
         amount: toAmount,
         blockchain: toBlockchain,
+        realAmount,
       },
     },
     status,
+    tooltipContainer,
   } = props;
+
   return (
     <TokenContainer>
       <Images>
@@ -125,9 +128,11 @@ export function SwapToken(props: PropTypes) {
               {fromToken.displayName}
             </Typography>
             {!!fromAmount && (
-              <Typography size="small" variant="body" color="neutral700">
-                {fromAmount}
-              </Typography>
+              <Tooltip content={fromAmount} container={tooltipContainer}>
+                <Typography size="small" variant="body" color="neutral700">
+                  {fromAmount}
+                </Typography>
+              </Tooltip>
             )}
           </TokenInfo>
           <Icon>
@@ -137,10 +142,11 @@ export function SwapToken(props: PropTypes) {
             <Typography size="medium" variant="title">
               {toToken.displayName}
             </Typography>
-
-            <Typography size="small" variant="body" color="neutral700">
-              {toAmount || estimatedAmount}
-            </Typography>
+            <Tooltip content={realAmount} container={tooltipContainer}>
+              <Typography size="small" variant="body" color="neutral700">
+                {toAmount}
+              </Typography>
+            </Tooltip>
           </TokenInfo>
         </Layout>
       )}

package/src/components/SwapListItem/SwapToken.types.ts

@@ -3,6 +3,7 @@ import type { LoadingProps, Status, SwapTokenData } from './SwapListItem.types';
 export interface SwapTokenProps {
   data: SwapTokenData;
   status: Status;
+  tooltipContainer?: HTMLElement;
 }
 
 export type PropTypes = SwapTokenProps | LoadingProps;

package/src/components/SwapListItem/mock.ts

@@ -315,5 +315,6 @@ export const swapTokenData: SwapTokenData = {
       image: 'https://api.rango.exchange/swappers/osmosis.png',
     },
     amount: '0.7',
+    realAmount: '0.7',
   },
 };

package/src/components/TokenAmount/TokenAmount.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 
 import { ChainToken } from '../ChainToken';
 import { PriceImpact } from '../PriceImpact/PriceImpact';
+import { Tooltip } from '../Tooltip';
 import { Typography } from '../Typography';
 
 import {
@@ -27,37 +28,52 @@ export function TokenAmount(props: PropTypes) {
               {props.label}
             </Typography>
           )}
-          <div title={`${props.price.value} ${props.token.displayName}`}>
-            <Typography
-              ml={4}
-              size="medium"
-              variant="title"
-              style={{ fontWeight: 600 }}>
-              {props.price.value}
-            </Typography>
-            <Typography
-              ml={8}
-              size="medium"
-              variant="title"
-              style={{ fontWeight: 400 }}>
-              {props.token.displayName}
-            </Typography>
+          <div>
+            <Tooltip
+              content={props.price.realValue}
+              open={!props.price.realValue ? false : undefined}
+              container={props.tooltipContainer}>
+              <Typography
+                ml={4}
+                size="medium"
+                variant="title"
+                style={{ fontWeight: 600 }}>
+                {props.price.value}
+              </Typography>
+              <Typography
+                ml={8}
+                size="medium"
+                variant="title"
+                style={{ fontWeight: 400 }}>
+                {props.token.displayName}
+              </Typography>
+            </Tooltip>
           </div>
         </div>
       </div>
       {props.price.usdValue && props.price.usdValue !== '0' && (
         <div className={usdValueStyles()}>
-          {props.type === 'input' && (
-            <Typography mr={4} size="small" variant="body" color="$neutral700">
-              {`~$${props.price.usdValue}`}
-            </Typography>
-          )}
+          <Tooltip
+            content={props.price.realUsdValue}
+            container={props.tooltipContainer}>
+            {props.type === 'input' && (
+              <Typography
+                mr={4}
+                size="small"
+                variant="body"
+                color="$neutral700">
+                {`~$${props.price.usdValue}`}
+              </Typography>
+            )}
+          </Tooltip>
           {props.type === 'output' && (
             <PriceImpact
               size="small"
+              tooltipProps={{ container: props.tooltipContainer, side: 'top' }}
               outputUsdValue={props.price.usdValue}
               percentageChange={props.percentageChange}
               warningLevel={props.warningLevel}
+              realOutputUsdValue={props.price.realUsdValue}
             />
           )}
         </div>

package/src/components/TokenAmount/TokenAmount.types.ts

@@ -6,6 +6,7 @@ type BaseProps = Pick<SwapInputProps, 'token' | 'price'> & {
   direction?: 'vertical' | 'horizontal';
   centerAlign?: boolean;
   label?: string;
+  tooltipContainer?: HTMLElement;
 };
 
 type InputAmountProps = { type: 'input' };

package/src/components/Tooltip/Tooltip.tsx

@@ -19,11 +19,12 @@ export function Tooltip(props: PropsWithChildren<PropTypes>) {
     container,
     open,
     side = 'top',
+    style,
   } = props;
   return (
     <RadixTooltip.Provider delayDuration={0}>
       <RadixTooltip.Root open={open}>
-        <RadixTooltip.Trigger asChild>
+        <RadixTooltip.Trigger asChild style={style}>
           <TriggerContent>{children}</TriggerContent>
         </RadixTooltip.Trigger>
         <RadixTooltip.Portal container={container}>

package/src/components/Tooltip/Tooltip.types.ts

@@ -1,4 +1,5 @@
 import type * as RadixTooltip from '@radix-ui/react-tooltip';
+import type { CSSProperties } from '@stitches/react';
 import type { ComponentProps, ReactNode } from 'react';
 
 type RadixTooltipContentProps = ComponentProps<typeof RadixTooltip.Content>;
@@ -10,4 +11,5 @@ export interface PropTypes {
   sideOffset?: RadixTooltipContentProps['sideOffset'];
   container?: HTMLElement;
   open?: boolean;
+  style?: CSSProperties;
 }