Merge pull request #155 from near/upgrade/improve-iframe-ui

Upgrade/improve signer for iframe triggered by fast-auth-wallet

packages/near-fast-auth-signer/.gitignore

@@ -25,3 +25,6 @@ yarn-error.log*
 
 # Sentry Config File
 .env.sentry-build-plugin
+
+# intelij IDEs
+.idea/

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

@@ -1,7 +1,7 @@
 import debug from 'debug';
 import React from 'react';
 import {
-  Navigate, Route, BrowserRouter as Router, Routes, useLocation
+  Route, BrowserRouter as Router, Routes,
 } from 'react-router-dom';
 
 import AddDevice from './components/AddDevice/AddDevice';
@@ -10,6 +10,7 @@ import AuthIndicator from './components/AuthIndicator/AuthIndicator';
 import CreateAccount from './components/CreateAccount/CreateAccount';
 import Devices from './components/Devices/Devices';
 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 VerifyEmailPage from './components/VerifyEmail/verify-email';
@@ -36,24 +37,6 @@ console.log('faLog', faLog.enabled);
 // @ts-ignore
 console.log('log', log.enabled);
 
-function RemoveTrailingSlash({ ...rest }) {
-  const location = useLocation();
-
-  // If the last character of the url is '/'
-  if (location.pathname.match('/.*/$')) {
-    return (
-      <Navigate
-        replace
-        {...rest}
-        to={{
-          pathname: location.pathname.replace(/\/+$/, ''),
-          search:   location.search
-        }}
-      />
-    );
-  } return null;
-}
-
 export default function App() {
   faLog('init');
   log('faLog');

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

@@ -0,0 +1,17 @@
+import React from 'react';
+
+function WalletSvg() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g id="Wallet">
+        <path
+          id="Vector"
+          d="M15.3125 10.9375C15.3125 11.1847 15.2392 11.4264 15.1018 11.632C14.9645 11.8375 14.7693 11.9977 14.5409 12.0924C14.3124 12.187 14.0611 12.2117 13.8186 12.1635C13.5762 12.1153 13.3534 11.9962 13.1786 11.8214C13.0038 11.6466 12.8847 11.4238 12.8365 11.1814C12.7883 10.9389 12.813 10.6876 12.9076 10.4591C13.0023 10.2307 13.1625 10.0355 13.368 9.89816C13.5736 9.76081 13.8153 9.6875 14.0625 9.6875C14.394 9.6875 14.712 9.8192 14.9464 10.0536C15.1808 10.288 15.3125 10.606 15.3125 10.9375ZM18.4375 8.4375V14.6875C18.4375 15.3505 18.1741 15.9864 17.7053 16.4553C17.2364 16.9241 16.6005 17.1875 15.9375 17.1875H4.6875C4.02445 17.1875 3.38857 16.9241 2.91973 16.4553C2.45089 15.9864 2.1875 15.3505 2.1875 14.6875V5.38438C2.17788 5.05007 2.23544 4.71724 2.35676 4.40558C2.47809 4.09392 2.66071 3.80977 2.89382 3.56996C3.12694 3.33015 3.40579 3.13954 3.71389 3.00944C4.02199 2.87933 4.35305 2.81236 4.6875 2.8125H15C15.2486 2.8125 15.4871 2.91127 15.6629 3.08709C15.8387 3.2629 15.9375 3.50136 15.9375 3.75C15.9375 3.99864 15.8387 4.2371 15.6629 4.41291C15.4871 4.58873 15.2486 4.6875 15 4.6875H4.6875C4.60368 4.68746 4.52072 4.70427 4.44353 4.73694C4.36635 4.76961 4.29652 4.81748 4.23821 4.87768C4.1799 4.93789 4.1343 5.0092 4.10411 5.08739C4.07392 5.16558 4.05977 5.24904 4.0625 5.33281V5.33906C4.07562 5.50455 4.15157 5.65874 4.27475 5.77001C4.39794 5.88129 4.55903 5.94121 4.725 5.9375H15.9375C16.6005 5.9375 17.2364 6.20089 17.7053 6.66973C18.1741 7.13857 18.4375 7.77446 18.4375 8.4375ZM16.5625 8.4375C16.5625 8.27174 16.4966 8.11277 16.3794 7.99556C16.2622 7.87835 16.1033 7.8125 15.9375 7.8125H4.725C4.50148 7.81259 4.27886 7.78424 4.0625 7.72813V14.6875C4.0625 14.8533 4.12834 15.0122 4.24555 15.1294C4.36276 15.2467 4.52174 15.3125 4.6875 15.3125H15.9375C16.1033 15.3125 16.2622 15.2467 16.3794 15.1294C16.4966 15.0122 16.5625 14.8533 16.5625 14.6875V8.4375Z"
+          fill="#706F6C"
+        />
+      </g>
+    </svg>
+  );
+}
+
+export default WalletSvg;

