@rango-dev/ui 0.17.1-next.9 → 0.18.0

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,KAAykV,CAAC"}
+{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../../translations/en.ts"],"names":[],"mappings":"AAAkB,eAAO,MAAM,QAAQ,KAAwgW,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,KAAkvV,CAAC"}
+{"version":3,"file":"es.d.ts","sourceRoot":"","sources":["../../../../translations/es.ts"],"names":[],"mappings":"AAAkB,eAAO,MAAM,QAAQ,KAAuyX,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,KAAkvV,CAAC"}
+{"version":3,"file":"fr.d.ts","sourceRoot":"","sources":["../../../../translations/fr.ts"],"names":[],"mappings":"AAAkB,eAAO,MAAM,QAAQ,KAAm9X,CAAC"}

package/dist/translations/{jp.d.ts → ja.d.ts}

@@ -1,2 +1,2 @@
 export declare const messages: any;
-//# sourceMappingURL=jp.d.ts.map
+//# sourceMappingURL=ja.d.ts.map

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

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

package/dist/widget/ui/src/components/Flags/English.d.ts

@@ -0,0 +1,4 @@
+import type { FlagPropTypes } from './Flags.types';
+import React from 'react';
+export default function English(props: FlagPropTypes): React.JSX.Element;
+//# sourceMappingURL=English.d.ts.map

package/dist/widget/ui/src/components/Flags/English.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"English.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Flags/English.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK,EAAE,aAAa,qBA4BnD"}

package/dist/widget/ui/src/components/Flags/Flags.constants.d.ts

@@ -0,0 +1,2 @@
+export declare const DEFAULT_SIZE = "1em";
+//# sourceMappingURL=Flags.constants.d.ts.map

package/dist/widget/ui/src/components/Flags/Flags.constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flags.constants.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Flags/Flags.constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,QAAQ,CAAC"}

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

@@ -0,0 +1,4 @@
+export type FlagPropTypes = {
+    size?: number;
+};
+//# sourceMappingURL=Flags.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Flags.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Flags/Flags.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC"}

package/dist/widget/ui/src/components/Flags/French.d.ts

@@ -0,0 +1,4 @@
+import type { FlagPropTypes } from './Flags.types';
+import React from 'react';
+export default function French(props: FlagPropTypes): React.JSX.Element;
+//# sourceMappingURL=French.d.ts.map

package/dist/widget/ui/src/components/Flags/French.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"French.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Flags/French.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,aAAa,qBAmBlD"}

package/dist/widget/ui/src/components/Flags/Japanese.d.ts

@@ -0,0 +1,4 @@
+import type { FlagPropTypes } from './Flags.types';
+import React from 'react';
+export default function Japanese(props: FlagPropTypes): React.JSX.Element;
+//# sourceMappingURL=Japanese.d.ts.map

package/dist/widget/ui/src/components/Flags/Japanese.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Japanese.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Flags/Japanese.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,qBAkBpD"}

package/dist/widget/ui/src/components/Flags/Spanish.d.ts

@@ -0,0 +1,4 @@
+import type { FlagPropTypes } from './Flags.types';
+import React from 'react';
+export default function Spanish(props: FlagPropTypes): React.JSX.Element;
+//# sourceMappingURL=Spanish.d.ts.map

package/dist/widget/ui/src/components/Flags/Spanish.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spanish.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Flags/Spanish.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK,EAAE,aAAa,qBA8EnD"}

package/dist/widget/ui/src/components/Flags/index.d.ts

@@ -0,0 +1,7 @@
+import English from './English';
+import French from './French';
+import Japanese from './Japanese';
+import Spanish from './Spanish';
+export type { FlagPropTypes } from './Flags.types';
+export { English, Spanish, Japanese, French };
+//# sourceMappingURL=index.d.ts.map

package/dist/widget/ui/src/components/Flags/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Flags/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,OAAO,MAAM,WAAW,CAAC;AAEhC,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC"}

package/dist/widget/ui/src/components/I18nManager/I18nManager.d.ts

