thirdweb 5.46.2-nightly-d3f43a757bf14b3329f1d0e413ee71f8f98e963a-20240816000358 → 5.47.0-nightly-f0d6e343eea28cd49863ba4794b89d6b070c52b2-20240818000714

package/src/auth/verify-hash.ts

@@ -8,6 +8,8 @@ import {
 } from "viem";
 import type { Chain } from "../chains/types.js";
 import type { ThirdwebClient } from "../client/client.js";
+import { type ThirdwebContract, getContract } from "../contract/contract.js";
+import { isValidSignature } from "../extensions/erc1271/__generated__/isValidSignature/read/isValidSignature.js";
 import { eth_call } from "../rpc/actions/eth_call.js";
 import { getRpcClient } from "../rpc/rpc.js";
 import { fromBytes } from "../utils/encoding/from-bytes.js";
@@ -110,8 +112,39 @@ export async function verifyHash({
     const hexResult = isHex(result) ? toBytes(result) : result;
     return equalBytes(hexResult, toBytes("0x1"));
   } catch (error) {
+    // Some chains do not support the eth_call simulation and will fail, so we fall back to regular EIP1271 validation
+    const validEip1271 = await verifyEip1271Signature({
+      hash,
+      signature: signatureHex,
+      contract: getContract({
+        chain,
+        address,
+        client,
+      }),
+    }).catch(() => false);
+    if (validEip1271) {
+      return true;
+    }
     // TODO: Improve overall RPC error handling so we can tell if this was an actual verification failure or some other error
     // Verification failed somehow
     return false;
   }
 }
+
+const EIP_1271_MAGIC_VALUE = "0x1626ba7e";
+async function verifyEip1271Signature({
+  hash,
+  signature,
+  contract,
+}: {
+  hash: Hex;
+  signature: Hex;
+  contract: ThirdwebContract;
+}): Promise<boolean> {
+  const result = await isValidSignature({
+    hash,
+    signature,
+    contract,
+  });
+  return result === EIP_1271_MAGIC_VALUE;
+}

package/src/exports/extensions/erc20.ts

@@ -10,6 +10,10 @@ export {
   type BalanceOfParams,
 } from "../../extensions/erc20/__generated__/IERC20/read/balanceOf.js";
 export { decimals } from "../../extensions/erc20/read/decimals.js";
