Merge pull request #62 from laina-protocol/feat/borrow-modal-2.0

feat: Borrow & deposit modal 2.0

Cargo.toml

@@ -6,8 +6,8 @@ resolver = "2"
 members = ["contracts/*"]
 
 [workspace.dependencies]
-soroban-sdk = "21.5.1"
-soroban-token-sdk = "21.5.1"
+soroban-sdk = "21.7.4"
+soroban-token-sdk = "21.7.4"
 
 [profile.release]
 opt-level = "z"

contracts/loan_pool/src/contract.rs

@@ -165,7 +165,7 @@ impl LoanPoolContract {
     }
 
     /// Get user's positions in the pool
-    pub fn get_user_balance(e: Env, user: Address) -> Positions {
+    pub fn get_user_positions(e: Env, user: Address) -> Positions {
         positions::read_positions(&e, &user)
     }
 

currencies.ts

@@ -11,7 +11,7 @@ export type Currency = {
 // TODO: use environment variables for the addresses.
 
 export const CURRENCY_XLM: Currency = {
-  name: 'Stellar Lumen',
+  name: 'Stellar Lumens',
   ticker: 'XLM',
   tokenContractAddress: 'CDLZFC3SYJYDZT7K67VZ75HPJVIEUVNIXF47ZG2FB2RMQQVU2HHGCYSC',
   loanPoolName: 'pool_xlm',

rust-toolchain.toml

@@ -1,4 +1,4 @@
 [toolchain]
-channel = "stable"
+channel = "1.81.0"
 targets = ["wasm32-unknown-unknown"]
 

src/components/Button.tsx

@@ -3,36 +3,38 @@ import { Link } from 'react-router-dom';
 
 export interface ButtonProps {
   onClick?: () => void;
-  color?: ButtonColor;
+  variant?: ButtonVariant;
   disabled?: boolean;
   className?: string;
 }
 
-export type ButtonColor = 'black' | 'white' | 'ghost';
+export type ButtonVariant = 'black' | 'white' | 'ghost' | 'outline';
 
-const buttonStyle = (color: ButtonColor) => {
-  return `btn ${getButtonColor(color)} font-semibold text-base rounded-full px-8 py-2`;
+const buttonStyle = (variant: ButtonVariant) => {
+  return `btn ${getButtonVariant(variant)} font-semibold text-base rounded-full px-8 py-2`;
 };
 
-const getButtonColor = (color: ButtonColor): string => {
-  switch (color) {
+const getButtonVariant = (variant: ButtonVariant): string => {
+  switch (variant) {
     case 'black':
       return 'btn-neutral text-white';
     case 'white':
       return 'btn-primary';
     case 'ghost':
       return 'btn-ghost';
+    case 'outline':
+      return 'btn-outline';
   }
 };
 
 export const Button = ({
   onClick,
-  color = 'black',
+  variant = 'black',
   disabled = false,
   className = '',
   children,
 }: PropsWithChildren<ButtonProps>) => (
-  <button type="button" onClick={onClick} disabled={disabled} className={`${buttonStyle(color)} ${className}`}>
+  <button type="button" onClick={onClick} disabled={disabled} className={`${buttonStyle(variant)} ${className}`}>
     {children}
   </button>
 );

src/components/CryptoAmountSelector.tsx

@@ -0,0 +1,88 @@
+import { isBalanceZero } from '@lib/converters';
+import { formatCentAmount } from '@lib/formatting';
+import type { SupportedCurrency } from 'currencies';
+import { isNil } from 'ramda';
+import type { ChangeEvent } from 'react';
+import { useWallet } from 'src/stellar-wallet';
+import { Button } from './Button';
+
+export interface CryptoAmountSelectorProps {
+  max: string;
+  value: string;
+  valueCents: bigint | undefined;
+  ticker: SupportedCurrency;
+  onChange: (ev: ChangeEvent<HTMLInputElement>) => void;
+  onSelectMaximum: () => void;
+  tickerChangeOptions?: TickerChangeOptions;
+}
+
+export interface TickerChangeOptions {
+  options: SupportedCurrency[];
+  onSelectTicker: (ticker: SupportedCurrency) => void;
+}
+
+export const CryptoAmountSelector = ({
+  max,
+  value,
+  valueCents,
+  ticker,
+  onChange,
+  onSelectMaximum,
+  tickerChangeOptions,
+}: CryptoAmountSelectorProps) => (
+  <>
+    <input type="range" min={0} max={max} value={value ?? '0'} className="range" onChange={onChange} />
+    <div className="flex w-full justify-between px-2 text-xs">
+      <span>|</span>
+      <span>|</span>
+      <span>|</span>
+      <span>|</span>
+      <span>|</span>
+    </div>
+    <div className="flex flex-row items-center max-w-full gap-2">
+      {isNil(tickerChangeOptions) ? (
+        <label className="input input-bordered flex items-center gap-2 w-1/2">
+          <input type="number" value={value} onChange={onChange} placeholder="" className="text-right w-1/2" />
+          <span className="text-grey w-1/2">{ticker}</span>
+        </label>
+      ) : (
+        <div className="join w-1/2">
+          <input
+            type="number"
+            value={value}
+            onChange={onChange}
+            placeholder=""
+            className="input input-bordered text-right w-1/2 join-item"
+          />
+          <select
+            className="select select-bordered w-1/2 join-item"
+            value={ticker}
+            onChange={(ev) => {
+              tickerChangeOptions.onSelectTicker(ev.target.value as SupportedCurrency);
+            }}
+          >
+            {tickerChangeOptions.options.map((ticker) => (
+              <TickerOption key={ticker} ticker={ticker} />
+            ))}
+          </select>
+        </div>
+      )}
+      <span className="w-1/3">{valueCents ? `≈ ${formatCentAmount(valueCents)}` : null}</span>
+      <Button variant="outline" onClick={onSelectMaximum}>
+        Select maximum
+      </Button>
+    </div>
+  </>
+);
+
+const TickerOption = ({ ticker }: { ticker: SupportedCurrency }) => {
+  const { walletBalances } = useWallet();
+  const balance = walletBalances[ticker];
+  const disabled = isNil(balance) || isBalanceZero(balance.balance);
+
+  return (
+    <option disabled={disabled} value={ticker}>
+      {ticker}
+    </option>
+  );
+};

src/components/WalletCard/AssetsModal.tsx

@@ -1,10 +1,10 @@
 import { Button } from '@components/Button';
 import { Loading } from '@components/Loading';
+import { formatAmount, toDollarsFormatted } from '@lib/formatting';
 import type { SupportedCurrency } from 'currencies';
 import { isNil } from 'ramda';
 import { useState } from 'react';
-import { CURRENCY_BINDINGS, type CurrencyBinding } from 'src/currency-bindings';
-import { formatAmount, toDollarsFormatted } from 'src/lib/formatting';
+import { CURRENCY_BINDINGS } from 'src/currency-bindings';
 import { useWallet } from 'src/stellar-wallet';
 
 export interface AssetsModalProps {
@@ -35,7 +35,7 @@ const AssetsModal = ({ modalId, onClose }: AssetsModalProps) => {
           </tbody>
         </table>
         <div className="modal-action">
-          <Button color="ghost" className="ml-auto" onClick={onClose}>
+          <Button variant="ghost" className="ml-auto" onClick={onClose}>
             Close
           </Button>
         </div>
@@ -60,7 +60,7 @@ const TableRow = ({ receivables, ticker }: TableRowProps) => {
 
   if (receivables === 0n) return null;
 
-  const { icon, name, contractClient } = CURRENCY_BINDINGS.find((b) => b.ticker === ticker) as CurrencyBinding;
+  const { icon, name, contractClient } = CURRENCY_BINDINGS[ticker];
   const price = prices?.[ticker];
 
   const handleWithdrawClick = async () => {

src/components/WalletCard/LoansModal.tsx

@@ -4,9 +4,9 @@ import { useState } from 'react';
 import { Button } from '@components/Button';
 import { Loading } from '@components/Loading';
 import { contractClient as loanManagerClient } from '@contracts/loan_manager';
+import { formatAmount, toDollarsFormatted } from '@lib/formatting';
 import type { SupportedCurrency } from 'currencies';
-import { CURRENCY_BINDINGS, type CurrencyBinding } from 'src/currency-bindings';
-import { formatAmount, toDollarsFormatted } from 'src/lib/formatting';
+import { CURRENCY_BINDINGS } from 'src/currency-bindings';
 import { useWallet } from 'src/stellar-wallet';
 
 export interface AssetsModalProps {
@@ -37,7 +37,7 @@ const LoansModal = ({ modalId, onClose }: AssetsModalProps) => {
           </tbody>
         </table>
         <div className="modal-action">
-          <Button color="ghost" className="ml-auto" onClick={onClose}>
+          <Button variant="ghost" className="ml-auto" onClick={onClose}>
             Close
           </Button>
         </div>
@@ -62,7 +62,7 @@ const TableRow = ({ liabilities, ticker }: TableRowProps) => {
 
   if (liabilities === 0n) return null;
 
-  const { icon, name } = CURRENCY_BINDINGS.find((b) => b.ticker === ticker) as CurrencyBinding;
+  const { icon, name } = CURRENCY_BINDINGS[ticker];
   const price = prices?.[ticker];
 
   const handleWithdrawClick = async () => {