Update wallet adapter

common/Header.tsx

@@ -4,7 +4,6 @@ import { useWalletModal } from '@solana/wallet-adapter-react-ui'
 import { GlyphWallet } from 'assets/GlyphWallet'
 import { useStakePoolId } from 'hooks/useStakePoolId'
 import { useStakePoolMetadata } from 'hooks/useStakePoolMetadata'
-import { useRouter } from 'next/router'
 import { useEnvironmentCtx } from 'providers/EnvironmentProvider'
 
 import { Airdrop } from './Airdrop'
@@ -13,7 +12,6 @@ import { contrastColorMode } from './utils'
 import { asWallet } from './Wallets'
 
 export const Header = () => {
-  const router = useRouter()
   const { environment, secondaryConnection } = useEnvironmentCtx()
   const wallet = useWallet()
   const walletModal = useWalletModal()

components/CollectionsList.tsx

@@ -34,6 +34,7 @@ export const CollectionsList = ({ configs }: { configs?: StakePool[] }) => {
                 <div
                   key={`${config.stakePoolData.pubkey.toString()}`}
                   className="flex w-full cursor-pointer gap-4 border-b border-border px-8 py-4 md:flex-row"
+                  // eslint-disable-next-line react/no-unknown-property
                   css={css`
                     &:hover {
                       background: ${config.stakePoolMetadata?.colors?.primary &&

package.json

@@ -22,31 +22,32 @@
     "start": "next start",
     "lint": "next lint"
   },
+  "resolutions": {
+    "@solana/web3.js": "^1.58.0",
+    "@solana/buffer-layout": "^4.0.0"
+  },
   "dependencies": {
     "@apollo/client": "^3.6.9",
-    "@cardinal/common": "^2.0.13",
-    "@cardinal/namespaces-components": "^4.1.19",
-    "@cardinal/scanner": "^0.1.1",
-    "@cardinal/staking": "^1.10.5",
+    "@cardinal/common": "^4.0.1",
+    "@cardinal/namespaces-components": "^4.1.27",
+    "@cardinal/staking": "^1.10.7",
     "@cardinal/stats": "^1.0.3",
-    "@emotion/babel-plugin": "^11.7.2",
-    "@emotion/babel-preset-css-prop": "^11.2.0",
-    "@emotion/css": "^11.7.1",
     "@emotion/react": "^11.7.1",
-    "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.6.0",
     "@headlessui/react": "^1.6.1",
     "@mui/material": "^5.8.2",
     "@popperjs/core": "^2.11.5",
     "@project-serum/anchor": "^0.24.2",
     "@saberhq/anchor-contrib": "^1.12.58",
+    "@solana/buffer-layout": "^4.0.0",
     "@saberhq/solana-contrib": "^1.13.2",
     "@sentry/nextjs": "^7.8.1",
     "@solana/qr-code-styling": "^1.6.0-beta.0",
-    "@solana/wallet-adapter-react": "^0.15.20",
-    "@solana/wallet-adapter-react-ui": "^0.9.18",
+    "@solana/wallet-adapter-base": "^0.9.18",
+    "@solana/wallet-adapter-react": "rc",
+    "@solana/wallet-adapter-react-ui": "rc",
     "@solana/wallet-adapter-wallets": "^0.19.5",
-    "@solana/web3.js": "^1.37.1",
+    "@solana/web3.js": "^1.58.0",
     "@typescript-eslint/eslint-plugin": "^5.35.1",
     "base58": "^2.0.1",
     "eslint-plugin-import": "^2.26.0",

pages/_app.tsx

@@ -2,7 +2,11 @@ import './styles.css'
 import '@cardinal/namespaces-components/dist/esm/styles.css'
 import 'tailwindcss/tailwind.css'
 
-import { WalletIdentityProvider } from '@cardinal/namespaces-components'
+import {
+  IDENTITIES,
+  WalletIdentityProvider,
+} from '@cardinal/namespaces-components'
+import { WalletAdapterNetwork } from '@solana/wallet-adapter-base'
 import { WalletProvider } from '@solana/wallet-adapter-react'
 import { WalletModalProvider } from '@solana/wallet-adapter-react-ui'
 import {
@@ -13,6 +17,7 @@ import {
   GlowWalletAdapter,
   LedgerWalletAdapter,
   PhantomWalletAdapter,
+  SlopeWalletAdapter,
   SolflareWalletAdapter,
   TorusWalletAdapter,
 } from '@solana/wallet-adapter-wallets'
@@ -25,6 +30,7 @@ import {
 } from 'providers/EnvironmentProvider'
 import { StakePoolMetadataProvider } from 'providers/StakePoolMetadataProvider'
 import { UTCNowProvider } from 'providers/UTCNowProvider'
+import { useMemo } from 'react'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import { ReactQueryDevtools } from 'react-query/devtools'
 
@@ -47,37 +53,63 @@ const App = ({
 }: AppProps & {
   cluster: string
   poolMapping: StakePoolMetadata | undefined
-}) => (
-  <EnvironmentProvider defaultCluster={cluster}>
-    <StakePoolMetadataProvider poolMapping={poolMapping}>
+}) => {
+  const network = useMemo(() => {
+    switch (cluster) {
+      case 'mainnet':
+        return WalletAdapterNetwork.Mainnet
+      case 'devnet':
+        return WalletAdapterNetwork.Devnet
+      case 'testnet':
+        return WalletAdapterNetwork.Testnet
+      default:
+        return WalletAdapterNetwork.Mainnet
+    }
+  }, [cluster])
+
+  const wallets = useMemo(
+    () => [
+      new PhantomWalletAdapter(),
+      new BackpackWalletAdapter(),
+      new SolflareWalletAdapter({ network }),
+      new CoinbaseWalletAdapter(),
+      new BraveWalletAdapter(),
+      new SlopeWalletAdapter(),
+      new FractalWalletAdapter(),
+      new GlowWalletAdapter({ network }),
+      new LedgerWalletAdapter(),
+      new TorusWalletAdapter({ params: { network, showTorusButton: false } }),
+    ],
+    [network]
+  )
+
+  const identities = useMemo(
+    () => [IDENTITIES['twitter'], IDENTITIES['discord'], IDENTITIES['github']],
+    []
+  )
+
+  return (
+    <EnvironmentProvider defaultCluster={cluster}>
       <UTCNowProvider>
-        <WalletProvider autoConnect wallets={[
-              new PhantomWalletAdapter(),
-              new BackpackWalletAdapter(),
-              new SolflareWalletAdapter(),
-              new CoinbaseWalletAdapter(),
-              new BraveWalletAdapter(),
-              new FractalWalletAdapter(),
-              new GlowWalletAdapter(),
-              new LedgerWalletAdapter(),
-              new TorusWalletAdapter(),
-            ]}>
-          <WalletIdentityProvider>
-            <WalletModalProvider>
+        <WalletProvider wallets={wallets} autoConnect>
+          <WalletIdentityProvider identities={identities}>
+            <StakePoolMetadataProvider poolMapping={poolMapping}>
               <QueryClientProvider client={queryClient}>
-                <>
-                  <ToastContainer />
-                  <Component {...pageProps} />
-                  <ReactQueryDevtools initialIsOpen={false} />
-                </>
+                <WalletModalProvider>
+                  <>
+                    <ToastContainer />
+                    <Component {...pageProps} />
+                    {<ReactQueryDevtools initialIsOpen={false} />}
+                  </>
+                </WalletModalProvider>
               </QueryClientProvider>
-            </WalletModalProvider>
+            </StakePoolMetadataProvider>
           </WalletIdentityProvider>
         </WalletProvider>
       </UTCNowProvider>
-    </StakePoolMetadataProvider>
-  </EnvironmentProvider>
-)
+    </EnvironmentProvider>
+  )
+}
 
 App.getInitialProps = getInitialProps