+export {
+  delegates,
+  type DelegatesParams,
+} from "../../extensions/erc20/__generated__/IVotes/read/delegates.js";
 export { totalSupply } from "../../extensions/erc20/__generated__/IERC20/read/totalSupply.js";
 export {
   allowance,
@@ -113,3 +117,7 @@ export {
   getApprovalForTransaction,
   type GetApprovalForTransactionParams,
 } from "../../extensions/erc20/write/getApprovalForTransaction.js";
+export {
+  delegate,
+  type DelegateParams,
+} from "../../extensions/erc20/__generated__/IVotes/write/delegate.js";

package/src/exports/extensions/thirdweb.ts

@@ -0,0 +1,75 @@
+// --------------------------------------------------------
+// Publisher contract
+// --------------------------------------------------------
+
+// Read
+export {
+  getPublisherProfileUri,
+  type GetPublisherProfileUriParams,
+} from "../../extensions/thirdweb/__generated__/IContractPublisher/read/getPublisherProfileUri.js";
+export {
+  getPublishedUriFromCompilerUri,
+  type GetPublishedUriFromCompilerUriParams,
+} from "../../extensions/thirdweb/__generated__/IContractPublisher/read/getPublishedUriFromCompilerUri.js";
+export {
+  getAllPublishedContracts,
+  type GetAllPublishedContractsParams,
+} from "../../extensions/thirdweb/__generated__/IContractPublisher/read/getAllPublishedContracts.js";
+export {
+  getPublishedContract,
+  type GetPublishedContractParams,
+} from "../../extensions/thirdweb/__generated__/IContractPublisher/read/getPublishedContract.js";
+export {
+  getPublishedContractVersions,
+  type GetPublishedContractVersionsParams,
+} from "../../extensions/thirdweb/__generated__/IContractPublisher/read/getPublishedContractVersions.js";
+
+// Write
+export {
+  publishContract,
+  type PublishContractParams,
+} from "../../extensions/thirdweb/__generated__/IContractPublisher/write/publishContract.js";
+export {
+  setPublisherProfileUri,
+  type SetPublisherProfileUriParams,
+} from "../../extensions/thirdweb/__generated__/IContractPublisher/write/setPublisherProfileUri.js";
+export {
+  unpublishContract,
+  type UnpublishContractParams,
+} from "../../extensions/thirdweb/__generated__/IContractPublisher/write/unpublishContract.js";
+
+// --------------------------------------------------------
+// Multichain Registry
+// --------------------------------------------------------
+
+// Read
+export {
+  count,
+  type CountParams,
+} from "../../extensions/thirdweb/__generated__/ITWMultichainRegistry/read/count.js";
+export {
+  getAll,
+  type GetAllParams,
+} from "../../extensions/thirdweb/__generated__/ITWMultichainRegistry/read/getAll.js";
+export {
+  getMetadataUri,
+  type GetMetadataUriParams,
+} from "../../extensions/thirdweb/__generated__/ITWMultichainRegistry/read/getMetadataUri.js";
+
+// Write
+export {
+  add,
+  type AddParams,
+} from "../../extensions/thirdweb/__generated__/ITWMultichainRegistry/write/add.js";
+export {
+  remove,
+  type RemoveParams,
+} from "../../extensions/thirdweb/__generated__/ITWMultichainRegistry/write/remove.js";
+
+// --------------------------------------------------------
+// Contract Factory
+// --------------------------------------------------------
+export {
+  deployProxyByImplementation,
+  type DeployProxyByImplementationParams,
+} from "../../extensions/thirdweb/__generated__/IContractFactory/write/deployProxyByImplementation.js";

package/src/exports/extensions/vote.ts

@@ -67,6 +67,19 @@ export { votingDelay } from "../../extensions/vote/__generated__/Vote/read/votin
 
 export { votingPeriod } from "../../extensions/vote/__generated__/Vote/read/votingPeriod.js";
 
+export { proposalExists } from "../../extensions/vote/read/proposalExists.js";
+
+export { VoteType, ProposalState } from "../../extensions/vote/types.js";
+
+export { getProposalVoteCounts } from "../../extensions/vote/read/getProposalVoteCounts.js";
+
+export {
+  getAll,
+  type ProposalItem,
+} from "../../extensions/vote/read/getAll.js";
+
+export { canExecute } from "../../extensions/vote/read/canExecute.js";
+
 /**
  * WRITE Methods
  */
@@ -129,3 +142,4 @@ export {
   updateQuorumNumerator,
   type UpdateQuorumNumeratorParams,
 } from "../../extensions/vote/__generated__/Vote/write/updateQuorumNumerator.js";
+export { executeProposal } from "../../extensions/vote/write/executeProposal.js";

package/src/exports/react.ts

@@ -172,3 +172,8 @@ export {
 } from "../react/web/ui/prebuilt/thirdweb/CreateDirectListingButton/index.js";
 
 export { useConnectionManager } from "../react/core/providers/connection-manager.js";
+
+/**
+ * Blobbie
+ */
+export { Blobbie } from "../react/web/ui/ConnectWallet/Blobbie.js";

package/src/extensions/prebuilts/deploy-split.ts

@@ -9,7 +9,7 @@ import type { ClientAndChainAndAccount } from "../../utils/types.js";
 import { initialize } from "./__generated__/Split/write/initialize.js";
 
 /**
- * @extension PREBUILT
+ * @extension DEPLOY
  */
 export type SplitContractParams = {
   name: string;
@@ -71,6 +71,7 @@ export type DeploySplitContractOptions = Prettify<
  *    name: "Split contract",
  *    payees: ["0x...123", "0x...456"],
  *    shares: [5100, 4900], // See type `SplitContractParams` for more context
+ *  },
  * });
  * ```
  */

package/src/extensions/split/read/getAllRecipientsAddresses.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, it } from "vitest";
 import { ANVIL_CHAIN } from "~test/chains.js";
+import { TEST_CONTRACT_URI } from "~test/ipfs-uris.js";
 import { TEST_CLIENT } from "~test/test-clients.js";
 import { TEST_ACCOUNT_A } from "~test/test-wallets.js";
 import { getContract } from "../../../contract/contract.js";
@@ -21,6 +22,7 @@ describe.runIf(process.env.TW_SECRET_KEY)("getAllRecipientsAddresses", () => {
       chain: ANVIL_CHAIN,
       params: {
         name: "split-contract",
+        contractURI: TEST_CONTRACT_URI, // just to speed up the test
         payees,
         shares: [
           5100n, // 51%

package/src/extensions/split/read/getAllRecipientsPercentages.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, it } from "vitest";
 import { ANVIL_CHAIN } from "~test/chains.js";
+import { TEST_CONTRACT_URI } from "~test/ipfs-uris.js";
 import { TEST_CLIENT } from "~test/test-clients.js";
 import { TEST_ACCOUNT_A } from "~test/test-wallets.js";
 import { getContract } from "../../../contract/contract.js";
@@ -21,6 +22,7 @@ describe.runIf(process.env.TW_SECRET_KEY)("getAllRecipientsPercentages", () => {
       chain: ANVIL_CHAIN,
       params: {
         name: "split-contract",
+        contractURI: TEST_CONTRACT_URI, // just to speed up the test
         payees,
         shares: [
           5100n, // 51%

package/src/extensions/split/read/getRecipientSplitPercentage.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, it } from "vitest";
 import { ANVIL_CHAIN } from "~test/chains.js";
+import { TEST_CONTRACT_URI } from "~test/ipfs-uris.js";
 import { TEST_CLIENT } from "~test/test-clients.js";
 import { TEST_ACCOUNT_A } from "~test/test-wallets.js";
 import { getContract } from "../../../contract/contract.js";
@@ -20,6 +21,7 @@ describe.runIf(process.env.TW_SECRET_KEY)("getRecipientSplitPercentage", () => {
       chain: ANVIL_CHAIN,
       params: {
         name: "split-contract",
+        contractURI: TEST_CONTRACT_URI, // just to speed up the test
         payees,
         shares: [
           5100n, // 51%

package/src/extensions/vote/read/canExecute.ts

@@ -0,0 +1,27 @@
+import { simulateTransaction } from "../../../transaction/actions/simulate.js";
+import type { BaseTransactionOptions } from "../../../transaction/types.js";
+import { executeProposal } from "../write/executeProposal.js";
+
+/**
+ * Simulate the `execute` method of the Vote contract, to check if you can execute a proposal
+ * @extension VOTE
+ * @returns boolean - `true` if the proposal is executable, else `false`
+ *
+ * @example
+ * ```ts
+ * import { canExecute } from "thirdweb/extensions/vote";
+ *
+ * const executable = await canExecute({ contract, proposalId });
+ * ```
+ */
+export async function canExecute(
+  options: BaseTransactionOptions<{ proposalId: bigint }>,
+) {
+  try {
+    const transaction = await executeProposal(options);
+    await simulateTransaction({ transaction });
+    return true;
+  } catch {
+    return false;
+  }
+}

package/src/extensions/vote/read/getAll.ts

@@ -0,0 +1,106 @@
+import type { BaseTransactionOptions } from "../../../transaction/types.js";
+import type { Hex } from "../../../utils/encoding/hex.js";
+import { getAllProposals } from "../__generated__/Vote/read/getAllProposals.js";
+import { state } from "../__generated__/Vote/read/state.js";
+import { ProposalState } from "../types.js";
+import {
+  type ProposalVoteInfo,
+  getProposalVoteCounts,
+} from "./getProposalVoteCounts.js";
+
+/**
+ * @extension VOTE
+ */
+export type ProposalItem = {
+  /**
+   * ID of the proposal
+   */
+  proposalId: bigint;
+  /**
+   * The wallet address of the proposer
+   */
+  proposer: string;
+  /**
+   * Description of the proposal
+   */
+  description: string;
+  /**
+   * The block number at which the proposal is open for voting
+   */
+  startBlock: bigint;
+  /**
+   * The block number where the proposal concludes its voting phase
+   */
+  endBlock: bigint;
+  /**
+   * The current state of the proposal,  represented in number
+   */
+  state: number;
+  /**
+   * The current state of the proposal, represented in a user-friendly string
+   * Example: "pending" | "active" | "canceled"
+   */
+  stateLabel: string | undefined;
+  /**
+   * The current vote info. See type ProposalVoteInfo for more context
+   */
+  votes: ProposalVoteInfo;
+  /**
+   * The array of containing info about the set of actions that will be executed onchain,
+   * should the proposal pass
+   */
+  executions: Array<{
+    toAddress: string | undefined;
+    nativeTokenValue: bigint | undefined;
+    transactionData: Hex | undefined;
+  }>;
+};
+
+/**
+ * Get all proposals from a Vote contract with some extra info attached for each proposal (current state and votes)
+ * @extension VOTE
+ * @returns An array containing proposals data
+ *
+ * @example
+ * ```ts
+ * import { getAll } from "thirdweb/extension/getAll";
+ *
+ * const allProposals = await getAll({ contract });
+ * ```
+ */
+export async function getAll(
+  options: BaseTransactionOptions,
+): Promise<ProposalItem[]> {
+  const _proposals = await getAllProposals(options);
+  const _extraData = await Promise.all(
+    _proposals.map((proposal) => {
+      const params = {
+        contract: options.contract,
+        proposalId: proposal.proposalId,
+      };
+      return Promise.all([state(params), getProposalVoteCounts(params)]);
+    }),
+  );
+  return _extraData.map(([state, votes], index) => {
+    const data = _proposals[index];
+    // We know `data` SHOULD exist but adding the error-throw below to make typescript happy
+    if (!data) {
+      throw new Error(`Proposal not found for index: ${index}`);
+    }
+    return {
+      proposalId: data.proposalId,
+      proposer: data.proposer,
+      description: data.description,
+      startBlock: data.startBlock,
+      endBlock: data.endBlock,
+      state: state,
+      stateLabel: ProposalState[state],
+      votes: votes,
+      executions: data.targets.map((_, index) => ({
+        toAddress: data.targets[index],
+        nativeTokenValue: data.values[index],
+        transactionData: data.calldatas[index],
+      })),
+    };
+  });
+}

package/src/extensions/vote/read/getProposalVoteCounts.ts

@@ -0,0 +1,39 @@
+import type { BaseTransactionOptions } from "../../../transaction/types.js";
+import {
+  type ProposalVotesParams,
+  proposalVotes,
+} from "../__generated__/Vote/read/proposalVotes.js";
+import type { VoteType } from "../types.js";
+
+// @internal
+export type ProposalVoteInfo = { [K in keyof typeof VoteType]: bigint };
+
+/**
+ * Get the info about Against, For and Abstain votes of a proposal
+ * @param options
+ * @returns the object containing the info about Against, For and Abstain votes of a proposal
+ * @extension VOTE
+ * @example
+ * ```ts
+ * import { getProposalVoteCounts } from "thirdweb/extensions/vote";
+ *
+ * const data = await getProposalVoteCounts({ contract, proposalId });
+ *
+ * // Example result
+ * {
+ *   against: 12n, // 12 users voted against the proposal
+ *   for: 104n, // 104 users support the proposal
+ *   abstain: 3n, // 3 users voted abstain on this proposal
+ * }
+ * ```
+ */
+export async function getProposalVoteCounts(
+  options: BaseTransactionOptions<ProposalVotesParams>,
+): Promise<ProposalVoteInfo> {
+  const votes = await proposalVotes(options);
+  return {
+    against: votes[0],
+    for: votes[1],
+    abstain: votes[2],
+  };
+}

package/src/extensions/vote/read/proposalExists.ts

@@ -0,0 +1,27 @@
+import type { BaseTransactionOptions } from "../../../transaction/types.js";
+import { type StateParams, state } from "../__generated__/Vote/read/state.js";
+
+/**
+ * Check if a proposal exists based on a given proposalId
+ * @returns `true` if the proposal exists, else `false`
+ * @extension VOTE
+ *
+ * @example
+ * ```ts
+ * import { proposalExists } from "thirdweb/extensions/vote";
+ *
+ * // Check if the proposal with proposalId `4` exists
+ * const exists = await proposalExists({ contract, proposalId: 4n }); // either `true` or `false`
+ * ```
+ */
+export async function proposalExists(
+  options: BaseTransactionOptions<StateParams>,
+) {
+  try {
+    await state(options);
+    return true;
+  } catch (e) {
+    // If it throws an error then the proposal(id) doesn't exist
+    return false;
+  }
+}

package/src/extensions/vote/types.ts

@@ -0,0 +1,16 @@
+export enum VoteType {
+  against = 0,
+  for = 1,
+  abstain = 2,
+}
+
+export enum ProposalState {
+  pending = 0,
+  active = 1,
+  canceled = 2,
+  defeated = 3,
+  succeeded = 4,
+  queued = 5,
+  expired = 6,
+  executed = 7,
+}

package/src/extensions/vote/write/executeProposal.ts

@@ -0,0 +1,63 @@
+import type { BaseTransactionOptions } from "../../../transaction/types.js";
+import {
+  type ExecuteParams,
+  execute,
+} from "../__generated__/Vote/write/execute.js";
+import { proposalExists } from "../read/proposalExists.js";
+
+/**
+ * Execute a Proposal
+ * @extension VOTE
+ * @returns a prepared transaction for the `execute` method
+ *
+ * @example
+ * ```ts
+ * import { executeProposal } from "thirdweb/extensions/vote";
+ *
+ * const transaction = executeProposal({ contract, proposalId });
+ * const tx = await sendTransaction({ transaction, account });
+ * ```
+ */
+export function executeProposal(
+  options: BaseTransactionOptions<{ proposalId: bigint }>,
+) {
+  return execute({
+    contract: options.contract,
+    asyncParams: async () => getExecuteParams(options),
+  });
+}
+
+/**
+ * @internal
+ */
+export async function getExecuteParams(
+  options: BaseTransactionOptions<{ proposalId: bigint }>,
+): Promise<ExecuteParams> {
+  const { proposalId } = options;
+  const exists = await proposalExists(options);
+  if (!exists) {
+    throw new Error(`Proposal ID: ${proposalId} does not exists`);
+  }
+  const [{ getAllProposals }, { keccak256 }, { stringToBytes }] =
+    await Promise.all([
+      import("../__generated__/Vote/read/getAllProposals.js"),
+      import("../../../utils/hashing/keccak256.js"),
+      import("../../../utils/encoding/to-bytes.js"),
+      import("../__generated__/Vote/write/execute.js"),
+    ]);
+
+  // Sadly there isn't a way to fetch a single proposal so we have to load them all
+  const _proposals = await getAllProposals(options);
+  const proposal = _proposals.find((p) => p.proposalId === proposalId);
+  if (!proposal) {
+    throw new Error(`Could not find proposalId: ${proposalId}`);
+  }
+  const { targets, values, calldatas, description } = proposal;
+  const descriptionHash = keccak256(stringToBytes(description));
+  return {
+    descriptionHash,
+    targets,
+    values,
+    calldatas,
+  };
+}

package/src/react/core/utils/wallet.ts

@@ -4,12 +4,12 @@ import type { Chain } from "../../../chains/types.js";
 import type { ThirdwebClient } from "../../../client/client.js";
 import { resolveAvatar } from "../../../extensions/ens/resolve-avatar.js";
 import { resolveName } from "../../../extensions/ens/resolve-name.js";
+import { shortenAddress } from "../../../utils/address.js";
 import { getWalletInfo } from "../../../wallets/__generated__/getWalletInfo.js";
 import type { Account, Wallet } from "../../../wallets/interfaces/wallet.js";
 import type { WalletInfo } from "../../../wallets/wallet-info.js";
 import type { WalletId } from "../../../wallets/wallet-types.js";
 import { useWalletBalance } from "../hooks/others/useWalletBalance.js";
-import { shortenString } from "./addresses.js";
 
 /**
  * Get the ENS name and avatar for an address
@@ -99,7 +99,7 @@ export function useConnectedWalletDetails(
   });
 
   const shortAddress = activeAccount?.address
-    ? shortenString(activeAccount.address, false)
+    ? shortenAddress(activeAccount.address, 4)
     : "";
 
   const balanceQuery = useWalletBalance({

package/src/react/web/ui/ConnectWallet/Blobbie.tsx

@@ -0,0 +1,134 @@
+"use client";
+import { hexToNumber } from "@noble/curves/abstract/utils";
+import { useId, useMemo } from "react";
+import { type Address, numberToHex } from "viem";
+
+// Distance between 2 colors (in RGB)
+type Color = [number, number, number];
+function hexToRgb(hex: string) {
+  return [
+    Number(hexToNumber(hex.slice(0, 2))),
+    Number(hexToNumber(hex.slice(2, 4))),
+    Number(hexToNumber(hex.slice(4, 6))),
+  ] satisfies [number, number, number];
+}
+
+/**
+ * A unique gradient avatar based on the provided address.
+ * @param props The component props.
+ * @param props.address The address to generate the gradient with.
+ * @param props.size The size of each side of the square avatar (in pixels)
+ */
+export function Blobbie(props: { address: Address; size: number }) {
+  const id = useId();
+  const colors: [string, string, string] = useMemo(() => {
+    const color = props.address.slice(2, 8);
+    const rgb = hexToRgb(color);
+
+    // To get well-paired colors, we use the first rgb hex sequence as our main color then find its two best pairs (split color wheel into thirds)
+    // To prevent extremely dark colors, which tend to clash, we don't allow values less than 55
+    const pairing1 = rgb.map((n) => (n + 85 > 255 ? n + 85 - 200 : n + 85));
+    const pairing2 = rgb.map((n) => (n - 85 < 55 ? n - 85 + 200 : n - 85));
+    return [
+      color,
+      pairing1.map((n) => numberToHex(n).replace("0x", "")).join(""),
+      pairing2.map((n) => numberToHex(n).replace("0x", "")).join(""),
+    ];
+  }, [props.address]);
+
+  const positions: [Color, Color, Color, Color, Color] = useMemo(() => {
+    const _positions: Color[] = [];
+    let i = 8;
+    while (i < 44) {
+      const values = hexToRgb(props.address.slice(i, i + 6));
+      _positions.push(values);
+      i += 6;
+    }
+    return _positions as [Color, Color, Color, Color, Color];
+  }, [props.address]);
+
+  console.log(colors);
+
+  return (
+    <svg
+      height={`${props.size}px`}
+      style={{ background: "#FFFFFF" }}
+      width={`${props.size}px`}
+      role="presentation"
+      viewBox="0 0 500 500"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <defs>
+        {colors.map((color, idx) => {
+          return (
+            <radialGradient
+              id={`${id}_grad${idx + 1}`}
+              cx="50%"
+              cy="50%"
+              r="50%"
+              key={`grad${
+                // biome-ignore lint/suspicious/noArrayIndexKey: Jonas said so
+                idx
+              }`}
+            >
+              <stop
+                offset="0%"
+                style={{ stopColor: `#${color}`, stopOpacity: 0.9 }}
+              />
+              <stop
+                offset="100%"
+                style={{ stopColor: `#${color}`, stopOpacity: 0 }}
+              />
+            </radialGradient>
+          );
+        })}
+      </defs>
+
+      <ellipse
+        cx="250"
+        cy="250"
+        rx="500"
+        ry="500"
+        fill={`url(#${id}_grad1)`}
+        opacity={0.5}
+      />
+      <ellipse
+        cx={400 + positions[0][0]}
+        cy={400 + positions[0][1]}
+        rx={350 + positions[0][2]}
+        ry={350 + positions[0][2]}
+        fill={`url(#${id}_grad1)`}
+      />
+      <ellipse
+        cx={positions[1][0]}
+        cy={positions[1][1]}
+        rx={350 + positions[1][2]}
+        ry={350 + positions[1][2]}
+        fill={`url(#${id}_grad2)`}
+      />
+      <ellipse
+        cx={400 + positions[2][0]}
+        cy={positions[2][1]}
+        rx={350 + positions[2][2]}
+        ry={350 + positions[2][2]}
+        fill={`url(#${id}_grad3)`}
+      />
+      <ellipse
+        cx={positions[3][0]}
+        cy={positions[3][1]}
+        rx={100 + positions[3][2]}
+        ry={100 + positions[3][2]}
+        fill={`url(#${id}_grad2)`}
+        opacity={0.5}
+      />
+      <ellipse
+        cx={positions[4][0]}
+        cy={positions[4][1]}
+        rx={100 + positions[4][2]}
+        ry={100 + positions[4][2]}
+        fill={`url(#${id}_grad3)`}
+        opacity={0.5}
+      />
+    </svg>
+  );
+}