Not multichain

package.json

@@ -29,6 +29,7 @@
     "@apollo/client": "^3.7.2",
     "@babel/core": "7.19.3",
     "@babel/runtime": "^7.19.0",
+    "@bitcoinerlab/secp256k1": "^1.0.5",
     "@dicebear/avatars": "4.2.5",
     "@dicebear/avatars-bottts-sprites": "4.2.5",
     "@dicebear/avatars-jdenticon-sprites": "4.2.5",
@@ -66,6 +67,7 @@
     "@types/debounce": "^1.2.1",
     "@types/debounce-promise": "3.1.4",
     "@types/elliptic": "6.4.14",
+    "@types/events": "^3.0.3",
     "@types/fontfaceobserver": "0.0.6",
     "@types/jest": "27.0.3",
     "@types/ledgerhq__hw-transport": "4.21.3",
@@ -86,6 +88,7 @@
     "@types/resolve": "^1.20.2",
     "@types/scryptsy": "^2.0.0",
     "@types/typedarray-to-buffer": "^4.0.0",
+    "@types/uuid": "^9.0.7",
     "@types/w3c-web-hid": "^1.0.3",
     "@types/webextension-polyfill": "^0.9.1",
     "@types/webpack": "^5.28.0",
@@ -99,7 +102,9 @@
     "axios": "0.26.1",
     "babel-loader": "8.2.5",
     "bignumber.js": "9.1.0",
+    "bip32": "^4.0.0",
     "bip39": "3.0.4",
+    "bitcoinjs-lib": "^6.1.5",
     "bs58check": "2.1.2",
     "buffer": "5.6.0",
     "clean-webpack-plugin": "4.0.0",
@@ -125,6 +130,8 @@
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "^4",
     "eslint-webpack-plugin": "^3.2.0",
+    "ethers": "^6.8.1",
+    "events": "^3.3.0",
     "fast-glob": "^3.2.12",
     "file-loader": "6.2.0",
     "firebase": "^10.0.0",
@@ -191,6 +198,7 @@
     "use-force-update": "1.0.7",
     "use-onclickoutside": "0.4.1",
     "util": "0.11.1",
+    "uuid": "^9.0.1",
     "wasm-themis": "0.14.6",
     "webextension-polyfill": "^0.10.0",
     "webpack": "^5.74.0",

src/app/ConfirmPage.tsx

@@ -1,5 +1,7 @@
 import React, { FC, Fragment, memo, Suspense, useCallback, useMemo, useState } from 'react';
 
+import { isDefined } from '@rnw-community/shared';
+
 import { Alert, FormSubmitButton, FormSecondaryButton } from 'app/atoms';
 import AccountTypeBadge from 'app/atoms/AccountTypeBadge';
 import ConfirmLedgerOverlay from 'app/atoms/ConfirmLedgerOverlay';