@@ -3,12 +3,12 @@ import React from 'react';
 declare const messages: {
     en: any;
     es: any;
-    jp: any;
+    ja: any;
     fr: any;
 };
 export type Language = keyof typeof messages;
 interface PropTypes {
-    language?: Language;
+    language: Language;
 }
 declare function I18nManager(props: PropsWithChildren<PropTypes>): React.JSX.Element;
 export { I18nManager };

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

@@ -1 +1 @@
-{"version":3,"file":"I18nManager.d.ts","sourceRoot":"","sources":["../../../../../../src/components/I18nManager/I18nManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI/C,OAAO,KAAoB,MAAM,OAAO,CAAC;AAezC,QAAA,MAAM,QAAQ;;;;;CAKb,CAAC;AAIF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,QAAQ,CAAC;AAC7C,UAAU,SAAS;IACjB,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB;AAED,iBAAS,WAAW,CAAC,KAAK,EAAE,iBAAiB,CAAC,SAAS,CAAC,qBAMvD;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"I18nManager.d.ts","sourceRoot":"","sources":["../../../../../../src/components/I18nManager/I18nManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI/C,OAAO,KAAgC,MAAM,OAAO,CAAC;AAcrD,QAAA,MAAM,QAAQ;;;;;CAKb,CAAC;AAIF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,QAAQ,CAAC;AAC7C,UAAU,SAAS;IACjB,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAED,iBAAS,WAAW,CAAC,KAAK,EAAE,iBAAiB,CAAC,SAAS,CAAC,qBAgBvD;AAED,OAAO,EAAE,WAAW,EAAE,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;AAsGnE,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;AAqGnE,eAAO,MAAM,WAAW,oHAA6B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"SwapDetailsPlaceholder.d.ts","sourceRoot":"","sources":["../../../../../../src/components/SwapDetailsPlaceholder/SwapDetailsPlaceholder.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAM1B,CAAC;AAEH,UAAU,SAAS;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,SAAS,qBA0BtD"}
+{"version":3,"file":"SwapDetailsPlaceholder.d.ts","sourceRoot":"","sources":["../../../../../../src/components/SwapDetailsPlaceholder/SwapDetailsPlaceholder.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAM1B,CAAC;AAEH,UAAU,SAAS;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,SAAS,qBAyBtD"}

package/dist/widget/ui/src/components/Typography/Typography.styles.d.ts

@@ -3,10 +3,10 @@ export declare const TypographyContainer: import("@stitches/react/types/styled-c
     size?: "small" | "medium" | "large" | "xmedium" | "xsmall" | undefined;
     align?: "center" | "left" | "right" | undefined;
     noWrap?: boolean | "true" | undefined;
-    ml?: 12 | 4 | 8 | 2 | "4" | "8" | "12" | "2" | undefined;
-    mt?: 12 | 4 | 8 | 2 | "4" | "8" | "12" | "2" | undefined;
-    mr?: 12 | 4 | 8 | 2 | "4" | "8" | "12" | "2" | undefined;
-    mb?: 12 | 4 | 8 | 2 | "4" | "8" | "12" | "2" | undefined;
+    ml?: 2 | 12 | 4 | 8 | "4" | "8" | "12" | "2" | undefined;
+    mt?: 2 | 12 | 4 | 8 | "4" | "8" | "12" | "2" | undefined;
+    mr?: 2 | 12 | 4 | 8 | "4" | "8" | "12" | "2" | undefined;
+    mb?: 2 | 12 | 4 | 8 | "4" | "8" | "12" | "2" | undefined;
 }, {
     sm: string;
     md: string;

package/dist/widget/ui/src/components/index.d.ts

@@ -49,4 +49,5 @@ export * from './RouteCost';
 export * from './TokenAmount';
 export * from './StepDetails';
 export * from './Popover';
+export * from './Flags';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,UAAU,CAAC;AACzB,cAAc,0BAA0B,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,0BAA0B,CAAC;AACzC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,UAAU,CAAC;AACzB,cAAc,0BAA0B,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,0BAA0B,CAAC;AACzC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC"}

package/dist/widget/ui/src/containers/Warnings/HighSlippageWarning.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HighSlippageWarning.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/Warnings/HighSlippageWarning.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,SAAS;IACjB,gBAAgB,EAAE,MAAM,CAAC;IACzB,YAAY,EAAE,OAAO,CAAC;IACtB,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,SAAS,qBAqBnD"}
+{"version":3,"file":"HighSlippageWarning.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/Warnings/HighSlippageWarning.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,SAAS;IACjB,gBAAgB,EAAE,MAAM,CAAC;IACzB,YAAY,EAAE,OAAO,CAAC;IACtB,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,SAAS,qBAiBnD"}

package/dist/widget/ui/src/containers/Warnings/MinRequiredSlippage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MinRequiredSlippage.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/Warnings/MinRequiredSlippage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,SAAS;IACjB,mBAAmB,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B;AAMD,wBAAgB,mBAAmB,CAAC,EAClC,mBAAmB,EACnB,cAAc,GACf,EAAE,SAAS,qBAeX"}
+{"version":3,"file":"MinRequiredSlippage.d.ts","sourceRoot":"","sources":["../../../../../../src/containers/Warnings/MinRequiredSlippage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,UAAU,SAAS;IACjB,mBAAmB,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B;AAMD,wBAAgB,mBAAmB,CAAC,EAClC,mBAAmB,EACnB,cAAc,GACf,EAAE,SAAS,qBAWX"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.17.1-next.9",
+  "version": "0.18.0",
   "license": "MIT",
   "type": "module",
   "module": "./dist/index.js",
@@ -23,6 +23,8 @@
     "lint": "eslint \"**/*.{ts,tsx}\" --ignore-path ../../.eslintignore"
   },
   "peerDependencies": {
+    "@lingui/core": "4.2.1",
+    "@lingui/react": "4.2.1",
     "@rango-dev/queue-manager-rango-preset": "*",
     "react": ">=16"
   },
@@ -31,6 +33,8 @@
     "@babel/preset-env": "^7.21.4",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.4",
+    "@lingui/core": "4.2.1",
+    "@lingui/react": "4.2.1",
     "@storybook/addon-essentials": "^7.1.1",
     "@storybook/addon-info": "^5.3.21",
     "@storybook/addon-links": "^7.1.1",
@@ -55,15 +59,13 @@
     "typescript": "^4.8.4"
   },
   "dependencies": {
-    "@lingui/core": "4.2.1",
-    "@lingui/react": "4.2.1",
     "@radix-ui/react-checkbox": "^1.0.1",
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-popover": "^1.0.6",
     "@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.17.1-next.0",
+    "@rango-dev/wallets-shared": "^0.18.0",
     "@stitches/react": "^1.2.8",
     "rango-sdk": "^0.1.35",
     "react-virtualized-auto-sizer": "^1.0.7",

package/src/components/Flags/English.tsx

@@ -0,0 +1,35 @@
+import type { FlagPropTypes } from './Flags.types';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants';
+
+export default function English(props: FlagPropTypes) {
+  const { size = DEFAULT_SIZE } = props;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512">
+      <mask id="a">
+        <circle cx="256" cy="256" r="256" fill="#fff" />
+      </mask>
+      <g mask="url(#a)">
+        <path
+          fill="#eee"
+          d="m0 0 8 22-8 23v23l32 54-32 54v32l32 48-32 48v32l32 54-32 54v68l22-8 23 8h23l54-32 54 32h32l48-32 48 32h32l54-32 54 32h68l-8-22 8-23v-23l-32-54 32-54v-32l-32-48 32-48v-32l-32-54 32-54V0l-22 8-23-8h-23l-54 32-54-32h-32l-48 32-48-32h-32l-54 32L68 0H0z"
+        />
+        <path
+          fill="#0052b4"
+          d="M336 0v108L444 0Zm176 68L404 176h108zM0 176h108L0 68ZM68 0l108 108V0Zm108 512V404L68 512ZM0 444l108-108H0Zm512-108H404l108 108Zm-68 176L336 404v108z"
+        />
+        <path
+          fill="#d80027"
+          d="M0 0v45l131 131h45L0 0zm208 0v208H0v96h208v208h96V304h208v-96H304V0h-96zm259 0L336 131v45L512 0h-45zM176 336 0 512h45l131-131v-45zm160 0 176 176v-45L381 336h-45z"
+        />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Flags.constants.ts

@@ -0,0 +1 @@
+export const DEFAULT_SIZE = '1em';

package/src/components/Flags/Flags.types.ts

@@ -0,0 +1,3 @@
+export type FlagPropTypes = {
+  size?: number;
+};

package/src/components/Flags/French.tsx

@@ -0,0 +1,26 @@
+import type { FlagPropTypes } from './Flags.types';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants';
+
+export default function French(props: FlagPropTypes) {
+  const { size = DEFAULT_SIZE } = props;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512">
+      <mask id="a">
+        <circle cx="256" cy="256" r="256" fill="#fff" />
+      </mask>
+      <g mask="url(#a)">
+        <path fill="#eee" d="M167 0h178l25.9 252.3L345 512H167l-29.8-253.4z" />
+        <path fill="#0052b4" d="M0 0h167v512H0z" />
+        <path fill="#d80027" d="M345 0h167v512H345z" />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Japanese.tsx

@@ -0,0 +1,25 @@
+import type { FlagPropTypes } from './Flags.types';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants';
+
+export default function Japanese(props: FlagPropTypes) {
+  const { size = DEFAULT_SIZE } = props;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512">
+      <mask id="a">
+        <circle cx="256" cy="256" r="256" fill="#fff" />
+      </mask>
+      <g mask="url(#a)">
+        <path fill="#eee" d="M0 0h512v512H0z" />
+        <circle cx="256" cy="256" r="111.3" fill="#d80027" />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/Spanish.tsx

@@ -0,0 +1,85 @@
+import type { FlagPropTypes } from './Flags.types';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants';
+
+export default function Spanish(props: FlagPropTypes) {
+  const { size = DEFAULT_SIZE } = props;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512">
+      <mask id="a">
+        <circle cx="256" cy="256" r="256" fill="#fff" />
+      </mask>
+      <g mask="url(#a)">
+        <path fill="#ffda44" d="m0 128 256-32 256 32v256l-256 32L0 384Z" />
+        <path fill="#d80027" d="M0 0h512v128H0zm0 384h512v128H0z" />
+        <g fill="#eee">
+          <path d="M144 304h-16v-80h16zm128 0h16v-80h-16z" />
+          <ellipse cx="208" cy="296" rx="48" ry="32" />
+        </g>
+        <g fill="#d80027">
+          <rect width="16" height="24" x="128" y="192" rx="8" />
+          <rect width="16" height="24" x="272" y="192" rx="8" />
+          <path d="M208 272v24a24 24 0 0 0 24 24 24 24 0 0 0 24-24v-24h-24z" />
+        </g>
+        <rect width="32" height="16" x="120" y="208" fill="#ff9811" ry="8" />
+        <rect width="32" height="16" x="264" y="208" fill="#ff9811" ry="8" />
+        <rect width="32" height="16" x="120" y="304" fill="#ff9811" rx="8" />
+        <rect width="32" height="16" x="264" y="304" fill="#ff9811" rx="8" />
+        <path
+          fill="#ff9811"
+          d="M160 272v24c0 8 4 14 9 19l5-6 5 10a21 21 0 0 0 10 0l5-10 5 6c6-5 9-11 9-19v-24h-9l-5 8-5-8h-10l-5 8-5-8z"
+        />
+        <path d="M122 252h172m-172 24h28m116 0h28" />
+        <path
+          fill="#d80027"
+          d="M122 248a4 4 0 0 0-4 4 4 4 0 0 0 4 4h172a4 4 0 0 0 4-4 4 4 0 0 0-4-4zm0 24a4 4 0 0 0-4 4 4 4 0 0 0 4 4h28a4 4 0 0 0 4-4 4 4 0 0 0-4-4zm144 0a4 4 0 0 0-4 4 4 4 0 0 0 4 4h28a4 4 0 0 0 4-4 4 4 0 0 0-4-4z"
+        />
+        <path
+          fill="#eee"
+          d="M196 168c-7 0-13 5-15 11l-5-1c-9 0-16 7-16 16s7 16 16 16c7 0 13-4 15-11a16 16 0 0 0 17-4 16 16 0 0 0 17 4 16 16 0 1 0 10-20 16 16 0 0 0-27-5c-3-4-7-6-12-6zm0 8c5 0 8 4 8 8 0 5-3 8-8 8-4 0-8-3-8-8 0-4 4-8 8-8zm24 0c5 0 8 4 8 8 0 5-3 8-8 8-4 0-8-3-8-8 0-4 4-8 8-8zm-44 10 4 1 4 8c0 4-4 7-8 7s-8-3-8-8c0-4 4-8 8-8zm64 0c5 0 8 4 8 8 0 5-3 8-8 8-4 0-8-3-8-7l4-8z"
+        />
+        <path fill="none" d="M220 284v12c0 7 5 12 12 12s12-5 12-12v-12z" />
+        <path fill="#ff9811" d="M200 160h16v32h-16z" />
+        <path fill="#eee" d="M208 224h48v48h-48z" />
+        <path
+          fill="#d80027"
+          d="m248 208-8 8h-64l-8-8c0-13 18-24 40-24s40 11 40 24zm-88 16h48v48h-48z"
+        />
+        <rect
+          width="20"
+          height="32"
+          x="222"
+          y="232"
+          fill="#d80027"
+          rx="10"
+          ry="10"
+        />
+        <path
+          fill="#ff9811"
+          d="M168 232v8h8v16h-8v8h32v-8h-8v-16h8v-8zm8-16h64v8h-64z"
+        />
+        <g fill="#ffda44">
+          <circle cx="186" cy="202" r="6" />
+          <circle cx="208" cy="202" r="6" />
+          <circle cx="230" cy="202" r="6" />
+        </g>
+        <path
+          fill="#d80027"
+          d="M169 272v43a24 24 0 0 0 10 4v-47h-10zm20 0v47a24 24 0 0 0 10-4v-43h-10z"
+        />
+        <g fill="#338af3">
+          <circle cx="208" cy="272" r="16" />
+          <rect width="32" height="16" x="264" y="320" ry="8" />
+          <rect width="32" height="16" x="120" y="320" ry="8" />
+        </g>
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/index.ts

@@ -0,0 +1,8 @@
+import English from './English';
+import French from './French';
+import Japanese from './Japanese';
+import Spanish from './Spanish';
+
+export type { FlagPropTypes } from './Flags.types';
+
+export { English, Spanish, Japanese, French };

package/src/components/I18nManager/I18nManager.tsx

@@ -2,7 +2,7 @@ import type { PropsWithChildren } from 'react';
 
 import { i18n } from '@lingui/core';
 import { I18nProvider } from '@lingui/react';
-import React, { useEffect } from 'react';
+import React, { useEffect, useReducer } from 'react';
 
 /*
  *Note: esbuild doesn't work properly with paths yet, so I couldn't use `paths` to make this path shorter.
@@ -14,13 +14,12 @@ import React, { useEffect } from 'react';
 import { messages as enMessages } from '../../../../../translations/en';
 import { messages as esMessages } from '../../../../../translations/es';
 import { messages as frMessages } from '../../../../../translations/fr';
-import { messages as jpMessages } from '../../../../../translations/jp';
+import { messages as jaMessages } from '../../../../../translations/ja';
 
-const DEFAULT_LANGUAGE = 'en';
 const messages = {
   en: enMessages,
   es: esMessages,
-  jp: jpMessages,
+  ja: jaMessages,
   fr: frMessages,
 };
 
@@ -28,15 +27,25 @@ i18n.load(messages);
 
 export type Language = keyof typeof messages;
 interface PropTypes {
-  language?: Language;
+  language: Language;
 }
 
 function I18nManager(props: PropsWithChildren<PropTypes>) {
+  const [count, forceUpdate] = useReducer((x) => x + 1, 0);
   useEffect(() => {
-    i18n.activate(props?.language || DEFAULT_LANGUAGE);
-  }, [props?.language]);
-
-  return <I18nProvider i18n={i18n}>{props.children}</I18nProvider>;
+    i18n.on('change', () => {
+      forceUpdate();
+    });
+  }, [i18n]);
+  useEffect(() => {
+    i18n.activate(props.language);
+  }, [props.language]);
+
+  return (
+    <I18nProvider i18n={i18n} key={count}>
+      {props.children}
+    </I18nProvider>
+  );
 }
 
 export { I18nManager };

package/src/components/StepDetails/StepDetails.tsx

@@ -52,8 +52,7 @@ const StepDetailsComponent = forwardRef<HTMLDivElement, StepDetailsProps>(
             size="small"
             variant="body">
             {i18n.t({
-              id: 'swapperDescription',
-              message: 'Swap on {fromChain} via {swapper}',
+              id: 'Swap on {fromChain} via {swapper}',
               values: {
                 fromChain: step.from.chain.displayName,
                 swapper: step.swapper.displayName,

package/src/components/SwapDetailsPlaceholder/SwapDetailsPlaceholder.tsx

@@ -36,11 +36,10 @@ export function SwapDetailsPlaceholder(props: PropTypes) {
         ) : (
           <Alert
             type="error"
-            title={i18n.t(
-              'swapNotFound',
-              { requestId },
-              { message: 'Swap with request ID = ${requestId} not found.' }
-            )}
+            title={i18n.t({
+              id: 'Swap with request ID = {requestId} not found.',
+              values: { requestId },
+            })}
           />
         )}
       </PlaceholderContainer>

package/src/components/index.ts

@@ -49,3 +49,4 @@ export * from './RouteCost';
 export * from './TokenAmount';
 export * from './StepDetails';
 export * from './Popover';
+export * from './Flags';

package/src/containers/Warnings/HighSlippageWarning.tsx

@@ -1,7 +1,8 @@
-import { Alert } from '../../components/Alert';
+import { i18n } from '@lingui/core';
 import React from 'react';
+
+import { Alert } from '../../components/Alert';
 import { ChangeSlippageButton } from '../../components/ChangeSlippageButton';
-import { i18n } from '@lingui/core';
 
 interface PropTypes {
   selectedSlippage: number;
@@ -18,14 +19,10 @@ export function HighSlippageWarning(props: PropTypes) {
         <Alert
           type="warning"
           footer={<ChangeSlippageButton onClick={changeSlippage} />}>
-          {i18n.t(
-            'highSlippage',
-            { selectedSlippage },
-            {
-              message:
-                ' Caution, your slippage is high (={selectedSlippage}). Your trade may be front run.',
-            }
-          )}
+          {i18n.t({
+            id: ' Caution, your slippage is high (={selectedSlippage}). Your trade may be front run.',
+            values: { selectedSlippage },
+          })}
         </Alert>
       )}
     </>

package/src/containers/Warnings/MinRequiredSlippage.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
 import { i18n } from '@lingui/core';
-import { Divider, Typography, ChangeSlippageButton } from '../../components';
+import React from 'react';
+
+import { ChangeSlippageButton, Divider, Typography } from '../../components';
 import { styled } from '../../theme';
 
 interface PropTypes {
@@ -18,14 +19,10 @@ export function MinRequiredSlippage({
 }: PropTypes) {
   return (
     <StyledMessage variant="body" size="small">
-      {i18n.t(
-        'increaseSlippage',
-        { minRequiredSlippage },
-        {
-          message:
-            'We recommend you to increase slippage to at least {minRequiredSlippage} for this route.',
-        }
-      )}
+      {i18n.t({
+        id: 'We recommend you to increase slippage to at least {minRequiredSlippage} for this route.',
+        values: { minRequiredSlippage },
+      })}
       <Divider size={8} />
       <ChangeSlippageButton onClick={changeSlippage} />
     </StyledMessage>

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

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