-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #58 from openfort-xyz/feat/rpc-methods
Feat/rpc methods
- Loading branch information
Showing
50 changed files
with
2,134 additions
and
10,822 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
86 changes: 86 additions & 0 deletions
86
examples/apps/auth-sample/src/components/AccountActions/AccountActions.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| import { useState } from 'react' | ||
| import { Switch } from '../ui/switch' | ||
| import { Label } from '../ui/label' | ||
| import BackendMintButton from './BackendMintButton' | ||
| import EIP1193MintButton from './EIP1193MintButton' | ||
| import EIP1193CreateSessionButton from '../SessionKey/EIP1193CreateSessionButton' | ||
| import BackendCreateSessionButton from '../SessionKey/BackendCreateSessionButton' | ||
| import { Alert, AlertDescription, AlertTitle } from '../ui/alert' | ||
|
|
||
| const sessionMethods = [ | ||
| {id: '1hour', title: '1 Hour'}, | ||
| {id: '1day', title: '1 Day'}, | ||
| {id: '1month', title: '1 Month'}, | ||
| ]; | ||
|
|
||
| export default function AccountActions({ handleSetMessage }: { handleSetMessage: (message: string) => void }) { | ||
| const [isProviderEnabled, setIsProviderEnabled] = useState(true) | ||
| const [sessionKey, setSessionKey] = useState<`0x${string}` | null>(null); | ||
|
|
||
| return ( | ||
| <div className="bg-white p-4 rounded-md shadow-2xl space-y-4"> | ||
| <h2 className="font-medium text-xl pb-4"> | ||
| Account actions | ||
| </h2> | ||
|
|
||
| <div className="flex items-center space-x-2 mb-4"> | ||
| <Switch | ||
| id="provider-switch" | ||
| checked={isProviderEnabled} | ||
| onCheckedChange={setIsProviderEnabled} | ||
| /> | ||
| <Label htmlFor="provider-switch">EIP-1193 Provider</Label> | ||
| </div> | ||
|
|
||
| {isProviderEnabled ? ( | ||
| <div> | ||
| <EIP1193MintButton handleSetMessage={handleSetMessage} /> | ||
| </div> | ||
| ) : ( | ||
| <div className='space-y-2'> | ||
| <Alert className='bg-blue-50'> | ||
| <AlertTitle>Backend Action!</AlertTitle> | ||
| <AlertDescription> | ||
| This mode creates an API call to your backend to mint the NFT. | ||
| </AlertDescription> | ||
| </Alert> | ||
| <BackendMintButton handleSetMessage={handleSetMessage} /> | ||
| </div> | ||
| )} | ||
| <fieldset> | ||
| <legend className="font-medium leading-6 text-black"> | ||
| Session key duration | ||
| </legend> | ||
| <div className="mt-3 space-y-1"> | ||
| {sessionMethods.map((sessionMethod) => ( | ||
| <div key={sessionMethod.id} className="flex items-center"> | ||
| <input | ||
| disabled={sessionKey !== null} | ||
| id={sessionMethod.id} | ||
| name="session-method" | ||
| type="radio" | ||
| defaultChecked={sessionMethod.id === '1day'} | ||
| className="h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-600" | ||
| /> | ||
| <label | ||
| htmlFor={sessionMethod.id} | ||
| className="ml-3 block text-sm font-medium leading-6 text-gray-900" | ||
| > | ||
| {sessionMethod.title} | ||
| </label> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </fieldset> | ||
| {isProviderEnabled ? ( | ||
| <div> | ||
| <EIP1193CreateSessionButton handleSetMessage={handleSetMessage} setSessionKey={setSessionKey} sessionKey={sessionKey}/> | ||
| </div> | ||
| ) : ( | ||
| <div className='space-y-2'> | ||
| <BackendCreateSessionButton handleSetMessage={handleSetMessage} setSessionKey={setSessionKey} sessionKey={sessionKey}/> | ||
| </div> | ||
| )} | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
151 changes: 151 additions & 0 deletions
151
examples/apps/auth-sample/src/components/AccountActions/EIP1193MintButton.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,151 @@ | ||
| import React, {useState} from 'react'; | ||
| import {useOpenfort} from '../../hooks/useOpenfort'; | ||
| import {EmbeddedState} from '@openfort/openfort-js'; | ||
| import Loading from '../Loading'; | ||
| import { Button } from '../ui/button'; | ||
| import { createPublicClient, createWalletClient, custom, encodeFunctionData, http } from 'viem' | ||
| import { polygonAmoy } from 'viem/chains'; | ||
| import { eip5792Actions } from 'viem/experimental' | ||
|
|
||
| const EIP1193MintButton: React.FC<{ | ||
| handleSetMessage: (message: string) => void; | ||
| }> = ({handleSetMessage}) => { | ||
| const {getEvmProvider, state} = useOpenfort(); | ||
| const [loading, setLoading] = useState(false); | ||
| const [loadingBatch, setLoadingBatch] = useState(false); | ||
|
|
||
| const handleSendTransaction = async () => { | ||
| const provider = getEvmProvider(); | ||
| if (!provider) { | ||
| throw new Error('Failed to get EVM provider'); | ||
| } | ||
| setLoading(true); | ||
| const publicClient = createPublicClient({ | ||
| chain: polygonAmoy, | ||
| transport: http() | ||
| }) | ||
| const walletClient = createWalletClient({ | ||
| chain: polygonAmoy, | ||
| transport: custom(provider) | ||
| }) | ||
|
|
||
| const erc721Address = '0x2522f4fc9af2e1954a3d13f7a5b2683a00a4543a'; | ||
|
|
||
| // Read more about [ABI Formats](https://docs.soliditylang.org/en/latest/abi-spec.html#json). | ||
| const abi = [ | ||
| { | ||
| "inputs": [ | ||
| { | ||
| "internalType": "address", | ||
| "name": "_to", | ||
| "type": "address" | ||
| } | ||
| ], | ||
| "name": "mint", | ||
| "outputs": [], | ||
| "stateMutability": "nonpayable", | ||
| "type": "function" | ||
| } | ||
| ] | ||
|
|
||
| const [account] = await walletClient.getAddresses() | ||
| const { request } = await publicClient.simulateContract({ | ||
| account, | ||
| address: erc721Address, | ||
| abi: abi, | ||
| functionName: 'mint', | ||
| args: ['0x64452Dff1180b21dc50033e1680bB64CDd492582'] | ||
| }) | ||
|
|
||
|
|
||
| let tx: `0x${string}`; | ||
| try { | ||
| tx = await walletClient.writeContract(request) | ||
| console.log('Transaction hash:', tx); | ||
| handleSetMessage(`https://amoy.polygonscan.com/tx/${tx}`); | ||
| const receipt = await publicClient.getTransactionReceipt({hash: tx}); | ||
| console.log('Transaction receipt:', receipt); | ||
| } catch (error: any) { | ||
| console.error('Failed to send transaction:', error); | ||
| } | ||
| setLoading(false); | ||
| }; | ||
|
|
||
| const handleSendCalls = async () => { | ||
| const provider = getEvmProvider(); | ||
| if (!provider) { | ||
| throw new Error('Failed to get EVM provider'); | ||
| } | ||
| setLoadingBatch(true); | ||
| const walletClient = createWalletClient({ | ||
| chain: polygonAmoy, | ||
| transport: custom(provider) | ||
| }).extend(eip5792Actions()) | ||
|
|
||
| const erc721Address = '0x2522f4fc9af2e1954a3d13f7a5b2683a00a4543a'; | ||
|
|
||
| // Read more about [ABI Formats](https://docs.soliditylang.org/en/latest/abi-spec.html#json). | ||
| const abi = [ | ||
| { | ||
| "inputs": [ | ||
| { | ||
| "internalType": "address", | ||
| "name": "_to", | ||
| "type": "address" | ||
| } | ||
| ], | ||
| "name": "mint", | ||
| "outputs": [], | ||
| "stateMutability": "nonpayable", | ||
| "type": "function" | ||
| } | ||
| ] | ||
|
|
||
| const [account] = await walletClient.getAddresses() | ||
|
|
||
| try { | ||
| const tx = await walletClient.sendCalls({ | ||
| account, | ||
| calls: [ | ||
| { | ||
| to: erc721Address, | ||
| data: encodeFunctionData({abi, functionName:"mint", args:['0x64452Dff1180b21dc50033e1680bB64CDd492582']}) | ||
| }, | ||
| { | ||
| to: erc721Address, | ||
| data: encodeFunctionData({abi, functionName:"mint", args:['0x64452Dff1180b21dc50033e1680bB64CDd492582']}) | ||
| }, | ||
| ], | ||
| }) | ||
|
|
||
| console.log('Transaction hash:', tx); | ||
| handleSetMessage(`https://amoy.polygonscan.com/tx/${tx}`); | ||
| } catch (error: any) { | ||
| console.error('Failed to send transaction:', error); | ||
| } | ||
| setLoadingBatch(false); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className='space-y-2'> | ||
| <Button | ||
| className='w-full' | ||
| disabled={state !== EmbeddedState.READY} | ||
| onClick={handleSendTransaction} | ||
| variant="outline" | ||
| > | ||
| {loading ? <Loading /> : 'Mint NFT'} | ||
| </Button> | ||
| <Button | ||
| className='w-full' | ||
| disabled={state !== EmbeddedState.READY} | ||
| onClick={handleSendCalls} | ||
| variant="outline" | ||
| > | ||
| {loadingBatch ? <Loading /> : 'Send batch calls'} | ||
| </Button> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default EIP1193MintButton; |
Oops, something went wrong.