Added modal for changing avatar

components/ChangeAvatarModal.tsx

@@ -0,0 +1,85 @@
+import React, { useEffect, useState } from 'react'
+import { FunctionComponent } from 'react'
+import Modal from './Modal'
+import { ElementTitle } from './styles'
+import { Responsive, WidthProvider } from 'react-grid-layout'
+// import _ from "lodash";
+
+const ResponsiveGridLayout = WidthProvider(Responsive)
+
+interface ChangeAvatarModalProps {
+  isOpen: boolean
+  onClose: () => void
+  url: string
+}
+
+const ChangeAvatarModal: FunctionComponent<ChangeAvatarModalProps> = ({
+  isOpen,
+  onClose,
+  url,
+}) => {
+  const [items, setItems] = useState([])
+
+  useEffect(() => {
+    const testImageUrls = ['', '', '']
+
+    const items = testImageUrls.map((_, key) => {
+      return {
+        i: key,
+        x: (key % 3) * 3,
+        y: key / 3,
+        w: 3,
+        h: 1,
+      }
+    })
+
+    setItems(items)
+  }, [items])
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <Modal.Header>
+        <ElementTitle noMarignBottom>Change Avatar</ElementTitle>
+      </Modal.Header>
+      <div
+        className="border border-th-bkg-4 bg-th-bkg-1"
+        style={{ height: 300, width: '100%' }}
+      >
+        <ResponsiveGridLayout
+          class="layout"
+          cols={{ xl: 3, lg: 3, md: 3, sm: 3, xs: 1, xxs: 1 }}
+          rowHeight={150}
+          isDraggable={false}
+          isResizable={false}
+          useCssTransforms={false}
+        >
+          {/* {_.map(items, item => {
+                        return (
+                            <div key={item.i} className="hover:cursor-pointer">
+                                <NFTDisplay url={url} selected={true}/>
+                            </div>
+                        )
+                    })} */}
+          <div key="1">
+            <NFTDisplay url={url} selected={true} />
+          </div>
+        </ResponsiveGridLayout>
+      </div>
+    </Modal>
+  )
+}
+
+const NFTDisplay = ({ url, selected }) => {
+  return (
+    <div>
+      <img
+        className={`border ${
+          selected ? 'border-th-primary' : 'border-th-bkg-4'
+        } h-2/6 w-2/6 rounded-lg`}
+        src={url}
+      ></img>
+    </div>
+  )
+}
+
+export default React.memo(ChangeAvatarModal)

components/ConnectWalletButton.tsx

@@ -19,6 +19,8 @@ import { ProfileIcon, WalletIcon } from './icons'
 import AccountsModal from './AccountsModal'
 import { useEffect } from 'react'
 import SettingsModal from './SettingsModal'
+import { UserCircleIcon } from '@heroicons/react/solid'
+import ChangeAvatarModal from './ChangeAvatarModal'
 
 const ConnectWalletButton = () => {
   const wallet = useMangoStore((s) => s.wallet.current)
@@ -27,6 +29,7 @@ const ConnectWalletButton = () => {
   const set = useMangoStore((s) => s.set)
   const [showAccountsModal, setShowAccountsModal] = useState(false)
   const [showSettingsModal, setShowSettingsModal] = useState(false)
+  const [showChangeAvatarModal, setChangeAvatarModal] = useState(false)
   const [selectedWallet, setSelectedWallet] = useState(DEFAULT_PROVIDER.url)
   const [imageUrl, setImageUrl] = useState('')
   const [savedProviderUrl] = useLocalStorageState(
@@ -97,6 +100,15 @@ const ConnectWalletButton = () => {
                   <div className="pl-2 text-left">Accounts</div>
                 </button>
               </Menu.Item>
+              <Menu.Item>
+                <button
+                  className="flex flex-row font-normal items-center rounded-none w-full p-2 hover:bg-th-bkg-2 hover:cursor-pointer focus:outline-none"
+                  onClick={() => setChangeAvatarModal(true)}
+                >
+                  <UserCircleIcon className="h-4 w-4" />
+                  <div className="pl-2 text-left">Change Avatar</div>
+                </button>
+              </Menu.Item>
               <Menu.Item>
                 <button
                   className="flex flex-row font-normal items-center rounded-none w-full p-2 hover:bg-th-bkg-2 hover:cursor-pointer focus:outline-none"
@@ -166,6 +178,13 @@ const ConnectWalletButton = () => {
           isOpen={showSettingsModal}
         />
       ) : null}
+      {showChangeAvatarModal ? (
+        <ChangeAvatarModal
+          onClose={() => setChangeAvatarModal(false)}
+          isOpen={showChangeAvatarModal}
+          url={imageUrl}
+        />
+      ) : null}
     </>
   )
 }

stores/useMangoStore.tsx

@@ -35,7 +35,7 @@ import { TOKEN_PROGRAM_ID } from '../utils/tokens'
 import { findProgramAddress } from '../utils/metaplex/utils'
 import * as borsh from 'borsh'
 import { Metadata, METADATA_SCHEMA } from '../utils/metaplex/models'
-import { METADATA_PREFIX } from '../utils/metaplex/types'
+import { METADATA_KEY, METADATA_PREFIX } from '../utils/metaplex/types'
 
 export const ENDPOINTS: EndpointInfo[] = [
   {
@@ -295,7 +295,7 @@ const useMangoStore = create<MangoStore>((set, get) => {
 
           const nftPublicKeys = []
 
-          for (const token of tokenAccounts.value) {
+          tokenAccounts.value.forEach((token) => {
             const tokenAccount = token.account.data.parsed.info
 
             if (
@@ -304,23 +304,24 @@ const useMangoStore = create<MangoStore>((set, get) => {
             ) {
               nftPublicKeys.push(new PublicKey(tokenAccount.mint))
             }
-          }
+          })
 
           if (nftPublicKeys.length == 0) return
 
-          const metadataProgramId = new PublicKey(METADATA_SCHEMA)
+          const metadataProgramId = new PublicKey(METADATA_KEY)
           const uris = []
 
           for (const nft of nftPublicKeys) {
             // The return value is [programDerivedAddress, bytes] but we only care about the address
-            const pda = await findProgramAddress(
+
+            const [pda] = await findProgramAddress(
               [
                 Buffer.from(METADATA_PREFIX),
                 metadataProgramId.toBuffer(),
                 nft.toBuffer(),
               ],
               metadataProgramId
-            )[0]
+            )
 
             const accountInfo = await connection.getAccountInfo(
               pda,