Self send nfts to mark transactions in logs (#260)

* ledger setup + lib bump

* fix

* remove ledger checkbox

* fix

* self send nfts tx mark

components/SideNav.tsx

@@ -37,6 +37,8 @@ import { NFT } from 'types'
 import { useViewport } from 'hooks/useViewport'
 import useLocalStorageState from 'hooks/useLocalStorageState'
 import { SIDEBAR_COLLAPSE_KEY } from 'utils/constants'
+import { createTransferInstruction } from '@solana/spl-token'
+import { PublicKey, TransactionInstruction } from '@solana/web3.js'
 
 const SideNav = ({ collapsed }: { collapsed: boolean }) => {
   const { t } = useTranslation(['common', 'search'])
@@ -46,6 +48,10 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
   const themeData = mangoStore((s) => s.themeData)
   const nfts = mangoStore((s) => s.wallet.nfts.data)
   const { mangoAccount } = useMangoAccount()
+  const setPrependedGlobalAdditionalInstructions = mangoStore(
+    (s) => s.actions.setPrependedGlobalAdditionalInstructions,
+  )
+
   const router = useRouter()
   const { pathname } = router
 
@@ -88,6 +94,28 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
     return mangoNfts
   }, [nfts])
 
+  //mark transactions with used nfts
+  useEffect(() => {
+    let newInstruction: TransactionInstruction[] = []
+    if (mangoNfts.length && theme) {
+      const collectionAddress = CUSTOM_SKINS[theme.toLowerCase()]
+      const usedNft = mangoNfts.find(
+        (nft) => nft.collectionAddress === collectionAddress,
+      )
+      if (usedNft && publicKey && collectionAddress) {
+        newInstruction = [
+          createTransferInstruction(
+            new PublicKey(usedNft.tokenAccount),
+            new PublicKey(usedNft.tokenAccount),
+            publicKey,
+            1,
+          ),
+        ]
+      }
+    }
+    setPrependedGlobalAdditionalInstructions(newInstruction)
+  }, [mangoNfts, theme, themeData])
+
   // find sidebar image url from skin nft for theme
   const sidebarImageUrl = useMemo(() => {
     if (!theme) return themeData.sideImagePath

components/modals/CreateAccountModal.tsx

@@ -15,7 +15,7 @@ const CreateAccountModal = ({ isOpen, onClose }: ModalProps) => {
 
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
-      <div className="flex min-h-[264px] flex-col items-center justify-center">
+      <div className="flex min-h-[400px] flex-col items-center justify-center">
         <CreateAccountForm customClose={handleClose} />
       </div>
     </Modal>

components/modals/MangoAccountsListModal.tsx

@@ -102,7 +102,7 @@ const MangoAccountsListModal = ({
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
       <div className="inline-block w-full transform overflow-x-hidden">
-        <div className="flex min-h-[364px] flex-col justify-between">
+        <div className="flex min-h-[400px] flex-col justify-between">
           <div>
             <h2 className="text-center">{t('accounts')}</h2>
             {loading ? (

public/locales/en/common.json

@@ -197,6 +197,7 @@
   "vote": "Vote",
   "yes": "Yes",
   "you": "You",
-  "using-ledger": "Using Ledger"
+  "using-ledger": "Using Ledger",
+  "sign-to-in-app-notifications": "Sign to in app notifications"
  }
  

public/locales/es/common.json

@@ -197,6 +197,7 @@
   "vote": "Vote",
   "yes": "Yes",
   "you": "You",
-  "using-ledger": "Using Ledger"
+  "using-ledger": "Using Ledger",
+  "sign-to-in-app-notifications": "Sign to in app notifications"
  }
  

public/locales/ru/common.json

@@ -197,6 +197,7 @@
   "vote": "Vote",
   "yes": "Yes",
   "you": "You",
-  "using-ledger": "Using Ledger"
+  "using-ledger": "Using Ledger",
+  "sign-to-in-app-notifications": "Sign to in app notifications"
  }
  

public/locales/zh/common.json

@@ -196,6 +196,7 @@
   "vote": "投票",
   "yes": "是",
   "you": "你",
-  "using-ledger": "Using Ledger"
+  "using-ledger": "Using Ledger",
+  "sign-to-in-app-notifications": "Sign to in app notifications"
  }
  

public/locales/zh_tw/common.json

@@ -196,5 +196,7 @@
   "vote": "投票",
   "yes": "是",
   "you": "你",
+  "using-ledger": "Using Ledger",
+  "sign-to-in-app-notifications": "Sign to in app notifications"
   "using-ledger": "Using Ledger"
 }

store/mangoStore.ts

@@ -9,6 +9,7 @@ import {
   Keypair,
   PublicKey,
   RecentPrioritizationFees,
+  TransactionInstruction,
 } from '@solana/web3.js'
 import { OpenOrders, Order } from '@project-serum/serum/lib/market'
 import { Orderbook } from '@project-serum/serum'
@@ -114,10 +115,18 @@ export const emptyWallet = new EmptyWallet(Keypair.generate())
 
 const initMangoClient = (
   provider: AnchorProvider,
-  opts = { prioritizationFee: DEFAULT_PRIORITY_FEE },
+  opts: {
+    prioritizationFee: number
+    prependedGlobalAdditionalInstructions: TransactionInstruction[]
+  } = {
+    prioritizationFee: DEFAULT_PRIORITY_FEE,
+    prependedGlobalAdditionalInstructions: [],
+  },
 ): MangoClient => {
   return MangoClient.connect(provider, CLUSTER, MANGO_V4_ID[CLUSTER], {
     prioritizationFee: opts.prioritizationFee,
+    prependedGlobalAdditionalInstructions:
+      opts.prependedGlobalAdditionalInstructions,
     idsSource: 'api',
     postSendTxCallback: ({ txid }: { txid: string }) => {
       notify({
@@ -193,6 +202,7 @@ export type MangoStore = {
     details: ProfileDetails | null
     loadDetails: boolean
   }
+  prependedGlobalAdditionalInstructions: TransactionInstruction[]
   priorityFee: number
   selectedMarket: {
     name: string | undefined
@@ -283,6 +293,9 @@ export type MangoStore = {
     connectMangoClientWithWallet: (wallet: WalletAdapter) => Promise<void>
     loadMarketFills: () => Promise<void>
     updateConnection: (url: string) => void
+    setPrependedGlobalAdditionalInstructions: (
+      instructions: TransactionInstruction[],
+    ) => void
     estimatePriorityFee: (feeMultiplier: number) => Promise<void>
   }
 }
@@ -358,6 +371,7 @@ const mangoStore = create<MangoStore>()(
         details: { profile_name: '', trader_category: '', wallet_pk: '' },
       },
       priorityFee: DEFAULT_PRIORITY_FEE,
+      prependedGlobalAdditionalInstructions: [],
       selectedMarket: {
         name: 'SOL/USDC',
         current: undefined,
@@ -1016,8 +1030,11 @@ const mangoStore = create<MangoStore>()(
             )
             provider.opts.skipPreflight = true
             const priorityFee = get().priorityFee ?? DEFAULT_PRIORITY_FEE
+
             const client = initMangoClient(provider, {
               prioritizationFee: priorityFee,
+              prependedGlobalAdditionalInstructions:
+                get().prependedGlobalAdditionalInstructions,
             })
 
             set((s) => {
@@ -1033,6 +1050,25 @@ const mangoStore = create<MangoStore>()(
             }
           }
         },
+        async setPrependedGlobalAdditionalInstructions(
+          instructions: TransactionInstruction[],
+        ) {
+          const set = get().set
+          const client = mangoStore.getState().client
+
+          const provider = client.program.provider as AnchorProvider
+          provider.opts.skipPreflight = true
+
+          const newClient = initMangoClient(provider, {
+            prioritizationFee: get().priorityFee,
+            prependedGlobalAdditionalInstructions: instructions,
+          })
+
+          set((s) => {
+            s.client = newClient
+            s.prependedGlobalAdditionalInstructions = instructions
+          })
+        },
         async fetchProfileDetails(walletPk: string) {
           const set = get().set
           set((state) => {
@@ -1128,7 +1164,11 @@ const mangoStore = create<MangoStore>()(
             options,
           )
           newProvider.opts.skipPreflight = true
-          const newClient = initMangoClient(newProvider)
+          const newClient = initMangoClient(newProvider, {
+            prependedGlobalAdditionalInstructions:
+              get().prependedGlobalAdditionalInstructions,
+            prioritizationFee: DEFAULT_PRIORITY_FEE,
+          })
           set((state) => {
             state.connection = newConnection
             state.client = newClient
@@ -1180,6 +1220,8 @@ const mangoStore = create<MangoStore>()(
           provider.opts.skipPreflight = true
           const newClient = initMangoClient(provider, {
             prioritizationFee: feeEstimate,
+            prependedGlobalAdditionalInstructions:
+              get().prependedGlobalAdditionalInstructions,
           })
           set((state) => {
             state.priorityFee = feeEstimate