fix: collapse toolbar for wrap transactions (Uniswap#529)

FriggGroup · Mar 7, 2023 · f74946e · f74946e
1 parent ce25f36
commit f74946e
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 11 deletions.
diff --git a/src/components/Swap/Toolbar/ToolbarContext.tsx b/src/components/Swap/Toolbar/ToolbarContext.tsx
@@ -1,4 +1,5 @@
-import { createContext, PropsWithChildren, useContext, useState } from 'react'
+import { useIsWrap } from 'hooks/swap/useWrapCallback'
+import { createContext, PropsWithChildren, useContext, useEffect, useState } from 'react'
 
 export const Context = createContext<{
   open: boolean
@@ -14,6 +15,14 @@ export function Provider({ children }: PropsWithChildren) {
   const [open, setOpen] = useState(false)
   const onToggleOpen = () => setOpen((open) => !open)
   const collapse = () => setOpen(false)
+
+  const isWrap = useIsWrap()
+  useEffect(() => {
+    if (isWrap) {
+      collapse()
+    }
+  }, [isWrap])
+
   return <Context.Provider value={{ open, onToggleOpen, collapse }}>{children}</Context.Provider>
 }
 

diff --git a/src/components/Swap/Toolbar/index.tsx b/src/components/Swap/Toolbar/index.tsx
@@ -36,10 +36,6 @@ const ToolbarRow = styled(Row)<{ isExpandable?: true }>`
   padding: 0 1rem;
 `
 
-interface ToolbarProps {
-  hideConnectionUI?: boolean
-}
-
 function CaptionRow() {
   const {
     [Field.INPUT]: { currency: inputCurrency },
@@ -187,7 +183,7 @@ function CaptionRow() {
   )
 }
 
-function ToolbarActionButton({ hideConnectionUI }: ToolbarProps) {
+function ToolbarActionButton() {
   const {
     [Field.INPUT]: { currency: inputCurrency, balance: inputBalance, amount: inputAmount },
     [Field.OUTPUT]: { currency: outputCurrency },
@@ -217,19 +213,19 @@ function ToolbarActionButton({ hideConnectionUI }: ToolbarProps) {
   return <SwapActionButton />
 }
 
-function Toolbar({ hideConnectionUI }: ToolbarProps) {
+function Toolbar() {
   return (
     <>
       <CaptionRow />
-      <ToolbarActionButton hideConnectionUI={hideConnectionUI} />
+      <ToolbarActionButton />
     </>
   )
 }
 
-export default memo(function WrappedToolbar(props: ToolbarProps) {
+export default memo(function WrappedToolbar() {
   return (
     <ToolbarContextProvider>
-      <Toolbar {...props} />
+      <Toolbar />
     </ToolbarContextProvider>
   )
 })
diff --git a/src/components/Swap/index.tsx b/src/components/Swap/index.tsx
@@ -58,7 +58,7 @@ export default function Swap(props: SwapProps) {
             <Input />
             <ReverseButton />
             <Output />
-            <Toolbar hideConnectionUI={props.hideConnectionUI} />
+            <Toolbar />
             {useBrandedFooter() && <BrandedFooter />}
           </SwapInfoProvider>
         </PopoverBoundaryProvider>