Add page MVP UI + v3 pool hooks and state (Uniswap#35)

* WIP start usePool and useDerivedMint hooks * naming updates * Use real tick and pool math * rate updates * WIP start usePool and useDerivedMint hooks * naming updates * Use real tick and pool math * rate updates * fix warnings * fix incorrect import * clean up state, fix preview * same token check * amoutn parse update * update hard coded chain id * fix price creation in util * update 1 amount in price calculation * update comments * update tick spacing input * fix label on counter * update rate label on range select * update labels * fixing pool hook * clean pool hook * preserve working rate switching * reset values on rate switch * clean up derived hook - setup for testnet * format slippage amounts and support ETH * fix import error * fix package.json dependencies * silence warnings * silence more warnings * bump multicodec and multihashes * update migrator constants * update txn to use sdk calldata * fix txn formatting, update summary * Squashed commit of the following: commit b81ff7ca9e57bb8c3823be4c54827e5955fb3d15 Author: ianlapham <[email protected]> Date: Mon Apr 12 23:46:09 2021 -0400 fix txn formatting, update summary commit b9f91b0746c546602d336c8fd6f614ec9b4f3f19 Author: ianlapham <[email protected]> Date: Mon Apr 12 19:29:12 2021 -0400 update txn to use sdk calldata commit 20acf704c67cfd4f597494c8cb9c672c6270ae02 Merge: 4431914 2462901 Author: ianlapham <[email protected]> Date: Sun Apr 11 20:33:39 2021 -0400 Merge branch 'minting' of https://github.com/Uniswap/v3-interface into minting commit 44319146372e1c373b025741ae896fa2476e5765 Author: ianlapham <[email protected]> Date: Sun Apr 11 20:32:35 2021 -0400 update migrator constants commit 35e0618de06ba316d3a3f327075625760414ab83 Merge: 8927882 c3f65e3 Author: ianlapham <[email protected]> Date: Sun Apr 11 20:13:36 2021 -0400 Merge branch 'main' of https://github.com/Uniswap/v3-interface into minting commit 24629019e80c368c337a2679a51d4acb1097171c Author: Noah Zinsmeister <[email protected]> Date: Fri Apr 9 15:56:25 2021 -0400 bump multicodec and multihashes commit 9b5dd1876a64acbf6694d208b608bb0b429e317f Author: Noah Zinsmeister <[email protected]> Date: Fri Apr 9 14:59:09 2021 -0400 silence more warnings commit 140ddc1b54c7fbdd7ead2fa64bcc302f201d69f5 Author: Noah Zinsmeister <[email protected]> Date: Fri Apr 9 14:57:58 2021 -0400 silence warnings commit 5a2726ebdd4ffaacfb3d8ec7903a944042c1bd9d Author: Noah Zinsmeister <[email protected]> Date: Fri Apr 9 14:35:01 2021 -0400 fix package.json dependencies commit 7c4d0a40931338de9a6197652b82fdab773483e3 Author: Noah Zinsmeister <[email protected]> Date: Fri Apr 9 14:21:46 2021 -0400 fix import error commit e49ef19cbef7fbdf1737787a439e7cb78ba295b4 Merge: 8927882 c3f65e3 Author: Noah Zinsmeister <[email protected]> Date: Fri Apr 9 14:08:34 2021 -0400 Merge branch 'main' into minting commit 89278825bd798a87d6010a74f8fc1d2b34a8ece1 Author: ianlapham <[email protected]> Date: Thu Apr 8 15:18:40 2021 -0400 format slippage amounts and support ETH commit 9a90b19e9a759cbc0c3e903a983660730c8833ad Author: ianlapham <[email protected]> Date: Wed Apr 7 19:43:43 2021 -0400 clean up derived hook - setup for testnet commit dc034bc78a147f95f47b077d28a7d6e3165cedd7 Author: ianlapham <[email protected]> Date: Wed Apr 7 00:48:24 2021 -0400 reset values on rate switch commit bb5ccb2c853f7b2c27ec8d2f34f42a1b06f845b9 Author: ianlapham <[email protected]> Date: Wed Apr 7 00:38:39 2021 -0400 preserve working rate switching commit 5312d0ae7015150da48ba304de8c7a02b7d8925c Author: ianlapham <[email protected]> Date: Mon Apr 5 13:52:46 2021 -0400 clean pool hook commit 5222de14834e76c37755225be17214a6e798d872 Merge: b2ba466 24521f0 Author: ianlapham <[email protected]> Date: Mon Apr 5 12:20:34 2021 -0400 Merge branch 'main' of https://github.com/Uniswap/v3-interface into minting commit b2ba46684a7b0bd8a8362f5990f4a208bfeff2dd Author: ianlapham <[email protected]> Date: Mon Apr 5 12:19:20 2021 -0400 fixing pool hook commit b10742af99a725e04c1b756aa20f99e995f8cfeb Author: ianlapham <[email protected]> Date: Thu Apr 1 16:53:52 2021 -0400 update labels commit 05abd395949245596c95090a9d5d77c7c272dbd3 Author: ianlapham <[email protected]> Date: Thu Apr 1 15:34:17 2021 -0400 update rate label on range select commit f098d01b6f4dc1dcb99e0fa314dde93647a19bb6 Author: ianlapham <[email protected]> Date: Thu Apr 1 15:26:30 2021 -0400 fix label on counter commit 16ffe61e8ee2b677adf5d468efa9d7aa8d7e092e Author: ianlapham <[email protected]> Date: Thu Apr 1 15:06:50 2021 -0400 update tick spacing input commit 0fa2c8a15821dd32ec978750991a962ecb8f7344 Author: ianlapham <[email protected]> Date: Thu Apr 1 14:53:18 2021 -0400 update comments commit 1fccf57a1ef081ef6ba9790dc20e0ed604ac2b09 Author: ianlapham <[email protected]> Date: Thu Apr 1 14:52:37 2021 -0400 update 1 amount in price calculation commit b0e5d22bf8c57b3eacd75f077f68aaca4a9f975a Author: ianlapham <[email protected]> Date: Thu Apr 1 14:46:41 2021 -0400 fix price creation in util commit 1ce246e85372e4f120f983ca18a1eb3d16e8647e Author: ianlapham <[email protected]> Date: Thu Apr 1 13:55:14 2021 -0400 update hard coded chain id commit 2360b2d0a3233b604956e89de4bd7b09c0506875 Author: ianlapham <[email protected]> Date: Thu Apr 1 13:09:21 2021 -0400 amoutn parse update commit 6a99a7b71fe446fe77cb2741adce4c067862ca4a Author: ianlapham <[email protected]> Date: Thu Apr 1 13:05:41 2021 -0400 same token check commit 83a1fd5a9ff02c6a49532cb54a57770b52fc052e Author: ianlapham <[email protected]> Date: Thu Apr 1 12:31:21 2021 -0400 clean up state, fix preview commit 8592383b8386d7adbbaeaa2c6f9c36bb121d1c65 Author: ianlapham <[email protected]> Date: Wed Mar 31 22:47:56 2021 -0400 fix incorrect import commit ce526fd545e52142f847dbf3caec1ca37bb0650b Author: ianlapham <[email protected]> Date: Wed Mar 31 22:36:10 2021 -0400 fix warnings commit 572770fd3e000ce31cd3a6c5c5c91eac92cc8c5c Merge: a9e5b6c 2677491 Author: ianlapham <[email protected]> Date: Wed Mar 31 22:16:30 2021 -0400 Merge branch 'minting' of https://github.com/Uniswap/v3-interface into minting commit a9e5b6c5e5983e279a640886783f97c33b713125 Author: ianlapham <[email protected]> Date: Wed Mar 31 22:12:43 2021 -0400 rate updates commit b88cab6c06176eefe5cf71f7cc3e3664d9f514ab Author: ianlapham <[email protected]> Date: Wed Mar 31 16:15:08 2021 -0400 Use real tick and pool math commit ed933cfd17141174c03b0bcac5f41cf75ff9b258 Author: ianlapham <[email protected]> Date: Sun Mar 28 22:42:05 2021 -0400 naming updates commit 50c0a0ece5c6c66a603508529c5e7a28f45db632 Author: ianlapham <[email protected]> Date: Sun Mar 28 22:36:08 2021 -0400 WIP start usePool and useDerivedMint hooks commit 2677491e2128e1318a0dd4307e63069e0f8e1dfe Author: ianlapham <[email protected]> Date: Wed Mar 31 22:12:43 2021 -0400 rate updates commit c2f59d6c61068a2bf4d34d102d5d28c9863ce982 Author: ianlapham <[email protected]> Date: Wed Mar 31 16:15:08 2021 -0400 Use real tick and pool math commit 7d53e5c7e979be19fc5c63eb52307f302328c4eb Author: ianlapham <[email protected]> Date: Sun Mar 28 22:42:05 2021 -0400 naming updates commit 9022650d391682f97e71d336021c2db2e5ea5455 Author: ianlapham <[email protected]> Date: Sun Mar 28 22:36:08 2021 -0400 WIP start usePool and useDerivedMint hooks * remove 1337 references * clean up multicall * clean up redirects/router * cleanup * improve useAllV3Ticks * fix multicall * typo * Fix code style issues with ESLint * preserve sticky * reset to non fixed scroll * fix inputs at 1 * update tests * fix routes * sticky sidebar Co-authored-by: Noah Zinsmeister <[email protected]> Co-authored-by: Lint Action <[email protected]> Co-authored-by: Callil Capuozzo <[email protected]>
kunkun073 · Apr 14, 2021 · 0c0305a · 0c0305a
1 parent c3f65e3
commit 0c0305a
Show file tree

Hide file tree

Showing 63 changed files with 4,957 additions and 3,789 deletions.
diff --git a/.env b/.env
@@ -1,2 +1,3 @@
 REACT_APP_CHAIN_ID="1"
-REACT_APP_NETWORK_URL="https://mainnet.infura.io/v3/4bf032f2d38a4ed6bb975b80d6340847"
+REACT_APP_NETWORK_URL="https://mainnet.infura.io/v3/4bf032f2d38a4ed6bb975b80d6340847"
+SKIP_PREFLIGHT_CHECK=true
diff --git a/cypress/integration/add-liquidity.test.ts b/cypress/integration/add-liquidity.test.ts
@@ -1,18 +1,18 @@
 describe('Add Liquidity', () => {
   it('loads the two correct tokens', () => {
-    cy.visit('/add/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85-0xc778417E063141139Fce010982780140Aa0cD5Ab')
+    cy.visit('/add/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85/0xc778417E063141139Fce010982780140Aa0cD5Ab/500')
     cy.get('#add-liquidity-input-tokena .token-symbol-container').should('contain.text', 'MKR')
     cy.get('#add-liquidity-input-tokenb .token-symbol-container').should('contain.text', 'ETH')
   })
 
   it('does not crash if ETH is duplicated', () => {
-    cy.visit('/add/0xc778417E063141139Fce010982780140Aa0cD5Ab-0xc778417E063141139Fce010982780140Aa0cD5Ab')
+    cy.visit('/add/0xc778417E063141139Fce010982780140Aa0cD5Ab/0xc778417E063141139Fce010982780140Aa0cD5Ab')
     cy.get('#add-liquidity-input-tokena .token-symbol-container').should('contain.text', 'ETH')
     cy.get('#add-liquidity-input-tokenb .token-symbol-container').should('not.contain.text', 'ETH')
   })
 
   it('token not in storage is loaded', () => {
-    cy.visit('/add/0xb290b2f9f8f108d03ff2af3ac5c8de6de31cdf6d-0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85')
+    cy.visit('/add/0xb290b2f9f8f108d03ff2af3ac5c8de6de31cdf6d/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85')
     cy.get('#add-liquidity-input-tokena .token-symbol-container').should('contain.text', 'SKL')
     cy.get('#add-liquidity-input-tokenb .token-symbol-container').should('contain.text', 'MKR')
   })
@@ -23,28 +23,4 @@ describe('Add Liquidity', () => {
     cy.visit('/add/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85')
     cy.get('#add-liquidity-input-tokena .token-symbol-container').should('contain.text', 'MKR')
   })
-
-  it('redirects /add/token-token to add/token/token', () => {
-    cy.visit('/add/0xb290b2f9f8f108d03ff2af3ac5c8de6de31cdf6d-0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85')
-    cy.url().should(
-      'contain',
-      '/add/0xb290b2f9f8f108d03ff2af3ac5c8de6de31cdf6d/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85'
-    )
-  })
-
-  it('redirects /add/WETH-token to /add/WETH-address/token', () => {
-    cy.visit('/add/0xc778417E063141139Fce010982780140Aa0cD5Ab-0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85')
-    cy.url().should(
-      'contain',
-      '/add/0xc778417E063141139Fce010982780140Aa0cD5Ab/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85'
-    )
-  })
-
-  it('redirects /add/token-WETH to /add/token/WETH-address', () => {
-    cy.visit('/add/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85-0xc778417E063141139Fce010982780140Aa0cD5Ab')
-    cy.url().should(
-      'contain',
-      '/add/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85/0xc778417E063141139Fce010982780140Aa0cD5Ab'
-    )
-  })
 })
diff --git a/package.json b/package.json
@@ -37,19 +37,20 @@
     "@types/styled-components": "^5.1.0",
     "@types/testing-library__cypress": "^5.0.5",
     "@types/wcag-contrast": "^3.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.20.0",
-    "@typescript-eslint/parser": "^4.20.0",
+    "@typescript-eslint/eslint-plugin": "^4.1.0",
+    "@typescript-eslint/parser": "^4.1.0",
     "@uniswap/default-token-list": "^2.0.0",
     "@uniswap/governance": "^1.0.2",
     "@uniswap/liquidity-staker": "^1.0.2",
     "@uniswap/merkle-distributor": "1.0.1",
-    "@uniswap/sdk-core": "^1.0.8",
+    "@uniswap/sdk-core": "^1.0.9",
     "@uniswap/token-lists": "^1.0.0-beta.19",
     "@uniswap/v2-core": "1.0.0",
     "@uniswap/v2-periphery": "^1.1.0-beta.0",
     "@uniswap/v2-sdk": "^1.0.6",
     "@uniswap/v3-core": "^1.0.0-rc.0",
-    "@uniswap/v3-periphery": "^1.0.0-beta.12",
+    "@uniswap/v3-periphery": "^1.0.0-beta.17",
+    "@uniswap/v3-sdk": "^1.0.0-alpha.11",
     "@web3-react/core": "^6.0.9",
     "@web3-react/fortmatic-connector": "^6.0.9",
     "@web3-react/injected-connector": "^6.0.7",
@@ -75,8 +76,8 @@
     "lightweight-charts": "^3.3.0",
     "lodash.flatmap": "^4.5.0",
     "luxon": "^1.25.0",
-    "multicodec": "^2.0.0",
-    "multihashes": "^3.0.1",
+    "multicodec": "^3.0.1",
+    "multihashes": "^4.0.2",
     "node-vibrant": "^3.1.5",
     "polished": "^3.3.2",
     "prettier": "^2.2.1",
@@ -92,7 +93,7 @@
     "react-popper": "^2.2.3",
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.0.0",
-    "react-scripts": "^4.0.2",
+    "react-scripts": "^4.0.3",
     "react-spring": "^8.0.27",
     "react-use-gesture": "^6.0.14",
     "react-virtualized-auto-sizer": "^1.0.2",

diff --git a/public/locales/en.json b/public/locales/en.json
@@ -91,14 +91,14 @@
   "selectFee": "Select Fee",
   "selectLiquidityRange": "Select Liquidity Range",
   "selectPool": "Select Fee Tier",
-  "inputTokens": "Input Tokens",
+  "depositAmounts": "Deposit Amounts",
   "fee": "fee",
   "setLimits": "Set Limits",
   "percent": "Percent",
   "rate": "Rate",
-  "currentRate": "Current {{label}} Rate:",
+  "currentRate": "Current {{label}} Price:",
   "inactiveRangeWarning": "Your position will not be active or earn fees until the selected rates come into range.",
-  "invalidRangeWarning": "Invalid Range",
+  "invalidRangeWarning": "Invalid Range entered. Lower range must be lower than upper range.",
   "connectWallet": "Connect Wallet",
   "unsupportedAsset": "Unsupported Asset",
   "feePool": "Fee Pool",
@@ -109,6 +109,8 @@
   "poolType": "Select a fee tier based on your preferred liquidity provider fee.",
   "rangeWarning": "Your liquidity will only be active and earning fees when the rate of the pool is within this price range.",
   "chooseLiquidityAmount": "Choose an amount of tokens to open this liquidity position. If you don’t have enough tokens you can trade for them with a Swap.",
-  "selectPriceLimits": "Select Price Limits",
-  "inputTokenDynamic": "Input {{label}}"
+  "selectRange": "Select Liquidity Range",
+  "inputTokenDynamic": "Input {{label}}",
+  "selectStartingPrice": "Select Starting Price",
+  "newPoolPrice": "Select the market rate for the tokens being added."
 }
