From ec017b50ee69432dcc76a59da39b457b91062078 Mon Sep 17 00:00:00 2001
From: Daria Mikhailova <daria@parity.io>
Date: Tue, 27 Feb 2024 18:28:40 +1300
Subject: [PATCH] added configuration for more browser extensions, adjusted
 error display when no accounts are found

---
 .example.env                                  |  2 +-
 .../components/auth/PolkadotProvider.tsx      | 81 +++++++++++--------
 src/client/components/auth/config.ts          | 34 ++++----
 src/client/components/auth/helper.tsx         | 25 +++---
 4 files changed, 81 insertions(+), 61 deletions(-)

diff --git a/.example.env b/.example.env
index 2848e12f..bfb0f6d6 100644
--- a/.example.env
+++ b/.example.env
@@ -13,7 +13,7 @@ OAUTH2_GOOGLE_CLIENT_ID=""
 OAUTH2_GOOGLE_CLIENT_SECRET=""
 
 # Polkadot
-AUTH_MESSAGE_TO_SIGN="Oy7I/eVbK/5mCU5mEBowcgW0YijIk3mszeQETZ+ITGgt+UvDNINTYE1NnhaQSVvZJlwAUit2U2WD9kWJJKTW3b1rdIkKM3BZTt6NZezTo3da4X3q64PNqxw7MwxDGScjSH3uzg=="
+AUTH_MESSAGE_TO_SIGN="027bbda234f3e86273683eab96a4a2a1d3a0"
 
 
 # INTEGRATIONS