packages/near-fast-auth-signer/src/api/index.ts

@@ -52,35 +52,35 @@ type LimitedAccessKey = {
 
 type NewAccountResponse =
   | {
-      type: 'ok',
-      create_account_options: {
-        full_access_keys: string[] | null,
-        limited_access_keys: LimitedAccessKey[] | null,
-        contract_bytes: string[] | null
-      },
-      user_recovery_public_key: string,
-      near_account_id: string
-    }
+  type: 'ok',
+  create_account_options: {
+    full_access_keys: string[] | null,
+    limited_access_keys: LimitedAccessKey[] | null,
+    contract_bytes: string[] | null
+  },
+  user_recovery_public_key: string,
+  near_account_id: string
+}
   | {
-      type: 'err',
-      msg: string
-    };
+  type: 'err',
+  msg: string
+};
 
 /**
-     * This function creates a new account on the NEAR blockchain by sending a request to the /new_account endpoint of the MPC recovery service.
-     *
-     * @param accountId - The ID of the new account to be created on the NEAR blockchain.
-     * @param fullAccessKeys - An array of full access keys to be added to the account.
-     * @param limitedAccessKeys - An array of objects, each representing a limited access key to be associated with the account. Each object has the following properties:
-     * - public_key: The public key of the limited access key.
-     * - receiver_id: The contract_ID that the limited access key is authorized to call.
-     * - allowance: The maximum amount of NEAR tokens that the limited access key is allowed to spend on gas fees.
-     * - method_names: A string of comma-separated method names that the limited access key is allowed to call.
-     * @param accessToken - The OIDC access token.
-     * @param oidcKeypair - The public and private key pair of the FRP.
-     * @returns A promise that resolves to an object of type NewAccountResponse. This object contains the result of the account creation process. It can either be of type 'ok' with the account details or of type 'err' with an error message.
-     * @throws An error if the fetch request fails.
-     */
+ * This function creates a new account on the NEAR blockchain by sending a request to the /new_account endpoint of the MPC recovery service.
+ *
+ * @param accountId - The ID of the new account to be created on the NEAR blockchain.
+ * @param fullAccessKeys - An array of full access keys to be added to the account.
+ * @param limitedAccessKeys - An array of objects, each representing a limited access key to be associated with the account. Each object has the following properties:
+ * - public_key: The public key of the limited access key.
+ * - receiver_id: The contract_ID that the limited access key is authorized to call.
+ * - allowance: The maximum amount of NEAR tokens that the limited access key is allowed to spend on gas fees.
+ * - method_names: A string of comma-separated method names that the limited access key is allowed to call.
+ * @param accessToken - The OIDC access token.
+ * @param oidcKeypair - The public and private key pair of the FRP.
+ * @returns A promise that resolves to an object of type NewAccountResponse. This object contains the result of the account creation process. It can either be of type 'ok' with the account details or of type 'err' with an error message.
+ * @throws An error if the fetch request fails.
+ */
 export const createNEARAccount = async ({
   accountId,
   fullAccessKeys = [],