Total Staked: {totalStaked} NFTs
9 | My Total Staked: {stakeUser ? stakeUser.nftMints.length : 0} NFTs
10 | Daily Rewards: {dailyRewards} $BNTY
11 | Pending Rewards: {pendingRewards} $BNTY
12 |
13 |
7 | {
8 | loading ?
10 | {
11 | data && data.length > 0 ? data.map((val, ind) => {
12 | return (
13 |
15 |
32 |
33 | );
34 | }) :
37 | }
38 |
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "nft-staking-ui",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@nfteyez/sol-rayz": "^0.8.0",
7 | "@project-serum/anchor": "^0.18.2",
8 | "@project-serum/common": "^0.0.1-beta.3",
9 | "@project-serum/serum": "^0.13.60",
10 | "@solana/spl-token": "^0.1.8",
11 | "@solana/wallet-adapter-base": "^0.7.0",
12 | "@solana/wallet-adapter-react": "^0.13.1",
13 | "@solana/wallet-adapter-react-ui": "^0.6.1",
14 | "@solana/wallet-adapter-wallets": "^0.11.3",
15 | "@solana/web3.js": "^1.31.0",
16 | "@testing-library/jest-dom": "^5.11.4",
17 | "@testing-library/react": "^11.1.0",
18 | "@testing-library/user-event": "^12.1.10",
19 | "bootstrap": "^5.1.3",
20 | "buffer-layout": "^1.2.2",
21 | "fs": "^0.0.1-security",
22 | "react": "^17.0.2",
23 | "react-device-detect": "^2.1.2",
24 | "react-dom": "^17.0.2",
25 | "react-icons": "^4.3.1",
26 | "react-scripts": "4.0.3",
27 | "reactstrap": "^9.0.1",
28 | "typescript": "^4.5.4",
29 | "web-vitals": "^1.0.1"
30 | },
31 | "scripts": {
32 | "start": "react-scripts start",
33 | "build": "react-scripts build",
34 | "test": "react-scripts test",
35 | "eject": "react-scripts eject"
36 | },
37 | "eslintConfig": {
38 | "extends": [
39 | "react-app",
40 | "react-app/jest"
41 | ]
42 | },
43 | "browserslist": {
44 | "production": [
45 | ">0.2%",
46 | "not dead",
47 | "not op_mini all"
48 | ],
49 | "development": [
50 | "last 1 chrome version",
51 | "last 1 firefox version",
52 | "last 1 safari version"
53 | ]
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { useMemo } from 'react';
2 | import {
3 | ConnectionProvider,
4 | WalletProvider,
5 | // useConnection
6 | } from '@solana/wallet-adapter-react';
7 | import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
8 | import {
9 | // getLedgerWallet,
10 | getPhantomWallet,
11 | // getSlopeWallet,
12 | // getSolflareWallet,
13 | // getSolletExtensionWallet,
14 | // getSolletWallet,
15 | // getTorusWallet,
16 | } from '@solana/wallet-adapter-wallets';
17 | import { clusterApiUrl } from '@solana/web3.js';
18 |
19 | import Home from './Home';
20 | import 'bootstrap/dist/css/bootstrap.css';
21 | import './App.css';
22 |
23 | // Default styles that can be overridden by your app
24 | require('@solana/wallet-adapter-react-ui/styles.css');
25 |
26 | const App = () => {
27 | // Can be set to 'devnet', 'testnet', or 'mainnet-beta'
28 | const network = WalletAdapterNetwork.Devnet;
29 |
30 | // You can also provide a custom RPC endpoint
31 | const endpoint = useMemo(() => clusterApiUrl(network), [network]);
32 |
33 | // @solana/wallet-adapter-wallets includes all the adapters but supports tree shaking --
34 | // Only the wallets you configure here will be compiled into your application
35 | const wallets = useMemo(() => [
36 | getPhantomWallet(),
37 | // getSlopeWallet(),
38 | // getSolflareWallet(),
39 | // getTorusWallet({
40 | // options: { clientId: 'Get a client ID @ https://developer.tor.us' }
41 | // }),
42 | // getLedgerWallet(),
43 | // getSolletWallet({ network }),
44 | // getSolletExtensionWallet({ network }),
45 | ], [network]);
46 |
47 | return (
48 | LOADING STAKED NFTS...
9 | :{val.data.name}
23 | 31 |THERE IS NO STAKED NFTS.
35 | } 36 |
30 | {
31 | loading ?
33 | {data && data.length > 0 ? data.map((val, ind) => {
34 | return (
35 |
37 |
54 |
55 | );
56 | }) :
58 | }
59 |
65 | SELECT A DATE
66 |
67 |
73 |
74 |
75 | );
76 | }
77 |
--------------------------------------------------------------------------------
/src/libs/getOrCreateAssociatedTokenAccount.ts:
--------------------------------------------------------------------------------
1 | import { TOKEN_PROGRAM_ID, ASSOCIATED_TOKEN_PROGRAM_ID } from '@solana/spl-token'
2 | import { SignerWalletAdapterProps } from '@solana/wallet-adapter-base'
3 | import { Connection, PublicKey, Commitment, Transaction } from '@solana/web3.js'
4 | import { createAssociatedTokenAccountInstruction } from './createAssociatedTokenAccountInstruction'
5 | import { getAccountInfo } from './getAccountInfo'
6 | import { getAssociatedTokenAddress } from './getAssociatedTokerAddress'
7 |
8 | export async function getOrCreateAssociatedTokenAccount(
9 | connection: Connection,
10 | payer: PublicKey,
11 | mint: PublicKey,
12 | owner: PublicKey,
13 | signTransaction: SignerWalletAdapterProps['signTransaction'],
14 | allowOwnerOffCurve = false,
15 | commitment?: Commitment,
16 | programId = TOKEN_PROGRAM_ID,
17 | associatedTokenProgramId = ASSOCIATED_TOKEN_PROGRAM_ID
18 | ) {
19 | const associatedToken = await getAssociatedTokenAddress(
20 | mint,
21 | owner,
22 | allowOwnerOffCurve,
23 | programId,
24 | associatedTokenProgramId
25 | )
26 |
27 | // This is the optimal logic, considering TX fee, client-side computation, RPC roundtrips and guaranteed idempotent.
28 | // Sadly we can't do this atomically.
29 | let account
30 | try {
31 | account = await getAccountInfo(connection, associatedToken, commitment, programId)
32 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
33 | } catch (error: any) {
34 | // TokenAccountNotFoundError can be possible if the associated address has already received some lamports,
35 | // becoming a system account. Assuming program derived addressing is safe, this is the only case for the
36 | // TokenInvalidAccountOwnerError in this code path.
37 | if (error.message === 'TokenAccountNotFoundError' || error.message === 'TokenInvalidAccountOwnerError') {
38 | // As this isn't atomic, it's possible others can create associated accounts meanwhile.
39 | try {
40 | const transaction = new Transaction().add(
41 | createAssociatedTokenAccountInstruction(
42 | payer,
43 | associatedToken,
44 | owner,
45 | mint,
46 | programId,
47 | associatedTokenProgramId
48 | )
49 | )
50 |
51 | const blockHash = await connection.getRecentBlockhash()
52 | transaction.feePayer = await payer
53 | transaction.recentBlockhash = await blockHash.blockhash
54 | const signed = await signTransaction(transaction)
55 |
56 | const signature = await connection.sendRawTransaction(signed.serialize())
57 |
58 | await connection.confirmTransaction(signature)
59 | } catch (error: unknown) {
60 | // Ignore all errors; for now there is no API-compatible way to selectively ignore the expected
61 | // instruction error if the associated account exists already.
62 | }
63 |
64 | // Now this should always succeed
65 | account = await getAccountInfo(connection, associatedToken, commitment, programId)
66 | } else {
67 | throw error
68 | }
69 | }
70 |
71 | if (!account.mint.equals(mint.toBuffer())) throw Error('TokenInvalidMintError')
72 | if (!account.owner.equals(owner.toBuffer())) throw new Error('TokenInvalidOwnerError')
73 |
74 | return account
75 | }
--------------------------------------------------------------------------------
/src/libs/createTransferInstructions.ts:
--------------------------------------------------------------------------------
1 | import { TOKEN_PROGRAM_ID } from '@solana/spl-token'
2 | import { AccountMeta, PublicKey, Signer, TransactionInstruction } from '@solana/web3.js'
3 | import BufferLayout from '@solana/buffer-layout'
4 | import BN from 'bn.js'
5 |
6 | export enum TokenInstruction {
7 | InitializeMint = 0,
8 | InitializeAccount = 1,
9 | InitializeMultisig = 2,
10 | Transfer = 3,
11 | Approve = 4,
12 | Revoke = 5,
13 | SetAuthority = 6,
14 | MintTo = 7,
15 | Burn = 8,
16 | CloseAccount = 9,
17 | FreezeAccount = 10,
18 | ThawAccount = 11,
19 | TransferChecked = 12,
20 | ApproveChecked = 13,
21 | MintToChecked = 14,
22 | BurnChecked = 15,
23 | InitializeAccount2 = 16,
24 | SyncNative = 17,
25 | InitializeAccount3 = 18,
26 | InitializeMultisig2 = 19,
27 | InitializeMint2 = 20,
28 | }
29 |
30 | /**
31 | * Construct a Transfer instruction
32 | *
33 | * @param source Source account
34 | * @param destination Destination account
35 | * @param owner Owner of the source account
36 | * @param amount Number of tokens to transfer
37 | * @param multiSigners Signing accounts if `owner` is a multisig
38 | * @param programId SPL Token program account
39 | *
40 | * @return Instruction to add to a transaction
41 | */
42 | export function createTransferInstruction(
43 | source: PublicKey,
44 | destination: PublicKey,
45 | owner: PublicKey,
46 | amount: number,
47 | multiSigners: Signer[] = [],
48 | programId = TOKEN_PROGRAM_ID
49 | ): TransactionInstruction {
50 | // @ts-ignore
51 | const dataLayout = BufferLayout.struct([BufferLayout.u8('instruction'), BufferLayout.blob(8, 'amount')])
52 |
53 | const keys = addSigners(
54 | [
55 | { pubkey: source, isSigner: false, isWritable: true },
56 | { pubkey: destination, isSigner: false, isWritable: true },
57 | ],
58 | owner,
59 | multiSigners
60 | )
61 |
62 | const data = Buffer.alloc(dataLayout.span)
63 | dataLayout.encode(
64 | {
65 | instruction: TokenInstruction.Transfer,
66 | amount: new TokenAmount(amount).toBuffer(),
67 | },
68 | data
69 | )
70 |
71 | return new TransactionInstruction({ keys, programId, data })
72 | }
73 |
74 | export function addSigners(keys: AccountMeta[], ownerOrAuthority: PublicKey, multiSigners: Signer[]): AccountMeta[] {
75 | if (multiSigners.length) {
76 | keys.push({ pubkey: ownerOrAuthority, isSigner: false, isWritable: false })
77 | for (const signer of multiSigners) {
78 | keys.push({ pubkey: signer.publicKey, isSigner: true, isWritable: false })
79 | }
80 | } else {
81 | keys.push({ pubkey: ownerOrAuthority, isSigner: true, isWritable: false })
82 | }
83 | return keys
84 | }
85 |
86 | class TokenAmount extends BN {
87 | /**
88 | * Convert to Buffer representation
89 | */
90 | toBuffer(): Buffer {
91 | const a = super.toArray().reverse()
92 | const b = Buffer.from(a)
93 | if (b.length === 8) {
94 | return b
95 | }
96 |
97 | if (b.length >= 8) {
98 | throw new Error('TokenAmount too large')
99 | }
100 |
101 | const zeroPad = Buffer.alloc(8)
102 | b.copy(zeroPad)
103 | return zeroPad
104 | }
105 |
106 | /**
107 | * Construct a TokenAmount from Buffer representation
108 | */
109 | static fromBuffer(buffer: Buffer): TokenAmount {
110 | if (buffer.length !== 8) {
111 | throw new Error(`Invalid buffer length: ${buffer.length}`)
112 | }
113 | return new BN(
114 | // @ts-ignore
115 | [...buffer]
116 | .reverse()
117 | .map((i) => `00${i.toString(16)}`.slice(-2))
118 | .join(''),
119 | 16
120 | )
121 | }
122 | }
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | padding: 0;
4 | margin: 0;
5 | border: 0;
6 | width: 100%;
7 | height: 100%;
8 | }
9 |
10 | #root {
11 | width: 100%;
12 | height: 100%;
13 | }
14 |
15 | body {
16 | background: bottom center/100% 100% url(./assets/img/background.png);
17 | }
18 |
19 | .App {
20 | text-align: center;
21 | }
22 |
23 | .App-logo {
24 | height: 40vmin;
25 | pointer-events: none;
26 | }
27 |
28 | @media (prefers-reduced-motion: no-preference) {
29 | .App-logo {
30 | animation: App-logo-spin infinite 20s linear;
31 | }
32 | }
33 |
34 | .App-header {
35 | /* font-size: calc(10px + 5vmin); */
36 | color: white;
37 | padding: 30px 30px;
38 | text-align: center;
39 | font-family: "Saira Extra Condensed", sans-serif;
40 | /* font-weight: bold; */
41 | }
42 |
43 | .App-link {
44 | color: #61dafb;
45 | }
46 |
47 | .main {
48 | width: 100%;
49 | height: 100%;
50 | }
51 |
52 | .nft-card {
53 | overflow: hidden;
54 | border-width: 1px;
55 | border-color: #ff3b46;
56 | background-color: transparent;
57 | border-radius: 2px;
58 | margin-top: 20px;
59 | border-style: solid;
60 | align-items: center;
61 | justify-content: space-between;
62 | height: 18rem;
63 | background: #2e2d2c;
64 | }
65 |
66 | .nft-img {
67 | height: 200px;
68 | }
69 |
70 | .nft-button {
71 | border: 0;
72 | width: 120px;
73 | font-size: 10px;
74 | border-radius: 3px;
75 | padding: 5px;
76 | /* color: #878787; */
77 | font-family: "Common Pixel", sans-serif;
78 | margin-bottom: 0.5rem;
79 | border: 1px solid;
80 | }
81 |
82 | .nft-button:hover {
83 | background: #ff3b46;
84 | border-color: #ff3b46;
85 | color: white !important;
86 | }
87 |
88 | .staked .nft-card {
89 | animation-name: color;
90 | animation-duration: 5s;
91 | animation-iteration-count: infinite;
92 | }
93 |
94 | .staked .nft-button {
95 | background: linear-gradient(90deg, rgba(242, 122, 38, 1) 0%, rgba(255, 91, 0, 1) 25%, rgba(255, 139, 0, 1) 100%);
96 | color: #1d1d1d;
97 | }
98 |
99 | .footer {
100 | padding: 20px 20px;
101 | position: relative;
102 | width: 100%;
103 | margin: 0;
104 | }
105 |
106 | .footer .pannel {
107 | padding: 10px;
108 | border-radius: 20px;
109 | background: #1d1d1d;
110 | margin: 0;
111 | }
112 |
113 | .footer.connected .wallet-adapter-button-trigger {
114 | background: linear-gradient(
115 | 90deg,
116 | rgba(242, 122, 38, 1) 0%,
117 | rgba(255, 91, 0, 1) 25%,
118 | rgba(255, 139, 0, 1) 100%
119 | ) !important;
120 | }
121 |
122 | .btn-claim {
123 | border: solid 1px #ff3b46;
124 | border-radius: 3px;
125 | text-transform: uppercase;
126 | /* height: 100%; */
127 | font-family: "Saira", sans-serif;
128 | color: #ff3b46;
129 | }
130 |
131 | .btn-claim:hover {
132 | background: #ff3b46;
133 | border-color: #ff3b46;
134 | color: white;
135 | }
136 |
137 | .btn-claim.mobile {
138 | width: 100%;
139 | height: 50px;
140 | }
141 |
142 | .mobile-panel {
143 | width: 100%;
144 | margin: 0;
145 | font-family: "Saira", sans-serif;
146 | font-weight: 300;
147 | }
148 |
149 | .pendding-rewards {
150 | color: #ff3b46;
151 | text-align: left;
152 | text-transform: uppercase;
153 | margin-right: 20px;
154 | font-family: Common Pixel, sans-serif;
155 | font-weight: 300;
156 | }
157 |
158 | #loading {
159 | color: white;
160 | position: absolute;
161 | top: 50%;
162 | left: 50%;
163 | margin-top: -75px;
164 | margin-left: -75px;
165 | text-align: center;
166 | font-size: 2em;
167 | border-radius: 50%;
168 | width: 150px;
169 | height: 150px;
170 | border: 0.25rem solid rgba(136, 136, 136, 0.788);
171 | border-top-color: white;
172 | animation: spin 1s infinite linear;
173 | }
174 |
175 | .wallet-adapter-dropdown-list {
176 | top: -330% !important;
177 | right: -60px !important;
178 | }
179 |
180 | .btn-mobile-menu,
181 | .btn-globe {
182 | padding: 10px;
183 | border-radius: 50%;
184 | background-color: orangered;
185 | width: 50px;
186 | height: 50px;
187 | }
188 |
189 | .btn-globe svg {
190 | width: 100%;
191 | height: 100%;
192 | }
193 |
194 | .mobile-menu {
195 | position: absolute;
196 | z-index: 99;
197 | display: grid;
198 | grid-template-rows: 1fr;
199 | grid-row-gap: 10px;
200 | padding: 10px;
201 | bottom: 130%;
202 | left: 15px;
203 | margin: 0;
204 | list-style: none;
205 | background: #2c2d30;
206 | border-radius: 10px;
207 | box-shadow: 0px 8px 20px rgb(0 0 0 / 60%);
208 | opacity: 0;
209 | visibility: hidden;
210 | transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
211 | }
212 |
213 | .mobile-menu-active {
214 | opacity: 1;
215 | visibility: visible;
216 | transform: translateY(10px);
217 | }
218 |
219 | .mobile-menu-item {
220 | display: flex;
221 | flex-direction: row;
222 | justify-content: center;
223 | align-items: center;
224 | border: none;
225 | outline: none;
226 | cursor: pointer;
227 | white-space: nowrap;
228 | box-sizing: border-box;
229 | /* padding: 0 20px; */
230 | width: 100%;
231 | border-radius: 6px;
232 | font-size: 14px;
233 | font-weight: 600;
234 | height: 50px;
235 | color: white;
236 | }
237 |
238 | @keyframes App-logo-spin {
239 | from {
240 | transform: rotate(0deg);
241 | }
242 | to {
243 | transform: rotate(360deg);
244 | }
245 | }
246 | @keyframes spin {
247 | 0% {
248 | transform: rotate(0deg);
249 | }
250 | 100% {
251 | transform: rotate(360deg);
252 | }
253 | }
254 | @keyframes color {
255 | 0% {
256 | border-color: #222;
257 | }
258 | 25% {
259 | border-color: #f27a26;
260 | }
261 | 50% {
262 | border-color: #ff5b00;
263 | }
264 | 75% {
265 | border-color: #ff8b00;
266 | }
267 | 100% {
268 | border-color: #222;
269 | }
270 | }
271 |
272 | iframe[style*="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; border: none; z-index: 2147483647;"] {
273 | display: none;
274 | }
275 |
276 | .duration-dates img {
277 | width: 30%;
278 | cursor: pointer;
279 | }
280 |
281 | .modal-content {
282 | background: #373433;
283 | }
284 |
285 | .modal-header {
286 | border-color: #ff3b46;
287 | }
288 |
289 | .btn-close {
290 | color: #ff3b46;
291 | }
--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
1 | import { BN } from '@project-serum/anchor';
2 | import { PublicKey, AccountInfo } from '@solana/web3.js';
3 |
4 | export class Creator {
5 | address: PublicKey;
6 | verified: boolean;
7 | share: number;
8 |
9 | constructor(args: { address: PublicKey; verified: boolean; share: number }) {
10 | this.address = args.address;
11 | this.verified = args.verified;
12 | this.share = args.share;
13 | }
14 | }
15 |
16 | export interface Config {
17 | authority: PublicKey;
18 | data: ConfigData;
19 | }
20 |
21 | export class ConfigData {
22 | name: string;
23 | symbol: string;
24 | uri: string;
25 | sellerFeeBasisPoints: number;
26 | creators: Creator[] | null;
27 | maxNumberOfLines: BN | number;
28 | isMutable: boolean;
29 | maxSupply: BN;
30 | retainAuthority: boolean;
31 |
32 | constructor(args: {
33 | name: string;
34 | symbol: string;
35 | uri: string;
36 | sellerFeeBasisPoints: number;
37 | creators: Creator[] | null;
38 | maxNumberOfLines: BN;
39 | isMutable: boolean;
40 | maxSupply: BN;
41 | retainAuthority: boolean;
42 | }) {
43 | this.name = args.name;
44 | this.symbol = args.symbol;
45 | this.uri = args.uri;
46 | this.sellerFeeBasisPoints = args.sellerFeeBasisPoints;
47 | this.creators = args.creators;
48 | this.maxNumberOfLines = args.maxNumberOfLines;
49 | this.isMutable = args.isMutable;
50 | this.maxSupply = args.maxSupply;
51 | this.retainAuthority = args.retainAuthority;
52 | }
53 | }
54 |
55 | export type AccountAndPubkey = {
56 | pubkey: string;
57 | account: AccountInfoLOADING YOUR NFTS...
32 | :{val.data.name}
45 | 53 |THERE IS NO NFTS.
} 57 |
68 | 
stake(2)} />
69 | 
stake(15)} />
70 | 
stake(30)} />
71 |
72 |
624 |
625 |
636 | {
637 | wallet.publicKey ? <>
638 |
646 | {
647 | activeTab === 0 ?
652 | : null
653 | }
654 |
655 | );
656 | };
657 |
658 | export default Home;
--------------------------------------------------------------------------------
626 |
632 |
634 |
635 | SNAPSHOTS BY ZILLA VS KONG
627 |STAKE YOUR NFTS
628 | { 629 | wallet.publicKey ?94.79% NFTS STAKED
: null 630 | } 631 |
639 |
645 |
640 |
644 | setActiveTab(0)}>YOUR NFTS
641 | setActiveTab(1)}>STAKED NFTS
642 | setActiveTab(2)}>YOUR REWARDS
643 |