added configuration for more browser extensions, adjusted error displ…

…ay when no accounts are found
paritytech · Mar 4, 2024 · ec017b5 · ec017b5
1 parent 086f924
commit ec017b5
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 61 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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}