From 0832a064a90478dc5fb478a0dba93936c9fdb9f6 Mon Sep 17 00:00:00 2001
From: Zach Pomerantz <zzmp@uniswap.org>
Date: Mon, 5 Dec 2022 11:41:47 -0800
Subject: [PATCH] feat: permit2 flag (#320)

* feat: add permit2 flag

* test: use permit2 in test fixtures
---
 src/cosmos/ControlledSwap.fixture.tsx | 1 +
 src/cosmos/Swap.fixture.tsx           | 1 +
 src/hooks/useSyncFlags.ts             | 9 +++++++--
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/cosmos/ControlledSwap.fixture.tsx b/src/cosmos/ControlledSwap.fixture.tsx
index a4b5d43fc..2a6660437 100644
--- a/src/cosmos/ControlledSwap.fixture.tsx
+++ b/src/cosmos/ControlledSwap.fixture.tsx
@@ -57,6 +57,7 @@ function Fixture() {
   return (
     <Row flex align="start" justify="start" gap={0.5}>
       <SwapWidget
+        permit2
         value={{
           type,
           amount,
diff --git a/src/cosmos/Swap.fixture.tsx b/src/cosmos/Swap.fixture.tsx
index c7c420ba7..fed2b1f85 100644
--- a/src/cosmos/Swap.fixture.tsx
+++ b/src/cosmos/Swap.fixture.tsx
@@ -94,6 +94,7 @@ function Fixture() {
 
   const widget = (
     <SwapWidget
+      permit2
       convenienceFee={convenienceFee}
       convenienceFeeRecipient={convenienceFeeRecipient}
       defaultInputTokenAddress={defaultInputToken}
diff --git a/src/hooks/useSyncFlags.ts b/src/hooks/useSyncFlags.ts
index 4a2d5277b..82830c4d8 100644
--- a/src/hooks/useSyncFlags.ts
+++ b/src/hooks/useSyncFlags.ts
@@ -5,16 +5,21 @@ import { useMemo } from 'react'
 // Flags are sticky settings - they cannot be changed without remounting the Widget.
 export interface Flags {
   brandedFooter?: boolean
+  permit2?: boolean
 }
 
 const flagsAtom = atom<Flags>({})
 
-export function useInitialFlags({ brandedFooter }: Flags): [[Atom<Flags>, Flags]] {
+export function useInitialFlags({ brandedFooter, permit2 }: Flags): [[Atom<Flags>, Flags]] {
   // Only grab the initial flags on mount - ignore exhaustive-deps.
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  return useMemo(() => [[flagsAtom, { brandedFooter }]], [])
+  return useMemo(() => [[flagsAtom, { brandedFooter, permit2 }]], [])
 }
 
 export function useBrandedFooter() {
   return useAtomValue(flagsAtom).brandedFooter ?? true
 }
+
+export function usePermit2() {
+  return useAtomValue(flagsAtom).permit2 ?? false
+}