Solver Display (#833)

* Solver display on Transfer Information

* Solver display on Transaction Details

apps/web/src/components/record-detail.tsx

@@ -149,6 +149,15 @@ export default function RecordDetail(props: Props) {
  <span className="text-sm font-medium text-white">{record.historyRecordById.nonce}</span>
  ) : null}
  </Item>
+ <Item label="Solver">
+ {record?.historyRecordById?.relayer ? (
+ <PrettyAddress
+ address={record.historyRecordById.relayer}
+ className="text-primary text-sm font-medium"
+ copyable
+ />
+ ) : null}
+ </Item>
  </div>
  </div>
  </div>

apps/web/src/components/transfer-information-section.tsx

@@ -48,6 +48,7 @@ export default function TransferInformationSection({
  dailyLimit={
  dailyLimit ? { loading: loadingDailyLimit, value: dailyLimit.limit, token: dailyLimit.token } : undefined
  }
+ solver={{ loading: loadingRelayData, address: relayData?.sortedLnBridgeRelayInfos?.records.at(0)?.relayer }}
  />
  </TransferSection>
  );

apps/web/src/components/transfer-information.tsx

@@ -1,16 +1,24 @@
+import { Address } from "viem";
 import { Token } from "../types";
 import CountLoading from "../ui/count-loading";
 import Tooltip from "../ui/tooltip";
-import { formatBalance } from "../utils";
+import { formatBalance, toShortAdrress } from "../utils";
 
 interface Props {
  transactionFee: { loading: boolean; value?: bigint; token?: Token; warning?: string };
  transferLimit?: { loading: boolean; value?: bigint; token?: Token };
  dailyLimit?: { loading: boolean; value?: bigint; token?: Token };
  estimatedTime?: { loading: boolean; value?: string };
+ solver: { loading?: boolean; address?: Address };
 }
 
-export default function TransferInformation({ transactionFee, transferLimit, dailyLimit, estimatedTime }: Props) {
+export default function TransferInformation({
+ transactionFee,
+ transferLimit,
+ dailyLimit,
+ estimatedTime,
+ solver,
+}: Props) {
  return (
  <div className="gap-small px-medium flex flex-col lg:px-3">
  <Row
@@ -39,6 +47,7 @@ export default function TransferInformation({ transactionFee, transferLimit, dai
  {dailyLimit ? (
  <Row name="Daily Limit" loading={dailyLimit.loading} value={dailyLimit.value} token={dailyLimit.token} />
  ) : null}
+ <Row name="Solver" loading={solver.loading} address={solver.address} />
  </div>
  );
 }
@@ -50,13 +59,15 @@ function Row({
  token,
  tips,
  warning,
+ address,
 }: {
  name: string;
  loading?: boolean;
  value?: JSX.Element | string | bigint;
  token?: Token;
  tips?: JSX.Element | string;
  warning?: string;
+ address?: Address;
 }) {
  return (
  <div className="flex items-center justify-between">
@@ -77,6 +88,10 @@ function Row({
 
  {loading ? (
  <CountLoading color="white" />
+ ) : address ? (
+ <Tooltip content={address} enabledSafePolygon>
+ <Text value={toShortAdrress(address, 7, 5)} />
+ </Tooltip>
  ) : warning ? (
  <Tooltip content={warning} status="warning">
  <img width={20} height={20} alt="Warning" src="images/warning.svg" />

apps/web/src/config/gql.ts

@@ -25,6 +25,7 @@ export const GQL_HISTORY_RECORD_BY_ID = gql`
  recvToken
  sendTokenAddress
  recvTokenAddress
+ relayer
  }
  }
 `;