@rango-dev/ui 0.15.1-next.16 → 0.15.1-next.17

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,KAA4yN,CAAC"}
+{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../../translations/en.ts"],"names":[],"mappings":"AAAkB,eAAO,MAAM,QAAQ,KAA4oU,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,KAAq/N,CAAC"}
+{"version":3,"file":"es.d.ts","sourceRoot":"","sources":["../../../../translations/es.ts"],"names":[],"mappings":"AAAkB,eAAO,MAAM,QAAQ,KAAqzU,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,KAAq/N,CAAC"}
+{"version":3,"file":"fr.d.ts","sourceRoot":"","sources":["../../../../translations/fr.ts"],"names":[],"mappings":"AAAkB,eAAO,MAAM,QAAQ,KAAqzU,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"RouteCost.d.ts","sourceRoot":"","sources":["../../../../../../src/components/RouteCost/RouteCost.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,qBAgCzC"}
+{"version":3,"file":"RouteCost.d.ts","sourceRoot":"","sources":["../../../../../../src/components/RouteCost/RouteCost.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAGnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,qBAoCzC"}

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;AAE5D,OAAO,KAA8C,MAAM,OAAO,CAAC;AA6FnE,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;AAsGnE,eAAO,MAAM,WAAW,oHAA6B,CAAC"}

package/dist/widget/ui/src/components/Wallet/Wallet.helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Wallet.helpers.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Wallet/Wallet.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,wBAAgB,QAAQ,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,CA6BjD"}
+{"version":3,"file":"Wallet.helpers.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Wallet/Wallet.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAI3C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,wBAAgB,QAAQ,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,CA6BjD"}

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;AAExD,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,qBAgG9C"}
+{"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;AAO1B,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,qBAgG9C"}

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

@@ -1 +1 @@
-{"version":3,"file":"SwapInput.stories.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/SwapInput/SwapInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAE7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAehC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,QAAQ,SAAU,cAAc,sBAE5C,CAAC;AAEF,eAAO,MAAM,MAAM,SAAU,cAAc,sBAQ1C,CAAC"}
+{"version":3,"file":"SwapInput.stories.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/SwapInput/SwapInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAE7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAehC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,QAAQ,SAAU,cAAc,sBAE5C,CAAC;AAEF,eAAO,MAAM,MAAM,SAAU,cAAc,sBAS1C,CAAC"}

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

@@ -16,23 +16,21 @@ export type BaseProps = {
     loading?: boolean;
     error?: boolean;
     disabled?: boolean;
+    label: string;
     sharpBottomStyle?: boolean;
     onClickToken: () => void;
 };
 type FromProps = {
-    label: 'From';
+    mode: 'From';
     balance?: string;
     onSelectMaxBalance: () => void;
     onInputChange: (inputAmount: string) => void;
 };
 type ToProps = {
-    label: 'To';
+    mode: 'To';
     percentageChange: string | null;
     warningLevel: PriceImpactWarningLevel;
 };
-type Common = {
-    label: string;
-};
-export type SwapInputProps = BaseProps & (FromProps | ToProps | Common);
+export type SwapInputProps = BaseProps & (FromProps | ToProps);
 export {};
 //# sourceMappingURL=SwapInput.types.d.ts.map

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,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B,CAAC;AAEF,KAAK,SAAS,GAAG;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,aAAa,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,KAAK,OAAO,GAAG;IACb,KAAK,EAAE,IAAI,CAAC;IACZ,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,YAAY,EAAE,uBAAuB,CAAC;CACvC,CAAC;AAEF,KAAK,MAAM,GAAG;IACZ,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,CAAC,SAAS,GAAG,OAAO,GAAG,MAAM,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,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,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,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.15.1-next.16",
+  "version": "0.15.1-next.17",
   "license": "MIT",
   "type": "module",
   "module": "./dist/index.js",

package/src/components/RouteCost/RouteCost.tsx

@@ -1,5 +1,6 @@
 import type { PropTypes } from './RouteCost.types';
 
+import { i18n } from '@lingui/core';
 import React from 'react';
 
 import { GasIcon, NumberIcon, TimeIcon } from '../../icons';
@@ -26,7 +27,11 @@ export function RouteCost(props: PropTypes) {
           <TimeIcon size={12} color="gray" />
         </div>
         <Typography ml={2} align="center" variant="body" size="small">
-          {`${time} min`}
+          {i18n.t({
+            id: 'timeMin',
+            message: '{time} min',
+            values: { time },
+          })}
         </Typography>
       </div>
       <Separator />

package/src/components/StepDetails/StepDetails.tsx

@@ -1,5 +1,6 @@
 import type { StepDetailsProps } from './StepDetails.types';
 
+import { i18n } from '@lingui/core';
 import React, { forwardRef, memo, useEffect, useRef } from 'react';
 
 import { ChainToken } from '../../components/ChainToken/ChainToken';
@@ -49,7 +50,16 @@ const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
             className="swapper__description"
             ml={8}
             size="small"
-            variant="body">{`Swap on ${step.from.chain.displayName} via ${step.swapper.displayName}`}</Typography>
+            variant="body">
+            {i18n.t({
+              id: 'swapperDescription',
+              message: 'Swap on {fromChain} via {swapper}',
+              values: {
+                fromChain: step.from.chain.displayName,
+                swapper: step.swapper.displayName,
+              },
+            })}
+          </Typography>
         </div>
         <div className="step-info">
           <DashedLine invisible={!hasSeparator || type === 'route-progress'} />

package/src/components/Wallet/Wallet.helpers.ts

@@ -1,5 +1,7 @@
 import type { Info } from './Wallet.types';
 
+import { i18n } from '@lingui/core';
+
 import { WalletState } from './Wallet.types';
 
 export function makeInfo(state: WalletState): Info {
@@ -7,28 +9,28 @@ export function makeInfo(state: WalletState): Info {
     case WalletState.CONNECTED:
       return {
         color: 'success500',
-        description: 'Connected',
-        tooltipText: 'Disconnect',
+        description: i18n.t('Connected'),
+        tooltipText: i18n.t('Disconnect'),
       };
     case WalletState.NOT_INSTALLED:
       return {
         color: 'info500',
-        description: 'Install',
-        tooltipText: 'Install',
+        description: i18n.t('Install'),
+        tooltipText: i18n.t('Install'),
       };
     case WalletState.CONNECTING:
       return {
         color: 'neutral800',
-        description: 'Connecting...',
-        tooltipText: 'Connecting',
+        description: i18n.t('Connecting...'),
+        tooltipText: i18n.t('Connecting'),
       };
     case WalletState.DISCONNECTED:
       return {
         color: 'neutral800',
-        description: 'Disconnected',
-        tooltipText: 'Connect',
+        description: i18n.t('Disconnected'),
+        tooltipText: i18n.t('Connect'),
       };
     default:
-      throw new Error('you need to pass a correct state to Wallet.');
+      throw new Error(i18n.t('you need to pass a correct state to Wallet.'));
   }
 }

package/src/containers/SwapInput/SwapInput.stories.tsx

@@ -32,6 +32,7 @@ export const SwapTo = (args: SwapInputProps) => (
   <SwapInput
     {...args}
     label="To"
+    mode="To"
     price={{ value: '2.5', usdValue: '610' }}
     percentageChange="6.4"
     warningLevel="high"

package/src/containers/SwapInput/SwapInput.tsx

@@ -1,5 +1,6 @@
 import type { SwapInputProps } from './SwapInput.types';
 
+import { i18n } from '@lingui/core';
 import React from 'react';
 
 import { Divider, PriceImpact, Skeleton, Typography } from '../../components';
@@ -22,14 +23,14 @@ export function SwapInput(props: SwapInputProps) {
                 mr={4}
                 variant="body"
                 size="xsmall">
-                Balance: {props.balance}
+                {i18n.t('Balance')}: {props.balance}
               </Typography>
               <MaxButton
                 variant="default"
                 size="xsmall"
                 onClick={props.onSelectMaxBalance}>
                 <Typography variant="body" size="xsmall" color="secondary500">
-                  Max
+                  {i18n.t('Max')}
                 </Typography>
               </MaxButton>
             </div>
@@ -61,7 +62,7 @@ export function SwapInput(props: SwapInputProps) {
           ) : (
             <>
               <InputAmount
-                disabled={props.disabled || props.label === 'To'}
+                disabled={props.disabled || props.mode === 'To'}
                 style={{ padding: 0 }}
                 value={props.price.value}
                 type={'onInputChange' in props ? 'number' : 'text'}

package/src/containers/SwapInput/SwapInput.types.ts

@@ -17,25 +17,22 @@ export type BaseProps = {
   loading?: boolean;
   error?: boolean;
   disabled?: boolean;
+  label: string;
   sharpBottomStyle?: boolean;
   onClickToken: () => void;
 };
 
 type FromProps = {
-  label: 'From';
+  mode: 'From';
   balance?: string;
   onSelectMaxBalance: () => void;
   onInputChange: (inputAmount: string) => void;
 };
 
 type ToProps = {
-  label: 'To';
+  mode: 'To';
   percentageChange: string | null;
   warningLevel: PriceImpactWarningLevel;
 };
 
-type Common = {
-  label: string;
-};
-
-export type SwapInputProps = BaseProps & (FromProps | ToProps | Common);
+export type SwapInputProps = BaseProps & (FromProps | ToProps);