Merge pull request #446 from reservoirprotocol/ted/-add-slippage-conf…

…iguration Add slippageTolerance prop to SwapWidget
reservoirprotocol · Jan 24, 2025 · a5dada7 · a5dada7
2 parents 378d5fd + f0c558e
commit a5dada7
Show file tree

Hide file tree

Showing 8 changed files with 10,044 additions and 7,989 deletions.
diff --git a/.changeset/small-tigers-care.md b/.changeset/small-tigers-care.md
@@ -0,0 +1,5 @@
+---
+'@reservoir0x/relay-kit-ui': patch
+---
+
+Add slippageTolerance prop to swap widget
diff --git a/demo/pages/ui/swap.tsx b/demo/pages/ui/swap.tsx
@@ -51,6 +51,9 @@ const SwapWidgetPage: NextPage = () => {
       }
     | undefined
   >()
+  const [slippageTolerance, setSlippageTolerance] = useState<
+    string | undefined
+  >(undefined)
 
   const linkedWallets = useMemo(() => {
     const _wallets = userWallets.reduce((linkedWallets, wallet) => {
@@ -262,6 +265,7 @@ const SwapWidgetPage: NextPage = () => {
           onSwapSuccess={(data) => {
             console.log('onSwapSuccess Triggered', data)
           }}
+          slippageTolerance={slippageTolerance}
         />
       </div>
       <div
@@ -280,6 +284,23 @@ const SwapWidgetPage: NextPage = () => {
             onChange={(e) => setSingleChainMode(e.target.checked)}
           />
         </div>
+        <div style={{ marginTop: '20px' }}>
+          <label>
+            Slippage Tolerance (basis points - 50 for 0.5% slippage):{' '}
+          </label>
+          <input
+            type="number"
+            min="0"
+            max="10000"
+            value={slippageTolerance ?? ''}
+            onChange={(e) =>
+              setSlippageTolerance(
+                e.target.value === '' ? undefined : e.target.value
+              )
+            }
+            placeholder="auto"
+          />
+        </div>
       </div>
     </Layout>
   )

diff --git a/packages/ui/src/components/common/TransactionModal/SwapModal.tsx b/packages/ui/src/components/common/TransactionModal/SwapModal.tsx
@@ -38,6 +38,7 @@ type SwapModalProps = {
   customToAddress?: Address | string
   tradeType: TradeType
   useExternalLiquidity: boolean
+  slippageTolerance?: string
   wallet?: AdaptedWallet
   linkedWallets?: LinkedWallet[]
   multiWalletSupportEnabled?: boolean
@@ -62,6 +63,7 @@ export const SwapModal: FC<SwapModalProps> = (swapModalProps) => {
     amountInputValue,
     amountOutputValue,
     useExternalLiquidity,
+    slippageTolerance,
     timeEstimate,
     isCanonical,
     wallet,
@@ -82,6 +84,7 @@ export const SwapModal: FC<SwapModalProps> = (swapModalProps) => {
       debouncedOutputAmountValue={debouncedOutputAmountValue}
       tradeType={tradeType}
       useExternalLiquidity={useExternalLiquidity}
+      slippageTolerance={slippageTolerance}
       address={address}
       recipient={recipient}
       wallet={wallet}

diff --git a/packages/ui/src/components/common/TransactionModal/TransactionModalRenderer.tsx b/packages/ui/src/components/common/TransactionModal/TransactionModalRenderer.tsx
@@ -104,6 +104,7 @@ type Props = {
   customToAddress?: Address
   tradeType: TradeType
   useExternalLiquidity: boolean
+  slippageTolerance?: string
   wallet?: AdaptedWallet
   invalidateBalanceQueries: () => void
   children: (props: ChildrenProps) => ReactNode
@@ -130,6 +131,7 @@ export const TransactionModalRenderer: FC<Props> = ({
   customToAddress,
   tradeType,
   useExternalLiquidity,
+  slippageTolerance,
   wallet,
   invalidateBalanceQueries,
   children,
@@ -182,6 +184,7 @@ export const TransactionModalRenderer: FC<Props> = ({
                   toToken.decimals
                 ).toString(),
           referrer: relayClient?.source ?? undefined,
+          slippageTolerance: slippageTolerance,
           useExternalLiquidity
         }
       : undefined

diff --git a/packages/ui/src/components/widgets/SwapWidget/index.tsx b/packages/ui/src/components/widgets/SwapWidget/index.tsx
@@ -45,6 +45,7 @@ type BaseSwapWidgetProps = {
   defaultToAddress?: Address
   defaultAmount?: string
   defaultTradeType?: 'EXACT_INPUT' | 'EXPECTED_OUTPUT'
+  slippageTolerance?: string
   lockToToken?: boolean
   lockFromToken?: boolean
   lockChainId?: number
@@ -86,6 +87,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
   defaultToAddress,
   defaultAmount,
   defaultTradeType,
+  slippageTolerance,
   lockToToken = false,
   lockFromToken = false,
   lockChainId,
@@ -133,6 +135,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
       defaultTradeType={defaultTradeType}
       defaultFromToken={initialFromToken}
       defaultToToken={defaultToToken}
+      slippageTolerance={slippageTolerance}
       wallet={wallet}
       linkedWallets={linkedWallets}
       multiWalletSupportEnabled={multiWalletSupportEnabled}
@@ -187,6 +190,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
         isValidToAddress,
         supportsExternalLiquidity,
         useExternalLiquidity,
+        slippageTolerance,
         canonicalTimeEstimate,
         fromChainWalletVMSupported,
         toChainWalletVMSupported,
@@ -318,6 +322,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
               }
             }}
             useExternalLiquidity={useExternalLiquidity}
+            slippageTolerance={slippageTolerance}
             onSwapSuccess={onSwapSuccess}
             onSwapValidating={onSwapValidating}
             onAnalyticEvent={onAnalyticEvent}

diff --git a/packages/ui/src/components/widgets/SwapWidgetRenderer.tsx b/packages/ui/src/components/widgets/SwapWidgetRenderer.tsx
@@ -49,6 +49,7 @@ type SwapWidgetRendererProps = {
   defaultToAddress?: Address
   defaultAmount?: string
   defaultTradeType?: TradeType
+  slippageTolerance?: string
   context: 'Swap' | 'Deposit' | 'Withdraw'
   wallet?: AdaptedWallet
   linkedWallets?: LinkedWallet[]
@@ -115,6 +116,7 @@ export type ChildrenProps = {
   ctaCopy: string
   isFromNative: boolean
   useExternalLiquidity: boolean
+  slippageTolerance?: string
   supportsExternalLiquidity: boolean
   timeEstimate?: { time: number; formattedTime: string }
   canonicalTimeEstimate?: { time: number; formattedTime: string }
@@ -141,6 +143,7 @@ const SwapWidgetRenderer: FC<SwapWidgetRendererProps> = ({
   defaultToAddress,
   defaultAmount,
   defaultTradeType,
+  slippageTolerance,
   context,
   wallet,
   multiWalletSupportEnabled = false,
@@ -404,6 +407,14 @@ const SwapWidgetRenderer: FC<SwapWidgetRendererProps> = ({
       ? true
       : false
 
+  const [currentSlippageTolerance, setCurrentSlippageTolerance] = useState<
+    string | undefined
+  >(slippageTolerance)
+
+  useEffect(() => {
+    setCurrentSlippageTolerance(slippageTolerance)
+  }, [slippageTolerance])
+
   const quoteParameters =
     fromToken && toToken
       ? {
@@ -427,7 +438,8 @@ const SwapWidgetRenderer: FC<SwapWidgetRendererProps> = ({
                 ).toString(),
           referrer: relayClient?.source ?? undefined,
           useExternalLiquidity,
-          useDepositAddress: !fromChainWalletVMSupported
+          useDepositAddress: !fromChainWalletVMSupported,
+          slippageTolerance: slippageTolerance
         }
       : undefined
 
@@ -691,6 +703,7 @@ const SwapWidgetRenderer: FC<SwapWidgetRendererProps> = ({
         ctaCopy,
         isFromNative,
         useExternalLiquidity,
+        slippageTolerance: currentSlippageTolerance,
         supportsExternalLiquidity,
         timeEstimate,
         canonicalTimeEstimate,

diff --git a/packages/ui/src/components/widgets/WidgetContainer.tsx b/packages/ui/src/components/widgets/WidgetContainer.tsx
@@ -42,6 +42,7 @@ export type WidgetContainerProps = {
   | 'setCustomToAddress'
   | 'useExternalLiquidity'
   | 'timeEstimate'
+  | 'slippageTolerance'
 >
 
 const WidgetContainer: FC<WidgetContainerProps> = ({
@@ -63,6 +64,7 @@ const WidgetContainer: FC<WidgetContainerProps> = ({
   customToAddress,
   address,
   useExternalLiquidity,
+  slippageTolerance,
   timeEstimate,
   recipient,
   toChain,
@@ -99,6 +101,7 @@ const WidgetContainer: FC<WidgetContainerProps> = ({
             debouncedOutputAmountValue={debouncedOutputAmountValue}
             tradeType={tradeType}
             useExternalLiquidity={useExternalLiquidity}
+            slippageTolerance={slippageTolerance}
             address={address}
             recipient={recipient}
             isCanonical={useExternalLiquidity}