Add Oracle Aggregator and CCIP Integration
- Introduced Aggregator.sol for Chainlink-compatible oracle functionality, including round-based updates and access control. - Added OracleWithCCIP.sol to extend Aggregator with CCIP cross-chain messaging capabilities. - Created .gitmodules to include OpenZeppelin contracts as a submodule. - Developed a comprehensive deployment guide in NEXT_STEPS_COMPLETE_GUIDE.md for Phase 2 and smart contract deployment. - Implemented Vite configuration for the orchestration portal, supporting both Vue and React frameworks. - Added server-side logic for the Multi-Cloud Orchestration Portal, including API endpoints for environment management and monitoring. - Created scripts for resource import and usage validation across non-US regions. - Added tests for CCIP error handling and integration to ensure robust functionality. - Included various new files and directories for the orchestration portal and deployment scripts.
This commit is contained in:
93
examples/metamask-react/README.md
Normal file
93
examples/metamask-react/README.md
Normal file
@@ -0,0 +1,93 @@
|
||||
# React MetaMask Integration Example
|
||||
|
||||
React example for integrating ChainID 138 with MetaMask.
|
||||
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
cd examples/metamask-react
|
||||
npm install
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
## Components
|
||||
|
||||
### useChain138 Hook
|
||||
|
||||
Custom hook for managing ChainID 138 connection:
|
||||
|
||||
```typescript
|
||||
import { useChain138 } from './useChain138';
|
||||
|
||||
function MyComponent() {
|
||||
const { isConnected, isLoading, connect } = useChain138();
|
||||
|
||||
// Use the hook
|
||||
}
|
||||
```
|
||||
|
||||
### Chain138Button
|
||||
|
||||
Button component for connecting to ChainID 138:
|
||||
|
||||
```typescript
|
||||
import { Chain138Button } from './Chain138Button';
|
||||
|
||||
function App() {
|
||||
return <Chain138Button />;
|
||||
}
|
||||
```
|
||||
|
||||
### AddTokenButton
|
||||
|
||||
Button component for adding tokens:
|
||||
|
||||
```typescript
|
||||
import { AddTokenButton } from './AddTokenButton';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<AddTokenButton
|
||||
address="0xYourTokenAddress"
|
||||
symbol="WETH"
|
||||
decimals={18}
|
||||
image="https://explorer.d-bis.org/images/tokens/weth.png"
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Example Usage
|
||||
|
||||
```typescript
|
||||
import React from 'react';
|
||||
import { useChain138 } from './useChain138';
|
||||
import { AddTokenButton } from './AddTokenButton';
|
||||
|
||||
function App() {
|
||||
const { isConnected, connect } = useChain138();
|
||||
|
||||
return (
|
||||
<div>
|
||||
{!isConnected && (
|
||||
<button onClick={connect}>
|
||||
Connect to ChainID 138
|
||||
</button>
|
||||
)}
|
||||
{isConnected && (
|
||||
<AddTokenButton
|
||||
address="0xYourWETHAddress"
|
||||
symbol="WETH"
|
||||
decimals={18}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user