Mainnet Paymaster

.changelog/387.feature.md

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

.env

@@ -2,4 +2,3 @@ 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_FEATURE_FLAG_PAYMASTER=1

.env.production

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

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

@@ -0,0 +1,11 @@
+import type { FC, SVGProps } from 'react'
+
+export const BaseLogo: FC<SVGProps<SVGSVGElement>> = props => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="76 76 207 207" fill="none" {...props}>
+    <path
+      d="M178.915 282.19C235.952 282.19 282.19 236.033 282.19 179.095C282.19 122.157 235.952 76 178.915 76C124.802 76 80.4089 117.546 76 170.429H212.506V187.761H76C80.4089 240.643 124.802 282.19 178.915 282.19Z"
+      fill="white"
+      fillOpacity="0.5"
+    />
+  </svg>
+)

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

@@ -0,0 +1,21 @@
+import type { FC } from 'react'
+import { base } from 'viem/chains'
+import { BaseLogo } from './BaseLogo.tsx'
+
+interface ChainLogoProps {
+  chainId?: number
+}
+
+export const ChainLogo: FC<ChainLogoProps> = ({ chainId }) => {
+  return (
+    <div className="w-4 h-4 flex items-center justify-center">
+      {chainId === base.id ? (
+        <BaseLogo />
+      ) : (
+        <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/TokenLogo/RoseLogo.tsx

@@ -0,0 +1,12 @@
+import type { FC, SVGProps } from 'react'
+
+export const RoseLogo: FC<SVGProps<SVGSVGElement>> = props => (
+  <svg fill="none" preserveAspectRatio="none" viewBox="0 0 24 24" aria-hidden="true" {...props}>
+    <g opacity="0.5">
+      <path
+        d="M19.1354 5.00588C18.2955 4.1494 17.3023 3.44479 16.2025 2.9331C16.1573 2.90984 16.1122 2.88932 16.0657 2.86879C15.8495 2.77165 15.6306 2.67998 15.4077 2.59926C14.7811 2.37214 14.1259 2.20523 13.4487 2.10672C12.9754 2.03831 12.4911 2 11.9986 2C6.48564 2 2 6.48625 2 12C2 16.2961 4.7223 19.9669 8.53351 21.3802C8.98221 21.5458 9.44459 21.6812 9.92065 21.7811C10.5923 21.9234 11.2873 22 12 22C15.7975 22 19.1081 19.8711 20.8003 16.7435C21.565 15.3315 22 13.7143 22 11.9986C22 9.27733 20.907 6.80777 19.1382 5.00315L19.1354 5.00588ZM4.98222 17.3509C3.80027 15.7926 3.17647 13.9332 3.17647 11.974C3.17647 8.62881 5.03146 5.70776 7.76607 4.18772C7.83858 4.14804 7.90971 4.24381 7.84952 4.2999C7.59918 4.53523 7.35978 4.78698 7.13133 5.05514C5.54583 6.90902 4.63338 9.43056 4.62517 11.9754C4.62517 15.2781 6.83447 18.8436 10.4036 18.8436C13.5882 18.8436 16.1806 15.7625 16.1806 11.9754C16.1806 10.1954 15.5841 8.48652 14.565 7.21959C14.5294 7.17444 14.5718 7.11151 14.6265 7.12793C16.3488 7.63689 17.6361 9.61801 17.6361 11.9767C17.6361 14.0591 16.881 16.1319 15.5636 17.6642C14.1984 19.2527 12.3653 20.1283 10.4036 20.1283C8.33789 20.1283 6.35978 19.1145 4.98222 17.3537V17.3509ZM19.1737 6.60118C20.3543 8.15542 20.9767 10.0134 20.9754 11.9713C20.9754 15.3165 19.1204 18.2375 16.3858 19.7589C16.3133 19.7986 16.2421 19.7028 16.3023 19.6467C16.5527 19.4114 16.7921 19.1597 17.0205 18.8915C18.606 17.0376 19.5185 14.5161 19.5267 11.9713C19.5267 8.66849 17.3174 5.10302 13.7483 5.10302C10.5636 5.10302 7.97127 8.18416 7.97127 11.9713C7.97127 13.7513 8.56772 15.4601 9.58687 16.7284C9.62243 16.7736 9.58003 16.8365 9.52531 16.8201C7.80301 16.3111 6.51573 14.3314 6.51573 11.974C6.51573 9.89164 7.27086 7.81885 8.58824 6.28786C9.95349 4.69941 11.7866 3.82378 13.7497 3.82378C15.814 3.82378 17.7907 4.83623 19.1737 6.60118ZM15.1341 11.974C15.1341 14.3327 13.9877 16.3686 12.3461 17.2825C12.1423 17.3961 11.8919 17.381 11.7031 17.2442L11.3516 16.9884C9.91108 15.9376 9.01641 14.0153 9.01641 11.9713C9.01641 9.61254 10.1628 7.57669 11.8044 6.66275C12.0082 6.54919 12.2585 6.56424 12.4473 6.70105L12.7989 6.9569C14.2394 8.00766 15.1341 9.92995 15.1341 11.9726V11.974Z"
+        fill="white"
+      />
+    </g>
+  </svg>
+)

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

@@ -0,0 +1,24 @@
+import type { FC, SVGProps } from 'react'
+
+export const USDCLogo: FC<SVGProps<SVGSVGElement>> = props => (
+  <svg
+    width="19"
+    height="18"
+    viewBox="0 0 19 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    {...props}
+  >
+    <path
+      d="M12.3225 10.4023C12.3225 8.65681 11.273 8.05135 9.17304 7.80154C7.67194 7.6019 7.37304 7.20154 7.37304 6.50226C7.37304 5.80299 7.87267 5.35135 8.87194 5.35135C9.77304 5.35135 10.2727 5.65135 10.5225 6.4019C10.5493 6.47421 10.5977 6.53654 10.6611 6.58044C10.7245 6.62434 10.7999 6.6477 10.877 6.64735H11.6767C11.723 6.64855 11.7691 6.64032 11.8121 6.62314C11.8551 6.60597 11.8942 6.58022 11.927 6.54746C11.9597 6.5147 11.9855 6.47562 12.0026 6.43259C12.0198 6.38956 12.0281 6.34349 12.0269 6.29717V6.24808C11.9302 5.70616 11.6574 5.21132 11.2506 4.84044C10.8438 4.46957 10.3259 4.24344 9.7774 4.19717V2.99717C9.7774 2.79754 9.62685 2.64808 9.37704 2.5979H8.62649C8.42685 2.5979 8.2774 2.74735 8.22722 2.99717V4.15136C6.72285 4.35645 5.77267 5.35135 5.77267 6.60154C5.77267 8.25208 6.77304 8.90226 8.87304 9.15208C10.2727 9.4019 10.7276 9.69754 10.7276 10.5015C10.7276 11.3055 10.0283 11.8521 9.07813 11.8521C7.77776 11.8521 7.33267 11.3066 7.17776 10.5517C7.16347 10.4674 7.12005 10.3907 7.05507 10.3351C6.99009 10.2795 6.90765 10.2484 6.82213 10.2474H5.96794C5.92167 10.2463 5.87567 10.2547 5.83271 10.2719C5.78975 10.2891 5.75073 10.3149 5.718 10.3476C5.68528 10.3803 5.65952 10.4193 5.64229 10.4623C5.62506 10.5053 5.61672 10.5513 5.61776 10.5975V10.6477C5.81849 11.8979 6.61813 12.7979 8.26867 13.0477V14.2477C8.26867 14.4474 8.41813 14.5979 8.66794 14.6481H9.41849C9.61813 14.6481 9.76867 14.4975 9.81776 14.2477V13.0477C11.3178 12.7979 12.3181 11.7474 12.3181 10.3979L12.3225 10.4023Z"
+      fill="white"
+      fillOpacity="0.5"
+    />
+    <path
+      d="M6.47192 15.6518C5.03325 15.1241 3.79128 14.1674 2.9139 12.9111C2.03652 11.6547 1.56603 10.1593 1.56603 8.62689C1.56603 7.0945 2.03652 5.59906 2.9139 4.3427C3.79128 3.08635 5.03325 2.12967 6.47192 1.60198C6.56791 1.56046 6.64854 1.48999 6.70252 1.40041C6.7565 1.31083 6.78115 1.20662 6.77301 1.10235V0.401983C6.77974 0.310117 6.75295 0.218924 6.69758 0.145307C6.64222 0.0716892 6.56205 0.0206396 6.47192 0.00161924C6.40154 -0.00572177 6.33083 0.0120524 6.27228 0.051801C4.452 0.630365 2.86306 1.77316 1.73543 3.31479C0.607801 4.85641 0 6.71688 0 8.62689C0 10.5369 0.607801 12.3974 1.73543 13.939C2.86306 15.4806 4.452 16.6234 6.27228 17.202C6.31385 17.2261 6.36056 17.2401 6.40856 17.2427C6.45657 17.2453 6.50452 17.2366 6.54847 17.2171C6.59243 17.1976 6.63115 17.168 6.66145 17.1307C6.69176 17.0933 6.71279 17.0494 6.72283 17.0023C6.77301 16.9522 6.77301 16.902 6.77301 16.8016V16.1023C6.77301 15.9518 6.62246 15.7522 6.47192 15.6518ZM11.7726 0.051801C11.731 0.0276507 11.6842 0.0137238 11.6361 0.0111644C11.5881 0.00860504 11.5401 0.0174862 11.4961 0.037078C11.4521 0.0566699 11.4134 0.0864134 11.3832 0.123867C11.3529 0.16132 11.332 0.205414 11.3221 0.252528C11.273 0.301619 11.273 0.351801 11.273 0.452164V1.15144C11.2814 1.25227 11.3129 1.34984 11.3649 1.43664C11.4169 1.52344 11.4881 1.59717 11.573 1.65216C13.0117 2.17985 14.2536 3.13653 15.131 4.39288C16.0084 5.64924 16.4789 7.14468 16.4789 8.67707C16.4789 10.2095 16.0084 11.7049 15.131 12.9613C14.2536 14.2176 13.0117 15.1743 11.573 15.702C11.4771 15.7435 11.3966 15.8141 11.3428 15.9037C11.289 15.9933 11.2646 16.0974 11.273 16.2016V16.902C11.2662 16.9937 11.2929 17.0848 11.348 17.1584C11.4032 17.232 11.4831 17.2831 11.573 17.3023C11.6434 17.3097 11.7141 17.2919 11.7726 17.2522C13.5922 16.6656 15.1789 15.517 16.3044 13.9717C17.4299 12.4263 18.0363 10.5638 18.0363 8.65198C18.0363 6.7402 17.4299 4.87767 16.3044 3.3323C15.1789 1.78694 13.5922 0.638369 11.7726 0.051801Z"
+      fill="white"
+      fillOpacity="0.5"
+    />
+  </svg>
+)

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

@@ -0,0 +1,21 @@
+import type { FC, SVGProps } from 'react'
+
+export const USDTLogo: FC<SVGProps<SVGSVGElement>> = props => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M13.4416 13.0375V13.036C13.3591 13.042 12.9338 13.0675 11.9851 13.0675C11.2276 13.0675 10.6943 13.045 10.5068 13.036V13.0383C7.59085 12.91 5.41435 12.4023 5.41435 11.7948C5.41435 11.188 7.59085 10.6803 10.5068 10.5498V12.5328C10.6973 12.5463 11.2433 12.5785 11.9978 12.5785C12.9031 12.5785 13.3568 12.541 13.4416 12.5335V10.5513C16.3516 10.681 18.5228 11.1888 18.5228 11.7948C18.5228 12.4023 16.3516 12.9085 13.4416 13.0375ZM13.4416 10.345V8.5705H17.5021V5.8645H6.44635V8.5705H10.5068V10.3443C7.20685 10.4958 4.7251 11.1498 4.7251 11.9328C4.7251 12.7158 7.20685 13.369 10.5068 13.5213V19.2078H13.4416V13.5198C16.7363 13.3683 19.2121 12.715 19.2121 11.9328C19.2121 11.1505 16.7363 10.4973 13.4416 10.345Z"
+      fill="white"
+      fillOpacity="0.5"
+    />
+  </svg>
+)

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

@@ -1,34 +1,21 @@
 import type { FC } from 'react'
-import { ChainNativeCurrency } from '../../../types/rofl-paymaster.ts'
-import { ROFL_PAYMASTER_ENABLED_CHAINS } from '../../../constants/rofl-paymaster-config.ts'
+import { USDCLogo } from './USDCLogo.tsx'
+import { USDTLogo } from './USDTLogo.tsx'
+import { RoseLogo } from './RoseLogo.tsx'
 
 interface ChainTokenLogoProps {
-  chainId?: number
-  token?: ChainNativeCurrency
+  tokenSymbol?: string
 }
 
-// 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: '',
-  }
-
+export const TokenLogo: FC<ChainTokenLogoProps> = ({ tokenSymbol }) => {
   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"
-        />
+    <div className="w-4 h-4 flex items-center justify-center">
+      {tokenSymbol === 'USDC' ? (
+        <USDCLogo />
+      ) : tokenSymbol === 'USDT' || tokenSymbol === 'Tether USD' ? (
+        <USDTLogo />
+      ) : tokenSymbol === 'ROSE' ? (
+        <RoseLogo />
       ) : (
         <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
           <circle cx="8" cy="8" r="8" fill="currentColor" />