Merge pull request #345 from oasisprotocol/ml/rofl-paymaster-testnet-integration

ROFL Paymaster testnet integration

Author: lubej

.changelog/345.feature.md

@@ -0,0 +1 @@
+ROFL Paymaster testnet integration

.env

@@ -2,4 +2,4 @@ VITE_WALLET_CONNECT_PROJECT_ID=e3727c2e231abb0791d9cc90b55fb1e1
 # VITE_ROFL_APP_BACKEND=http://localhost:8899
 VITE_ROFL_APP_BACKEND=https://backend.rofl.app
 VITE_FATHOM_SIDE_ID=ADZXERYI
-VITE_NITRO_PARTNER_ID=309
+VITE_FEATURE_FLAG_PAYMASTER=1

.env.production

@@ -1 +1,2 @@
 VITE_ROFL_APP_BACKEND=https://backend.rofl.app 
+VITE_FEATURE_FLAG_PAYMASTER=

src/components/RainbowKitConnectButton/index.tsx

@@ -15,6 +15,7 @@ import { useIsMobile } from '@oasisprotocol/ui-library/src/hooks/use-mobile'
 import { useNavigate } from 'react-router-dom'
 import { sapphire, sapphireTestnet } from 'viem/chains'
 import { useRoflAppBackendAuthContext } from '../../contexts/RoflAppBackendAuth/hooks.ts'
+import { ROFL_PAYMASTER_ENABLED_CHAINS_IDS } from '../../constants/rofl-paymaster-config.ts'
 
 type ConnectButtonRenderProps = Parameters<React.ComponentProps<typeof ConnectButton.Custom>['children']>[0]
 
@@ -37,8 +38,10 @@ const useNavigateToDashboardOnChainChange = ({ enabled }: { enabled: boolean })
     if (!enabled) return
 
     if (chainId && chainId !== selectedChainId && isAuthenticated) {
-      setSelectedChainId(chainId)
-      navigate('/dashboard', { replace: true })
+      if (!ROFL_PAYMASTER_ENABLED_CHAINS_IDS.includes(chainId.toString())) {
+        setSelectedChainId(chainId)
+        navigate('/dashboard', { replace: true })
+      }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps -- selectedChainId should not trigger effect
   }, [enabled, chainId, navigate, isAuthenticated])

…c/components/top-up/FaucetInfo/index.tsx …ents/rofl-paymaster/FaucetInfo/index.tsxsrc/components/top-up/FaucetInfo/index.tsx renamed to src/components/rofl-paymaster/FaucetInfo/index.tsx src/components/top-up/FaucetInfo/index.tsx renamed to src/components/rofl-paymaster/FaucetInfo/index.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react'
-import { Card } from '@oasisprotocol/ui-library/src/components/ui/card.tsx'
+import { Card } from '@oasisprotocol/ui-library/src/components/ui/card'
 import { ExternalLink } from 'lucide-react'
-import { FAUCET_URL } from '../../../constants/top-up-config.ts'
+import { FAUCET_URL } from '../../../constants/global'
 
 export const FaucetInfo: FC = () => {
   return (

src/components/rofl-paymaster/TokenLogo/index.tsx

@@ -0,0 +1,39 @@
+import type { FC } from 'react'
+import { ChainNativeCurrency } from '../../../types/rofl-paymaster.ts'
+import { ROFL_PAYMASTER_ENABLED_CHAINS } from '../../../constants/rofl-paymaster-config.ts'
+
+interface ChainTokenLogoProps {
+  chainId?: number
+  token?: ChainNativeCurrency
+}
+
+// TODO: use the token logo once available
+export const TokenLogo: FC<ChainTokenLogoProps> = ({ chainId, token }) => {
+  let displayToken: (ChainNativeCurrency & { logoURI?: string }) | undefined =
+    token ||
+    (chainId ? ROFL_PAYMASTER_ENABLED_CHAINS?.find(t => t.id === chainId)?.nativeCurrency : undefined)
+
+  displayToken = {
+    name: '',
+    symbol: '',
+    decimals: 18,
+    ...(displayToken || {}),
+    logoURI: '',
+  }
+
+  return (
+    <div className="w-4 h-4">
+      {displayToken?.logoURI ? (
+        <img
+          src={displayToken.logoURI}
+          alt={displayToken.symbol}
+          className="w-full h-full rounded-full object-cover"
+        />
+      ) : (
+        <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+          <circle cx="8" cy="8" r="8" fill="currentColor" />
+        </svg>
+      )}
+    </div>
+  )
+}

src/components/rofl-paymaster/TopUp/index.module.css

@@ -0,0 +1,12 @@
+/*
+  [rainbowkit]: Hacky way to hide Sapphire Mainnet from switch chain modal
+ */
+:global(body):global(.topUp) {
+  [data-rk] {
+    && {
+      [data-testid='rk-chain-option-23294'] {
+        display: none;
+      }
+    }
+  }
+}