Merge pull request #314 from reservoirprotocol/superbowl

Superbowl

components/Layout.tsx

@@ -17,7 +17,7 @@ const Layout: FC<Props> = ({ children }) => {
           pt: 80,
         }}
       >
-        <Box css={{ maxWidth: 1920, mx: 'auto' }}>
+        <Box css={{ maxWidth: 4500, mx: 'auto' }}>
           <Navbar />
           <main>{children}</main>
         </Box>

components/buttons/Bid.tsx

@@ -32,6 +32,9 @@ type Props = {
 
 type BiddingCurrencies = ComponentPropsWithoutRef<typeof BidModal>['currencies']
 
+const orderFee = process.env.NEXT_PUBLIC_MARKETPLACE_FEE
+const orderFees = orderFee ? [orderFee] : []
+
 const Bid: FC<Props> = ({
   tokenId,
   collectionId,
@@ -102,6 +105,7 @@ const Bid: FC<Props> = ({
         collectionId={collectionId}
         trigger={trigger}
         openState={openState}
+        feesBps={orderFees}
         currencies={bidCurrencies}
         onClose={(data, stepData, currentStep) => {
           if (mutate && currentStep == BidStep.Complete) mutate()

components/buttons/CollectionOffer.tsx

@@ -4,8 +4,10 @@ import { useRouter } from 'next/router'
 import {
   ComponentProps,
   ComponentPropsWithoutRef,
+  Dispatch,
   FC,
   ReactNode,
+  SetStateAction,
   useContext,
   useEffect,
   useState,
@@ -34,6 +36,9 @@ type Props = {
 
 type BiddingCurrencies = ComponentPropsWithoutRef<typeof BidModal>['currencies']
 
+const orderFee = process.env.NEXT_PUBLIC_MARKETPLACE_FEE
+const orderFees = orderFee ? [orderFee] : []
+
 const CollectionOffer: FC<Props> = ({
   collection,
   mutate,
@@ -148,6 +153,7 @@ const CollectionOffer: FC<Props> = ({
             collectionId={collection?.id}
             trigger={trigger}
             attribute={attribute}
+            feesBps={orderFees}
             currencies={bidCurrencies}
             onClose={(data, stepData, currentStep) => {
               if (mutate && currentStep == BidStep.Complete) mutate()

components/buttons/List.tsx

@@ -20,6 +20,8 @@ import { useConnectModal } from '@rainbow-me/rainbowkit'
 import { ToastContext } from 'context/ToastContextProvider'
 import { useMarketplaceChain } from 'hooks'
 
+const orderFee = process.env.NEXT_PUBLIC_MARKETPLACE_FEE
+
 type ListingCurrencies = ComponentPropsWithoutRef<
   typeof ListModal
 >['currencies']
@@ -66,6 +68,8 @@ const List: FC<Props> = ({
     </Button>
   )
 
+  const orderFees = orderFee ? [orderFee] : []
+
   if (isDisconnected || isInTheWrongNetwork) {
     return cloneElement(trigger, {
       onClick: async () => {
@@ -85,10 +89,12 @@ const List: FC<Props> = ({
     return (
       <ListModal
         trigger={trigger}
+        nativeOnly={true}
         collectionId={contract}
         tokenId={tokenId}
-        currencies={listingCurrencies}
+        feesBps={orderFees}
         enableOnChainRoyalties={true}
+        currencies={listingCurrencies}
         onClose={(data, stepData, currentStep) => {
           if (mutate && currentStep == ListStep.Complete) mutate()
         }}

components/collections/CollectionActions.tsx

@@ -24,9 +24,9 @@ type CollectionActionsProps = {
 
 const CollectionAction = styled(Flex, {
   px: '$4',
-  py: '$3',
+  py: '$4',
   color: '$gray12',
-  background: '$panelBg',
+  background: '$gray2',
   cursor: 'pointer',
   transition: 'background 0.25s ease-in',
   height: 48,
@@ -81,9 +81,8 @@ const CollectionActions: FC<CollectionActionsProps> = ({ collection }) => {
   const containerCss: ComponentPropsWithoutRef<typeof Flex>['css'] = {
     borderRadius: 8,
     overflow: 'hidden',
-    gap: 1,
-    flexShrink: 0,
-    mb: 'auto',
+    gap: 0,
+    bg: '$panelBg',
   }
 
   const dropdownContentProps: ComponentPropsWithoutRef<
@@ -161,63 +160,6 @@ const CollectionActions: FC<CollectionActionsProps> = ({ collection }) => {
     </CollectionActionDropdownItem>
   )
 
-  if (isMobile) {
-    return (
-      <Flex css={containerCss}>
-        <Dropdown
-          trigger={collectionActionOverflowTrigger}
-          contentProps={dropdownContentProps}
-        >
-          <Flex direction="column">
-            <a
-              href={blockExplorerUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <CollectionActionDropdownItem>
-                {etherscanImage}
-                Etherscan
-              </CollectionActionDropdownItem>
-            </a>
-            {collection?.externalUrl && (
-              <a
-                href={collection.externalUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <CollectionActionDropdownItem>
-                  <FontAwesomeIcon icon={faGlobe} width={16} height={16} />
-                  Website
-                </CollectionActionDropdownItem>
-              </a>
-            )}
-            {collection?.discordUrl && (
-              <a
-                href={collection.discordUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <CollectionActionDropdownItem>
-                  <FontAwesomeIcon icon={faDiscord} width={16} height={16} />{' '}
-                  Discord
-                </CollectionActionDropdownItem>
-              </a>
-            )}
-            {twitterLink && (
-              <a href={twitterLink} target="_blank" rel="noopener noreferrer">
-                <CollectionActionDropdownItem>
-                  <FontAwesomeIcon icon={faTwitter} width={16} height={16} />{' '}
-                  Twitter
-                </CollectionActionDropdownItem>
-              </a>
-            )}
-            {refreshMetadataItem}
-          </Flex>
-        </Dropdown>
-      </Flex>
-    )
-  }
-
   return (
     <Flex css={containerCss}>
       <a href={blockExplorerUrl} target="_blank" rel="noopener noreferrer">
@@ -232,7 +174,7 @@ const CollectionActions: FC<CollectionActionsProps> = ({ collection }) => {
       )}
       {collection?.discordUrl && (
         <a
-          href={collection.discordUrl}
+          href={collection?.discordUrl}
           target="_blank"
           rel="noopener noreferrer"
         >