Group Buy Flow

Suggest Edits

Here is all you need to know and do to enable the "Antic Group Buy"! 🎉

Step 1: Configure your Antic Client data object

To complete this step you will need to make use of the JWT token you created in the Authentication section and the unique ID (BusinessId) you received from us upon sign up.

const partnerData: businessData = {
  businessId: 'REPLACE_WITH_YOUR_BUSINESS_ID',
  jwt: 'REPLACE_WITH_JWT_YOU_CREATE_IN_AUTHENTICATION_SECTION',
};

Step 2: Configure Group Data

GroupData is relevant information about the digital asset that has been listed for sale and is now available through the Buy Together button.

const groupData = {
  name: 'Asset for Sale',                                      
  description: 'Exclusive 10 piece collection from Antic',     
  assetListingUrl: 'https://market.antic/assets/1236173199',          
  assetId: '1236173199' ,                                      
  assetAddress: '0x373e187EfA875151d4594eC16f26f501c580BB78',  
  assetImageUrl: 'https://market.antic/assets/imgs/1236173199.jpg', 
  totalPrice: '0.5',      
  businessFee: '0',
};

Step 3: Configure Theme

Select light or dark mode and the CTA color, default is light.

const theme = {
  darkMode: true;
  accent: 'orange' // other available color is 'purple' for now
};

Step 4: Configuring our Antic JSX tag

The Antic JSX tag is displayed in the UI/UX of the "Antic Group Buy" flow, it's a modal that is displayed with respect to the isOpen boolean prop.
Other required props:

  • onToggle callback to support opening and closing the modal
  • partnerData object we configured at the top of this page
  • networkId - EVM network to use, current supported values {ETH_GORELI, ETH_MAINNET, POLYGON_MUMBAI, POLYGON}
    Optional props:
  • groupData - digital asset data we configured in the previous step
  • groupId - a string representing the generated groupId for the share URL use case
  • theme - sets the theme of the modal (light / dark mode and CTA color)
  • onLoaded - callback that is triggered once the modal is loaded
<Antic
  isOpen={isOpen}
  onToggle={(isOpen) => setIsOpen(isOpen)}
  onLoaded={(isLoaded) => {setIsLoaded(isLoaded);}}
  businessData={businessData}
  groupData={groupData}
  groupId={sharedGroupId}
  networkId={NetworkId.POLYGON}
  testMode={false}
  theme={theme}
/>

Step 4: Initiating the "Antic Group Buy" flow

This can be done in two ways:

  • See that the import correlates with the Installation you selected previously.
Click on a "Buy Together" button
import { useState, useEffect } from 'react';
import { createRoot } from 'react-dom/client';
import AnticModal, { GroupData, BusinessData, Theme, NetworkId } from '@anticxyz/groups'; 
// for standard integration uncomment the below
//import Antic, { GroupData, BusinessData, Theme } from '@anticxyz/so-widget'; 
//import { NetworkId } from '@anticxyz/groups/global/configs';

const Host = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [isLoaded, setIsLoaded] = useState(false);
  const [sharedGroupId, setSharedGroupId] = useState<string>();
  const [groupData, setGroupData] = useState<GroupData>();
  
  return (
    <>
      <button
        onClick={() => {
        setGroupData(groupData);
        setSharedGroupId(undefined);
        setIsOpen(true);
        }}
      >
        Buy Together
      </button>
      <Antic
          isOpen={isOpen}
          onToggle={(isOpen) => setIsOpen(isOpen)}
                    onLoaded={() => {setIsLoaded(true);}}
          businessData={businessData}
          groupData={groupData}
          groupId={sharedGroupId}
          networkId={NetworkId.POLYGON}
          testMode={false}
                theme={theme}
        />
    </>
  );
};

const root = createRoot(document.getElementById('root') as HTMLElement);

root.render(<Host />);
Navigate to a URL with "antic-group-id" query parameter
import { useState, useEffect } from 'react';
import { createRoot } from 'react-dom/client';
import AnticModal, { GroupData, BusinessData, Theme, NetworkId } from '@anticxyz/groups'; 
// for standard integration uncomment the below
//import Antic, { GroupData, BusinessData, Theme } from '@anticxyz/so-widget'; 
//import { NetworkId } from '@anticxyz/groups/global/configs';

const ANTIC_GROUP_ID = 'antic-group-id';

const Host = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [isLoaded, setIsLoaded] = useState(false)
  const [sharedGroupId, setSharedGroupId] = useState<string>();
  const [groupData, setGroupData] = useState<GroupData>();
  
  const urlParams = new URLSearchParams(window.location.search);
  const groupIdFromUrl = urlParams.get(ANTIC_GROUP_ID);

  useEffect(() => {
    if (groupIdFromUrl) {
      setSharedGroupId(groupIdFromUrl);
      setIsOpen(true);
    }
  }, []);

  return (
    <>
      <button
        onClick={() => {
          setGroupData(groupData);
          setSharedGroupId(undefined);
          setIsOpen(true);
        }}
      >
        Buy Together
      </button>
      <Antic
          isOpen={isOpen}
          onToggle={(isOpen) => setIsOpen(isOpen)}
          onLoaded={() => {setIsLoaded(true);}}
          businessData={businessData}
          groupData={groupData}
          groupId={sharedGroupId}
          networkId={NetworkId.POLYGON}
          testMode={false}
            theme={theme}
        />
    </>
  );
};

const root = createRoot(document.getElementById('root') as HTMLElement);

root.render(<Host />);

That's it, the "Antic Group Buy" is now available.

👍

Talk to us!

Our product evolves and improves as you build on top of it, iterating quickly to help support new use cases and constantly optimizing for value. To do so effectively, we want your feedback. Any feedback is welcomed - good, bad, or neutral.
You can share your input via email at [email protected]

For tech questions, clarifications or god forbid issues, please utilize the Discussions tab

Updated about 1 month ago