+ 
+
| 
|
| ------------------------------------------------------------------ | ----------------------------------------------------------------------- |
diff --git a/docs/cow-protocol/tutorials/cow-swap/limit.mdx b/docs/cow-swap/limit.mdx
similarity index 97%
rename from docs/cow-protocol/tutorials/cow-swap/limit.mdx
rename to docs/cow-swap/limit.mdx
index a262acadc..910cc3dc3 100644
--- a/docs/cow-protocol/tutorials/cow-swap/limit.mdx
+++ b/docs/cow-swap/limit.mdx
@@ -2,7 +2,7 @@
sidebar_position: 3
---
-import CancellationOffChainOnChain from '../../../partials/_cancellation_offchain_versus_onchain.mdx'
+import CancellationOffChainOnChain from '../partials/_cancellation_offchain_versus_onchain.mdx'
# Limit orders
diff --git a/docs/cow-protocol/tutorials/cow-swap/native.mdx b/docs/cow-swap/native.mdx
similarity index 80%
rename from docs/cow-protocol/tutorials/cow-swap/native.mdx
rename to docs/cow-swap/native.mdx
index 712de86d2..255e16efe 100644
--- a/docs/cow-protocol/tutorials/cow-swap/native.mdx
+++ b/docs/cow-swap/native.mdx
@@ -3,8 +3,8 @@ sidebar_position: 5
---
import Image from '@theme/IdealImage';
-import EthFlowTip from '../../../partials/_eth_flow.mdx'
-import CancellationNotGuaranteed from '../../../partials/_cancellation_not_guaranteed.mdx'
+import EthFlowTip from '../partials/_eth_flow.mdx'
+import CancellationNotGuaranteed from '../partials/_cancellation_not_guaranteed.mdx'
# Native tokens
@@ -53,7 +53,7 @@ After wrapping the token, you can simply select the wrapped token as your sell t
## Option 2) Use Eth-flow {#use-eth-flow}
-In an attempt to smoothen the user experience, CoW Protocol has introduced the [Eth-flow](/cow-protocol/reference/contracts/periphery/eth-flow) contract. This allows users to automate the [above process](#wrap-native-tokens) and wrap + swap in a single **on-chain** transaction.
+In an attempt to smoothen the user experience, CoW Protocol has introduced the [Eth-flow](/cow-protocol/contracts/periphery/eth-flow) contract. This allows users to automate the [above process](#wrap-native-tokens) and wrap + swap in a single **on-chain** transaction.
Eth-flow get the following benefits:
1. Lower overall fees (if you need to swap just once)
@@ -74,13 +74,13 @@ After selecting your tokens, CoW Swap will prompt you to confirm the swap. This
+
+
+
+ )
+}
+
+function App() {
+ const { chainId } = useWeb3Info()
+ const [currentChainId, setCurrentChainId] = useState(chainId)
+
+ useEffect(() => {
+ setCurrentChainId(chainId)
+ }, [chainId])
+
+ return (
+ setIsOpen((state) => !state)}>{title}
+
+
+
+
+
+
+ )
+}
+
+export default App
diff --git a/external/cow-sdk/examples/cra/src/components/jsonContent/index.tsx b/external/cow-sdk/examples/cra/src/components/jsonContent/index.tsx
new file mode 100644
index 000000000..b14ae8789
--- /dev/null
+++ b/external/cow-sdk/examples/cra/src/components/jsonContent/index.tsx
@@ -0,0 +1,45 @@
+import { ClipboardEvent, useCallback, useEffect, useRef, useState } from 'react'
+import usePrevious from '../../hooks/usePrevious'
+
+export function JsonContentThe example works only with Metamask extension!
+
+
+
+ +
+
+ setCurrentChainId(+e.target.value)} />
+
+ {EXAMPLES.map((props, index) => {
+ return
+ {JSON.stringify(defaultValue, null, 4)}
+
+ )
+}
diff --git a/external/cow-sdk/examples/cra/src/components/resultContent/index.tsx b/external/cow-sdk/examples/cra/src/components/resultContent/index.tsx
new file mode 100644
index 000000000..294c88b47
--- /dev/null
+++ b/external/cow-sdk/examples/cra/src/components/resultContent/index.tsx
@@ -0,0 +1,8 @@
+export function ResultContent({ data }: { data: any }) {
+ return (
+
+
+ )
+}
diff --git a/external/cow-sdk/examples/cra/src/context.ts b/external/cow-sdk/examples/cra/src/context.ts
new file mode 100644
index 000000000..18a9db1a9
--- /dev/null
+++ b/external/cow-sdk/examples/cra/src/context.ts
@@ -0,0 +1,3 @@
+import { createContext } from 'react'
+
+export const ChainIdContext = createContext(1)
diff --git a/external/cow-sdk/examples/cra/src/hooks/useCurrentChainId.ts b/external/cow-sdk/examples/cra/src/hooks/useCurrentChainId.ts
new file mode 100644
index 000000000..0d4c81fa1
--- /dev/null
+++ b/external/cow-sdk/examples/cra/src/hooks/useCurrentChainId.ts
@@ -0,0 +1,6 @@
+import { useContext } from 'react'
+import { ChainIdContext } from '../context'
+
+export function useCurrentChainId(): number {
+ return useContext(ChainIdContext)
+}
diff --git a/external/cow-sdk/examples/cra/src/hooks/usePrevious.ts b/external/cow-sdk/examples/cra/src/hooks/usePrevious.ts
new file mode 100644
index 000000000..18d5ba3db
--- /dev/null
+++ b/external/cow-sdk/examples/cra/src/hooks/usePrevious.ts
@@ -0,0 +1,16 @@
+import { useEffect, useRef } from 'react'
+
+// modified from https://usehooks.com/usePrevious/
+export default function usePreviousResult:
+ +
+
+ )
+}
diff --git a/external/cow-sdk/examples/cra/src/pages/getOrders/index.tsx b/external/cow-sdk/examples/cra/src/pages/getOrders/index.tsx
new file mode 100644
index 000000000..1e76e30af
--- /dev/null
+++ b/external/cow-sdk/examples/cra/src/pages/getOrders/index.tsx
@@ -0,0 +1,67 @@
+import { FormEvent, useCallback, useEffect, useState } from 'react'
+import '../../pageStyles.css'
+import { OrderBookApi, EnrichedOrder, Address } from '@cowprotocol/cow-sdk'
+import { useWeb3Info } from '../../hooks/useWeb3Info'
+import { useCurrentChainId } from '../../hooks/useCurrentChainId'
+import { JsonContent } from '../../components/jsonContent'
+import { ResultContent } from '../../components/resultContent'
+
+const orderBookApi = new OrderBookApi()
+
+export function GetOrdersPage() {
+ const { account } = useWeb3Info()
+ const chainId = useCurrentChainId()
+
+ const [input, setInput] = useState<{
+ owner: Address
+ offset?: number
+ limit?: number
+ } | null>(null)
+ const [output, setOutput] = useState
+
+
+
+
+
+ Hook data:
+
+
+
+
+
+ )
+}
diff --git a/external/cow-sdk/examples/cra/src/pages/getQuote/index.tsx b/external/cow-sdk/examples/cra/src/pages/getQuote/index.tsx
new file mode 100644
index 000000000..0590528d5
--- /dev/null
+++ b/external/cow-sdk/examples/cra/src/pages/getQuote/index.tsx
@@ -0,0 +1,65 @@
+import { FormEvent, useCallback, useEffect, useState } from 'react'
+import '../../pageStyles.css'
+import { OrderBookApi, OrderQuoteRequest, OrderQuoteResponse, OrderQuoteSideKindSell } from '@cowprotocol/cow-sdk'
+import { useWeb3Info } from '../../hooks/useWeb3Info'
+import { JsonContent } from '../../components/jsonContent'
+import { useCurrentChainId } from '../../hooks/useCurrentChainId'
+import { ResultContent } from '../../components/resultContent'
+
+const orderBookApi = new OrderBookApi()
+
+export function GetQuotePage() {
+ const { account } = useWeb3Info()
+ const chainId = useCurrentChainId()
+
+ const [input, setInput] = useState
+
+
+
+
+
+ Params:
+
+
+
+
+
+ )
+}
diff --git a/external/cow-sdk/examples/cra/src/pages/getTrades/index.tsx b/external/cow-sdk/examples/cra/src/pages/getTrades/index.tsx
new file mode 100644
index 000000000..eb3aef533
--- /dev/null
+++ b/external/cow-sdk/examples/cra/src/pages/getTrades/index.tsx
@@ -0,0 +1,61 @@
+import { FormEvent, useCallback, useEffect, useState } from 'react'
+import '../../pageStyles.css'
+import { OrderBookApi, Address, UID, Trade } from '@cowprotocol/cow-sdk'
+import { useWeb3Info } from '../../hooks/useWeb3Info'
+import { useCurrentChainId } from '../../hooks/useCurrentChainId'
+import { JsonContent } from '../../components/jsonContent'
+import { ResultContent } from '../../components/resultContent'
+
+const orderBookApi = new OrderBookApi()
+
+export function GetTradesPage() {
+ const { account } = useWeb3Info()
+ const chainId = useCurrentChainId()
+
+ const [input, setInput] = useState<{ owner?: Address; orderId?: UID } | null>(null)
+ const [output, setOutput] = useState
+
+
+
+
+
+ Order:
+
+
+
+
+
+ )
+}
diff --git a/external/cow-sdk/examples/cra/src/pages/quickStart/index.tsx b/external/cow-sdk/examples/cra/src/pages/quickStart/index.tsx
new file mode 100644
index 000000000..75cb316c3
--- /dev/null
+++ b/external/cow-sdk/examples/cra/src/pages/quickStart/index.tsx
@@ -0,0 +1,85 @@
+import { FormEvent, useCallback, useEffect, useState } from 'react'
+import '../../pageStyles.css'
+import {
+ OrderBookApi,
+ OrderQuoteRequest,
+ OrderQuoteSideKindSell,
+ OrderSigningUtils,
+ SigningScheme,
+} from '@cowprotocol/cow-sdk'
+import { useWeb3Info } from '../../hooks/useWeb3Info'
+import { useCurrentChainId } from '../../hooks/useCurrentChainId'
+import { ResultContent } from '../../components/resultContent'
+
+const orderBookApi = new OrderBookApi()
+
+export function QuickStartPage() {
+ const { account, provider } = useWeb3Info()
+ const chainId = useCurrentChainId()
+ const [output, setOutput] = useState
+
+
+
+
+
+ Owner or orderId:
+
+
+
+
+
+ )
+}
diff --git a/external/cow-sdk/examples/cra/src/pages/sendOrder/index.tsx b/external/cow-sdk/examples/cra/src/pages/sendOrder/index.tsx
new file mode 100644
index 000000000..af3215796
--- /dev/null
+++ b/external/cow-sdk/examples/cra/src/pages/sendOrder/index.tsx
@@ -0,0 +1,80 @@
+import { FormEvent, useCallback, useEffect, useState } from 'react'
+import '../../pageStyles.css'
+import { OrderSigningUtils, UID, OrderKind, UnsignedOrder, OrderBookApi, SigningScheme } from '@cowprotocol/cow-sdk'
+import { useWeb3Info } from '../../hooks/useWeb3Info'
+import { JsonContent } from '../../components/jsonContent'
+import { ResultContent } from '../../components/resultContent'
+import { useCurrentChainId } from '../../hooks/useCurrentChainId'
+
+const orderBookApi = new OrderBookApi()
+
+export function SignAndSendOrderPage() {
+ const { account, provider } = useWeb3Info()
+ const chainId = useCurrentChainId()
+
+ const [input, setInput] = useState
+
+
+
+
+
+
+
+ )
+}
diff --git a/external/cow-sdk/examples/cra/src/pages/sendOrderCancellation/index.tsx b/external/cow-sdk/examples/cra/src/pages/sendOrderCancellation/index.tsx
new file mode 100644
index 000000000..84338e573
--- /dev/null
+++ b/external/cow-sdk/examples/cra/src/pages/sendOrderCancellation/index.tsx
@@ -0,0 +1,60 @@
+import { FormEvent, useCallback, useEffect, useState } from 'react'
+import '../../pageStyles.css'
+import { EcdsaSigningScheme, OrderBookApi, OrderCancellations } from '@cowprotocol/cow-sdk'
+import { JsonContent } from '../../components/jsonContent'
+import { ResultContent } from '../../components/resultContent'
+import { useCurrentChainId } from '../../hooks/useCurrentChainId'
+
+const orderBookApi = new OrderBookApi()
+
+export function SendOrderCancellationPage() {
+ const chainId = useCurrentChainId()
+
+ const [input, setInput] = useState
+
+
+
+
+
+ Order:
+
+
+
+
+
+ )
+}
diff --git a/external/cow-sdk/examples/cra/src/pages/signOrder/index.tsx b/external/cow-sdk/examples/cra/src/pages/signOrder/index.tsx
new file mode 100644
index 000000000..d1f58ac6c
--- /dev/null
+++ b/external/cow-sdk/examples/cra/src/pages/signOrder/index.tsx
@@ -0,0 +1,64 @@
+import { FormEvent, useCallback, useState } from 'react'
+import '../../pageStyles.css'
+import { OrderSigningUtils, SigningResult, OrderKind, UnsignedOrder } from '@cowprotocol/cow-sdk'
+import { useWeb3Info } from '../../hooks/useWeb3Info'
+import { JsonContent } from '../../components/jsonContent'
+import { ResultContent } from '../../components/resultContent'
+import { useCurrentChainId } from '../../hooks/useCurrentChainId'
+
+export function SignOrderPage() {
+ const { account, provider } = useWeb3Info()
+ const chainId = useCurrentChainId()
+
+ const [input, setInput] = useState
+
+
+
+
+
+ Params:
+
+
+
+
+
+ )
+}
diff --git a/external/cow-sdk/examples/cra/src/pages/signOrderCancellation/index.tsx b/external/cow-sdk/examples/cra/src/pages/signOrderCancellation/index.tsx
new file mode 100644
index 000000000..92c3f4408
--- /dev/null
+++ b/external/cow-sdk/examples/cra/src/pages/signOrderCancellation/index.tsx
@@ -0,0 +1,56 @@
+import { FormEvent, useCallback, useState } from 'react'
+import '../../pageStyles.css'
+import { OrderCancellations, OrderSigningUtils, SigningResult } from '@cowprotocol/cow-sdk'
+import { useWeb3Info } from '../../hooks/useWeb3Info'
+import { parseFormData } from '../../utils'
+import { JsonContent } from '../../components/jsonContent'
+import { ResultContent } from '../../components/resultContent'
+import { useCurrentChainId } from '../../hooks/useCurrentChainId'
+import { signOrderCancellation } from '@cowprotocol/contracts'
+
+export function SignOrderCancellationPage() {
+ const { provider } = useWeb3Info()
+ const chainId = useCurrentChainId()
+
+ const [input, setInput] = useState
+
+
+
+
+
+ Order:
+
+
+
+
+
+ )
+}
diff --git a/external/cow-sdk/examples/cra/src/pages/smartContractWallet/GPv2Settlement.json b/external/cow-sdk/examples/cra/src/pages/smartContractWallet/GPv2Settlement.json
new file mode 100644
index 000000000..9a9e85e34
--- /dev/null
+++ b/external/cow-sdk/examples/cra/src/pages/smartContractWallet/GPv2Settlement.json
@@ -0,0 +1,20 @@
+[
+ {
+ "inputs": [
+ {
+ "internalType": "bytes",
+ "name": "orderUid",
+ "type": "bytes"
+ },
+ {
+ "internalType": "bool",
+ "name": "signed",
+ "type": "bool"
+ }
+ ],
+ "name": "setPreSignature",
+ "outputs": [],
+ "stateMutability": "nonpayable",
+ "type": "function"
+ }
+]
diff --git a/external/cow-sdk/examples/cra/src/pages/smartContractWallet/const.ts b/external/cow-sdk/examples/cra/src/pages/smartContractWallet/const.ts
new file mode 100644
index 000000000..d19c05c7c
--- /dev/null
+++ b/external/cow-sdk/examples/cra/src/pages/smartContractWallet/const.ts
@@ -0,0 +1,13 @@
+import GPv2SettlementAbi from './GPv2Settlement.json'
+import { SupportedChainId } from '@cowprotocol/cow-sdk'
+
+export const SETTLEMENT_CONTRACT_ADDRESS = '0x9008D19f58AAbD9eD0D60971565AA8510560ab41'
+
+export const SETTLEMENT_CONTRACT_ABI = GPv2SettlementAbi
+
+export const SAFE_TRANSACTION_SERVICE_URL: Record
+
+
+
+
+
+ Order ID:
+
+
+
+
+
+
+ )
+}
diff --git a/external/cow-sdk/examples/cra/src/pages/smartContractWallet/useSafeSdkAndKit.ts b/external/cow-sdk/examples/cra/src/pages/smartContractWallet/useSafeSdkAndKit.ts
new file mode 100644
index 000000000..35a4830f9
--- /dev/null
+++ b/external/cow-sdk/examples/cra/src/pages/smartContractWallet/useSafeSdkAndKit.ts
@@ -0,0 +1,39 @@
+import {useEffect, useState} from 'react'
+import Safe, {EthersAdapter} from '@safe-global/protocol-kit'
+import {ethers} from 'ethers'
+import SafeApiKit from '@safe-global/api-kit'
+import {SAFE_TRANSACTION_SERVICE_URL} from './const'
+import {SupportedChainId} from '@cowprotocol/cow-sdk'
+import {Web3Provider} from '@ethersproject/providers'
+
+export function useSafeSdkAndKit(safeAddress: string | null, chainId: SupportedChainId, provider: Web3Provider) {
+ const [safeSdk, setSafeSdk] = useState
+
+
+
+
+
+
+ Safe address:
+ setSafeAddress(e.target.value)}/> + +Order:
+
+
+
+ | + + | +
+ Result:+ + |
+