diff --git a/src/client/components/auth/PolkadotProvider.tsx b/src/client/components/auth/PolkadotProvider.tsx
index 7ec81376..ef5364f5 100644
--- a/src/client/components/auth/PolkadotProvider.tsx
+++ b/src/client/components/auth/PolkadotProvider.tsx
@@ -41,14 +41,9 @@ type ModalProps = {
 export const ConfirmationModal: React.FC<ModalProps> = ({
   onConfirm,
   onCancel,
-  className,
 }) => {
   return (
-    <Modal
-      onClose={onCancel}
-      title="Important information"
-      className={className}
-    >
+    <Modal onClose={onCancel} title="Important information">
       <div className="flex flex-col gap-4">
         <div>
           <P className="font-bold mb-0">Please be patient</P>
@@ -58,7 +53,7 @@ export const ConfirmationModal: React.FC<ModalProps> = ({
           </p>
         </div>
 
-        <div>
+        <div className="block sm:hidden">
           <P className="font-bold mb-0">No redirect back from wallet</P>
           <p className="text-text-secondary">
             After your sign the request in you wallet, you will need to manually
@@ -183,8 +178,9 @@ export const PolkadotProvider: React.FC = () => {
         setChosenWallet(walletInfo)
         let accounts = await walletInfo.getAccounts()
         if (!accounts.length) {
-          setStep(AuthSteps.Error)
+          setLoading(false)
           setError(ErrorComponent[Errors.NoAccountsError](walletInfo.metadata))
+          setStep(AuthSteps.Error)
           return
         }
         accounts = accounts.map((account) => ({
@@ -387,30 +383,51 @@ export const PolkadotProvider: React.FC = () => {
 
       case AuthSteps.ChooseWallet:
         return (
-          <StepWrapper title="Choose Wallet">
-            {!error && (
-              <div className="flex flex-col gap-4">
-                {wallets.map((ext) => {
-                  return (
-                    <WalletTab
-                      key={ext.metadata.id}
-                      wallet={ext}
-                      name={
-                        isWalletConnect(ext)
-                          ? 'Wallet Connect'
-                          : ext.metadata.title
-                      }
-                      id={ext.metadata.id}
-                      onClickConnect={() => {
-                        setShowModal(true)
-                        setModalShown(true)
-                        onConnected[ext.type](ext)
-                      }}
-                    />
-                  )
-                })}
+          <StepWrapper
+            title="Choose Wallet"
+            subtitle={
+              <div className="hidden sm:block mb-4">
+                {wallets.length === 1 && isWalletConnect(wallets[0]) && (
+                  <div>
+                    <div className="mb-2">Supported browser extensions</div>
+                    <div className="flex gap-2 justify-center">
+                      {extensionConfig.supported.map((extension) => (
+                        <a key={extension.id} href={extension.urls.main}>
+                          <img
+                            height="24"
+                            width="24"
+                            src={extension.image}
+                            className="hover:scale-110"
+                          ></img>
+                        </a>
+                      ))}
+                    </div>
+                  </div>
+                )}
               </div>
-            )}
+            }
+          >
+            <div className="flex flex-col gap-4">
+              {wallets.map((ext) => {
+                return (
+                  <WalletTab
+                    key={ext.metadata.id}
+                    wallet={ext}
+                    name={
+                      isWalletConnect(ext)
+                        ? 'Wallet Connect'
+                        : ext.metadata.title
+                    }
+                    id={ext.metadata.id}
+                    onClickConnect={() => {
+                      setShowModal(true)
+                      setModalShown(true)
+                      onConnected[ext.type](ext)
+                    }}
+                  />
+                )
+              })}
+            </div>
           </StepWrapper>
         )
 
@@ -562,7 +579,7 @@ export const PolkadotProvider: React.FC = () => {
           <StepWrapper title="Error">
             {error}
             <FButton
-              className="mt-4"
+              className="mt-10"
               onClick={() => setStep(AuthSteps.ReConnecting)}
             >
               Try again
diff --git a/src/client/components/auth/config.ts b/src/client/components/auth/config.ts
index c93e409c..77cae217 100644
--- a/src/client/components/auth/config.ts
+++ b/src/client/components/auth/config.ts
@@ -4,30 +4,34 @@ export const extensionConfig = {
     {
       id: 'polkadot-js',
       title: 'polkadotJS',
-      description: 'Basic account injection and signer',
+      image: '/polkadot-js-icon.svg',
       urls: {
         main: 'https://polkadot.js.org/extension/',
-        browsers: {
-          chrome:
-            'https://chrome.google.com/webstore/detail/polkadot%7Bjs%7D-extension/mopnmbcafieddcagagdcbnhejhlodfdd',
-          firefox:
-            'https://addons.mozilla.org/en-US/firefox/addon/polkadot-js-extension/',
-        },
       },
     },
     {
       id: 'talisman',
       title: 'talisman',
-      description:
-        'Talisman is a Polkadot wallet that unlocks a new world of multichain web3 applications in the Paraverse',
+      image: '/talisman-icon.svg',
       urls: {
         main: 'https://www.talisman.xyz/wallet',
-        browsers: {
-          chrome:
-            'https://chrome.google.com/webstore/detail/talisman-wallet/fijngjgcjhjmmpcmkeiomlglpeiijkld',
-          firefox:
-            'https://addons.mozilla.org/en-US/firefox/addon/talisman-wallet-extension/',
-        },
+      },
+    },
+    {
+      id: 'subwallet',
+      title: 'Subwallet',
+      image: '/subwallet-js-icon.svg',
+      urls: {
+        main: 'https://www.subwallet.app/',
+      },
+    },
+    {
+      id: 'enkrypt',
+      title: 'Enkrypt',
+      image: '/enkrypt-icon.svg',
+      urls: {
+        main: 'https://www.enkrypt.com/',
+        reference: 'https://blog.enkrypt.com/use-enkrypt-with-polkadot/',
       },
     },
   ],
diff --git a/src/client/components/auth/helper.tsx b/src/client/components/auth/helper.tsx
index 79b712b9..98833718 100644
--- a/src/client/components/auth/helper.tsx
+++ b/src/client/components/auth/helper.tsx
@@ -23,20 +23,22 @@ export const ErrorComponent = {
   [Errors.NoAccountsError]: (metadata: {
     id: string
     title: string
-    urls: { main: string }
+    urls: { main: string; reference: string }
   }) => (
     <div className="flex flex-col justify-start">
       <P className="text-accents-red text-left">No accounts found.</P>
       <P className="mt-0 text-accents-red">
         {`Please add at least one account to ${metadata.title}.`}
       </P>
-      <Link
-        target="_blank"
-        className="text-text-secondary text-left"
-        href={metadata.urls.main}
-      >
-        Check Reference here
-      </Link>
+      {!!metadata.urls && !!metadata.urls.main && (
+        <Link
+          target="_blank"
+          className="text-text-secondary text-left"
+          href={metadata?.urls?.reference ?? metadata.urls.main}
+        >
+          Check Reference here
+        </Link>
+      )}
     </div>
   ),
 }
@@ -142,12 +144,9 @@ export const StepWrapper: React.FC<{
         <H1 className={cn(subtitle ? 'mb-2' : 'mb-8', 'mt-0')}>{title}</H1>
       )}
       {subtitle && (
-        <P
-          textType="additional"
-          className="text-text-tertiary text-center max-w-[400px] mt-0 mx-auto"
-        >
+        <div className="text-text-tertiary text-center max-w-[400px] mt-0 mx-auto">
           {subtitle}
-        </P>
+        </div>
       )}
     </div>
     {children}