blockworks-foundation
/
mango-ui-v3
mirror of https://github.com/blockworks-foundation/mango-ui-v3.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Profile Picture Support (#134) 

* render profile picture

* update profile picture package

* Include PFP only if set

* no need to wait pfp to load

Co-authored-by: Maximilian Schneider <mail@maximilianschneider.net>
This commit is contained in:
Vidor Gencel 2022-01-18 19:26:13 +01:00 committed by GitHub
parent 48252772f4
commit b59abf5f80
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 80 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
components/ConnectWalletButton.tsx
View File

@ -22,6 +22,7 @@ import { useTranslation } from 'next-i18next'
const ConnectWalletButton = () => {
const { t } = useTranslation('common')
const wallet = useMangoStore((s) => s.wallet.current)
const pfp = useMangoStore((s) => s.wallet.pfp)
const connected = useMangoStore((s) => s.wallet.connected)
const set = useMangoStore((s) => s.set)
const [showAccountsModal, setShowAccountsModal] = useState(false)
@ -53,7 +54,11 @@ const ConnectWalletButton = () => {
<Menu>
<div className="relative" id="profile-menu-tip">
<Menu.Button className="bg-th-bkg-4 flex items-center justify-center rounded-full w-10 h-10 text-white focus:outline-none hover:bg-th-bkg-4 hover:text-th-fgd-3">
<ProfileIcon className="h-6 w-6" />
{pfp?.isAvailable ? (
<img alt="" src={pfp.url} className="rounded-full" />
) : (
<ProfileIcon className="h-6 w-6" />
)}
</Menu.Button>
<Menu.Items className="bg-th-bkg-1 mt-2 p-1 absolute right-0 shadow-lg outline-none rounded-md w-48 z-20">
<Menu.Item>

1
hooks/useWallet.tsx
View File

@ -117,6 +117,7 @@ export default function useWallet() {
})
// set connected before fetching data
await actions.fetchAllMangoAccounts()
actions.fetchProfilePicture()
actions.reloadOrders()
actions.fetchTradeHistory()
actions.fetchWalletTokens()

1
package.json
View File

@ -29,6 +29,7 @@
"@project-serum/serum": "0.13.55",
"@project-serum/sol-wallet-adapter": "0.2.0",
"@solana/web3.js": "^1.31.0",
"@solflare-wallet/pfp": "^0.0.6",
"@tippyjs/react": "^4.2.5",
"big.js": "^6.1.1",
"bn.js": "^5.2.0",

21
stores/useMangoStore.tsx
View File

@ -33,6 +33,7 @@ import {
NODE_URL_KEY,
} from '../components/SettingsModal'
import { MSRM_DECIMALS } from '@project-serum/serum/lib/token-instructions'
import { getProfilePicture, ProfilePicture } from '@solflare-wallet/pfp'
export const ENDPOINTS: EndpointInfo[] = [
{
@ -86,6 +87,7 @@ export const INITIAL_STATE = {
connected: false,
current: null,
tokens: [],
pfp: null,
},
}
@ -184,6 +186,7 @@ interface MangoStore extends State {
connected: boolean
current: WalletAdapter | undefined
tokens: WalletToken[]
pfp: ProfilePicture
}
settings: {
uiLocked: boolean
@ -335,6 +338,24 @@ const useMangoStore = create<MangoStore>((set, get) => {
})
}
},
async fetchProfilePicture() {
const set = get().set
const wallet = get().wallet.current
const walletPk = wallet?.publicKey
const connection = get().connection.current
if (!walletPk) return
try {
const result = await getProfilePicture(connection, walletPk)
set((state) => {
state.wallet.pfp = result
})
} catch (e) {
console.log('Could not get profile picture', e)
}
},
async fetchAllMangoAccounts() {
const set = get().set
const mangoGroup = get().selectedMangoGroup.current

53
yarn.lock
View File

@ -1661,6 +1661,23 @@
"@project-serum/borsh" "^0.2.2"
buffer-layout "^1.2.0"
"@metaplex-foundation/mpl-core@^0.0.2":
version "0.0.2"
resolved "https://registry.yarnpkg.com/@metaplex-foundation/mpl-core/-/mpl-core-0.0.2.tgz#17ee2cc216e17629d6df1dbba75964625ebbd603"
integrity sha512-UUJ4BlYiWdDegAWmjsNQiNehwYU3QfSFWs3sv4VX0J6/ZrQ28zqosGhQ+I2ZCTEy216finJ82sZWNjuwSWCYyQ==
dependencies:
"@solana/web3.js" "^1.31.0"
bs58 "^4.0.1"
"@metaplex-foundation/mpl-token-metadata@0.0.2":
version "0.0.2"
resolved "https://registry.yarnpkg.com/@metaplex-foundation/mpl-token-metadata/-/mpl-token-metadata-0.0.2.tgz#02058970320459e2550e90caf54c58bcacbe6bb2"
integrity sha512-yKJPhFlX8MkNbSCi1iwHn4xKmguLK/xFhYa+RuYdL2seuT4CKXHj2CnR2AkcdQj46Za4/nR3jZcRFKq7QlnvBw==
dependencies:
"@metaplex-foundation/mpl-core" "^0.0.2"
"@solana/spl-token" "^0.1.8"
"@solana/web3.js" "^1.31.0"
"@napi-rs/triples@1.0.3":
version "1.0.3"
resolved "https://registry.yarnpkg.com/@napi-rs/triples/-/triples-1.0.3.tgz#76d6d0c3f4d16013c61e45dfca5ff1e6c31ae53c"
@ -1890,7 +1907,7 @@
snake-case "^3.0.4"
toml "^3.0.0"
"@project-serum/borsh@^0.2.2":
"@project-serum/borsh@^0.2.2", "@project-serum/borsh@^0.2.3":
version "0.2.3"
resolved "https://registry.yarnpkg.com/@project-serum/borsh/-/borsh-0.2.3.tgz#1d705c5887484cb6a127dd5feff58e90cbfcb558"
integrity sha512-lH9zEYADZE3cxrgiFym8+jbUE3NM/LH+WOKYcUjs65CT10Q64Hv45bcAAa/phwYk4Tpz0uQ1x+ergFaAoGt67Q==
@ -2031,6 +2048,19 @@
superstruct "^0.14.2"
tweetnacl "^1.0.0"
"@solflare-wallet/pfp@^0.0.6":
version "0.0.6"
resolved "https://registry.yarnpkg.com/@solflare-wallet/pfp/-/pfp-0.0.6.tgz#0dc360e7ebb11029977f5cd5593b5dc5e6074bab"
integrity sha512-XZxgD2VvCFweaPHzWpbKcp+wJvpOYihBBj+kCEJr9gDGdEEJNpBAiJAr5QO2L85Zg0IIXdMD+wi7m5K0m/2/wg==
dependencies:
"@metaplex-foundation/mpl-token-metadata" "0.0.2"
"@project-serum/borsh" "^0.2.3"
"@solana/web3.js" "^1.31.0"
btoa "^1.2.1"
buffer "^6.0.3"
cross-fetch "^3.1.4"
jdenticon "^3.1.1"
"@svgr/babel-plugin-add-jsx-attribute@^6.0.0":
version "6.0.0"
resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-6.0.0.tgz#bd6d1ff32a31b82b601e73672a789cc41e84fe18"
@ -3106,6 +3136,11 @@ bser@2.1.1:
dependencies:
node-int64 "^0.4.0"
btoa@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/btoa/-/btoa-1.2.1.tgz#01a9909f8b2c93f6bf680ba26131eb30f7fa3d73"
integrity sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==
buffer-from@^1.0.0:
version "1.1.1"
resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
@ -3142,7 +3177,7 @@ buffer@6.0.1:
base64-js "^1.3.1"
ieee754 "^1.2.1"
buffer@6.0.3, buffer@~6.0.3:
buffer@6.0.3, buffer@^6.0.3, buffer@~6.0.3:
version "6.0.3"
resolved "https://registry.yarnpkg.com/buffer/-/buffer-6.0.3.tgz#2ace578459cc8fbe2a70aaa8f52ee63b6a74c6c6"
integrity sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==
@ -3218,6 +3253,13 @@ caniuse-lite@^1.0.30001230:
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001238.tgz#e6a8b45455c5de601718736d0242feef0ecdda15"
integrity sha512-bZGam2MxEt7YNsa2VwshqWQMwrYs5tR5WZQRYSuFxsBQunWjBuXhN4cS9nV5FFb1Z9y+DoQcQ0COyQbv6A+CKw==
canvas-renderer@~2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/canvas-renderer/-/canvas-renderer-2.2.0.tgz#512151f5494aaac5270802fba22599785114716d"
integrity sha512-Itdq9pwXcs4IbbkRCXc7reeGBk6i6tlDtZTjE1yc+KvYkx1Mt3WLf6tidZ/Ixbm7Vmi+jpWKG0dRBor67x9yGw==
dependencies:
"@types/node" "*"
chalk@2.4.2, chalk@^2.0.0:
version "2.4.2"
resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
@ -5627,6 +5669,13 @@ jayson@^3.4.4:
uuid "^8.3.2"
ws "^7.4.5"
jdenticon@^3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/jdenticon/-/jdenticon-3.1.1.tgz#76a5b81195d7147c635a1303adf314dd08bcd4cb"
integrity sha512-/m0Kk5ou7tPHjW6YovCysRETqPlFcTabWG96r8NbbSsEK+eQ3jHiGULaGOtp4XBqkRxWS1XMopLRGwdhet5ezw==
dependencies:
canvas-renderer "~2.2.0"
jest-changed-files@^27.4.2:
version "27.4.2"
resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-27.4.2.tgz#da2547ea47c6e6a5f6ed336151bd2075736eb4a5"