0x0x230x

Untitled

Feb 16th, 2026
34
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.63 KB | None | 0 0
  1. yes here is it:
  2.  
  3. ```
  4. import { createConfig, http, WagmiProvider as NextWagmiProvider } from 'wagmi';
  5. import { base, mainnet } from 'wagmi/chains';
  6. import { baseAccount } from 'wagmi/connectors';
  7. import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
  8. import { farcasterMiniApp } from '@farcaster/miniapp-wagmi-connector';
  9. import { Attribution } from 'ox/erc8021';
  10.  
  11. const DATA_SUFFIX = Attribution.toDataSuffix({
  12. codes: [env.ATTRIBUTION_CODE],
  13. });
  14.  
  15. export const config = createConfig({
  16. chains: [base, mainnet],
  17. dataSuffix: DATA_SUFFIX,
  18. transports: {
  19. [base.id]: http(),
  20. [mainnet.id]: http(),
  21. },
  22. connectors: [
  23. farcasterMiniApp(),
  24. baseAccount({
  25. appName: process.env.NEXT_PUBLIC_ONCHAINKIT_PROJECT_NAME,
  26. appLogoUrl:
  27. process.env.NEXT_PUBLIC_APP_SPLASH_IMAGE ||
  28. 'https://www.yo.xyz/images/splashImage.png',
  29. }),
  30. ],
  31. });
  32.  
  33. const queryClient = new QueryClient();
  34.  
  35. export default function WagmiProvider({
  36. children,
  37. }: {
  38. children: React.ReactNode;
  39. }) {
  40. return (
  41. <NextWagmiProvider config={config}>
  42. <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  43. </NextWagmiProvider>
  44. );
  45. }
  46.  
  47. ```
  48.  
  49. deposit:
  50.  
  51. ```
  52. /* eslint-disable @typescript-eslint/no-explicit-any */
  53. 'use client';
  54.  
  55. import { useCallback, useState, useEffect, useRef } from 'react';
  56. import { useEarnContext } from './YoarnProvider';
  57. import { cn } from '../styles/theme';
  58. import { ConnectWallet } from '@coinbase/onchainkit/wallet';
  59. import {
  60. LifecycleStatus,
  61. Transaction,
  62. TransactionButton,
  63. TransactionResponseType,
  64. } from '@coinbase/onchainkit/transaction';
  65.  
  66. export function DepositButton({ className }: any) {
  67. const {
  68. recipientAddress: address,
  69. chainId,
  70. vaultToken,
  71. depositCalls,
  72. depositAmount,
  73. depositAmountError,
  74. updateLifecycleStatus,
  75. refetchWalletBalance,
  76. isSponsored,
  77. lifecycleStatus,
  78. } = useEarnContext();
  79. const [depositedAmount, setDepositedAmount] = useState('');
  80. const [transactionKey, setTransactionKey] = useState(0);
  81. const wasErrorRef = useRef(false);
  82.  
  83. // Reset Transaction component when amount changes after an error
  84. useEffect(() => {
  85. if (lifecycleStatus?.statusName === 'error') {
  86. wasErrorRef.current = true;
  87. } else if (wasErrorRef.current && depositAmount) {
  88. // Amount changed after error, reset the transaction
  89. wasErrorRef.current = false;
  90. setTransactionKey((prev) => prev + 1);
  91. }
  92. }, [depositAmount, lifecycleStatus?.statusName]);
  93.  
  94. const handleOnStatus = useCallback(
  95. (status: LifecycleStatus) => {
  96. if (status.statusName === 'transactionPending') {
  97. updateLifecycleStatus({ statusName: 'transactionPending' });
  98. }
  99.  
  100. if (
  101. status.statusName === 'transactionLegacyExecuted' ||
  102. status.statusName === 'success' ||
  103. status.statusName === 'error'
  104. ) {
  105. updateLifecycleStatus(status);
  106. }
  107. },
  108. [updateLifecycleStatus],
  109. );
  110.  
  111. const handleOnSuccess = useCallback(
  112. (res: TransactionResponseType) => {
  113. if (
  114. res.transactionReceipts[0] &&
  115. res.transactionReceipts[0].status === 'success'
  116. ) {
  117. // Don't overwrite to '' when the second txn comes in
  118. if (depositAmount) {
  119. setDepositedAmount(depositAmount);
  120. }
  121. refetchWalletBalance();
  122. }
  123. },
  124. [depositAmount, refetchWalletBalance],
  125. );
  126.  
  127. if (!address) {
  128. return (
  129. <ConnectWallet
  130. className={cn('w-full', className)}
  131. disconnectedLabel='Connect to deposit'
  132. />
  133. );
  134. }
  135.  
  136. return (
  137. <Transaction
  138. key={transactionKey}
  139. className={className}
  140. chainId={chainId}
  141. calls={depositCalls}
  142. onStatus={handleOnStatus}
  143. onSuccess={handleOnSuccess}
  144. isSponsored={isSponsored}
  145. resetAfter={3_000}
  146. >
  147. <TransactionButton
  148. disabled={!!depositAmountError || !depositAmount}
  149. render={({ status, onSubmit, isDisabled }) => (
  150. <button
  151. onClick={status === 'success' ? undefined : onSubmit}
  152. disabled={isDisabled || status === 'success'}
  153. className='w-full rounded-xl bg-[#D1F651] py-4 font-bold text-black disabled:opacity-50'
  154. >
  155. {status === 'pending' && 'Processing...'}
  156. {status === 'success' &&
  157. `Deposited ${depositedAmount} ${vaultToken?.symbol}`}
  158. {status === 'error' && 'Try Again'}
  159. {status === 'default' && (depositAmountError ?? 'Deposit')}
  160. </button>
  161. )}
  162. />
  163. </Transaction>
  164. );
  165. }
  166.  
  167. ```
Advertisement
Add Comment
Please, Sign In to add comment