interface/src/components/detail/DetailOpenSea.tsx at dc70b2f8c56f764d227ed90ccaade4ec74868d7e · bosonprotocol/interface · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
import { exchanges, subgraph } from "@bosonprotocol/react-kit";
import { useConfigContext } from "components/config/ConfigContext";
import { ArrowSquareOut } from "phosphor-react";
import { useMemo } from "react";

import { getExchangeTokenId } from "../../lib/utils/exchange";
import { OpenSeaButton } from "./Detail.style";

interface Props {
  exchange?: subgraph.ExchangeFieldsFragment;
  className?: string;
}

const openSeaUrlMap = new Map([
  [
    "testing", // testnets
    new Map([
      [
        "testing-80002-0",
        (tokenId: string, contractAddress: string) =>
          `https://testnets.opensea.io/assets/amoy/${contractAddress}/${tokenId}`
      ],
      [
        "testing-11155111-0",
        (tokenId: string, contractAddress: string) =>
          `https://testnets.opensea.io/assets/sepolia/${contractAddress}/${tokenId}`
      ]
    ])
  ],
  [
    "staging", // testnets
    new Map([
      [
        "staging-80002-0",
        (tokenId: string, contractAddress: string) =>
          `https://testnets.opensea.io/assets/amoy/${contractAddress}/${tokenId}`
      ],
      [
        "staging-11155111-0",
        (tokenId: string, contractAddress: string) =>
          `https://testnets.opensea.io/assets/sepolia/${contractAddress}/${tokenId}`
      ]
    ])
  ],
  [
    "production", // Polygon
    new Map([
      [
        "production-137-0",
        (tokenId: string, contractAddress: string) =>
          `https://opensea.io/assets/matic/${contractAddress}/${tokenId}`
      ],
      [
        "production-1-0",
        (tokenId: string, contractAddress: string) =>
          `https://opensea.io/assets/ethereum/${contractAddress}/${tokenId}`
      ]
    ])
  ]
]);

export default function DetailOpenSea({ exchange, className }: Props) {
  const { config } = useConfigContext();
  const exchangeStatus = exchange
    ? exchanges.getExchangeState(
        exchange as unknown as subgraph.ExchangeFieldsFragment
      )
    : null;
  const isToRedeem =
    !exchangeStatus || exchangeStatus === subgraph.ExchangeState.COMMITTED;

  const openSeaUrl = useMemo(() => {
    if (!exchange) {
      return "";
    }

    const urlFn = openSeaUrlMap
      .get(config.envName)
      ?.get(config.envConfig.configId);

    const tokenId = getExchangeTokenId(exchange, config.envName);

    return urlFn?.(tokenId, exchange.seller.voucherCloneAddress) || "";
  }, [exchange, config.envName, config.envConfig.configId]);

  if (!isToRedeem) {
    return null;
  }

  return (
    <OpenSeaButton
      href={openSeaUrl}
      $disabled={!openSeaUrl}
      target="_blank"
      className={className}
    >
      View on OpenSea
      <ArrowSquareOut size={18} />
    </OpenSeaButton>
  );
}