[release] Interlay 2.32.6 (#1248)

* feat: redirect when access from forbidden country is detected (#1209)

* Feature/updated transfer UI (#876)

* refactor: use updated tab component

* refactor: duplicated form titles

* refactor: remove redundant hook calls

* refactor: prefer title case

* wip: XCM transfer form UI

* wip: updated form UI

* wip: account selector placeholder component

* wip: account selector modal

* wip: modal open and close actions

* wip: update modal type

* wip: get accounts

* wip: add identicon and rename component for consistency

* wip: account input component

* fix: remove redundant icons prop

* feat: implement with SelectTrigger

* wip: styling and account selection value

* wip: handle setting account data

* refactor: better naming

* wip: address list styling

* refactor: rename defaultAccount

* wip: chain selector placeholder component

* wip: duplicate account component and rename

* chore: delete redundant legacy component

* wip: logic for fetching and rendering chain ids

* wip: chain item styling

* wip: selected chain styling

* chore: add comment

* refactor: pass through native token to icon component

* feature: add chain icon component

* chore: add comment

* chore: correct file name casing

* refactor: improve folder structure

* wip: form layout styling

* chore: add arrow icon

* chore: add logos and correct svg titles

* chore: remove redundant svg prop

* chore: rename arrow icon

* chore: consistent use of styled components

* refactor: remove padding from modal body

* wip: formik integration work

* wip: extend useXCMBridge to return available chains and utility methods

* chore: move Chain and Chains types to types directory

* feat: layout and form implementation

* feat: add schema

* feat: final

* wip: refactor useXCMBridge hook

* refactor: add endpoints type

* refactor: wrap methods in useCallback

* refactor: fix bug in hook method

* chore: bump bridge version

* wip: set originating and destination chain values

* refactor: set from chain value on field change

* wip: set originating chain value

* refactor: mergeProps to set field value

* refactor: handle setting origin/destination chain values

* wip: get tokens method

* wip: first iteration of balances function

* wip: handle tokens array

* wip: set token value

* wip: get token balances

* wip: return token and balances in single method

* wip: mapped tokens

* refactor: handle default chain values

* refactor: better organised function order

* wip: handle change events

* wip: handle setting tokens

* wip: handle fetching tokens and balances

* wip: convert input configs

* wip: handle token change

* wip: get token USD price

* Trigger Build

* chore: remove unused import

* chore: correct eslintignore syntax

* wip: handle breaking changes

* wip: disable token input when select items value is 1

* chore: set first token item as variable

* wip: handle setting and changing values

* chire: add loading spinner

* refactor: add loading state

* refactor: filter destination chains

* chore: remove console log

* chore: bump XCM bridge version

* chore: update config

* refactor: configure validation

* chore: revert change to useForm hook

* wip: form validation

* wip: working form validation

* wip: undefined validation parameters

* refactor: return dest fee estimate from bridge hook

* feature: show fees and fee estimates

* chore: conditional operators

* refactor: handle ticker change correctly

* wip: sendTransaction method

* Revert "wip: sendTransaction method"

This reverts commit 3ade26d.

* fix: USD amounts

* wip: send transactions

* refactor: bump bridge and use getNativeToken method

* chore: bump bridge

* refactor: move submit logic to useMutation hook

* fix: type mismatches

* refactor: white space/comments

* refactor: add transaction fee validation

* chore: typo

* chore: remove console log

* refactor: remove duplicated monetary conversion

* refactor: remove duplicate code

* Revert "refactor: remove duplicate code"

This reverts commit bd29f8c.

* Revert "refactor: remove duplicated monetary conversion"

This reverts commit 5fd3d64.

* refactor: use monetaryAmount when constructing transaction

* refactor: remove duplicated code for fetching tokens

* refactor: default XCM origin

* Revert "refactor: remove duplicated code for fetching tokens"

This reverts commit 8f31ee8.

* chore: remove comment

* chore: fix errors

* fix: set default value to empty string to prevent React error

* refactor: removed unwanted force validation parameters

* refactor: remove redundant method

* refactor: add method return type

* refactor: add method return type

* refactor: correct type error

* refactor: fix destFee type error

* refactor: remove fees validation and revert destFee return value

* chore: remove console log

* refactor: remove redundant method

* refactor: disable validation on change

* chore: remove commented out code

* wip: use select component for chain selector

* fix: handle chain select functions

* refactor: type chain id as ChainName

* Revert "refactor: type chain id as ChainName"

This reverts commit d05e012.

* chore: remove unused component files

* refactor: remove duplicated transaction logic

* fix: make to/from field types more specific

* fix: revert yup.custom changes and cast validation

* fix: set correct destination chain

* refator: handle token data

* refactor: add use callback

* fix: correct rendering logic

* fix: update dependencies

* chore: delete unused styles

* chore: fix merge issue with transfer form

* fix: change validation handling

* Revert "fix: change validation handling"

This reverts commit c0cb306.

* refactor: only display transfer amount if amount has been entered

* chore: config changes

* chore: add missing icons

* chore: Hydra chain icon

* fix: add error text to CTA

* Tom/xcm fixes (#1213)

* refactor: specify endpoints and remove unnecessary logic

* fix: save file before committing

* fix: disable refetch

* chore: update endpoints

* chore: remove log

* chore: rename file

* chore: add additional acala/karura endpoints

---------

Co-authored-by: Rui Simão <[email protected]>

* chore: release v2.32.0

* Update API healthchecks (#778)

* Chore - add vault healthcheck

* Chore - add vault healthcheck

* Chore - add vault healthcheck

* [earn strategies] placeholder page, nav and feature flag (#1216)

* chore: bump icons dependency

* feature: earn strategies placeholder page and feature flag

* feat: add useTransaction (#1189)

* chore: update monetary to latest 0.7.3 (#1214)

* chore: update monetary to latest 0.7.3

* chore: update lib

* chore: bump lib and bridge (#1219)

* chore: release v2.32.1

* fix: add missing icons and remove erroring RPC (#1222)

* fix: add missing icons and remove erroring RPC

* Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Acala.tsx

Co-authored-by: Peter Slaný <[email protected]>

* Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Astar.tsx

Co-authored-by: Peter Slaný <[email protected]>

* Update src/pages/Transfer/CrossChainTransferForm/components/ChainIcon/icons/Parallel.tsx

Co-authored-by: Peter Slaný <[email protected]>

---------

Co-authored-by: Peter Slaný <[email protected]>

* chore: release v2.32.2

* fix: compare input configs with method not operator (#1225)

* refactor: reset selected account on account change (#1226)

* chore: release v2.32.3

* feature: add geoblock feature flag (#1230)

* chore: release v2.32.4

* chore: bump bridge (#1233)

* chore: release v2.32.5

* Peter/earn strategies feat deposit withdraw form (#1229)

* chore: update monetary to latest 0.7.3

* wip

* feat(earn-strategies): add deposit and withdrawal form components

* refactor: add padding under tabs in earn strategy forms

* chore(earn-strategies): change file structure

* feat: add Popover, Underlay and ProgressBar. Changes to Dialog, Modal and Overlay. (#1236)

* fix: Dialog, Modal and Popover (#1245)

* chore: rename strategies feature (#1247)

* chore: release v2.32.6

---------

Co-authored-by: Peter Slaný <[email protected]>
Co-authored-by: Rui Simão <[email protected]>
Co-authored-by: ns212 <[email protected]>

.env.dev

@@ -4,7 +4,7 @@ REACT_APP_FEATURE_FLAG_LENDING=enabled
 REACT_APP_FEATURE_FLAG_AMM=enabled
 REACT_APP_FEATURE_FLAG_WALLET=enabled
 REACT_APP_FEATURE_FLAG_BANXA=enabled
-REACT_APP_FEATURE_FLAG_EARN_STRATEGIES=enabled
+REACT_APP_FEATURE_FLAG_STRATEGIES=enabled
 
 /* DEVELOPMENT */
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "interbtc-ui",
-  "version": "2.32.5",
+  "version": "2.32.6",
   "private": true,
   "dependencies": {
     "@craco/craco": "^6.1.1",
@@ -24,8 +24,8 @@
     "@react-aria/link": "^3.4.0",
     "@react-aria/listbox": "^3.8.1",
     "@react-aria/meter": "^3.2.1",
-    "@react-aria/overlays": "^3.12.0",
-    "@react-aria/progress": "^3.3.0",
+    "@react-aria/overlays": "^3.14.0",
+    "@react-aria/progress": "^3.4.1",
     "@react-aria/select": "^3.9.0",
     "@react-aria/separator": "^3.2.5",
     "@react-aria/switch": "^3.2.4",
@@ -37,7 +37,7 @@
     "@react-aria/visually-hidden": "^3.6.1",
     "@react-stately/collections": "^3.4.1",
     "@react-stately/list": "^3.6.1",
-    "@react-stately/overlays": "^3.4.3",
+    "@react-stately/overlays": "^3.5.1",
     "@react-stately/select": "^3.4.0",
     "@react-stately/table": "^3.3.0",
     "@react-stately/tabs": "^3.4.0",

src/App.tsx

@@ -26,7 +26,7 @@ import TestnetBanner from './legacy-components/TestnetBanner';
 import { FeatureFlags, useFeatureFlag } from './utils/hooks/use-feature-flag';
 
 const Bridge = React.lazy(() => import(/* webpackChunkName: 'bridge' */ '@/pages/Bridge'));
-const EarnStrategies = React.lazy(() => import(/* webpackChunkName: 'earn-strategies' */ '@/pages/EarnStrategies'));
+const Strategies = React.lazy(() => import(/* webpackChunkName: 'strategies' */ '@/pages/Strategies'));
 const Transfer = React.lazy(() => import(/* webpackChunkName: 'transfer' */ '@/pages/Transfer'));
 const Transactions = React.lazy(() => import(/* webpackChunkName: 'transactions' */ '@/pages/Transactions'));
 const TX = React.lazy(() => import(/* webpackChunkName: 'tx' */ '@/pages/TX'));
@@ -51,7 +51,7 @@ const App = (): JSX.Element => {
   const isLendingEnabled = useFeatureFlag(FeatureFlags.LENDING);
   const isAMMEnabled = useFeatureFlag(FeatureFlags.AMM);
   const isWalletEnabled = useFeatureFlag(FeatureFlags.WALLET);
-  const isEarnStrategiesEnabled = useFeatureFlag(FeatureFlags.EARN_STRATEGIES);
+  const isStrategiesEnabled = useFeatureFlag(FeatureFlags.STRATEGIES);
 
   // Loads the connection to the faucet - only for testnet purposes
   const loadFaucet = React.useCallback(async (): Promise<void> => {
@@ -214,9 +214,9 @@ const App = (): JSX.Element => {
                       <Wallet />
                     </Route>
                   )}
-                  {isEarnStrategiesEnabled && (
-                    <Route path={PAGES.EARN_STRATEGIES}>
-                      <EarnStrategies />
+                  {isStrategiesEnabled && (
+                    <Route path={PAGES.STRATEGIES}>
+                      <Strategies />
                     </Route>
                   )}
                   <Route path={PAGES.ACTIONS}>

src/assets/locales/en/translation.json

@@ -20,6 +20,7 @@
   "reimbursed": "Reimbursed",
   "online": "Online",
   "offline": "Offline",
+  "available": "Available",
   "unavailable": "Unavailable",
   "ok": "OK",
   "pending": "Pending",
@@ -74,7 +75,7 @@
   "issue": "Issue",
   "redeem": "Redeem",
   "nav_bridge": "Bridge",
-  "nav_earn_strategies": "Earn Strategies",
+  "nav_strategies": "Strategies",
   "nav_transfer": "Transfer",
   "nav_lending": "Lending",
   "nav_swap": "Swap",
@@ -154,6 +155,7 @@
   "unlocks": "Unlocks",
   "staked": "Staked",
   "sign_t&cs": "Sign T&Cs",
+  "receivable_assets": "Receivable Assets",
   "redeem_page": {
     "maximum_in_single_request": "Max redeemable in single request",
     "redeem": "Redeem",
@@ -586,7 +588,6 @@
       "pool_name": "Pool Name",
       "add_liquidity": "Add Liquidity",
       "remove_liquidity": "Remove Liquidity",
-      "receivable_assets": "Receivable Assets",
       "initial_rate_warning": "Note: You are setting the initial exchange rate of this pool. Make sure it reflects the exchange rate on other markets, please."
     },
     "swap": "Swap",
@@ -631,5 +632,9 @@
     "total_governance_locked": "Total {{token}} Locked",
     "available_to_stake": "Available to stake",
     "voting_power_governance": "Voting Power {{token}}"
+  },
+  "strategy": {
+    "withdraw_rewards_in_wrapped": "Withdraw rewards in {{wrappedCurrencySymbol}}:",
+    "update_position": "Update position"
   }
 }

src/component-library/Dialog/Dialog.style.tsx

@@ -0,0 +1,54 @@
+import styled from 'styled-components';
+
+import { CTA } from '../CTA';
+import { Divider } from '../Divider';
+import { Flex } from '../Flex';
+import { H3 } from '../Text';
+import { theme } from '../theme';
+import { Sizes } from '../utils/prop-types';
+
+type StyledDialogProps = {
+  $size: Sizes;
+};
+
+const StyledDialog = styled.section<StyledDialogProps>`
+  background: ${theme.colors.bgPrimary};
+  border: ${theme.border.default};
+  border-radius: ${theme.rounded.md};
+  color: ${theme.colors.textPrimary};
+  max-width: 100%;
+  width: ${({ $size }) => theme.dialog[$size].width};
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  outline: none;
+`;
+
+const StyledCloseCTA = styled(CTA)`
+  position: absolute;
+  top: ${theme.spacing.spacing2};
+  right: ${theme.spacing.spacing2};
+  z-index: ${theme.dialog.closeBtn.zIndex};
+`;
+
+const StyledDialogHeader = styled(H3)<StyledDialogProps>`
+  padding: ${({ $size }) => theme.dialog[$size].header.padding};
+  overflow: hidden;
+  flex-shrink: 0;
+`;
+
+const StyledDialogDivider = styled(Divider)<StyledDialogProps>`
+  margin: ${({ $size }) => `0 ${theme.dialog[$size].divider.marginX} ${theme.dialog[$size].divider.marginBottom}`};
+  flex-shrink: 0;
+`;
+
+const StyledDialogBody = styled(Flex)<StyledDialogProps>`
+  padding: ${({ $size }) => `${theme.dialog[$size].body.paddingY} ${theme.dialog[$size].body.paddingX}`};
+  flex: 1 1 auto;
+`;
+
+const StyledDialogFooter = styled(Flex)<StyledDialogProps>`
+  padding: ${({ $size }) => theme.dialog[$size].footer.padding};
+`;
+
+export { StyledCloseCTA, StyledDialog, StyledDialogBody, StyledDialogDivider, StyledDialogFooter, StyledDialogHeader };

src/component-library/Dialog/Dialog.tsx

@@ -0,0 +1,52 @@
+import { AriaDialogProps, useDialog } from '@react-aria/dialog';
+import { mergeProps } from '@react-aria/utils';
+import { PressEvent } from '@react-types/shared';
+import { forwardRef, ReactNode } from 'react';
+
+import { XMark } from '@/assets/icons';
+
+import { useDOMRef } from '../utils/dom';
+import { CTASizes, Sizes } from '../utils/prop-types';
+import { StyledCloseCTA, StyledDialog } from './Dialog.style';
+import { DialogContext } from './DialogContext';
+
+const closeCTASizeMap: Record<Sizes, CTASizes> = { small: 'x-small', medium: 'small', large: 'small' };
+
+type Props = {
+  children?: ReactNode;
+  onClose?: (e: PressEvent) => void;
+  size?: Sizes;
+};
+
+type InheritAttrs = Omit<AriaDialogProps, keyof Props>;
+
+type DialogProps = Props & InheritAttrs;
+
+const Dialog = forwardRef<HTMLDivElement, DialogProps>(
+  ({ children, onClose, size = 'medium', ...props }, ref): JSX.Element => {
+    const dialogRef = useDOMRef(ref);
+
+    // Get props for the dialog and its title
+    const { dialogProps, titleProps } = useDialog(props, dialogRef);
+
+    const closeCTASize = closeCTASizeMap[size];
+
+    return (
+      <DialogContext.Provider value={{ titleProps, size }}>
+        <StyledDialog ref={dialogRef} $size={size} {...mergeProps(props, dialogProps)}>
+          {onClose && (
+            <StyledCloseCTA size={closeCTASize} variant='text' aria-label='Dismiss' onPress={onClose}>
+              <XMark />
+            </StyledCloseCTA>
+          )}
+          {children}
+        </StyledDialog>
+      </DialogContext.Provider>
+    );
+  }
+);
+
+Dialog.displayName = 'Dialog';
+
+export { Dialog };
+export type { DialogProps };

src/component-library/Dialog/DialogBody.tsx

@@ -0,0 +1,14 @@
+import { FlexProps } from '../Flex';
+import { StyledDialogBody } from './Dialog.style';
+import { useDialogContext } from './DialogContext';
+
+type DialogBodyProps = FlexProps;
+
+const DialogBody = ({ direction = 'column', ...props }: DialogBodyProps): JSX.Element => {
+  const { size } = useDialogContext();
+
+  return <StyledDialogBody {...props} $size={size} direction={direction} />;
+};
+
+export { DialogBody };
+export type { DialogBodyProps };

src/component-library/Dialog/DialogContext.tsx

@@ -0,0 +1,18 @@
+import { DOMAttributes } from '@react-types/shared';
+import React from 'react';
+
+import { Sizes } from '../utils/prop-types';
+
+interface DialogConfig {
+  titleProps?: DOMAttributes;
+  size: Sizes;
+}
+
+const defaultContext: DialogConfig = { size: 'medium' };
+
+const DialogContext = React.createContext<DialogConfig>(defaultContext);
+
+const useDialogContext = (): DialogConfig => React.useContext<DialogConfig>(DialogContext);
+
+export { DialogContext, useDialogContext };
+export type { DialogConfig };

src/component-library/Dialog/DialogDivider.tsx

@@ -0,0 +1,14 @@
+import { DividerProps } from '../Divider';
+import { StyledDialogDivider } from './Dialog.style';
+import { useDialogContext } from './DialogContext';
+
+type DialogDividerProps = Omit<DividerProps, 'orientation'>;
+
+const DialogDivider = (props: DialogDividerProps): JSX.Element => {
+  const { size } = useDialogContext();
+
+  return <StyledDialogDivider orientation='horizontal' $size={size} {...props} />;
+};
+
+export { DialogDivider };
+export type { DialogDividerProps };

src/component-library/Dialog/DialogFooter.tsx

@@ -0,0 +1,16 @@
+import { FlexProps } from '../Flex';
+import { StyledDialogFooter } from './Dialog.style';
+import { useDialogContext } from './DialogContext';
+
+type InheritAttrs = FlexProps;
+
+type DialogFooterProps = InheritAttrs;
+
+const DialogFooter = (props: DialogFooterProps): JSX.Element => {
+  const { size } = useDialogContext();
+
+  return <StyledDialogFooter $size={size} {...props} />;
+};
+
+export { DialogFooter };
+export type { DialogFooterProps };

src/component-library/Dialog/DialogHeader.tsx

@@ -0,0 +1,34 @@
+import { mergeProps } from '@react-aria/utils';
+import { ElementType } from 'react';
+
+import { TextProps } from '../Text';
+import { FontSize, Sizes } from '../utils/prop-types';
+import { StyledDialogHeader } from './Dialog.style';
+import { useDialogContext } from './DialogContext';
+
+const sizeMap: Record<Sizes, FontSize> = {
+  small: 'base',
+  medium: 'xl',
+  large: 'xl'
+};
+
+type Props = {
+  elementType?: ElementType;
+};
+
+type InheritAttrs = Omit<TextProps, keyof Props>;
+
+type DialogHeaderProps = Props & InheritAttrs;
+
+const DialogHeader = ({ elementType, children, ...props }: DialogHeaderProps): JSX.Element => {
+  const { titleProps, size } = useDialogContext();
+
+  return (
+    <StyledDialogHeader as={elementType} $size={size} size={sizeMap[size]} {...mergeProps(titleProps || {}, props)}>
+      {children}
+    </StyledDialogHeader>
+  );
+};
+
+export { DialogHeader };
+export type { DialogHeaderProps };

src/component-library/Dialog/index.tsx

@@ -0,0 +1,10 @@
+export type { DialogProps } from './Dialog';
+export { Dialog } from './Dialog';
+export type { DialogBodyProps } from './DialogBody';
+export { DialogBody } from './DialogBody';
+export type { DialogDividerProps } from './DialogDivider';
+export { DialogDivider } from './DialogDivider';
+export type { DialogFooterProps } from './DialogFooter';
+export { DialogFooter } from './DialogFooter';
+export type { DialogHeaderProps } from './DialogHeader';
+export { DialogHeader } from './DialogHeader';

src/component-library/Divider/Divider.style.tsx

@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 
+import { marginCSS, StyledMarginProps } from '../css/margin';
 import { theme } from '../theme';
 import { DividerVariants, Orientation, Sizes } from '../utils/prop-types';
 import { resolveColor } from '../utils/theme';
@@ -8,7 +9,7 @@ type StyledDividerProps = {
   $color: DividerVariants;
   $orientation: Orientation;
   $size: Sizes;
-};
+} & StyledMarginProps;
 
 const StyledDivider = styled.hr<StyledDividerProps>`
   background-color: ${({ $color }) => ($color === 'default' ? 'var(--colors-border)' : resolveColor($color))};
@@ -17,6 +18,8 @@ const StyledDivider = styled.hr<StyledDividerProps>`
   border: 0;
   margin: 0;
   align-self: stretch;
+  flex-shrink: 0;
+  ${(props) => marginCSS(props)};
 `;
 
 export { StyledDivider };

src/component-library/Divider/Divider.tsx

@@ -2,7 +2,8 @@ import { useSeparator } from '@react-aria/separator';
 import { mergeProps } from '@react-aria/utils';
 import { forwardRef, HTMLAttributes } from 'react';
 
-import { DividerVariants, ElementTypeProp, Orientation, Sizes } from '../utils/prop-types';
+import { DividerVariants, ElementTypeProp, MarginProps, Orientation, Sizes } from '../utils/prop-types';
+import { useStyleProps } from '../utils/use-style-props';
 import { StyledDivider } from './Divider.style';
 
 type Props = {
@@ -13,7 +14,7 @@ type Props = {
 
 type NativeAttrs = Omit<HTMLAttributes<unknown>, keyof Props>;
 
-type DividerProps = Props & NativeAttrs & ElementTypeProp;
+type DividerProps = Props & NativeAttrs & ElementTypeProp & MarginProps;
 
 const Divider = forwardRef<HTMLHRElement, DividerProps>(
   (
@@ -26,6 +27,7 @@ const Divider = forwardRef<HTMLHRElement, DividerProps>(
       ...props,
       elementType
     });
+    const { styleProps, componentProps } = useStyleProps(props);
 
     return (
       <StyledDivider
@@ -34,7 +36,7 @@ const Divider = forwardRef<HTMLHRElement, DividerProps>(
         $color={color}
         $orientation={orientation}
         $size={size}
-        {...mergeProps(separatorProps, props)}
+        {...mergeProps(separatorProps, styleProps, componentProps)}
       />
     );
   }