moved polkadot login system to use @polkadot-onboard library

.gitignore

@@ -20,3 +20,6 @@ src/shared/permissions/__import-permissions.ts
 src/server/types/__import-models-integrations.ts
 src/client/stores/__import-stores.tsx
 src/client/components/__import-components.tsx
+
+yalc.lock
+.yalc

package.json

@@ -39,12 +39,17 @@
  "@fastify/websocket": "^7.1.1",
  "@nanostores/react": "^0.7.1",
  "@nanostores/router": "^0.11.0",
+ "@polkadot-onboard/core": "^1.1.0",
+ "@polkadot-onboard/injected-wallets": "^1.1.0",
+ "@polkadot-onboard/wallet-connect": "git+https://github.com/piggydoughnut/polkadot-onboard.git#feat/wc_config",
  "@polkadot/api": "^10.9.1",
  "@polkadot/extension-dapp": "^0.46.5",
  "@polkadot/util": "^12.3.2",
  "@polkadot/util-crypto": "^12.3.2",
  "@types/json-diff": "^0.9.1",
  "@types/mapbox-gl": "^2.7.10",
+ "@walletconnect/modal": "^2.6.2",
+ "@walletconnect/sign-client": "^2.11.2",
  "axios": "^1.6.0",
  "bottleneck": "^2.19.5",
  "dayjs": "^1.11.5",

src/client/components/auth/Login.tsx

@@ -1,4 +1,4 @@
-import { H1 } from '#client/components/ui'
+import { FButton, H1 } from '#client/components/ui'
 import { useStore } from '@nanostores/react'
 import * as stores from '#client/stores'
 import * as React from 'react'
@@ -17,7 +17,7 @@ export const Login: React.FC = () => {
 
  return (
  <WhiteWindow>
- <div className="flex flex-col items-stretch w-full justify-between h-full">
+ <div className="flex flex-col items-stretch w-full gap-4">
  <H1>
  {currentState === 'Login'
  ? `Login to ${config.appName}`
@@ -31,8 +31,7 @@ export const Login: React.FC = () => {
  />
  )}
  {providers.includes('polkadot') && (
- // @to-do not showing polkadot button on mobile or tablet as we cannot have browser extension on those
- <div className="hidden md:block">
+ <div className="">
  <LoginButton
  icon="polkadot"
  label={`${currentState} with Polkadot`}
@@ -44,16 +43,19 @@ export const Login: React.FC = () => {
  )}
  </div>
 
- {!!providers.length && <button
- className="underline mt-4"
- onClick={() =>
- setCurrentState(currentState === 'Login' ? 'Register' : 'Login')
- }
- >
- {currentState === 'Login'
- ? 'I want to create a new account'
- : 'I already have an account'}
- </button>}
+ {!!providers.length && (
+ <FButton
+ kind="link"
+ className="mt-4 w-fit m-auto"
+ onClick={() =>
+ setCurrentState(currentState === 'Login' ? 'Register' : 'Login')
+ }
+ >
+ {currentState === 'Login'
+ ? 'I want to create a new account'
+ : 'I already have an account'}
+ </FButton>
+ )}
  </div>
  </WhiteWindow>
  )