@@ -73,9 +75,41 @@ const PayloadContent: React.FC<PayloadContentProps> = ({
 }) => {
   const allAccounts = useRelevantAccounts(false);
   const AccountOptionContent = useMemo(() => AccountOptionContentHOC(payload.networkRpc), [payload.networkRpc]);
+  const EvmAccountOptionContent = useMemo(() => EvmAccountOptionContentHOC(), []);
   const chainId = useCustomChainId(payload.networkRpc, true)!;
   const mainnet = chainId === TempleChainId.Mainnet;
 
+  if (payload.type === 'switch_evm_network') {
+    return null;
+  }
+
+  if (payload.type === 'connect_evm') {
+    return (
+      <div className="w-full flex flex-col">
+        <h2 className="mb-2 leading-tight flex flex-col">
+          <span className="text-base font-semibold text-gray-700">
+            <T id="account" />
+          </span>
+
+          <span className="mt-px text-xs font-light text-gray-600 max-w-9/10">
+            <T id="toBeConnectedWithDApp" />
+          </span>
+        </h2>
+
+        <CustomSelect<TempleAccount, string>
+          activeItemId={accountPkhToConnect}
+          getItemId={getEvmPkh}
+          items={allAccounts.filter(acc => acc.type === TempleAccountType.HD && isDefined(acc.evmPublicKeyHash))}
+          maxHeight="8rem"
+          onSelect={setAccountPkhToConnect}
+          OptionIcon={AccountIcon}
+          OptionContent={EvmAccountOptionContent}
+          autoFocus
+        />
+      </div>
+    );
+  }
+
   return payload.type === 'connect' ? (
     <div className="w-full flex flex-col">
       <h2 className="mb-2 leading-tight flex flex-col">
@@ -113,14 +147,13 @@ const PayloadContent: React.FC<PayloadContentProps> = ({
 export default ConfirmPage;
 
 const getPkh = (account: TempleAccount) => account.publicKeyHash;
+const getEvmPkh = (account: TempleAccount) => account.evmPublicKeyHash ?? '';
 
 const ConfirmDAppForm: FC = () => {
   const { getDAppPayload, confirmDAppPermission, confirmDAppOperation, confirmDAppSign } = useTempleClient();
   const allAccounts = useRelevantAccounts(false);
   const account = useAccount();
 
-  const [accountPkhToConnect, setAccountPkhToConnect] = useState(account.publicKeyHash);
-
   const loc = useLocation();
   const id = useMemo(() => {
     const usp = new URLSearchParams(loc.search);
@@ -140,9 +173,23 @@ const ConfirmDAppForm: FC = () => {
   const payload = data!;
   const payloadError = data!.error;
 
+  const [accountPkhToConnect, setAccountPkhToConnect] = useState(
+    payload.type === 'connect_evm' ? account.evmPublicKeyHash! : account.publicKeyHash
+  );
+
   const connectedAccount = useMemo(
     () =>
-      allAccounts.find(a => a.publicKeyHash === (payload.type === 'connect' ? accountPkhToConnect : payload.sourcePkh)),
+      allAccounts.find(a => {
+        if (payload.type === 'connect') {
+          return a.publicKeyHash === accountPkhToConnect;
+        }
+
+        if (payload.type === 'connect_evm' || payload.type === 'switch_evm_network') {
+          return a.evmPublicKeyHash === accountPkhToConnect;
+        }
+
+        return a.publicKeyHash === payload.sourcePkh;
+      }),
     [payload, allAccounts, accountPkhToConnect]
   );
 
@@ -152,10 +199,16 @@ const ConfirmDAppForm: FC = () => {
         case 'connect':
           return confirmDAppPermission(id, confimed, accountPkhToConnect);
 
+        case 'connect_evm':
+        case 'switch_evm_network':
+          return confirmDAppPermission(id, confimed, accountPkhToConnect, true);
+
+        case 'confirm_evm_operations':
         case 'confirm_operations':
           return confirmDAppOperation(id, confimed, modifiedTotalFee, modifiedStorageLimit);
 
         case 'sign':
+        case 'sign_evm':
           return confirmDAppSign(id, confimed);
       }
     },
@@ -224,6 +277,7 @@ const ConfirmDAppForm: FC = () => {
   const content = useMemo(() => {
     switch (payload.type) {
       case 'connect':
+      case 'connect_evm':
         return {
           title: t('confirmAction', t('connection').toLowerCase()),
           declineActionTitle: t('cancel'),
@@ -248,6 +302,7 @@ const ConfirmDAppForm: FC = () => {
         };
 
       case 'confirm_operations':
+      case 'confirm_evm_operations':
         return {
           title: t('confirmAction', t('operations').toLowerCase()),
           declineActionTitle: t('reject'),
@@ -276,7 +331,25 @@ const ConfirmDAppForm: FC = () => {
           )
         };
 
+      case 'switch_evm_network':
+        return {
+          title: 'Confirm network switch',
+          declineActionTitle: t('reject'),
+          confirmActionTitle: 'Switch',
+          want: (
+            <div className="mb-2 text-sm text-center text-gray-700 flex flex-col items-center">
+              <div className="flex items-center justify-center">
+                <DAppLogo icon={payload.appMeta.icon} origin={payload.origin} size={16} className="mr-1" />
+                <Name className="font-semibold" style={{ maxWidth: '10rem' }}>
+                  {payload.appMeta.name}
+                </Name>
+              </div>
+            </div>
+          )
+        };
+
       case 'sign':
+      case 'sign_evm':
         return {
           title: t('confirmAction', t('signAction').toLowerCase()),
           declineActionTitle: t('reject'),
@@ -364,7 +437,7 @@ const ConfirmDAppForm: FC = () => {
             />
           ) : (
             <>
-              {payload.type !== 'connect' && connectedAccount && (
+              {payload.type !== 'connect' && payload.type !== 'connect_evm' && connectedAccount && (
                 <AccountBanner
                   account={connectedAccount}
                   networkRpc={payload.networkRpc}
@@ -456,3 +529,21 @@ const AccountOptionContentHOC = (networkRpc: string) =>
       </>
     );
   });
+
+const EvmAccountOptionContentHOC = () =>
+  memo<OptionRenderProps<TempleAccount>>(({ item: acc }) => {
+    return (
+      <>
+        <div className="flex flex-wrap items-center">
+          <Name className="text-sm font-medium leading-tight">{acc.name}</Name>
+          <AccountTypeBadge account={acc} />
+        </div>
+
+        <div className="flex flex-wrap items-center mt-1">
+          <div className="text-xs leading-none text-gray-700">
+            <HashShortView hash={acc.evmPublicKeyHash!} />
+          </div>
+        </div>
+      </>
+    );
+  });

src/app/PageRouter.tsx

@@ -30,6 +30,7 @@ import { Notifications, NotificationsItem } from 'lib/notifications';
 import { useTempleClient } from 'lib/temple/front';
 import * as Woozie from 'lib/woozie';
 
+import { TokenPage } from './pages/TokenPage/TokenPage';
 import { WithDataLoading } from './WithDataLoading';
 
 interface RouteContext {
@@ -75,6 +76,7 @@ const ROUTE_MAP = Woozie.createMap<RouteContext>([
   ['/loading', (_p, ctx) => (ctx.ready ? <Woozie.Redirect to={'/'} /> : <RootSuspenseFallback />)],
   ['/', (_p, ctx) => (ctx.ready ? <Home /> : <Welcome />)],
   ['/explore/:assetSlug?', onlyReady(({ assetSlug }) => <Home assetSlug={assetSlug} />)],
+  ['/nonTezosTokenPage/:tokenAddress?', onlyReady(({ tokenAddress }) => <TokenPage tokenAddress={tokenAddress} />)],
   ['/create-wallet', onlyNotReady(() => <CreateWallet />)],
   ['/create-account', onlyReady(() => <CreateAccount />)],
   ['/import-account/:tabSlug?', onlyReady(({ tabSlug }) => <ImportAccount tabSlug={tabSlug} />)],

src/app/layouts/PageLayout/ConfirmationOverlay.tsx

@@ -8,8 +8,12 @@ import InternalConfirmation from 'app/templates/InternalConfirmation';
 import { useTempleClient } from 'lib/temple/front';
 import Portal from 'lib/ui/Portal';
 
+import { InternalBtcConfirmation } from '../../templates/InternalBtcConfirmation';
+import { InternalEvmConfirmation } from '../../templates/InternalEvmConfirmation';
+
 const ConfirmationOverlay: FC = () => {
-  const { confirmation, resetConfirmation, confirmInternal } = useTempleClient();
+  const { confirmation, resetConfirmation, confirmInternal, confirmBtcInternal, confirmEvmInternal } =
+    useTempleClient();
   const displayed = Boolean(confirmation);
 
   useLayoutEffect(() => {
@@ -36,6 +40,26 @@ const ConfirmationOverlay: FC = () => {
     [confirmation, confirmInternal, resetConfirmation]
   );
 
+  const handleBtcConfirm = useCallback(
+    async (confirmed: boolean) => {
+      if (confirmation) {
+        await confirmBtcInternal(confirmation.id, confirmed);
+      }
+      resetConfirmation();
+    },
+    [confirmation, confirmBtcInternal, resetConfirmation]
+  );
+
+  const handleEvmConfirm = useCallback(
+    async (confirmed: boolean) => {
+      if (confirmation) {
+        await confirmEvmInternal(confirmation.id, confirmed);
+      }
+      resetConfirmation();
+    },
+    [confirmation, confirmEvmInternal, resetConfirmation]
+  );
+
   return (
     <>
       {displayed && <DocBg bgClassName="bg-primary-white" />}
@@ -52,13 +76,29 @@ const ConfirmationOverlay: FC = () => {
           unmountOnExit
         >
           <div className="fixed inset-0 z-50 overflow-y-auto bg-primary-white">
-            {confirmation && (
-              <InternalConfirmation
+            {confirmation && confirmation.payload.type === 'btc_operations' && (
+              <InternalBtcConfirmation
+                payload={confirmation.payload}
+                error={confirmation.error}
+                onConfirm={handleBtcConfirm}
+              />
+            )}
+            {confirmation && confirmation.payload.type === 'evm_operations' && (
+              <InternalEvmConfirmation
                 payload={confirmation.payload}
                 error={confirmation.error}
-                onConfirm={handleConfirm}
+                onConfirm={handleEvmConfirm}
               />
             )}
+            {confirmation &&
+              confirmation.payload.type !== 'btc_operations' &&
+              confirmation.payload.type !== 'evm_operations' && (
+                <InternalConfirmation
+                  payload={confirmation.payload}
+                  error={confirmation.error}
+                  onConfirm={handleConfirm}
+                />
+              )}
           </div>
         </CSSTransition>
       </Portal>