Skip to content

Commit

Permalink
Merge pull request #2 from 0xAnto/develop
Browse files Browse the repository at this point in the history 
Develop
  • Loading branch information
@0xAnto
0xAnto authored Dec 9, 2023
2 parents 1ea64f7 + d399a86 commit 965905a
Show file tree
Hide file tree
Showing 6 changed files with 141 additions and 55 deletions.
Binary file added public/ethg.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 4 additions & 7 deletions public/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,14 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/ethglobal.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<meta name="description" content="The cross-chain paymaster" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/ethg.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>omnipay</title>
<title>OmniPay</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
Expand Down
8 changes: 4 additions & 4 deletions public/manifest.json
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"short_name": "OmniPay",
"name": "The cross-chain paymaster",
"icons": [
{
"src": "ethglobal.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"src": "ethg.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"src": "ethg.png",
"type": "image/png",
"sizes": "512x512"
}
Expand Down
171 changes: 128 additions & 43 deletions src/Pages/Dashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,40 +2,128 @@ import React, { SetStateAction, useEffect, useState } from 'react';
import nft from '../image/BoredApe.png';
import { Button, Dropdown, Flex, Input, Menu, MenuProps, Radio, RadioChangeEvent, Space, message } from 'antd';
import { DownOutlined, UserOutlined } from '@ant-design/icons';
import { USDC } from 'utils/Constants';
import { ADDRESS, BundlerEndpoints, USDC } from 'utils/Constants';
import { PrimeSdk } from '@etherspot/prime-sdk';
import { ethers } from 'ethers';
import { getUiAmount } from 'utils/helpers';
import { ERC20Helper } from 'utils/ERC20Helper';

const Dashboard = () => {
const [arbitrumGoerliInstance, setArbitrumGoerliInstance] = useState<PrimeSdk>();
const [mantletestnetInstance, setMantletestnetInstance] = useState<PrimeSdk>();
const [scrollsepoliaInstance, setScrollsepoliaInstance] = useState<PrimeSdk>();
const [basegoerliInstance, setBasegoerliInstance] = useState<PrimeSdk>();
const [mumbaiInstance, setMumbaiInstance] = useState<PrimeSdk>();
const [nativeBalance, setNativebalance] = useState<number>();
const [sourceSelectedValue, setSourceSelectedValue] = useState(0);
const [targetSelectedValue, setTargetSelectedValue] = useState(0);
useEffect(() => {
const sdk = async () => {
const primeSdk = new PrimeSdk({
privateKey: process.env.REACT_APP_WALLET_PRIVATE_KEY as string }, {
chainId: Number(process.env.REACT_APP_CHAIN_ID),
projectKey: '',
});
const balances = await primeSdk.getNativeBalance();
console.log("🚀 ~ file: Dashboard.tsx:20 ~ sdk ~ balances:", balances)
const [arbitrumgoerliPrimeInstance, mantletestnetPrimeInstance, scrollsepoliaPrimeInstance, baseGoerliPrimeInstance, mumbaiPrimeInstance] = await Promise.all([

new PrimeSdk(
{
privateKey: process.env.REACT_APP_WALLET_PRIVATE_KEY as string,
},
{
chainId: Number(BundlerEndpoints[421613].chainId),
bundlerRpcUrl: BundlerEndpoints[421613].bundler as string,
projectKey: '',
}
),
new PrimeSdk(
{
privateKey: process.env.REACT_APP_WALLET_PRIVATE_KEY as string,
},
{
chainId: Number(BundlerEndpoints[5001].chainId),
bundlerRpcUrl: BundlerEndpoints[5001].bundler as string,
projectKey: '',
}
),
new PrimeSdk(
{
privateKey: process.env.REACT_APP_WALLET_PRIVATE_KEY as string,
},
{
chainId: Number(BundlerEndpoints[534351].chainId),
bundlerRpcUrl: BundlerEndpoints[534351].bundler as string,
projectKey: '',
}
),
new PrimeSdk(
{
privateKey: process.env.REACT_APP_WALLET_PRIVATE_KEY as string,
},
{
chainId: Number(BundlerEndpoints[84531].chainId),
bundlerRpcUrl: BundlerEndpoints[84531].bundler as string,
projectKey: '',
}
),
new PrimeSdk(
{
privateKey: process.env.REACT_APP_WALLET_PRIVATE_KEY as string,
},
{
chainId: Number(BundlerEndpoints[80001].chainId),
bundlerRpcUrl: BundlerEndpoints[80001].bundler as string,
projectKey: '',
}
),
]);
// const data =new ERC20Helper(arbitrumgoerliPrimeInstance as PrimeSdk)
setArbitrumGoerliInstance(arbitrumgoerliPrimeInstance);
setMantletestnetInstance(mantletestnetPrimeInstance);
setScrollsepoliaInstance(scrollsepoliaPrimeInstance)
setBasegoerliInstance(baseGoerliPrimeInstance)
setMumbaiInstance(mumbaiPrimeInstance)
};
sdk();
}, []);

const sourceChainOptions = [
{ label: 'Scroll Testnet', value: 1 },
{ label: 'Arbitrum Goerli', value: 2 },
{ label: 'Polygon Mumbai', value: 3 },
{ label: 'Mantle Testnet', value: 4 },
{ label: 'Base Goerli', value: 5 },
{ label: 'Arbitrum Goerli', value: 1 },
{ label: 'Mantle Testnet', value: 2 },
{ label: 'Scroll Testnet', value: 3 },
{ label: 'Base Goerli', value: 4 },
{ label: 'Polygon Mumbai', value: 5 },
];
const targetChainOptions = [
{ label: 'Scroll Testnet', value: 1 },
{ label: 'Arbitrum Goerli', value: 2 },
{ label: 'Polygon Mumbai', value: 3 },
{ label: 'Mantle Testnet', value: 4 },
{ label: 'Base Goerli', value: 5 },
{ label: 'Arbitrum Goerli', value: 1 },
{ label: 'Mantle Testnet', value: 2 },
{ label: 'Scroll Testnet', value: 3 },
{ label: 'Base Goerli', value: 4 },
{ label: 'Polygon Mumbai', value: 5 },
];
const [sourceSelectedValue, setSourceSelectedValue] = useState(0);
const [targetSelectedValue, setTargetSelectedValue] = useState(0);
const handleSourceRadioChange = (e: any) => {

const handleSourceRadioChange = async (e: any) => {
setSourceSelectedValue(e.target.value);
let provider:ethers.providers.JsonRpcProvider = new ethers.providers.JsonRpcProvider(BundlerEndpoints[421613].bundler);
switch (Number(e.target.value)) {
case 1:
provider = new ethers.providers.JsonRpcProvider(BundlerEndpoints[421613].bundler);
break;
case 2:
provider = new ethers.providers.JsonRpcProvider(BundlerEndpoints[5001].bundler);
break;
case 3:
provider = new ethers.providers.JsonRpcProvider(BundlerEndpoints[534351].bundler);
break;
case 4:
provider = new ethers.providers.JsonRpcProvider(BundlerEndpoints[84531].bundler);
break;
case 5:
provider = new ethers.providers.JsonRpcProvider(BundlerEndpoints[80001].bundler);
break;
default:
break;
}
const balance = await provider.getBalance(
ADDRESS,
"latest"
);
setNativebalance(getUiAmount(Number(balance)))
};

const handleTargetRadioChange = (e: any) => {
Expand Down Expand Up @@ -74,7 +162,7 @@ const Dashboard = () => {
icon: string;
onClick: () => void;
}

const DropdownItem: React.FC<DropdownItemProps> = ({ label, icon, onClick }) => (
<Menu.Item key={label} icon={<img src={icon} alt={label} className="menu-icon w-5 h-5 rounded-full mt-1 mr-1" />}>
{label}
Expand All @@ -84,7 +172,7 @@ const Dashboard = () => {
<Dropdown
overlay={
<Menu onClick={handleMenuClick}>
{itemsdrop.map((item:any) => (
{itemsdrop.map((item: any) => (
<DropdownItem key={item.key} label={item.label} icon={item.icon} onClick={() => handleClick(item)} />
))}
</Menu>
Expand Down Expand Up @@ -112,7 +200,7 @@ const Dashboard = () => {
))}
</Radio.Group>
</div>
<div className="absolute top-14 mt-4">{`Balance :${0}`}</div>
<div className="absolute top-14 mt-4">{`Balance : ${nativeBalance?nativeBalance:'0.0'}`}</div>
<img className="w-40 h-40 absolute top-20 left-1/2 transform -translate-x-1/2 mt-8" src={nft} alt="matic" />

<div className="absolute top-60 items-center mt-10">
Expand All @@ -130,37 +218,34 @@ const Dashboard = () => {
))}
</Radio.Group>
</div>
<div className='mt-20'>
{targetChainOptions
.filter((option) => option.value !== sourceSelectedValue)
.map((option) => (
<Space>
<Dropdown key={option.value} overlay={menu} placement="bottomLeft" arrow >
<div className="mt-20">
{targetChainOptions
.filter((option) => option.value !== sourceSelectedValue)
.map((option) => (
<Space>
<Dropdown key={option.value} overlay={menu} placement="bottomLeft" arrow>
<Button className="bg-blue-500 text-white">
<Space>
USDC
<DownOutlined />
</Space>
</Button>
</Dropdown>
<span className='mr-6'>{0}</span>
<span className="mr-6">{0}</span>
</Space>
))}
{/* <Space>
<Dropdown overlay={menu} placement="bottomLeft" arrow>
<Button>
<Space>
USDC
<DownOutlined />
</Space>
</Button>
</Dropdown>
<span>Balance: {0}</span>
</Space> */}
))}
</div>
<Button className="absolute top-80 mt-8" size="large">
Mint
</Button>
<div className="absolute top-80 mt-80">
<Button className="pr-[2px]" size="large">
Submit
</Button>
<Button className="mr-10" size="large">
Cancel
</Button>
</div>
</div>
</div>
);
Expand Down
3 changes: 2 additions & 1 deletion src/utils/Constants.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
export const USDC = {
logoURI: 'https://tokens.1inch.io/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png',
};
export const ADDRESS = '0x7305B1a9bDD8247DeB288BC2d271626159cB8c4c';

// Bundler endpoints
export const BundlerEndpoints = {
Expand Down Expand Up @@ -43,7 +44,7 @@ export const BundlerEndpoints = {
},
84531: {
chainId: 84531,
bundler: 'https://basegoerli-bundler.etherspot.io',
bundler: 'https://basegoerli-bundler.etherspot.io/84531',
contracts: {
entryPoint: '0x5FF137D4b0FDCD49DcA30c7CF57E578a026d2789',
walletFactory: {
Expand Down
3 changes: 3 additions & 0 deletions src/utils/helpers.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export function getUiAmount(number: number) {
return number / Math.pow(10, 18);
}

0 comments on commit 965905a

Please sign in to comment.