[release] kintsugi/2.41.16

package.json

@@ -1,6 +1,6 @@
 {
   "name": "interbtc-ui",
-  "version": "2.41.15",
+  "version": "2.41.16",
   "private": true,
   "dependencies": {
     "@acala-network/sdk-core": "^4.1.5",
@@ -81,6 +81,7 @@
     "redux": "^4.0.5",
     "styled-components": "^5.3.5",
     "typescript": "4.3.2",
+    "viem": "^2.21.34",
     "web-vitals": "^1.0.1",
     "yup": "^0.32.11"
   },

src/App.tsx

@@ -21,6 +21,7 @@ import * as constants from './constants';
 import { FeatureFlags, useFeatureFlag } from './hooks/use-feature-flag';
 
 const BTC = React.lazy(() => import(/* webpackChunkName: 'btc' */ '@/pages/BTC'));
+const BOB = React.lazy(() => import(/* webpackChunkName: 'bob' */ '@/pages/BOB'));
 const Strategies = React.lazy(() => import(/* webpackChunkName: 'strategies' */ '@/pages/Strategies'));
 const Strategy = React.lazy(() => import(/* webpackChunkName: 'strategy' */ '@/pages/Strategies/Strategy'));
 const SendAndReceive = React.lazy(() => import(/* webpackChunkName: 'sendAndReceive' */ '@/pages/SendAndReceive'));
@@ -119,6 +120,9 @@ const App = (): JSX.Element => {
                 <Route path={PAGES.WALLET}>
                   <Wallet />
                 </Route>
+                <Route path={PAGES.BOB}>
+                  <BOB />
+                </Route>
                 {isStrategiesEnabled && (
                   <>
                     <Route exact path={PAGES.STRATEGIES}>

src/components/AppAlert/AppAlert.styles.tsx

@@ -0,0 +1,11 @@
+import styled from "styled-components";
+
+import { CTA, theme } from "@/component-library";
+
+const StyledCloseCTA = styled(CTA)`
+  position: absolute;
+  right: ${theme.spacing.spacing2};
+  top: 0;
+`;
+
+export { StyledCloseCTA };

src/components/AppAlert/AppAlert.tsx

@@ -0,0 +1,29 @@
+import { XMark } from "@/assets/icons";
+import { Alert, Flex, P } from "@/component-library";
+import { LocalStorageKey,useLocalStorage } from "@/hooks/use-local-storage";
+
+import { StyledCloseCTA } from "./AppAlert.styles";
+
+type Props = {
+  alertText: string
+}
+
+const AppAlert = ({ alertText }: Props): JSX.Element => {
+  const [isAlertOpen, setIsAlertOpen] = useLocalStorage(LocalStorageKey.APP_ALERT_BANNER, true);
+
+  return (
+    <>
+      {isAlertOpen && (
+        <Flex>
+          <Alert style={{ borderLeft: 0, borderRight: 0, borderTop: 0, borderRadius: 0, width: '100%' }} status='info'>
+            <P size='s'>{alertText}</P>
+          </Alert>
+          <StyledCloseCTA style={{ top: 0 }} size='small' variant='text' aria-label='dimiss ledger alert banner' onPress={() => setIsAlertOpen(false)}>
+            <XMark />
+          </StyledCloseCTA>
+        </Flex>
+      )}
+    </>
+  );};
+
+export { AppAlert };

src/components/AppAlert/index.tsx

@@ -0,0 +1 @@
+export { AppAlert } from './AppAlert';

src/components/Layout/Layout.tsx

@@ -1,5 +1,8 @@
+import { APP_NAME } from '@/config/relay-chains';
+
 import Sidebar from '../../legacy-components/Sidebar';
 import Topbar from '../../legacy-components/Topbar';
+import { AppAlert } from '../AppAlert';
 import { StyledWrapper } from './Layout.styles';
 
 interface Props {
@@ -8,12 +11,15 @@ interface Props {
 }
 
 const Layout = ({ className, children }: Props): JSX.Element => (
-  <Sidebar className={className}>
-    <StyledWrapper>
-      <Topbar />
-      <main>{children}</main>
-    </StyledWrapper>
-  </Sidebar>
+  <>
+    <AppAlert alertText={`Ledger is not supported on ${APP_NAME}. Please don't use Ledger to store your tokens.`} />
+    <Sidebar className={className}>
+      <StyledWrapper>
+        <Topbar />
+        <main>{children}</main>
+      </StyledWrapper>
+    </Sidebar>
+  </>
 );
 
 export { Layout };

src/hooks/use-local-storage.ts

@@ -2,12 +2,14 @@ import { useLocalStorage as useLibLocalStorage } from 'react-use';
 
 enum LocalStorageKey {
   TC_SIGNATURES = 'TC_SIGNATURES',
-  WALLET_WELCOME_BANNER = 'WALLET_WELCOME_BANNER'
+  WALLET_WELCOME_BANNER = 'WALLET_WELCOME_BANNER',
+  APP_ALERT_BANNER = 'APP_ALERT_BANNER'
 }
 
 type LocalStorageValueTypes = {
   [LocalStorageKey.TC_SIGNATURES]: { [account: string]: { version: string; isSigned: boolean } | boolean };
   [LocalStorageKey.WALLET_WELCOME_BANNER]: boolean;
+  [LocalStorageKey.APP_ALERT_BANNER]: boolean;
 };
 
 type Options<T = unknown> =

src/lib/form/schemas/bob.ts

@@ -0,0 +1,20 @@
+import i18n from 'i18next';
+
+import yup, { AddressType } from '../yup.custom';
+
+const BOB_RECIPIENT_FIELD = 'bob-destination';
+
+type BobFormData = {
+  [BOB_RECIPIENT_FIELD]?: string;
+};
+
+const bobSchema = (): yup.ObjectSchema<any> =>
+  yup.object().shape({
+    [BOB_RECIPIENT_FIELD]: yup
+      .string()
+      .required(i18n.t('forms.please_enter_your_field', { field: 'recipient' }))
+      .address(AddressType.ETHEREUM)
+  });
+
+export { BOB_RECIPIENT_FIELD, bobSchema };
+export type { BobFormData };

src/lib/form/schemas/index.ts

@@ -1,3 +1,4 @@
+export * from './bob';
 export * from './btc';
 export * from './loans';
 export * from './pools';

src/lib/form/validate.ts

@@ -1,5 +1,6 @@
 import { decodeAddress, encodeAddress } from '@polkadot/keyring';
 import { hexToU8a, isHex } from '@polkadot/util';
+import { isAddress } from 'viem';
 
 import { BTC_ADDRESS_REGEX } from '@/constants';
 
@@ -8,6 +9,8 @@ const btcAddressRegex = new RegExp(BTC_ADDRESS_REGEX);
 // TODO: use library instead
 const isValidBTCAddress = (address: string): boolean => btcAddressRegex.test(address);
 
+const isValidEthereumAddress = (address: string): boolean => isAddress(address);
+
 const isValidRelayAddress = (address: string): boolean => {
   try {
     encodeAddress(isHex(address) ? hexToU8a(address) : decodeAddress(address));
@@ -18,4 +21,4 @@ const isValidRelayAddress = (address: string): boolean => {
   }
 };
 
-export { isValidBTCAddress, isValidRelayAddress };
+export { isValidBTCAddress, isValidEthereumAddress, isValidRelayAddress };

src/lib/form/yup.custom.ts

@@ -6,7 +6,7 @@ import i18n from 'i18next';
 import * as yup from 'yup';
 import { AnyObject, Maybe } from 'yup/lib/types';
 
-import { isValidBTCAddress, isValidRelayAddress } from './validate';
+import { isValidBTCAddress, isValidEthereumAddress, isValidRelayAddress } from './validate';
 
 yup.addMethod<yup.StringSchema>(yup.string, 'requiredAmount', function (action: string, customMessage?: string) {
   return this.transform((value) => (isNaN(value) ? undefined : value)).test('requiredAmount', (value, ctx) => {
@@ -108,12 +108,14 @@ yup.addMethod<yup.StringSchema>(
 
 enum AddressType {
   RELAY_CHAIN,
-  BTC
+  BTC,
+  ETHEREUM
 }
 
 const addressValidationMap = {
   [AddressType.RELAY_CHAIN]: isValidRelayAddress,
-  [AddressType.BTC]: isValidBTCAddress
+  [AddressType.BTC]: isValidBTCAddress,
+  [AddressType.ETHEREUM]: isValidEthereumAddress
 };
 
 yup.addMethod<yup.StringSchema>(

src/pages/BOB/BOB.styles.tsx

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+import { Flex } from '@/component-library';
+
+const StyledWrapper = styled(Flex)`
+  max-width: 540px;
+  width: 100%;
+  margin: 0 auto;
+`;
+
+export { StyledWrapper };