Enhance transaction notification

src/components/transfer-v2.tsx

@@ -176,7 +176,7 @@ function Component() {
  const receipt = await approve(
  fee?.token.type === "native" ? deferredAmount.value : deferredAmount.value + (fee?.value ?? 0n),
  );
- notifyTransaction(receipt, sourceChain);
+ notifyTransaction(receipt, sourceChain, "Approval");
  } else if (actionText === "Transfer") {
  setIsOpen(true);
  }
@@ -203,7 +203,7 @@ function Component() {
  withdrawNonce: BigInt(relayInfo?.withdrawNonce ?? 0),
  depositedMargin: BigInt(relayInfo?.margin ?? 0),
  });
- notifyTransaction(receipt, sourceChain);
+ notifyTransaction(receipt, sourceChain, "Transfer");
  setTxHash(receipt?.transactionHash);
  if (receipt?.status === "success") {
  setIsTransfering(false);

src/providers/relayer-provider-v3.tsx

@@ -124,7 +124,7 @@ export default function RelayerProviderV3({ children }: PropsWithChildren<unknow
  if (address) {
  try {
  const receipt = await bridgeInstance.sourceApprove(amount, address);
- notifyTransaction(receipt, bridgeInstance.getSourceChain());
+ notifyTransaction(receipt, bridgeInstance.getSourceChain(), "Approval");
  setSourceAllowance(await bridgeInstance.getSourceAllowance(address));
  return receipt;
  } catch (err) {
@@ -141,7 +141,7 @@ export default function RelayerProviderV3({ children }: PropsWithChildren<unknow
  if (address) {
  try {
  const receipt = await bridgeInstance.targetApprove(amount, address);
- notifyTransaction(receipt, bridgeInstance.getTargetChain());
+ notifyTransaction(receipt, bridgeInstance.getTargetChain(), "Approval");
  setTargetAllowance(await bridgeInstance.getTargetAllowance(address));
  return receipt;
  } catch (err) {
@@ -169,7 +169,7 @@ export default function RelayerProviderV3({ children }: PropsWithChildren<unknow
  async (amount: bigint) => {
  try {
  const receipt = await bridgeInstance.depositPenaltyReserve(amount);
- notifyTransaction(receipt, bridgeInstance.getSourceChain());
+ notifyTransaction(receipt, bridgeInstance.getSourceChain(), "Deposite");
  if (receipt?.status === "success") {
  await _updatePenaltyReserves();
  if (address) {
@@ -190,7 +190,7 @@ export default function RelayerProviderV3({ children }: PropsWithChildren<unknow
  async (baseFee: bigint, feeRate: number, transferLimit: bigint) => {
  try {
  const receipt = await bridgeInstance.registerLnProvider(baseFee, feeRate, transferLimit);
- notifyTransaction(receipt, bridgeInstance.getSourceChain());
+ notifyTransaction(receipt, bridgeInstance.getSourceChain(), "Register");
  return receipt;
  } catch (err) {
  console.error(err);
@@ -204,7 +204,7 @@ export default function RelayerProviderV3({ children }: PropsWithChildren<unknow
  async (amount: bigint) => {
  try {
  const receipt = await bridgeInstance.withdrawPenaltyReserve(amount);
- notifyTransaction(receipt, bridgeInstance.getSourceChain());
+ notifyTransaction(receipt, bridgeInstance.getSourceChain(), "Withdraw");
 
  if (receipt?.status === "success") {
  await _updatePenaltyReserves();
@@ -231,7 +231,7 @@ export default function RelayerProviderV3({ children }: PropsWithChildren<unknow
  messageFee,
  params ?? address,
  );
- notifyTransaction(receipt, bridgeInstance.getTargetChain());
+ notifyTransaction(receipt, bridgeInstance.getTargetChain(), "Withdraw");
  return receipt;
  } catch (err) {
  console.error(err);

src/providers/relayer-provider.tsx

@@ -226,7 +226,7 @@ export default function RelayerProvider({ children }: PropsWithChildren<unknown>
  const sourceApprove = useCallback(async (owner: Address, amount: bigint, bridge: BaseBridge, chain: ChainConfig) => {
  try {
  const receipt = await bridge.sourceApprove(amount, owner);
- notifyTransaction(receipt, chain);
+ notifyTransaction(receipt, chain, "Approval");
  setSourceAllowance(await bridge.getSourceAllowance(owner));
  return receipt;
  } catch (err) {
@@ -238,7 +238,7 @@ export default function RelayerProvider({ children }: PropsWithChildren<unknown>
  const targetApprove = useCallback(async (owner: Address, amount: bigint, bridge: BaseBridge, chain: ChainConfig) => {
  try {
  const receipt = await bridge.targetApprove(amount, owner);
- notifyTransaction(receipt, chain);
+ notifyTransaction(receipt, chain, "Approval");
  setTargetAllowance(await bridge.getTargetAllowance(owner));
  return receipt;
  } catch (err) {
@@ -254,7 +254,7 @@ export default function RelayerProvider({ children }: PropsWithChildren<unknown>
  async (relayer: Address, margin: bigint, bridge: LnBridgeV2Default, chain: ChainConfig) => {
  try {
  const receipt = await bridge.depositMargin(margin);
- notifyTransaction(receipt, chain);
+ notifyTransaction(receipt, chain, "Deposite");
 
  const a = await bridge.getTargetAllowance(relayer);
  const b = await bridge.getTargetBalance(relayer);
@@ -327,7 +327,7 @@ export default function RelayerProvider({ children }: PropsWithChildren<unknown>
  ) => {
  try {
  const receipt = await bridge.withdrawMargin(recipientOrParams, amount, fee);
- notifyTransaction(receipt, chain);
+ notifyTransaction(receipt, chain, "Withdraw");
  return receipt;
  } catch (err) {
  console.error(err);

src/providers/transfer-provider.tsx

@@ -136,7 +136,7 @@ export default function TransferProvider({ children }: PropsWithChildren<unknown
  ) => {
  try {
  const receipt = await bridge.transfer(sender, recipient, amount, options);
- notifyTransaction(receipt, chain);
+ notifyTransaction(receipt, chain, "Transfer");
 
  const a = await bridge.getSourceAllowance(sender);
  const b = await bridge.getSourceBalance(sender);
@@ -155,7 +155,7 @@ export default function TransferProvider({ children }: PropsWithChildren<unknown
  const sourceApprove = useCallback(async (owner: Address, amount: bigint, bridge: BaseBridge, chain: ChainConfig) => {
  try {
  const receipt = await bridge.sourceApprove(amount, owner);
- notifyTransaction(receipt, chain);
+ notifyTransaction(receipt, chain, "Approval");
  setSourceAllowance(await bridge.getSourceAllowance(owner));
  return receipt;
  } catch (err) {

src/ui/notification.tsx

@@ -22,7 +22,7 @@ const createContainer = () => {
 
 const createItem = (config: Config, status: Status, onClose: () => void) => {
  const domNode = document.createElement("div");
- domNode.className = `rounded-medium border-component border bg-inner p-medium lg:p-5 flex items-center gap-medium mb-medium animate-notification-enter relative w-[82vw] lg:w-96 ${config.className}`;
+ domNode.className = `rounded-xl shadow-lg border-white/5 border lg:border-none bg-secondary p-medium lg:p-5 flex items-center gap-medium mb-medium animate-notification-enter relative w-[82vw] lg:w-96 ${config.className}`;
 
  const root = createRoot(domNode);
  root.render(

src/utils/notification.tsx

@@ -11,24 +11,24 @@ function Link({ href, children }: PropsWithChildren<{ href: string }>) {
  );
 }
 
-export function notifyTransaction(receipt?: TransactionReceipt, chain?: ChainConfig) {
+export function notifyTransaction(receipt?: TransactionReceipt, chain?: ChainConfig, title?: string) {
  const explorer = chain?.blockExplorers?.default.url;
  const txHash = receipt?.transactionHash;
  const href = new URL(`tx/${txHash}`, explorer).href;
 
  if (receipt?.status === "success" && txHash) {
  notification.success({
- title: "Transaction successful",
+ title: `${title ?? "Transaction"} successful`,
  description: <Link href={href}>{txHash}</Link>,
  });
  } else if (receipt?.status === "reverted" && explorer) {
  notification.error({
- title: "Transaction failed",
+ title: `${title ?? "Transaction"} failed`,
  description: <Link href={href}>{txHash}</Link>,
  });
  }
 }
 
 export function notifyError(err: unknown) {
- return notification.error({ title: "An error occurred", description: (err as Error).message });
+ return notification.error({ title: "Oops an error occurred", description: (err as Error).message });
 }