justSP

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: ```<iframe height="800px" width="100%" src="/"homepage"?hideNav=true" style="border: 2px solid red;"></iframe>```
+    2) widget: ```<iframe height="800px" width="100%" src="/"homepage"?widget=true" style="border: 2px solid red;"></iframe>```
+    3) or a simple link: ```<a href="homepage">bamm</a>```
+
+for questions or other integration options please reach out on our [Discord channel](https://discord.com/invite/bJ4guuw)
+
+

package.json

@@ -1,4 +1,5 @@
 {
+  "version": "1.1.1",
   "name": "liquity",
   "private": true,
   "workspaces": {

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<LiquityFrontendProps> = ({ loader }) => {
                       <Route path="/farm">
                         <Farm />
                       </Route>
+                      <Route path="/widget">
+                        <JustSP />
+                      </Route>
+                      <Route path="/explainer">
+                        <div style={fullPageStyle}>
+                          <ConnectPage />
+                        </div>
+                      </Route>
                       <Route path="/risky-troves">
                         <RiskyTrovesPage />
                       </Route>

packages/dev-frontend/src/components/ConnectPage.tsx

@@ -38,7 +38,7 @@ const Item: React.FC<ItemProps> = ({icon, title, text, link}) => {
           height: "73px",
         },
         }}>
-        <img width="100%" height="100%" src={icon}/>
+        <img width="100%" height="100%" src={process.env.PUBLIC_URL + icon}/>
       </Box>
       <Box sx={{ 
         padding: "20px", paddingLeft: "0",
@@ -218,25 +218,25 @@ export const ConnectPage: React.FC<ConnectPageProps> = ({children}) => {
           },
         }}>
         <Item
-          icon={"./bprotocol/icon-a-1.svg"}
+          icon={"/bprotocol/icon-a-1.svg"}
           title={<span>Stabilize <br/>Liquity Protocol</span>}
           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
           SP is working "
           link="https://docs.liquity.org/faq/stability-pool-and-liquidations"
         />
         <Item
-          icon={"./bprotocol/icon-a-2.svg"}
+          icon={"/bprotocol/icon-a-2.svg"}
           title={<span>Get Passive<br/>
           Yield on Your LUSD</span>}
           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.
           Read more about how it’s done"
           link="https://medium.com/b-protocol/b-protocol-liquity-integration-is-live-1342605e7cfb"
         />
         <Item
-          icon={"./bprotocol/icon-a-3.svg"}
+          icon={"/bprotocol/icon-a-3.svg"}
           title={<span>Using<br/>
-          B.Protocl V2</span>}
+          B.Protocol V2</span>}
           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"

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 (
     <Container variant="header">
       <Flex sx={{ alignItems: "center", flex: 1 }}>

packages/dev-frontend/src/components/LiquityLogo.tsx

@@ -7,6 +7,6 @@ type LiquityLogoProps = React.ComponentProps<typeof Box> & {
 
 export const LiquityLogo: React.FC<LiquityLogoProps> = ({ height, ...boxProps }) => (
   <Box sx={{ lineHeight: 0 }} {...boxProps}>
-    <Image src="./lusd-icon.png" sx={{ height }} />
+    <Image src={process.env.PUBLIC_URL + "/lusd-icon.png"} sx={{ height }} />
   </Box>
 );

packages/dev-frontend/src/components/Stability/ActiveDeposit.tsx

@@ -15,14 +15,15 @@ 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,
   trove,
   lusdInStabilityPool
 });
 
-export const ActiveDeposit: React.FC = () => {
+export const ActiveDeposit: React.FC<StabilityProps> = ({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 (
-    <Card>
+    <Card sx={style}>
       <Heading>
         Stability Pool
         {!isWaitingForTransaction && (

packages/dev-frontend/src/components/Stability/NoDeposit.tsx

@@ -1,16 +1,18 @@
 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";
 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<StabilityProps> = 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 (
-    <Card>
+    <Card sx={style}>
       <Heading>
         Stability Pool
         <Flex sx={{ justifyContent: "flex-end" }}>
@@ -53,6 +56,19 @@ export const NoDeposit: React.FC = props => {
       <Box sx={{ p: [2, 3] }}>
         <InfoMessage title="You have no LUSD in the Stability Pool.">
           You can earn LUSD and LQTY rewards by depositing LUSD.
+          <br/>
+          {lusdBalance == '0' && <span>
+            You can mint LUSD <a href="https://liquity.app/#/" target="_top">here</a>
+            <InfoIcon
+              tooltip={
+                <Card variant="tooltip" sx={{ width: ["220px", "518px"] }}>
+                  <Paragraph>
+                    Deposit your LUSD only via B.Protocol for automated rebalancing.
+                  </Paragraph>
+                </Card>
+              }
+            ></InfoIcon>
+            </span>}
         </InfoMessage>
 
         <Flex variant="layout.actions">

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<StabilityProps> = props => {
   const { view } = useStabilityView();
 
   switch (view) {

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<StabilityDepositEditorProps> = ({
   editedUSD,
   changePending,
   dispatch,
-  children
+  children,
+  justSP
 }) => {
   const { lusdBalance, lusdInStabilityPool, stabilityDeposit } = useLiquitySelector(select);
   const editingState = useState<string>();
@@ -128,8 +131,9 @@ export const StabilityDepositEditor: React.FC<StabilityDepositEditorProps> = ({
 
   const showOverlay = changePending || waitingForTransaction
   const showResetButton = edited && !showOverlay
+  const style = justSP ? justSpStyle : {}
   return (
-    <Card>
+    <Card sx={style}>
       <Heading>
         Stability Pool
         {showResetButton && (

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<StabilityProps> = ({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}
     >
 
 

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 = () => (
+  <Stability justSP={true}/>
+);

packages/lib-ethers/src/EthersLiquityConnection.ts

@@ -41,6 +41,15 @@ declare const brand: unique symbol;
 
 const branded = <T>(t: Omit<T, typeof brand>): 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,