feat: migrate AllowanceButton

src/app/(marketing)/create-profile/_components/OnboardingDriver.tsx

@@ -19,7 +19,7 @@ const chains: OnboardingChain[] = [
 ] as const
 
 export const OnboardingDriver = () => {
-  const [chainIndex, setChainIndex] = useState(0)
+  const [chainIndex, setChainIndex] = useState(1)
   // TODO: remove default chosen subscription, as it is only there for debug
   // purposes
   const [chainData, setChainData] = useState<Partial<ChainData>>({

src/app/(marketing)/create-profile/_components/PurchasePass.tsx

@@ -11,7 +11,10 @@ export const PurchasePass: OnboardingChain = ({
   dispatchChainAction,
   chainData,
 }) => {
-  const [didUserPurchase, setDidUserPurchase] = useState(false)
+  const [didPurchase, setDidPurchase] = useState(false)
+  const [didAllowEth, setDidAllowEth] = useState(false)
+  const [didVerify, setDidVerify] = useState(false)
+
   if (!chainData.chosenSubscription)
     throw new Error("Subscription data was not provided")
 
@@ -32,7 +35,7 @@ export const PurchasePass: OnboardingChain = ({
       </div>
       <article className="flex flex-col items-center pb-6 text-center">
         <div className="mb-2 h-48">
-          {didUserPurchase ? (
+          {didPurchase ? (
             <DotLottiePlayer
               autoplay
               src="/success_lottie.json"
@@ -64,7 +67,11 @@ export const PurchasePass: OnboardingChain = ({
                 </TooltipContent>
               </Tooltip>
             </div>
-            <Button colorScheme="primary" onClick={() => setDidUserPurchase(true)}>
+            <Button
+              colorScheme="primary"
+              onClick={() => setDidVerify(true)}
+              disabled={didVerify}
+            >
               Start
             </Button>
           </div>
@@ -81,18 +88,34 @@ export const PurchasePass: OnboardingChain = ({
                 <div>Total</div>
                 <div>---</div>
               </div>
-              <Button colorScheme="info" className="w-full" disabled>
+              <Button
+                colorScheme="info"
+                className="w-full"
+                disabled={!didVerify || didAllowEth}
+                onClick={() => {
+                  setDidAllowEth(true)
+                }}
+              >
                 Allow Guild to use your ETH
                 <Info />
               </Button>
-              <Button variant="subtle" className="w-full" disabled>
+              <Button
+                variant="subtle"
+                className="w-full"
+                disabled={!didVerify || !didAllowEth}
+                onClick={() => setDidPurchase(true)}
+              >
                 Purchase
               </Button>
             </div>
           ) : (
             <div className="flex items-center justify-between font-semibold">
               2. Complete payment
-              <Button colorScheme="primary" disabled>
+              <Button
+                colorScheme="primary"
+                disabled={!didVerify}
+                onClick={() => setDidPurchase(true)}
+              >
                 Go to stripe
               </Button>
             </div>

src/v2/components/AllowanceButton.tsx

@@ -0,0 +1,67 @@
+"use client"
+
+import { Info } from "@phosphor-icons/react"
+import useAllowance from "components/[guild]/Requirements/components/GuildCheckout/hooks/useAllowance"
+import useTokenData from "hooks/useTokenData"
+import { NULL_ADDRESS } from "utils/guildCheckout/constants"
+import { useAccount } from "wagmi"
+import { Chain, Chains } from "wagmiConfig/chains"
+import { Button } from "./ui/Button"
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/Tooltip"
+
+type Props = {
+  chain: Chain
+  token: `0x${string}`
+  contract: `0x${string}`
+}
+
+export const AllowanceButton = ({ chain, token, contract }: Props) => {
+  const {
+    data: { symbol: tokenSymbol, name: tokenName },
+  } = useTokenData(chain, token)
+
+  const {
+    allowance,
+    isAllowanceLoading,
+    isAllowing,
+    allowanceError,
+    allowSpendingTokens,
+  } = useAllowance(token, contract)
+
+  const tokenIsNative = token === NULL_ADDRESS
+  const { chainId } = useAccount()
+  const isOnCorrectChain = Chains[chain] === chainId
+  const disable = !allowance && !tokenIsNative && isOnCorrectChain
+
+  return (
+    <Button
+      disabled={disable}
+      className="w-full"
+      isLoading={isAllowanceLoading || isAllowing}
+      colorScheme={allowanceError ? "destructive" : "info"}
+      loadingText={
+        isAllowanceLoading
+          ? "Checking allowance"
+          : isAllowing
+            ? "Allowing"
+            : "Check your wallet"
+      }
+      onClick={allowSpendingTokens}
+      // disabled={!didVerify || didAllowEth}
+      // onClick={() => {
+      //   setDidAllowEth(true)
+      // }}
+    >
+      {allowanceError
+        ? "Couldn't fetch allowance"
+        : `Allow Guild to use your ${tokenSymbol}`}
+
+      <Tooltip>
+        <TooltipTrigger>
+          <Info />
+        </TooltipTrigger>
+        <TooltipContent>{`You have to give the Guild smart contracts permission to use your ${tokenName}. You only have to do this once per token.`}</TooltipContent>
+      </Tooltip>
+    </Button>
+  )
+}