diff --git a/SIMPLE-INTEGRATION-README.md b/SIMPLE-INTEGRATION-README.md new file mode 100644 index 000000000..1a4a75850 --- /dev/null +++ b/SIMPLE-INTEGRATION-README.md @@ -0,0 +1,47 @@ + +# B.Protocol +The BAMM (bprotocol automatic market maker) +provides automatic rebalancing over Liquity's stability pool. + +it will swap your ETH with LUSD automaticly after the stabilty pool preforms a liquidation, +this will maximize your LQTY gains as the stability pool only rewards LUSD deposits + +## integrating the BAMM with existing Liquity frontends and interfaces +any existing LQTY front end can integrate the BAMM into their interface to gain extra fees from the rebalancing process, +read more to learn about the verious integration options + +1) integrating directly with the smart contract like [pickle.finance](https://app.pickle.finance/farms) did + +2) Front-End intgration using our widgets and snipets, +the quicker & simpler approch + +## BAMM front-end integration +there are sevral ways to integrate our front-end with your exsiting front end and we will demonstrate a few options. + +1) integrate our front end as a widget into an exsiting page or modal window. + 1) in this example our widget in red border inside the original liquity app [widget example](https://integration-example-3.bprotocol.workers.dev) + +1) integrate our front-end as a page in your exsiting app. + 1) click on the red B.PROTOCOL navigation link to see our widget in red border as a page of the original liquity app [page example](https://integration-example-1.bprotocol.workers.dev/) + +1) integrate our front-end as a separate single page application linked to your website + 1) click on the red B.PROTOCOL navigation link to see the SPA on the same domain using the same meta mask connection [seperate singel page application example](https://integration-example-2.bprotocol.workers.dev/) + +### steps to integrate our front-end in your exsiting app +1) git clone the repo +2) install and compile all TS files run ```yarn install``` +5) find mainnet.json addresses file change the BAMM address in to your version of the BAMM contract +6) ```cd packages/dev-frontend``` +6) run ```yarn start``` to test that the app is working as expected. +7) in package.json change "homepage" property to what ever directory name you wish to serve our widget from +8) ```yarn build``` +9) upload the contents of the build folder to your website/app hosting under the directory you chose as the "homepage" +10) use one of these snipets to embad in your website/app + + 1) page in app: `````` + 2) widget: `````` + 3) or a simple link: ```bamm``` + +for questions or other integration options please reach out on our [Discord channel](https://discord.com/invite/bJ4guuw) + + diff --git a/package.json b/package.json index d046dd94e..e80af426d 100644 --- a/package.json +++ b/package.json @@ -1,4 +1,5 @@ { + "version": "1.1.1", "name": "liquity", "private": true, "workspaces": { diff --git a/packages/dev-frontend/src/LiquityFrontend.tsx b/packages/dev-frontend/src/LiquityFrontend.tsx index f79af3597..8614b8a8b 100644 --- a/packages/dev-frontend/src/LiquityFrontend.tsx +++ b/packages/dev-frontend/src/LiquityFrontend.tsx @@ -16,11 +16,24 @@ import { PageSwitcher } from "./pages/PageSwitcher"; import { Farm } from "./pages/Farm"; import { RiskyTrovesPage } from "./pages/RiskyTrovesPage"; import { RedemptionPage } from "./pages/RedemptionPage"; +import { JustSP } from "./pages/JustSP"; import { TroveViewProvider } from "./components/Trove/context/TroveViewProvider"; import { StabilityViewProvider } from "./components/Stability/context/StabilityViewProvider"; import { StakingViewProvider } from "./components/Staking/context/StakingViewProvider"; import { FarmViewProvider } from "./components/Farm/context/FarmViewProvider"; +import { ConnectPage } from "./components/ConnectPage" + +const fullPageStyle = { + position: "fixed", + margin: 0, + display: "block", + top: 0, + left: 0, + width: "100%", + height: "100%", + zIndex: 1 +} as React.CSSProperties; type LiquityFrontendProps = { loader?: React.ReactNode; @@ -68,6 +81,14 @@ export const LiquityFrontend: React.FC = ({ loader }) => { + + + + +
+ +
+ diff --git a/packages/dev-frontend/src/components/ConnectPage.tsx b/packages/dev-frontend/src/components/ConnectPage.tsx index 160d77518..257208dbf 100644 --- a/packages/dev-frontend/src/components/ConnectPage.tsx +++ b/packages/dev-frontend/src/components/ConnectPage.tsx @@ -38,7 +38,7 @@ const Item: React.FC = ({icon, title, text, link}) => { height: "73px", }, }}> - + = ({children}) => { }, }}> Stabilize
Liquity Protocol} text="B.Protocol v2 and its novel Backstop AMM (B.AMM) automates the rebalancing of Liquity Stability Pool to maintain its strength. Read more on how the Liquity @@ -226,7 +226,7 @@ export const ConnectPage: React.FC = ({children}) => { link="https://docs.liquity.org/faq/stability-pool-and-liquidations" /> Get Passive
Yield on Your LUSD} text="By using B.Protocol to deposit your LUSD into Liquity Stability Pool, you can save the manual operation of selling your accumulated ETH back to LUSD every time a liquidation is taking place. @@ -234,9 +234,9 @@ export const ConnectPage: React.FC = ({children}) => { link="https://medium.com/b-protocol/b-protocol-liquity-integration-is-live-1342605e7cfb" /> Using
- B.Protocl V2} + B.Protocol V2} text="The integration of Liqity with B.Protocol v2 is a step forward towards a more stabilized DeFi ecosystem. Read more about the novel B.AMM design that enables that" link="https://medium.com/b-protocol/b-amm-efficient-automated-market-maker-for-defi-liquidations-fea7b0fdc0c5" diff --git a/packages/dev-frontend/src/components/Header.tsx b/packages/dev-frontend/src/components/Header.tsx index 8c41528e2..6e83f2692 100644 --- a/packages/dev-frontend/src/components/Header.tsx +++ b/packages/dev-frontend/src/components/Header.tsx @@ -15,13 +15,24 @@ const select = ({ frontend }: LiquityStoreState) => ({ frontend }); +const shouldHideNav = () => { + const searchString = window.location.href.split("?")[1] + const urlParams = new URLSearchParams(searchString); + const hideNav = urlParams.get('hideNav'); + console.log("=============================") + console.log({hideNav}) + return !!hideNav +} + export const Header: React.FC = ({ children }) => { const { config: { frontendTag } } = useLiquity(); const { frontend } = useLiquitySelector(select); const isFrontendRegistered = frontendTag === AddressZero || frontend.status === "registered"; - + if(shouldHideNav()){ + return null + } return ( diff --git a/packages/dev-frontend/src/components/LiquityLogo.tsx b/packages/dev-frontend/src/components/LiquityLogo.tsx index 5fd835ad0..63cae1082 100644 --- a/packages/dev-frontend/src/components/LiquityLogo.tsx +++ b/packages/dev-frontend/src/components/LiquityLogo.tsx @@ -7,6 +7,6 @@ type LiquityLogoProps = React.ComponentProps & { export const LiquityLogo: React.FC = ({ height, ...boxProps }) => ( - + ); diff --git a/packages/dev-frontend/src/components/Stability/ActiveDeposit.tsx b/packages/dev-frontend/src/components/Stability/ActiveDeposit.tsx index fa604c91b..853a312b4 100644 --- a/packages/dev-frontend/src/components/Stability/ActiveDeposit.tsx +++ b/packages/dev-frontend/src/components/Stability/ActiveDeposit.tsx @@ -15,6 +15,7 @@ import { useStabilityView } from "./context/StabilityViewContext"; import { RemainingLQTY } from "./RemainingLQTY"; import { Yield } from "./Yield"; import { InfoIcon } from "../InfoIcon"; +import { justSpStyle, StabilityProps } from "./Stability" const selector = ({ stabilityDeposit, trove, lusdInStabilityPool }: LiquityStoreState) => ({ stabilityDeposit, @@ -22,7 +23,7 @@ const selector = ({ stabilityDeposit, trove, lusdInStabilityPool }: LiquityStore lusdInStabilityPool }); -export const ActiveDeposit: React.FC = () => { +export const ActiveDeposit: React.FC = ({justSP}) => { const { dispatchEvent } = useStabilityView(); const { stabilityDeposit, trove, lusdInStabilityPool } = useLiquitySelector(selector); @@ -50,8 +51,9 @@ export const ActiveDeposit: React.FC = () => { const ethDiffInUsd = stabilityDeposit.currentUSD.sub(stabilityDeposit.currentLUSD) const ethIsImportant = (ethDiffInUsd.div(stabilityDeposit.currentUSD)).gt(1/1000) + const style = justSP ? justSpStyle : {} return ( - + Stability Pool {!isWaitingForTransaction && ( diff --git a/packages/dev-frontend/src/components/Stability/NoDeposit.tsx b/packages/dev-frontend/src/components/Stability/NoDeposit.tsx index 11e0db2b8..d65c2ff6c 100644 --- a/packages/dev-frontend/src/components/Stability/NoDeposit.tsx +++ b/packages/dev-frontend/src/components/Stability/NoDeposit.tsx @@ -1,5 +1,5 @@ import React, { useCallback, useState, useEffect } from "react"; -import { Card, Heading, Box, Flex, Button, Container, Close, Text } from "theme-ui"; +import { Card, Heading, Box, Flex, Button, Container, Close, Text, Paragraph } from "theme-ui"; import { InfoMessage } from "../InfoMessage"; import { useStabilityView } from "./context/StabilityViewContext"; import { RemainingLQTY } from "./RemainingLQTY"; @@ -7,10 +7,12 @@ import { Yield } from "./Yield"; import { useLiquitySelector } from "@liquity/lib-react"; import { useTransactionFunction } from "../Transaction"; import { useLiquity } from "./../../hooks/LiquityContext"; +import { justSpStyle, StabilityProps } from "./Stability"; +import { InfoIcon } from "../InfoIcon"; - -const selector = ( {bammAllowance}: any) => ({ - bammAllowance +const selector = ( {bammAllowance, lusdBalance}: any) => ({ + bammAllowance, + lusdBalance }); export const UnlockButton: React.FC = props => { @@ -33,17 +35,18 @@ export const UnlockButton: React.FC = props => { ) } -export const NoDeposit: React.FC = props => { +export const NoDeposit: React.FC = props => { const { liquity } = useLiquity(); - const { bammAllowance } = useLiquitySelector(selector); + const { bammAllowance, lusdBalance } = useLiquitySelector(selector); const { dispatchEvent } = useStabilityView(); const handleOpenTrove = useCallback(() => { dispatchEvent("DEPOSIT_PRESSED"); }, [dispatchEvent]); + const style = props.justSP ? justSpStyle : {} return ( - + Stability Pool @@ -53,6 +56,19 @@ export const NoDeposit: React.FC = props => { You can earn LUSD and LQTY rewards by depositing LUSD. +
+ {lusdBalance == '0' && + You can mint LUSD here + + + Deposit your LUSD only via B.Protocol for automated rebalancing. + + + } + > + } diff --git a/packages/dev-frontend/src/components/Stability/Stability.tsx b/packages/dev-frontend/src/components/Stability/Stability.tsx index 0951bbabe..277033a58 100644 --- a/packages/dev-frontend/src/components/Stability/Stability.tsx +++ b/packages/dev-frontend/src/components/Stability/Stability.tsx @@ -4,7 +4,22 @@ import { ActiveDeposit } from "./ActiveDeposit"; import { NoDeposit } from "./NoDeposit"; import { useStabilityView } from "./context/StabilityViewContext"; -export const Stability: React.FC = props => { +export type StabilityProps = { + justSP?: boolean, +}; + +export const justSpStyle = { + position: "fixed", + margin: [0, 0, 0], + display: "block", + top: "0", + left: "0", + width: "100%", + height: "100%", + zIndex: "1" +} + +export const Stability: React.FC = props => { const { view } = useStabilityView(); switch (view) { diff --git a/packages/dev-frontend/src/components/Stability/StabilityDepositEditor.tsx b/packages/dev-frontend/src/components/Stability/StabilityDepositEditor.tsx index f5e8d93ab..31ef34403 100644 --- a/packages/dev-frontend/src/components/Stability/StabilityDepositEditor.tsx +++ b/packages/dev-frontend/src/components/Stability/StabilityDepositEditor.tsx @@ -24,6 +24,7 @@ import { Icon } from "../Icon"; import { EditableRow, StaticRow } from "../Trove/Editor"; import { LoadingOverlay } from "../LoadingOverlay"; import { InfoIcon } from "../InfoIcon"; +import { justSpStyle } from "./Stability" const select = ({ lusdBalance, lusdInStabilityPool, stabilityDeposit }: LiquityStoreState) => ({ lusdBalance, @@ -36,6 +37,7 @@ type StabilityDepositEditorProps = { editedUSD: Decimal; changePending: boolean; dispatch: (action: { type: "setDeposit"; newValue: Decimalish } | { type: "revert" }) => void; + justSP?: boolean; }; const selectPrice = ({ price }: LiquityStoreState) => price; @@ -45,7 +47,8 @@ export const StabilityDepositEditor: React.FC = ({ editedUSD, changePending, dispatch, - children + children, + justSP }) => { const { lusdBalance, lusdInStabilityPool, stabilityDeposit } = useLiquitySelector(select); const editingState = useState(); @@ -128,8 +131,9 @@ export const StabilityDepositEditor: React.FC = ({ const showOverlay = changePending || waitingForTransaction const showResetButton = edited && !showOverlay + const style = justSP ? justSpStyle : {} return ( - + Stability Pool {showResetButton && ( diff --git a/packages/dev-frontend/src/components/Stability/StabilityDepositManager.tsx b/packages/dev-frontend/src/components/Stability/StabilityDepositManager.tsx index 2f703aab1..9dadce5f7 100644 --- a/packages/dev-frontend/src/components/Stability/StabilityDepositManager.tsx +++ b/packages/dev-frontend/src/components/Stability/StabilityDepositManager.tsx @@ -16,6 +16,7 @@ import { selectForStabilityDepositChangeValidation, validateStabilityDepositChange } from "./validation/validateStabilityDepositChange"; +import { StabilityProps } from "./Stability" const init = ({ stabilityDeposit }: LiquityStoreState) => ({ originalDeposit: stabilityDeposit, @@ -94,7 +95,7 @@ const reduce = ( const transactionId = "stability-deposit"; -export const StabilityDepositManager: React.FC = () => { +export const StabilityDepositManager: React.FC = ({justSP}) => { const [{ originalDeposit, editedUSD, changePending }, dispatch] = useLiquityReducer(reduce, init); const validationContext = useLiquitySelector(selectForStabilityDepositChangeValidation); const { dispatchEvent } = useStabilityView(); @@ -133,6 +134,7 @@ export const StabilityDepositManager: React.FC = () => { editedUSD={editedUSD} changePending={changePending} dispatch={dispatch} + justSP={justSP} > diff --git a/packages/dev-frontend/src/pages/JustSP.tsx b/packages/dev-frontend/src/pages/JustSP.tsx new file mode 100644 index 000000000..af1e1f908 --- /dev/null +++ b/packages/dev-frontend/src/pages/JustSP.tsx @@ -0,0 +1,8 @@ +import { Container } from "theme-ui"; + +import { Trove } from "../components/Trove/Trove"; +import { Stability } from "../components/Stability/Stability"; + +export const JustSP: React.FC = () => ( + +); \ No newline at end of file diff --git a/packages/lib-ethers/src/EthersLiquityConnection.ts b/packages/lib-ethers/src/EthersLiquityConnection.ts index ed25d99d7..9ffd3eb3a 100644 --- a/packages/lib-ethers/src/EthersLiquityConnection.ts +++ b/packages/lib-ethers/src/EthersLiquityConnection.ts @@ -41,6 +41,15 @@ declare const brand: unique symbol; const branded = (t: Omit): T => t as T; +const getExternalBamm = () => { + const searchString = window.location.href.split("?")[1] + const urlParams = new URLSearchParams(searchString); + const externalBammAddress = urlParams.get('bamm'); + console.log("=============================") + console.log({externalBammAddress}) + return externalBammAddress +} + /** * Information about a connection to the Liquity protocol. * @@ -309,6 +318,10 @@ export function _connectByChainId( ): EthersLiquityConnection { const deployment: _LiquityDeploymentJSON = deployments[chainId] ?? panic(new UnsupportedNetworkError(chainId)); + const externalBamm = getExternalBamm() + if(deployment.addresses.bamm && externalBamm){ + deployment.addresses.bamm = externalBamm; + } return connectionFrom( provider,