ForwardsWidget.tsx raw

   1  import { FormattedBitcoinAmount } from "src/components/FormattedBitcoinAmount";
   2  import FormattedFiatAmount from "src/components/FormattedFiatAmount";
   3  import {
   4    Card,
   5    CardContent,
   6    CardHeader,
   7    CardTitle,
   8  } from "src/components/ui/card";
   9  import { ExternalLinkButton } from "src/components/ui/custom/external-link-button";
  10  import { useForwards } from "src/hooks/useForwards";
  11  
  12  export function ForwardsWidget() {
  13    const { data: forwards } = useForwards();
  14  
  15    if (!forwards) {
  16      return null;
  17    }
  18  
  19    return (
  20      <Card>
  21        <CardHeader>
  22          <CardTitle>Routing</CardTitle>
  23        </CardHeader>
  24        <CardContent>
  25          <div className="grid grid-cols-2 gap-6">
  26            <div>
  27              <p className="text-muted-foreground text-xs">Fees Earned</p>
  28              <p className="text-xl font-semibold">
  29                <FormattedBitcoinAmount
  30                  amountMsat={forwards.totalFeeEarnedMsat}
  31                />
  32                <FormattedFiatAmount
  33                  amountSat={Math.floor(forwards.totalFeeEarnedMsat / 1000)}
  34                />
  35              </p>
  36            </div>
  37            <div>
  38              <p className="text-muted-foreground text-xs">Total Routed</p>
  39              <p className="text-xl font-semibold">
  40                <FormattedBitcoinAmount
  41                  amountMsat={forwards.outboundAmountForwardedMsat}
  42                />
  43                <FormattedFiatAmount
  44                  amountSat={Math.floor(
  45                    forwards.outboundAmountForwardedMsat / 1000
  46                  )}
  47                />
  48              </p>
  49            </div>
  50            <div>
  51              <p className="text-muted-foreground text-xs">Transactions Routed</p>
  52              <p className="text-xl font-semibold">{forwards.numForwards}</p>
  53            </div>
  54          </div>
  55          <div className="flex justify-end mt-4 items-end">
  56            <p className="text-muted-foreground text-sm">
  57              Earn and support the lightning network by routing payments. To route
  58              payments you need public channels and set competitive fees.
  59            </p>
  60            <ExternalLinkButton
  61              variant="secondary"
  62              to="https://guides.getalby.com/user-guide/alby-hub/faq/how-to-earn-routing-fees"
  63            >
  64              Learn more
  65            </ExternalLinkButton>
  66          </div>
  67        </CardContent>
  68      </Card>
  69    );
  70  }
  71