-
Notifications
You must be signed in to change notification settings - Fork 45
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update interest rate strategies + move terminology from collateral to…
… branch (#809) fixes #804 Delegate Strategies - In the env vars, add an auto delegate per branch. - Enable the IC strategies. - Fetch the min & max interest rates from the contracts. - Split delegation modal components in separate files. - Start migrating some subgraph-hooks functions into `liquity-utils.ts`. Collateral => Branch - `collIndex` is now `branchId`. - A new type, `Branch`, has been added. It replaces what used to be called a collateral (which now only corresponds to the branch collateral, when used). Branches objects can now contain additional data rather than contract addresses only. - Branch.strategies corresponds to the interest rate delegate strategies. - `COLL_*_DELEGATE_AUTO` is now `COLL_*_IC_STRATEGIES` and allows to define multiple strategies. - `getBranch()` now throws if the branch doesn’t exist, so it can be called without checking the returned value + throwing an error if null. - `getCollToken()` follows the same errors behavior. - `getCollateralContract()` has been renamed `getBranchContract()` and follows the same errors behavior. - `getCollateralContracts()` has been renamed `getBranchContracts()` and follows the same errors behavior.
- Loading branch information
Showing
52 changed files
with
1,470 additions
and
1,449 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
189 changes: 189 additions & 0 deletions
189
frontend/app/src/comps/InterestRateField/DelegateBox.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,189 @@ | ||
| import type { Delegate } from "@/src/types"; | ||
|
|
||
| import { Amount } from "@/src/comps/Amount/Amount"; | ||
| import { fmtnum, formatRedemptionRisk } from "@/src/formatting"; | ||
| import { getRedemptionRisk } from "@/src/liquity-math"; | ||
| import { riskLevelToStatusMode } from "@/src/uikit-utils"; | ||
| import { css } from "@/styled-system/css"; | ||
| import { Button, IconCopy, StatusDot, TextButton } from "@liquity2/uikit"; | ||
| import { MiniChart } from "./MiniChart"; | ||
| import { ShadowBox } from "./ShadowBox"; | ||
|
|
||
| export function DelegateBox({ | ||
| delegate, | ||
| onSelect, | ||
| selectLabel = "Select", | ||
| }: { | ||
| delegate: Delegate; | ||
| onSelect: (delegate: Delegate) => void; | ||
| selectLabel: string; | ||
| }) { | ||
| const delegationRisk = getRedemptionRisk(delegate.interestRate); | ||
| return ( | ||
| <ShadowBox key={delegate.id}> | ||
| <section | ||
| key={delegate.name} | ||
| className={css({ | ||
| display: "flex", | ||
| flexDirection: "column", | ||
| alignItems: "center", | ||
| padding: "8px 16px", | ||
| })} | ||
| > | ||
| <div | ||
| className={css({ | ||
| display: "flex", | ||
| flexDirection: "column", | ||
| width: "100%", | ||
| paddingBottom: 12, | ||
| borderBottom: "1px solid token(colors.borderSoft)", | ||
| })} | ||
| > | ||
| <div | ||
| className={css({ | ||
| display: "flex", | ||
| justifyContent: "space-between", | ||
| alignItems: "center", | ||
| width: "100%", | ||
| fontSize: 20, | ||
| fontWeight: 500, | ||
| userSelect: "none", | ||
| })} | ||
| > | ||
| <h1 title={`${delegate.name} (${delegate.address})`}> | ||
| {delegate.name} | ||
| </h1> | ||
| <div | ||
| className={css({ | ||
| display: "flex", | ||
| gap: 6, | ||
| alignItems: "center", | ||
| })} | ||
| > | ||
| <MiniChart /> | ||
| {fmtnum(delegate.interestRate, "pct1z")}% | ||
| </div> | ||
| </div> | ||
| <div | ||
| className={css({ | ||
| display: "flex", | ||
| justifyContent: "space-between", | ||
| width: "100%", | ||
| fontSize: 14, | ||
| color: "content", | ||
| })} | ||
| > | ||
| <div | ||
| className={css({ | ||
| display: "flex", | ||
| gap: 8, | ||
| alignItems: "center", | ||
| })} | ||
| > | ||
| <Amount | ||
| value={delegate.boldAmount} | ||
| format="compact" | ||
| suffix=" BOLD" | ||
| /> | ||
| </div> | ||
| <div | ||
| className={css({ | ||
| display: "flex", | ||
| gap: 8, | ||
| alignItems: "center", | ||
| })} | ||
| > | ||
| <StatusDot mode={riskLevelToStatusMode(delegationRisk)} /> | ||
| {formatRedemptionRisk(delegationRisk)} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div | ||
| className={css({ | ||
| display: "flex", | ||
| flexDirection: "column", | ||
| width: "100%", | ||
| paddingTop: 12, | ||
| fontSize: 14, | ||
| paddingBottom: 12, | ||
| borderBottom: "1px solid token(colors.borderSoft)", | ||
| })} | ||
| > | ||
| <div | ||
| className={css({ | ||
| display: "flex", | ||
| justifyContent: "space-between", | ||
| width: "100%", | ||
| fontSize: 14, | ||
| color: "content", | ||
| })} | ||
| > | ||
| <div>Interest rate range</div> | ||
| <div> | ||
| {fmtnum(delegate.interestRateChange[0], "pct2")} | ||
| <span>-</span> | ||
| {fmtnum(delegate.interestRateChange[1], "pct2")}% | ||
| </div> | ||
| </div> | ||
| {delegate.fee && ( | ||
| <div | ||
| className={css({ | ||
| display: "flex", | ||
| justifyContent: "space-between", | ||
| width: "100%", | ||
| fontSize: 14, | ||
| color: "content", | ||
| })} | ||
| > | ||
| <div> | ||
| Fees <abbr title="per annum">p.a.</abbr> | ||
| </div> | ||
| <div title={`${fmtnum(delegate.fee, "pctfull")}%`}> | ||
| {fmtnum(delegate.fee, { digits: 4, scale: 100 })}% | ||
| </div> | ||
| </div> | ||
| )} | ||
| </div> | ||
| <div | ||
| className={css({ | ||
| display: "flex", | ||
| justifyContent: "space-between", | ||
| width: "100%", | ||
| paddingTop: 16, | ||
| paddingBottom: 8, | ||
| fontSize: 14, | ||
| })} | ||
| > | ||
| <div | ||
| className={css({ | ||
| display: "flex", | ||
| gap: 8, | ||
| })} | ||
| > | ||
| <TextButton | ||
| label={ | ||
| <> | ||
| Copy address | ||
| <IconCopy size={16} /> | ||
| </> | ||
| } | ||
| className={css({ | ||
| fontSize: 14, | ||
| })} | ||
| /> | ||
| </div> | ||
| <div> | ||
| <Button | ||
| label={selectLabel} | ||
| mode="primary" | ||
| size="small" | ||
| onClick={() => { | ||
| onSelect(delegate); | ||
| }} | ||
| /> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| </ShadowBox> | ||
| ); | ||
| } |
Oops, something went wrong.