Initial Multi-chain implementation

.github/workflows/pull-request.yml

@@ -21,7 +21,7 @@ jobs:
       - name: Install NodeJS
         uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 18.x
           cache: 'yarn'
           cache-dependency-path: '**/yarn.lock'
 

packages/near-fast-auth-signer/.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  env:      { browser: true, node: true },
+  env:      { browser: true, node: true, es2020: true },
   parser:   '@typescript-eslint/parser',
   settings: {
     'import/parsers': {

packages/near-fast-auth-signer/package.json

@@ -30,19 +30,24 @@
     "last 1 Chrome version"
   ],
   "dependencies": {
+    "@ethereumjs/common": "^4.2.0",
+    "@ethereumjs/tx": "^5.2.1",
     "@hookform/resolvers": "^3.3.2",
     "@near-js/accounts": "^0.1.4",
     "@near-js/biometric-ed25519": "^0.3.0",
     "@near-js/crypto": "^0.0.5",
     "@near-js/iframe-rpc": "^0.0.2",
     "@near-js/keystores": "^0.0.5",
     "@near-js/transactions": "^0.2.1",
+    "@near-js/utils": "^0.1.0",
     "@radix-ui/react-toast": "^1.1.4",
     "@sentry/react": "^7.75.1",
     "bitcoinjs-lib": "^6.1.5",
     "bn.js": "^5.2.1",
     "bootstrap": "^5.3.0",
     "borsh": "^0.7.0",
+    "borsher": "^1.2.1",
+    "bs58check": "^3.0.1",
     "coinselect": "^3.1.13",
     "crypto-browserify": "^3.12.0",
     "data-loader": "^3.8.4",
@@ -84,6 +89,7 @@
     "@types/bs58": "^4.0.4",
     "@types/debug": "^4.1.7",
     "@types/elliptic": "^6.4.18",
+    "@types/keccak": "^3.0.4",
     "@types/lodash.debounce": "^4.0.9",
     "@types/react": "^18.2.6",
     "@types/react-dom": "^18.2.4",

packages/near-fast-auth-signer/src/App.tsx

@@ -13,18 +13,24 @@ import Login from './components/Login/Login';
 import RemoveTrailingSlash from './components/RemoveTrailingSlash/RemoveTrailingSlash';
 import RpcRoute from './components/RpcRoute/RpcRoute';
 import Sign from './components/Sign/Sign';
+import SignMultichain from './components/SignMultichain/SignMultichain';
 import VerifyEmailPage from './components/VerifyEmail/verify-email';
 import FastAuthController from './lib/controller';
 import './styles/theme.css';
 import './styles/globals.css';
+import FirestoreController from './lib/firestoreController';
 import GlobalStyle from './styles/index';
 import { basePath, networkId } from './utils/config';
 
 (window as any).fastAuthController = new FastAuthController({
-  accountId: 'harisvalj.testnet',
+  accountId: '',
   networkId
 });
 
+if (!window.firestoreController) {
+  window.firestoreController = new FirestoreController();
+}
+
 const faLog = debug('fastAuth');
 const log = faLog.extend('App');
 const log2 = log.extend('watwat');
@@ -56,6 +62,7 @@ export default function App() {
             <Route path="create-account" element={<CreateAccount />} />
             <Route path="add-device" element={<AddDevice />} />
             <Route path="sign" element={<Sign />} />
+            <Route path="sign-multichain" element={<SignMultichain />} />
             <Route path="verify-email" element={<VerifyEmailPage />} />
             <Route path="auth-callback" element={<AuthCallbackPage />} />
             <Route path="devices" element={<Devices />} />

packages/near-fast-auth-signer/src/Images/BinanceIcon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+function BinanceIcon({ height = 18, width = 18 }) {
+  return (
+    <div style={{ height, width }}>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+        <g fill="none">
+          <circle cx="16" cy="16" r="16" fill="#F3BA2F" />
+          <path fill="#FFF" d="M12.116 14.404L16 10.52l3.886 3.886 2.26-2.26L16 6l-6.144 6.144 2.26 2.26zM6 16l2.26-2.26L10.52 16l-2.26 2.26L6 16zm6.116 1.596L16 21.48l3.886-3.886 2.26 2.259L16 26l-6.144-6.144-.003-.003 2.263-2.257zM21.48 16l2.26-2.26L26 16l-2.26 2.26L21.48 16zm-3.188-.002h.002V16L16 18.294l-2.291-2.29-.004-.004.004-.003.401-.402.195-.195L16 13.706l2.293 2.293z" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+export default BinanceIcon;

packages/near-fast-auth-signer/src/Images/BitcoinIcon.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+function BitcoinIcon({ height = 18, width = 18 }) {
+  return (
+    <div style={{ height, width }}>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+        <g fill="none" fillRule="evenodd">
+          <circle cx="16" cy="16" r="16" fill="#F7931A" />
+          <path fill="#FFF" fillRule="nonzero" d="M23.189 14.02c.314-2.096-1.283-3.223-3.465-3.975l.708-2.84-1.728-.43-.69 2.765c-.454-.114-.92-.22-1.385-.326l.695-2.783L15.596 6l-.708 2.839c-.376-.086-.746-.17-1.104-.26l.002-.009-2.384-.595-.46 1.846s1.283.294 1.256.312c.7.175.826.638.805 1.006l-.806 3.235c.048.012.11.03.18.057l-.183-.045-1.13 4.532c-.086.212-.303.531-.793.41.018.025-1.256-.313-1.256-.313l-.858 1.978 2.25.561c.418.105.828.215 1.231.318l-.715 2.872 1.727.43.708-2.84c.472.127.93.245 1.378.357l-.706 2.828 1.728.43.715-2.866c2.948.558 5.164.333 6.097-2.333.752-2.146-.037-3.385-1.588-4.192 1.13-.26 1.98-1.003 2.207-2.538zm-3.95 5.538c-.533 2.147-4.148.986-5.32.695l.95-3.805c1.172.293 4.929.872 4.37 3.11zm.535-5.569c-.487 1.953-3.495.96-4.47.717l.86-3.45c.975.243 4.118.696 3.61 2.733z" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+export default BitcoinIcon;

packages/near-fast-auth-signer/src/Images/EthereumIcon.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+function EthereumIcon({ height = 18, width = 18 }) {
+  return (
+    <div style={{ height, width }}>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+        <g fill="none" fillRule="evenodd">
+          <circle cx="16" cy="16" r="16" fill="#627EEA" />
+          <g fill="#FFF" fillRule="nonzero">
+            <path fillOpacity=".602" d="M16.498 4v8.87l7.497 3.35z" />
+            <path d="M16.498 4L9 16.22l7.498-3.35z" />
+            <path fillOpacity=".602" d="M16.498 21.968v6.027L24 17.616z" />
+            <path d="M16.498 27.995v-6.028L9 17.616z" />
+            <path fillOpacity=".2" d="M16.498 20.573l7.497-4.353-7.497-3.348z" />
+            <path fillOpacity=".602" d="M9 16.22l7.498 4.353v-7.701z" />
+          </g>
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+export default EthereumIcon;

packages/near-fast-auth-signer/src/Images/ModalIcon.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+function ModalIconSvg() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
+      <path opacity="0.2" d="M36.25 20C36.25 21.9547 33.4656 23.4297 32.7063 25.2641C31.975 27.0328 32.9281 30.0516 31.4906 31.4906C30.0531 32.9297 27.0328 31.975 25.2641 32.7063C23.4375 33.4656 21.9531 36.25 20 36.25C18.0469 36.25 16.5625 33.4656 14.7359 32.7063C12.9672 31.975 9.94687 32.9281 8.50937 31.4906C7.07187 30.0531 8.025 27.0328 7.29375 25.2641C6.53438 23.4375 3.75 21.9531 3.75 20C3.75 18.0469 6.53438 16.5625 7.29375 14.7359C8.025 12.9687 7.07187 9.94687 8.50937 8.50937C9.94687 7.07187 12.9687 8.025 14.7359 7.29375C16.5703 6.53438 18.0469 3.75 20 3.75C21.9531 3.75 23.4375 6.53438 25.2641 7.29375C27.0328 8.025 30.0531 7.07187 31.4906 8.50937C32.9281 9.94687 31.975 12.9672 32.7063 14.7359C33.4656 16.5703 36.25 18.0469 36.25 20Z" fill="#1B1B18" />
+      <path d="M35.2906 16.0656C34.7016 15.45 34.0922 14.8156 33.8625 14.2578C33.65 13.7469 33.6375 12.9 33.625 12.0797C33.6016 10.5547 33.5766 8.82656 32.375 7.625C31.1734 6.42344 29.4453 6.39844 27.9203 6.375C27.1 6.3625 26.2531 6.35 25.7422 6.1375C25.1859 5.90781 24.55 5.29844 23.9344 4.70937C22.8562 3.67344 21.6312 2.5 20 2.5C18.3688 2.5 17.1453 3.67344 16.0656 4.70937C15.45 5.29844 14.8156 5.90781 14.2578 6.1375C13.75 6.35 12.9 6.3625 12.0797 6.375C10.5547 6.39844 8.82656 6.42344 7.625 7.625C6.42344 8.82656 6.40625 10.5547 6.375 12.0797C6.3625 12.9 6.35 13.7469 6.1375 14.2578C5.90781 14.8141 5.29844 15.45 4.70937 16.0656C3.67344 17.1437 2.5 18.3688 2.5 20C2.5 21.6312 3.67344 22.8547 4.70937 23.9344C5.29844 24.55 5.90781 25.1844 6.1375 25.7422C6.35 26.2531 6.3625 27.1 6.375 27.9203C6.39844 29.4453 6.42344 31.1734 7.625 32.375C8.82656 33.5766 10.5547 33.6016 12.0797 33.625C12.9 33.6375 13.7469 33.65 14.2578 33.8625C14.8141 34.0922 15.45 34.7016 16.0656 35.2906C17.1437 36.3266 18.3688 37.5 20 37.5C21.6312 37.5 22.8547 36.3266 23.9344 35.2906C24.55 34.7016 25.1844 34.0922 25.7422 33.8625C26.2531 33.65 27.1 33.6375 27.9203 33.625C29.4453 33.6016 31.1734 33.5766 32.375 32.375C33.5766 31.1734 33.6016 29.4453 33.625 27.9203C33.6375 27.1 33.65 26.2531 33.8625 25.7422C34.0922 25.1859 34.7016 24.55 35.2906 23.9344C36.3266 22.8562 37.5 21.6312 37.5 20C37.5 18.3688 36.3266 17.1453 35.2906 16.0656ZM33.4859 22.2047C32.7375 22.9859 31.9625 23.7938 31.5516 24.7859C31.1578 25.7391 31.1406 26.8281 31.125 27.8828C31.1094 28.9766 31.0922 30.1219 30.6063 30.6063C30.1203 31.0906 28.9828 31.1094 27.8828 31.125C26.8281 31.1406 25.7391 31.1578 24.7859 31.5516C23.7938 31.9625 22.9859 32.7375 22.2047 33.4859C21.4234 34.2344 20.625 35 20 35C19.375 35 18.5703 34.2312 17.7953 33.4859C17.0203 32.7406 16.2063 31.9625 15.2141 31.5516C14.2609 31.1578 13.1719 31.1406 12.1172 31.125C11.0234 31.1094 9.87812 31.0922 9.39375 30.6063C8.90937 30.1203 8.89062 28.9828 8.875 27.8828C8.85937 26.8281 8.84219 25.7391 8.44844 24.7859C8.0375 23.7938 7.2625 22.9859 6.51406 22.2047C5.76562 21.4234 5 20.625 5 20C5 19.375 5.76875 18.5703 6.51406 17.7953C7.25937 17.0203 8.0375 16.2063 8.44844 15.2141C8.84219 14.2609 8.85937 13.1719 8.875 12.1172C8.89062 11.0234 8.90781 9.87812 9.39375 9.39375C9.87969 8.90937 11.0172 8.89062 12.1172 8.875C13.1719 8.85937 14.2609 8.84219 15.2141 8.44844C16.2063 8.0375 17.0141 7.2625 17.7953 6.51406C18.5766 5.76562 19.375 5 20 5C20.625 5 21.4297 5.76875 22.2047 6.51406C22.9797 7.25937 23.7938 8.0375 24.7859 8.44844C25.7391 8.84219 26.8281 8.85937 27.8828 8.875C28.9766 8.89062 30.1219 8.90781 30.6063 9.39375C31.0906 9.87969 31.1094 11.0172 31.125 12.1172C31.1406 13.1719 31.1578 14.2609 31.5516 15.2141C31.9625 16.2063 32.7375 17.0141 33.4859 17.7953C34.2344 18.5766 35 19.375 35 20C35 20.625 34.2312 21.4297 33.4859 22.2047ZM21.875 28.125C21.875 28.4958 21.765 28.8584 21.559 29.1667C21.353 29.475 21.0601 29.7154 20.7175 29.8573C20.3749 29.9992 19.9979 30.0363 19.6342 29.964C19.2705 29.8916 18.9364 29.713 18.6742 29.4508C18.412 29.1886 18.2334 28.8545 18.161 28.4908C18.0887 28.1271 18.1258 27.7501 18.2677 27.4075C18.4096 27.0649 18.65 26.772 18.9583 26.566C19.2666 26.36 19.6292 26.25 20 26.25C20.4973 26.25 20.9742 26.4475 21.3258 26.7992C21.6775 27.1508 21.875 27.6277 21.875 28.125ZM26.25 16.875C26.25 19.5906 24.1 21.8641 21.25 22.3875V22.5C21.25 22.8315 21.1183 23.1495 20.8839 23.3839C20.6495 23.6183 20.3315 23.75 20 23.75C19.6685 23.75 19.3505 23.6183 19.1161 23.3839C18.8817 23.1495 18.75 22.8315 18.75 22.5V21.25C18.75 20.9185 18.8817 20.6005 19.1161 20.3661C19.3505 20.1317 19.6685 20 20 20C22.0672 20 23.75 18.5938 23.75 16.875C23.75 15.1562 22.0672 13.75 20 13.75C17.9328 13.75 16.25 15.1562 16.25 16.875V17.5C16.25 17.8315 16.1183 18.1495 15.8839 18.3839C15.6495 18.6183 15.3315 18.75 15 18.75C14.6685 18.75 14.3505 18.6183 14.1161 18.3839C13.8817 18.1495 13.75 17.8315 13.75 17.5V16.875C13.75 13.7734 16.5531 11.25 20 11.25C23.4469 11.25 26.25 13.7734 26.25 16.875Z" fill="#1B1B18" />
+    </svg>
+  );
+}
+
+export default ModalIconSvg;

packages/near-fast-auth-signer/src/Images/cross.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+function CrossSvg() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+      <path d="M13.0306 11.9694C13.1715 12.1103 13.2507 12.3014 13.2507 12.5006C13.2507 12.6999 13.1715 12.891 13.0306 13.0319C12.8897 13.1728 12.6986 13.2519 12.4994 13.2519C12.3001 13.2519 12.109 13.1728 11.9681 13.0319L8 9.06249L4.03063 13.0306C3.88973 13.1715 3.69864 13.2507 3.49938 13.2507C3.30012 13.2507 3.10902 13.1715 2.96813 13.0306C2.82723 12.8897 2.74808 12.6986 2.74808 12.4994C2.74808 12.3001 2.82723 12.109 2.96813 11.9681L6.9375 7.99999L2.96938 4.03061C2.82848 3.88972 2.74933 3.69862 2.74933 3.49936C2.74933 3.30011 2.82848 3.10901 2.96938 2.96811C3.11027 2.82722 3.30137 2.74806 3.50063 2.74806C3.69989 2.74806 3.89098 2.82722 4.03188 2.96811L8 6.93749L11.9694 2.96749C12.1103 2.82659 12.3014 2.74744 12.5006 2.74744C12.6999 2.74744 12.891 2.82659 13.0319 2.96749C13.1728 3.10838 13.2519 3.29948 13.2519 3.49874C13.2519 3.69799 13.1728 3.88909 13.0319 4.02999L9.0625 7.99999L13.0306 11.9694Z" fill="#706F6C" />
+    </svg>
+
+  );
+}
+
+export default CrossSvg;

packages/near-fast-auth-signer/src/components/AddDevice/AddDevice.tsx

@@ -26,6 +26,7 @@ import { basePath } from '../../utils/config';
 import { checkFirestoreReady, firebaseAuth } from '../../utils/firebase';
 import { FormContainer, StyledContainer } from '../Layout';
 import { Separator, SeparatorWrapper } from '../Login/Login.style';
+import { getMultiChainContract } from '../SignMultichain/utils';
 
 export const handleCreateAccount = async ({
   accountId, email, isRecovery, success_url, failure_url, public_key, contract_id, methodNames
@@ -94,6 +95,15 @@ function AddDevicePage() {
   if (!window.firestoreController) {
     window.firestoreController = new FirestoreController();
   }
+  const contractId = searchParams.get('contract_id');
+  useEffect(() => {
+    if (contractId && getMultiChainContract() === contractId) {
+      window.parent.postMessage({
+        type:    'addDeviceError',
+        message: 'Invalid contract_id'
+      }, '*');
+    }
+  }, [contractId]);
 
   const addDevice = useCallback(async (data: any) => {
     setInFlight(true);
@@ -106,8 +116,8 @@ function AddDevicePage() {
     const success_url = searchParams.get('success_url');
     const failure_url = searchParams.get('failure_url');
     const public_key =  searchParams.get('public_key');
-    const contract_id = searchParams.get('contract_id');
     const methodNames = searchParams.get('methodNames');
+    const contract_id = searchParams.get('contract_id');
 
     try {
       await handleCreateAccount({
@@ -129,12 +139,12 @@ function AddDevicePage() {
         ...(contract_id ? { contract_id } : {}),
         ...(methodNames ? { methodNames } : {})
       });
-      navigate(`/verify-email?${newSearchParams.toString()}}`);
+      navigate(`/verify-email?${newSearchParams.toString()}`);
     } catch (error: any) {
       console.log(error);
       const errorMessage = typeof error?.message === 'string' ? error.message : 'Something went wrong';
       window.parent.postMessage({
-        type:    'AddDeviceError',
+        type:    'addDeviceError',
         message: errorMessage
       }, '*');
 
@@ -151,8 +161,8 @@ function AddDevicePage() {
     setInFlight(true);
     const success_url = isUrlNotJavascriptProtocol(searchParams.get('success_url')) && decodeIfTruthy(searchParams.get('success_url'));
     const public_key =  decodeIfTruthy(searchParams.get('public_key'));
-    const contract_id = decodeIfTruthy(searchParams.get('contract_id'));
     const methodNames = decodeIfTruthy(searchParams.get('methodNames'));
+    const contract_id = decodeIfTruthy(searchParams.get('contract_id'));
 
     const isPasskeySupported = await isPassKeyAvailable();
     if (!public_key || !contract_id) {

packages/near-fast-auth-signer/src/components/AuthCallback/AuthCallback.tsx

@@ -100,6 +100,7 @@ export const onSignIn = async ({
   navigate,
   gateway,
 }) => {
+  // Stop from LAK with multi-chain contract
   const recoveryPK = await window.fastAuthController.getUserCredential(accessToken);
   const accountIds = await fetchAccountIds(recoveryPK, { returnEmpty: true });
 

packages/near-fast-auth-signer/src/components/CreateAccount/CreateAccount.tsx

@@ -21,6 +21,7 @@ import {
 } from '../../utils/form-validation';
 import { handleCreateAccount } from '../AddDevice/AddDevice';
 import { FormContainer, StyledContainer } from '../Layout';
+import { getMultiChainContract } from '../SignMultichain/utils';
 
 const CreateAccountForm = styled(FormContainer)`
   height: 500px;
@@ -119,6 +120,16 @@ function CreateAccount() {
   const [searchParams] = useSearchParams();
   const [inFlight, setInFlight] = useState(false);
 
+  const contractId = searchParams.get('contract_id');
+  useEffect(() => {
+    if (contractId && getMultiChainContract() === contractId) {
+      window.parent.postMessage({
+        type:    'CreateAccountError',
+        message: 'Invalid contract_id'
+      }, '*');
+    }
+  }, [contractId]);
+
   const {
     register,
     handleSubmit,
@@ -146,8 +157,8 @@ function CreateAccount() {
     const success_url = searchParams.get('success_url');
     const failure_url = searchParams.get('failure_url');
     const public_key =  searchParams.get('public_key');
-    const contract_id = searchParams.get('contract_id');
     const methodNames = searchParams.get('methodNames');
+    const contract_id = searchParams.get('contract_id');
 
     try {
       const fullAccountId = `${data.username}.${network.fastAuth.accountIdSuffix}`;

packages/near-fast-auth-signer/src/components/Login/Login.tsx

@@ -54,7 +54,7 @@ function Login() {
     data: { email: string }
   ) => {
     const newParams = new URLSearchParams(currentSearchParams);
-    newParams.set('email', data.email);
+    newParams.set('email', encodeURIComponent(data.email));
     navigate({
       pathname: '/add-device',
       search:   newParams.toString(),

packages/near-fast-auth-signer/src/components/Sign/Sign.styles.ts

@@ -7,6 +7,7 @@ export const ModalSignWrapper = styled.div`
   padding: 24px;
   display: flex;
   flex-direction: column;
+  position: relative;
   row-gap: 8px;
     .info-text {
     font-size: 12px;
@@ -17,12 +18,14 @@ export const ModalSignWrapper = styled.div`
         color: #A81500;
       }
     }
+
   .modal-top {
     display: flex;
     flex-direction: column;
     gap: 12px;
     align-items: center;
     line-height: 17px;
+    text-align: center;
     svg {
       height: 48px;
       width:48px;
@@ -56,6 +59,10 @@ export const ModalSignWrapper = styled.div`
     border: 1px solid #eeeeec;
     border-radius: 4px;
 
+    &.margin-top {
+      margin-top: 20px;
+    }
+
     h4 {
       font-size: 12px;
       font-weight: 600;