diff --git a/src/abis/multicall2.json b/src/abis/multicall2.json
@@ -0,0 +1,165 @@
+[
+  {
+    "inputs": [
+      {
+        "components": [
+          { "internalType": "address", "name": "target", "type": "address" },
+          { "internalType": "bytes", "name": "callData", "type": "bytes" }
+        ],
+        "internalType": "struct Multicall2.Call[]",
+        "name": "calls",
+        "type": "tuple[]"
+      }
+    ],
+    "name": "aggregate",
+    "outputs": [
+      { "internalType": "uint256", "name": "blockNumber", "type": "uint256" },
+      { "internalType": "bytes[]", "name": "returnData", "type": "bytes[]" }
+    ],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "components": [
+          { "internalType": "address", "name": "target", "type": "address" },
+          { "internalType": "bytes", "name": "callData", "type": "bytes" }
+        ],
+        "internalType": "struct Multicall2.Call[]",
+        "name": "calls",
+        "type": "tuple[]"
+      }
+    ],
+    "name": "blockAndAggregate",
+    "outputs": [
+      { "internalType": "uint256", "name": "blockNumber", "type": "uint256" },
+      { "internalType": "bytes32", "name": "blockHash", "type": "bytes32" },
+      {
+        "components": [
+          { "internalType": "bool", "name": "success", "type": "bool" },
+          { "internalType": "bytes", "name": "returnData", "type": "bytes" }
+        ],
+        "internalType": "struct Multicall2.Result[]",
+        "name": "returnData",
+        "type": "tuple[]"
+      }
+    ],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [{ "internalType": "uint256", "name": "blockNumber", "type": "uint256" }],
+    "name": "getBlockHash",
+    "outputs": [{ "internalType": "bytes32", "name": "blockHash", "type": "bytes32" }],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "getBlockNumber",
+    "outputs": [{ "internalType": "uint256", "name": "blockNumber", "type": "uint256" }],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "getCurrentBlockCoinbase",
+    "outputs": [{ "internalType": "address", "name": "coinbase", "type": "address" }],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "getCurrentBlockDifficulty",
+    "outputs": [{ "internalType": "uint256", "name": "difficulty", "type": "uint256" }],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "getCurrentBlockGasLimit",
+    "outputs": [{ "internalType": "uint256", "name": "gaslimit", "type": "uint256" }],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "getCurrentBlockTimestamp",
+    "outputs": [{ "internalType": "uint256", "name": "timestamp", "type": "uint256" }],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [{ "internalType": "address", "name": "addr", "type": "address" }],
+    "name": "getEthBalance",
+    "outputs": [{ "internalType": "uint256", "name": "balance", "type": "uint256" }],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "getLastBlockHash",
+    "outputs": [{ "internalType": "bytes32", "name": "blockHash", "type": "bytes32" }],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      { "internalType": "bool", "name": "requireSuccess", "type": "bool" },
+      {
+        "components": [
+          { "internalType": "address", "name": "target", "type": "address" },
+          { "internalType": "bytes", "name": "callData", "type": "bytes" }
+        ],
+        "internalType": "struct Multicall2.Call[]",
+        "name": "calls",
+        "type": "tuple[]"
+      }
+    ],
+    "name": "tryAggregate",
+    "outputs": [
+      {
+        "components": [
+          { "internalType": "bool", "name": "success", "type": "bool" },
+          { "internalType": "bytes", "name": "returnData", "type": "bytes" }
+        ],
+        "internalType": "struct Multicall2.Result[]",
+        "name": "returnData",
+        "type": "tuple[]"
+      }
+    ],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      { "internalType": "bool", "name": "requireSuccess", "type": "bool" },
+      {
+        "components": [
+          { "internalType": "address", "name": "target", "type": "address" },
+          { "internalType": "bytes", "name": "callData", "type": "bytes" }
+        ],
+        "internalType": "struct Multicall2.Call[]",
+        "name": "calls",
+        "type": "tuple[]"
+      }
+    ],
+    "name": "tryBlockAndAggregate",
+    "outputs": [
+      { "internalType": "uint256", "name": "blockNumber", "type": "uint256" },
+      { "internalType": "bytes32", "name": "blockHash", "type": "bytes32" },
+      {
+        "components": [
+          { "internalType": "bool", "name": "success", "type": "bool" },
+          { "internalType": "bytes", "name": "returnData", "type": "bytes" }
+        ],
+        "internalType": "struct Multicall2.Result[]",
+        "name": "returnData",
+        "type": "tuple[]"
+      }
+    ],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  }
+]
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -231,7 +231,8 @@ export const ButtonText = styled(Base)`
     text-decoration: underline;
   }
   &:hover {
-    text-decoration: underline;
+    // text-decoration: underline;
+    opacity: 0.9;
   }
   &:active {
     text-decoration: underline;
@@ -377,6 +378,9 @@ const Circle = styled.div`
 const CheckboxWrapper = styled.div`
   width: 30px;
   padding: 0 10px;
+  position: absolute;
+  top: 10px;
+  right: 10px;
 `
 
 export function ButtonRadioChecked({ active = false, children, ...rest }: { active?: boolean } & ButtonProps) {

diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx
@@ -48,5 +48,4 @@ export const BlueCard = styled(Card)`
   background-color: ${({ theme }) => theme.primary5};
   color: ${({ theme }) => theme.blue2};
   border-radius: 12px;
-  width: fit-content;
 `
diff --git a/src/components/CurrencyInputPanel/index.tsx b/src/components/CurrencyInputPanel/index.tsx
@@ -15,6 +15,8 @@ import { ReactComponent as DropDown } from '../../assets/images/dropdown.svg'
 import { useActiveWeb3React } from '../../hooks'
 import { useTranslation } from 'react-i18next'
 import useTheme from '../../hooks/useTheme'
+import { Lock } from 'react-feather'
+import { AutoColumn } from 'components/Column'
 
 const InputPanel = styled.div<{ hideInput?: boolean }>`
   ${({ theme }) => theme.flexColumnNoWrap}
@@ -25,6 +27,19 @@ const InputPanel = styled.div<{ hideInput?: boolean }>`
   width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
 `
 
+const FixedContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  border-radius: 20px;
+  background-color: ${({ theme }) => theme.bg1};
+  opacity: 0.95;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+`
+
 const Container = styled.div<{ hideInput: boolean }>`
   border-radius: ${({ hideInput }) => (hideInput ? '12px' : '20px')};
   border: 1px solid ${({ theme }) => theme.bg2};
@@ -134,6 +149,7 @@ interface CurrencyInputPanelProps {
   id: string
   showCommonBases?: boolean
   customBalanceText?: string
+  locked?: boolean
 }
 
 export default function CurrencyInputPanel({
@@ -144,14 +160,15 @@ export default function CurrencyInputPanel({
   label = 'Input',
   onCurrencySelect,
   currency,
-  disableCurrencySelect = false,
-  hideBalance = false,
-  pair = null, // used for double token logo
-  hideInput = false,
   otherCurrency,
   id,
   showCommonBases,
   customBalanceText,
+  disableCurrencySelect = false,
+  hideBalance = false,
+  pair = null, // used for double token logo
+  hideInput = false,
+  locked = false,
   ...rest
 }: CurrencyInputPanelProps) {
   const { t } = useTranslation()
@@ -167,6 +184,14 @@ export default function CurrencyInputPanel({
 
   return (
     <InputPanel id={id} hideInput={hideInput} {...rest}>
+      {locked && (
+        <FixedContainer>
+          <AutoColumn gap="sm" justify="center">
+            <Lock />
+            <TYPE.label fontSize="12px">Single-asset deposit only, price out of range.</TYPE.label>
+          </AutoColumn>
+        </FixedContainer>
+      )}
       <Container hideInput={hideInput}>
         <InputRow style={hideInput ? { padding: '0', borderRadius: '8px' } : {}} selected={disableCurrencySelect}>
           {!hideInput && (