mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
zeekay
507a7da852
The FE connected realtime via Phoenix Channels (wss .../socket/v2), but the
Go backend serves no Phoenix endpoint — its realtime is SSE at
/v1/base/realtime (envelope {event,chain,data}). Result: repeating ws 404 ->
'Live updates temporarily delayed'.
lib/socket/sse.ts reimplements the slice of the Phoenix Socket/Channel API the
27 realtime consumers use, backed by one EventSource, behind the existing
SocketProvider/useSocketChannel/useSocketMessage seam — no consumer changes.
Envelope routes via an optional topic field or a hub-channel translation table
(blocks -> blocks:new_block/new_block today). CT harness becomes a tiny SSE
server with the same signatures. 12 vitest cases cover it.
Frontend-only; chain/indexer untouched. Data freshness remains gated on the
separate C-Chain-rollback/indexer-reorg owner items.
81 lines
3.2 KiB
TypeScript
81 lines
3.2 KiB
TypeScript
import { Alert } from '@luxfi/ui/alert';
|
|
import React from 'react';
|
|
|
|
import type { SocketMessage } from 'lib/socket/types';
|
|
import type { Address } from 'types/api/address';
|
|
import type { SmartContract } from 'types/api/contract';
|
|
|
|
import { route } from 'nextjs-routes';
|
|
|
|
import type { Channel } from 'lib/socket/sse';
|
|
import useSocketMessage from 'lib/socket/useSocketMessage';
|
|
import { Link } from 'toolkit/next/link';
|
|
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
|
|
|
|
import ContractDetailsAlertProxyPattern from './ContractDetailsAlertProxyPattern';
|
|
import ContractDetailsAlertVerificationStatus from './ContractDetailsAlertVerificationStatus';
|
|
|
|
export interface Props {
|
|
data: SmartContract | undefined;
|
|
isLoading: boolean;
|
|
addressData: Address;
|
|
channel?: Channel;
|
|
}
|
|
|
|
const ContractDetailsAlerts = ({ data, isLoading, addressData, channel }: Props) => {
|
|
const [ isChangedBytecodeSocket, setIsChangedBytecodeSocket ] = React.useState<boolean>();
|
|
|
|
const handleChangedBytecodeMessage: SocketMessage.AddressChangedBytecode['handler'] = React.useCallback(() => {
|
|
setIsChangedBytecodeSocket(true);
|
|
}, [ ]);
|
|
|
|
useSocketMessage({
|
|
channel,
|
|
event: 'changed_bytecode',
|
|
handler: handleChangedBytecodeMessage,
|
|
});
|
|
|
|
return (
|
|
<div className="flex flex-col gap-y-1 mb-6 empty:hidden">
|
|
{ data?.is_blueprint && (
|
|
<div>
|
|
<span>This is an </span>
|
|
<Link external href="https://eips.ethereum.org/EIPS/eip-5202">
|
|
ERC-5202 Blueprint contract
|
|
</Link>
|
|
</div>
|
|
) }
|
|
<ContractDetailsAlertVerificationStatus data={ data } isLoading={ isLoading } addressData={ addressData }/>
|
|
{ addressData.proxy_type && (
|
|
<ContractDetailsAlertProxyPattern
|
|
type={ addressData.proxy_type }
|
|
isLoading={ isLoading }
|
|
conflictingImplementations={ data?.conflicting_implementations ?? undefined }
|
|
/>
|
|
) }
|
|
{ (data?.is_changed_bytecode || isChangedBytecodeSocket) && (
|
|
<Alert status="warning">
|
|
Warning! Contract bytecode has been changed and does not match the verified one. Therefore, interaction with this smart contract may be risky.
|
|
</Alert>
|
|
) }
|
|
{ !data?.is_verified && data?.verified_twin_address_hash && (!addressData.proxy_type || addressData.proxy_type === 'unknown') && (
|
|
<Alert status="warning" whiteSpace="pre-wrap">
|
|
<span>Contract is not verified. However, we found a verified contract with the same bytecode in our database </span>
|
|
<AddressEntity
|
|
address={{ hash: data.verified_twin_address_hash, filecoin: { robust: data.verified_twin_filecoin_robust_address }, is_contract: true }}
|
|
truncation="constant"
|
|
className="text-sm font-medium"
|
|
/>
|
|
<span className="mt-1">All functions displayed below are from ABI of that contract. In order to verify current contract, proceed with </span>
|
|
<Link href={ route({ pathname: '/address/[hash]/contract-verification', query: { hash: addressData.hash } }) }>
|
|
Verify & Publish
|
|
</Link>
|
|
<span> page</span>
|
|
</Alert>
|
|
) }
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default React.memo(ContractDetailsAlerts);
|