[release] Interlay 2.32.4 (#1231)

* 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

---------

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
 
 /* DEVELOPMENT */
 

api/health.py

@@ -2,7 +2,7 @@
 import dateutil.parser
 from datetime import datetime
 from dateutil.tz import tzutc
-from flask import Flask, jsonify
+from flask import Flask, jsonify, abort
 
 
 class Oracle:
@@ -80,30 +80,85 @@ def isHealthy(self):
         return status["chainHeightDiff"] < 3 and status["secondsDiff"] < 7200  # 2hrs
 
 
-KSM_URL = "https://api-kusama.interlay.io/graphql/graphql"
-INTR_URL = "https://api.interlay.io/graphql/graphql"
-
-app = Flask(__name__)
-
+class Vault:
+    def __init__(self, baseUrl) -> None:
+        self.baseUrl = baseUrl
 
-@app.route("/_health/ksm/oracle", methods=["GET"])
-def get_ksm_oracle_health():
-    return jsonify(Oracle(KSM_URL, "KSM").isHealthy())
+    def _latestVaults(self):
+        q = """
+            query MyQuery {
+                vaults(limit: 10, orderBy: registrationBlock_active_DESC) {
+                    id
+                    registrationTimestamp
+                }
+            }
+        """
+        payload = {"query": q, "variables": None}
+        resp = requests.post(self.baseUrl, json=payload)
+        return resp.json()["data"]["vaults"]
 
+    def isHealthy(self):
+        vaults = self._latestVaults()
+        return len(self._latestVaults()) > 0
 
-@app.route("/_health/ksm/relay", methods=["GET"])
-def get_ksm_relayer_health():
-    return jsonify(Relayer(KSM_URL).isHealthy())
 
+KSM_URL = "https://api-kusama.interlay.io/graphql/graphql"
+INTR_URL = "https://api.interlay.io/graphql/graphql"
+TESTNET_INTR = "https://api-testnet.interlay.io/graphql/graphql"
+TESTNET_KINT = "https://api-dev-kintsugi.interlay.io/graphql/graphql"
 
-@app.route("/_health/intr/oracle", methods=["GET"])
-def get_intr_oracle_health():
-    return jsonify(Oracle(INTR_URL, "DOT").isHealthy())
+app = Flask(__name__)
 
 
-@app.route("/_health/intr/relay", methods=["GET"])
-def get_intr_relayer_health():
-    return jsonify(Relayer(INTR_URL).isHealthy())
+@app.route("/_health/<chain>/oracle", methods=["GET"])
+def get_oracle_health(chain):
+    def oracle():
+        if chain == "kint":
+            return Oracle(KSM_URL, "KSM")
+        elif chain == "intr":
+            return Oracle(INTR_URL, "DOT")
+        elif chain == "testnet_kint":
+            return Oracle(TESTNET_KINT, "KSM")
+        elif chain == "testnet_intr":
+            return Oracle(TESTNET_INTR, "DOT")
+        else:
+            abort(404)
+
+    return jsonify(oracle().isHealthy())
+
+
+@app.route("/_health/<chain>/relay", methods=["GET"])
+def get_relay_health(chain):
+    def relay():
+        if chain == "kint":
+            return Relayer(KSM_URL)
+        elif chain == "intr":
+            return Relayer(INTR_URL)
+        elif chain == "testnet_kint":
+            return Relayer(TESTNET_KINT)
+        elif chain == "testnet_intr":
+            return Relayer(TESTNET_INTR)
+        else:
+            abort(404)
+
+    return jsonify(relay().isHealthy())
+
+
+@app.route("/_health/<chain>/vault", methods=["GET"])
+def get_vault_health(chain):
+    def vault():
+        if chain == "kint":
+            return Vault(KSM_URL)
+        elif chain == "intr":
+            return Vault(INTR_URL)
+        elif chain == "testnet_kint":
+            return Vault(TESTNET_KINT)
+        elif chain == "testnet_intr":
+            return Vault(TESTNET_INTR)
+        else:
+            abort(404)
+
+    return jsonify(vault().isHealthy())
 
 
 if __name__ == "__main__":

package.json

@@ -1,16 +1,17 @@
 {
   "name": "interbtc-ui",
-  "version": "2.31.3",
+  "version": "2.32.4",
   "private": true,
   "dependencies": {
     "@craco/craco": "^6.1.1",
     "@headlessui/react": "^1.1.1",
-    "@heroicons/react": "^2.0.0",
-    "@interlay/bridge": "^0.2.9",
-    "@interlay/interbtc-api": "2.2.2",
-    "@interlay/monetary-js": "0.7.2",
+    "@heroicons/react": "^2.0.18",
+    "@interlay/bridge": "^0.3.10",
+    "@interlay/interbtc-api": "2.2.4",
+    "@interlay/monetary-js": "0.7.3",
     "@polkadot/api": "9.14.2",
     "@polkadot/extension-dapp": "0.44.1",
+    "@polkadot/react-identicon": "^2.11.1",
     "@polkadot/ui-keyring": "^2.9.7",
     "@reach/tooltip": "^0.16.0",
     "@react-aria/accordion": "^3.0.0-alpha.14",

src/App.tsx

@@ -26,6 +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 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'));
@@ -35,9 +36,9 @@ const Vaults = React.lazy(() => import(/* webpackChunkName: 'vaults' */ '@/pages
 // TODO: last task will be to delete legacy dashboard and rename vault dashboard
 const Vault = React.lazy(() => import(/* webpackChunkName: 'vault' */ '@/pages/Vaults/Vault'));
 const Loans = React.lazy(() => import(/* webpackChunkName: 'loans' */ '@/pages/Loans'));
-const Swap = React.lazy(() => import(/* webpackChunkName: 'loans' */ '@/pages/AMM'));
-const Pools = React.lazy(() => import(/* webpackChunkName: 'loans' */ '@/pages/AMM/Pools'));
-const Wallet = React.lazy(() => import(/* webpackChunkName: 'loans' */ '@/pages/Wallet'));
+const Swap = React.lazy(() => import(/* webpackChunkName: 'amm' */ '@/pages/AMM'));
+const Pools = React.lazy(() => import(/* webpackChunkName: 'amm/pools' */ '@/pages/AMM/Pools'));
+const Wallet = React.lazy(() => import(/* webpackChunkName: 'wallet' */ '@/pages/Wallet'));
 const Actions = React.lazy(() => import(/* webpackChunkName: 'actions' */ '@/pages/Actions'));
 const NoMatch = React.lazy(() => import(/* webpackChunkName: 'no-match' */ '@/pages/NoMatch'));
 
@@ -50,6 +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);
 
   // Loads the connection to the faucet - only for testnet purposes
   const loadFaucet = React.useCallback(async (): Promise<void> => {
@@ -212,6 +214,11 @@ const App = (): JSX.Element => {
                       <Wallet />
                     </Route>
                   )}
+                  {isEarnStrategiesEnabled && (
+                    <Route path={PAGES.EARN_STRATEGIES}>
+                      <EarnStrategies />
+                    </Route>
+                  )}
                   <Route path={PAGES.ACTIONS}>
                     <Actions />
                   </Route>

src/assets/icons/ArrowRightCircle.tsx

@@ -0,0 +1,13 @@
+import { forwardRef } from 'react';
+
+import { Icon, IconProps } from '@/component-library/Icon';
+
+const ArrowRightCircle = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+  <Icon ref={ref} xmlns='http://www.w3.org/2000/svg' stroke='none' viewBox='0 0 24 24' fill='currentColor' {...props}>
+    <path d='M2.4 12C2.4 6.708 6.708 2.4 12 2.4C17.292 2.4 21.6 6.708 21.6 12C21.6 17.292 17.292 21.6 12 21.6C6.708 21.6 2.4 17.292 2.4 12ZM-7.52913e-07 12C-3.37305e-07 18.624 5.376 24 12 24C18.624 24 24 18.624 24 12C24 5.376 18.624 -1.52082e-06 12 -1.31911e-06C5.376 -1.11739e-06 -1.16852e-06 5.376 -7.52913e-07 12ZM12 10.8L7.2 10.8L7.2 13.2L12 13.2L12 16.8L16.8 12L12 7.2L12 10.8Z' />
+  </Icon>
+));
+
+ArrowRightCircle.displayName = 'ArrowRightCircle';
+
+export { ArrowRightCircle };

src/assets/icons/index.ts

@@ -1,4 +1,5 @@
 export { ArrowRight } from './ArrowRight';
+export { ArrowRightCircle } from './ArrowRightCircle';
 export { ArrowsUpDown } from './ArrowsUpDown';
 export { ArrowTopRightOnSquare } from './ArrowTopRightOnSquare';
 export { ChevronDown } from './ChevronDown';

src/assets/locales/en/translation.json

@@ -74,6 +74,7 @@
   "issue": "Issue",
   "redeem": "Redeem",
   "nav_bridge": "Bridge",
+  "nav_earn_strategies": "Earn Strategies",
   "nav_transfer": "Transfer",
   "nav_lending": "Lending",
   "nav_swap": "Swap",
@@ -602,6 +603,7 @@
   },
   "forms": {
     "please_enter_your_field": "Please enter your {{field}}",
+    "please_select_your_field": "Please select your {{field}}",
     "please_enter_the_amount_to": "Please enter the amount to {{field}}",
     "amount_must_be_at_least": "Amount to {{action}} must be at least {{amount}} {{token}}",
     "amount_must_be_at_most": "Amount to {{action}} must be at most {{amount}}",

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

@@ -8,6 +8,7 @@ const StyledLabel = styled.label`
   font-size: ${theme.text.xs};
   color: ${theme.colors.textTertiary};
   padding: ${theme.spacing.spacing1} 0;
+  align-self: flex-start;
 `;
 
 export { StyledLabel };

src/component-library/Select/SelectTrigger.tsx

@@ -8,7 +8,7 @@ import { Sizes } from '../utils/prop-types';
 import { StyledChevronDown, StyledTrigger, StyledTriggerValue } from './Select.style';
 
 type Props = {
-  as: any;
+  as?: any;
   size?: Sizes;
   isOpen?: boolean;
   hasError?: boolean;

src/component-library/index.tsx

@@ -32,6 +32,8 @@ export type { ModalBodyProps, ModalDividerProps, ModalFooterProps, ModalHeaderPr
 export { Modal, ModalBody, ModalDivider, ModalFooter, ModalHeader } from './Modal';
 export type { NumberInputProps } from './NumberInput';
 export { NumberInput } from './NumberInput';
+export type { SelectProps } from './Select';
+export { Item, Select } from './Select';
 export type { StackProps } from './Stack';
 export { Stack } from './Stack';
 export type { SwitchProps } from './Switch';

src/component-library/theme/theme.ts

@@ -510,15 +510,19 @@ const theme = {
     size: {
       small: {
         padding: 'var(--spacing-1)',
-        text: 'var(--text-s)'
+        text: 'var(--text-s)',
+        // TODO: to be determined
+        maxHeight: 'calc(var(--spacing-6) - 1px)'
       },
       medium: {
         padding: 'var(--spacing-2)',
-        text: 'var(--text-base)'
+        text: 'var(--text-base)',
+        maxHeight: 'calc(var(--spacing-10) - 1px)'
       },
       large: {
         padding: 'var(--spacing-5) var(--spacing-2)',
-        text: 'var(--text-lg)'
+        text: 'var(--text-lg)',
+        maxHeight: 'calc(var(--spacing-16) - 1px)'
       }
     }
   }

src/components/AccountSelect/AccountLabel.tsx

@@ -0,0 +1,34 @@
+import Identicon from '@polkadot/react-identicon';
+
+import { FlexProps } from '@/component-library/Flex';
+
+import { StyledAccountLabelAddress, StyledAccountLabelName, StyledAccountLabelWrapper } from './AccountSelect.style';
+
+type Props = {
+  isSelected?: boolean;
+  address: string;
+  name?: string;
+};
+
+type InheritAttrs = Omit<FlexProps, keyof Props | 'children'>;
+
+type AccountLabelProps = Props & InheritAttrs;
+
+const AccountLabel = ({ isSelected, address, name, ...props }: AccountLabelProps): JSX.Element => (
+  <StyledAccountLabelWrapper alignItems='center' gap='spacing2' flex='1' {...props}>
+    <Identicon size={24} value={address} theme='polkadot' />
+    <StyledAccountLabelWrapper direction='column'>
+      {name && (
+        <StyledAccountLabelName size='s' $isSelected={!!isSelected}>
+          {name}
+        </StyledAccountLabelName>
+      )}
+      <StyledAccountLabelAddress size='xs' color='tertiary'>
+        {address}
+      </StyledAccountLabelAddress>
+    </StyledAccountLabelWrapper>
+  </StyledAccountLabelWrapper>
+);
+
+export { AccountLabel };
+export type { AccountLabelProps };

src/components/AccountSelect/AccountList.tsx

@@ -0,0 +1,58 @@
+import { InjectedAccountWithMeta } from '@polkadot/extension-inject/types';
+
+import { ListItem, ListProps } from '@/component-library/List';
+
+import { AccountLabel } from './AccountLabel';
+import { StyledList } from './AccountSelect.style';
+
+type Props = {
+  items: InjectedAccountWithMeta[];
+  selectedAccount?: string;
+  onSelectionChange?: (account: string) => void;
+};
+
+type InheritAttrs = Omit<ListProps, keyof Props | 'children'>;
+
+type AccountListProps = Props & InheritAttrs;
+
+const AccountList = ({ items, selectedAccount, onSelectionChange, ...props }: AccountListProps): JSX.Element => {
+  const handleSelectionChange: ListProps['onSelectionChange'] = (key) => {
+    const [selectedKey] = [...key];
+
+    if (!selectedKey) return;
+
+    onSelectionChange?.(selectedKey as string);
+  };
+
+  return (
+    <StyledList
+      aria-label='select account'
+      variant='secondary'
+      selectionMode='single'
+      onSelectionChange={handleSelectionChange}
+      selectedKeys={selectedAccount ? [selectedAccount] : undefined}
+      {...props}
+    >
+      {items.map((item) => {
+        const accountText = item.address;
+
+        const isSelected = selectedAccount === accountText;
+
+        return (
+          <ListItem
+            key={accountText}
+            textValue={accountText}
+            alignItems='center'
+            justifyContent='space-between'
+            gap='spacing2'
+          >
+            <AccountLabel isSelected={isSelected} address={item.address} name={item.meta.name} />
+          </ListItem>
+        );
+      })}
+    </StyledList>
+  );
+};
+
+export { AccountList };
+export type { AccountListProps };

src/components/AccountSelect/AccountListModal.tsx

@@ -0,0 +1,34 @@
+import { InjectedAccountWithMeta } from '@polkadot/extension-inject/types';
+
+import { Modal, ModalBody, ModalHeader, ModalProps } from '@/component-library/Modal';
+
+import { AccountList } from './AccountList';
+
+type Props = {
+  accounts: InjectedAccountWithMeta[];
+  onSelectionChange?: (account: string) => void;
+  selectedAccount?: string;
+};
+
+type InheritAttrs = Omit<ModalProps, keyof Props | 'children'>;
+
+type AccountListModalProps = Props & InheritAttrs;
+
+const AccountListModal = ({
+  selectedAccount,
+  accounts,
+  onSelectionChange,
+  ...props
+}: AccountListModalProps): JSX.Element => (
+  <Modal hasMaxHeight {...props}>
+    <ModalHeader size='lg' weight='medium' color='secondary'>
+      Select Account
+    </ModalHeader>
+    <ModalBody overflow='hidden' noPadding>
+      <AccountList items={accounts} selectedAccount={selectedAccount} onSelectionChange={onSelectionChange} />
+    </ModalBody>
+  </Modal>
+);
+
+export { AccountListModal };
+export type { AccountListModalProps };