feat: add list to user collection, add new contracts transfer, burn, add gentk management (cancel, list, burn, transfer)

src/components/Activity/Actions/ActionTransfered.tsx

@@ -13,7 +13,9 @@ export const ActionTransfered: TActionComp = ({ action, verbose }) => (
     />
     <>
       transfered{" "}
-      <strong>#{verbose ? action.objkt!.name : action.objkt!.iteration}</strong>{" "}
+      <strong>
+        {verbose ? action.objkt!.name : `#${action.objkt!.iteration}`}
+      </strong>{" "}
       to
     </>
     <UserBadge

src/components/Input/Checkbox.module.scss

@@ -30,6 +30,9 @@
   overflow: hidden;
   position: relative;
   margin-right: 15px;
+  &.no_children {
+    margin-right: 0;
+  }
 }
 
 .radio .checkmark {

src/components/Input/Checkbox.tsx

@@ -35,7 +35,11 @@ export function Checkbox({
         checked={value}
         onChange={(event) => onChange(!value, event)}
       />
-      <span className={cs(style.checkmark, classNameCheckmark)} />
+      <span
+        className={cs(style.checkmark, classNameCheckmark, {
+          [style.no_children]: !children,
+        })}
+      />
       {children}
     </label>
   )

src/components/Input/InputMultiIcons.module.scss

@@ -0,0 +1,25 @@
+@import "../../styles/Variables.scss";
+
+.container {
+  display: flex;
+  flex-direction: row;
+  button {
+    height: 50px;
+    margin: 0;
+    padding: 0 4px;
+    border: none;
+    background: transparent;
+    color: var(--color-border-input);
+    cursor: pointer;
+
+    &.active {
+      pointer-events: none;
+
+      color: var(--color-secondary);
+    }
+
+    &:hover {
+      color: var(--color-secondary);
+    }
+  }
+}

src/components/Input/InputMultiIcons.tsx

@@ -0,0 +1,36 @@
+import React from "react"
+import cs from "classnames"
+import style from "./InputMultiIcons.module.scss"
+
+interface Option<T> {
+  key?: string
+  label: any
+  value: T
+}
+interface Props<T> {
+  className: string
+  options: Option<T>[]
+  value?: T | null
+  onChange: (opt: Option<T>) => void
+}
+
+export function InputMultiIcons<T>({
+  className,
+  options,
+  value = null,
+  onChange,
+}: Props<T>) {
+  return (
+    <div className={cs(style.container, className)}>
+      {options.map((option) => (
+        <button
+          key={option.key || (option.value as any)}
+          className={cs({ [style.active]: option.value === value })}
+          onClick={() => onChange(option)}
+        >
+          {option.label}
+        </button>
+      ))}
+    </div>
+  )
+}

src/components/Input/InputReactiveSearch.module.scss

@@ -1,7 +1,8 @@
 .root {
   display: flex;
   flex-direction: column;
-  width: 400px;
+  max-width: 400px;
+  width: 100%;
   position: relative;
   z-index: 2;
 }

src/components/Navigation/Dropdown.module.scss

@@ -20,7 +20,6 @@
   pointer-events: none;
   z-index: 100000;
   visibility: hidden;
-
   & > a {
     padding-top: 5px !important;
     padding-bottom: 5px !important;
@@ -52,6 +51,10 @@
   visibility: visible;
 }
 
+.menu-top {
+  bottom: 100%
+}
+
 .mobile_static_menu {
   // avoid undefined error
 }

src/components/Navigation/Dropdown.tsx

@@ -17,6 +17,7 @@ interface Props {
   closeOnClick?: boolean
   mobileMenuAbsolute?: boolean
   renderComp?: any
+  direction?: "top" | "bottom"
 }
 
 export function Dropdown({
@@ -28,6 +29,7 @@ export function Dropdown({
   children,
   mobileMenuAbsolute,
   renderComp,
+  direction = "bottom",
 }: PropsWithChildren<Props>) {
   const [opened, setOpened] = useState<boolean>(false)
 
@@ -90,7 +92,7 @@ export function Dropdown({
       >
         {itemComp}
       </button>
-      <DropdownMenu opened={opened} className={className}>
+      <DropdownMenu direction={direction} opened={opened} className={className}>
         {children}
       </DropdownMenu>
     </div>

src/components/Navigation/DropdownMenu.tsx

@@ -6,17 +6,20 @@ import cs from "classnames"
 interface Props {
   opened: boolean
   className?: string
+  direction: "top" | "bottom"
 }
 
 export function DropdownMenu({
   opened,
   className,
   children,
+  direction,
 }: PropsWithChildren<Props>) {
   return (
     <div
       className={cs(style.menu, className, effects["drop-shadow-big"], {
         [style["menu-opened"]]: opened,
+        [style["menu-top"]]: direction === "top",
       })}
     >
       {children}

src/components/TableActions/ModalAddListing.tsx

@@ -0,0 +1,32 @@
+import React, { memo } from "react"
+import { Objkt } from "../../types/entities/Objkt"
+import { Modal } from "../Utils/Modal"
+import style from "./ModalUserCollection.module.scss"
+
+import { ListingCreate } from "../../containers/Objkt/ListingCreate"
+import { Spacing } from "../Layout/Spacing"
+
+interface ModalAddListingProps {
+  objkt: Objkt
+  onClose: () => void
+}
+
+const _ModalAddListing = ({ objkt, onClose }: ModalAddListingProps) => {
+  return (
+    <Modal
+      title={`List for trade "${objkt.name}"`}
+      onClose={onClose}
+      width="530px"
+    >
+      <div className={style.container}>
+        <div>Which price would you like to list your gentk for ?</div>
+        <Spacing size="regular" />
+        <div className={style.container_create}>
+          <ListingCreate objkt={objkt} defaultOpen onSuccess={onClose} />
+        </div>
+      </div>
+    </Modal>
+  )
+}
+
+export const ModalAddListing = memo(_ModalAddListing)

src/components/TableActions/ModalBurnGentk.tsx

@@ -0,0 +1,81 @@
+import React, { memo, useCallback, useContext, useState } from "react"
+import { Objkt } from "../../types/entities/Objkt"
+import { Modal } from "../Utils/Modal"
+import style from "./ModalUserCollection.module.scss"
+import { Spacing } from "../Layout/Spacing"
+import { Button } from "../Button"
+import { useContractOperation } from "../../hooks/useContractOperation"
+import { ContractFeedback } from "../Feedback/ContractFeedback"
+import { UserContext } from "../../containers/UserProvider"
+import {
+  BurnGentkOperation,
+  TBurnGentkOperationParams,
+} from "../../services/contract-operations/BurnGentk"
+import { TextWarning } from "../Text/TextWarning"
+import { Checkbox } from "../Input/Checkbox"
+
+interface ModalBurnGentkProps {
+  objkt: Objkt
+  onClose: () => void
+}
+
+const _ModalBurnGentk = ({ objkt, onClose }: ModalBurnGentkProps) => {
+  const [hasAccept, setHasAccept] = useState(false)
+  const { user } = useContext(UserContext)
+  const {
+    state,
+    loading: contractLoading,
+    error: contractError,
+    success,
+    call,
+  } = useContractOperation<TBurnGentkOperationParams>(BurnGentkOperation, {
+    onSuccess: onClose,
+  })
+  const callContract = useCallback(() => {
+    if (user) {
+      call({
+        objkt,
+        fromTzAddress: user.id,
+      })
+    }
+  }, [call, objkt, user])
+  return (
+    <Modal title={`Burn "${objkt.name}"`} onClose={onClose} width="490px">
+      <div className={style.container}>
+        <div>Are you sure you want to burn your gentk?</div>
+        <Spacing size="2x-small" />
+        <TextWarning>This action is irreversible.</TextWarning>
+        <Spacing size="regular" />
+        <Checkbox value={hasAccept} onChange={setHasAccept} paddingLeft={false}>
+          I understand that my gentk will be permanently deleted.
+        </Checkbox>
+        <Button
+          state={contractLoading ? "loading" : "default"}
+          color="primary"
+          onClick={callContract}
+          size="regular"
+          className={style.btn_full}
+          disabled={!hasAccept}
+        >
+          <i aria-hidden className="fa-solid fa-fire" />
+          burn
+        </Button>
+        {(contractLoading || success || contractError) && (
+          <>
+            <Spacing size="x-small" />
+            <ContractFeedback
+              state={state}
+              loading={contractLoading}
+              success={success}
+              error={contractError}
+              successMessage="Your gentk has been burn"
+              noSpacing
+            />
+          </>
+        )}
+      </div>
+    </Modal>
+  )
+}
+
+export const ModalBurnGentk = memo(_ModalBurnGentk)

src/components/TableActions/ModalCancelListing.tsx

@@ -0,0 +1,36 @@
+import React, { memo } from "react"
+import { Objkt } from "../../types/entities/Objkt"
+import { Modal } from "../Utils/Modal"
+import style from "./ModalUserCollection.module.scss"
+
+import { Spacing } from "../Layout/Spacing"
+import { ListingCancel } from "../../containers/Objkt/ListingCancel"
+
+interface ModalCancelListingProps {
+  objkt: Objkt
+  onClose: () => void
+}
+
+const _ModalCancelListing = ({ objkt, onClose }: ModalCancelListingProps) => {
+  return (
+    <Modal
+      title={`Cancel listing for "${objkt.name}"`}
+      onClose={onClose}
+      width="490px"
+    >
+      <div className={style.container}>
+        <div>Are you sure you want to cancel the listing?</div>
+        <Spacing size="regular" />
+        <div className={style.container_create}>
+          <ListingCancel
+            listing={objkt.activeListing!}
+            objkt={objkt}
+            onSuccess={onClose}
+          />
+        </div>
+      </div>
+    </Modal>
+  )
+}
+
+export const ModalCancelListing = memo(_ModalCancelListing)