Skip to content

Commit

Permalink
NEW: setup matic network
Browse files Browse the repository at this point in the history
  • Loading branch information
@samster91
samster91 committed May 31, 2021
1 parent 071818c commit a69ab44
Show file tree
Hide file tree
Showing 12 changed files with 1,177 additions and 141 deletions.
2 changes: 1 addition & 1 deletion public/images/tokens/MATIC.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
51 changes: 40 additions & 11 deletions src/Dashboard/Dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import RoundButton from '../RoundButton/RoundButton';
import BetaModal from "../utilities/components/BetaModal";
import DashboardCard from '../DashboardCard/DashboardCard';
import CurveStrategy from '../CurveStrategy/CurveStrategy';
import PolygonModal from "../utilities/components/PolygonModal";
import WelcomeModal from "../utilities/components/WelcomeModal";
import TooltipModal from "../utilities/components/TooltipModal";
import MigrateModal from "../utilities/components/MigrateModal";
Expand All @@ -27,6 +28,7 @@ class Dashboard extends Component {
currentRoute:null,
pageComponent:null,
currentSection:null,
currentNetwork:null,
selectedSection:null,
tokensToMigrate:null,
showResetButton:false,
Expand All @@ -51,13 +53,11 @@ class Dashboard extends Component {
}

async loadMenu() {

const currentNetworkId = this.functionsUtil.getCurrentNetworkId();
// console.log(this.props.networkInitialized,this.props.network,currentNetworkId);
const currentNetwork = this.functionsUtil.getCurrentNetwork();

const strategies = this.functionsUtil.getGlobalConfig(['strategies']);
const baseRoute = this.functionsUtil.getGlobalConfig(['dashboard','baseRoute']);
const menu = Object.keys(strategies).filter( s => ( !strategies[s].comingSoon && (!strategies[s].availableNetworks || strategies[s].availableNetworks.includes(currentNetworkId)) ) ).map( strategy => ({
const menu = Object.keys(strategies).filter( s => ( !strategies[s].comingSoon && (!strategies[s].availableNetworks || strategies[s].availableNetworks.includes(currentNetwork.id)) ) ).map( strategy => ({
submenu:[],
color:'#fff',
selected:false,
Expand Down Expand Up @@ -86,7 +86,7 @@ class Dashboard extends Component {

// Add Stake
const stakeConfig = this.functionsUtil.getGlobalConfig(['tools','stake']);
if (stakeConfig.enabled && (!stakeConfig.availableNetworks || stakeConfig.availableNetworks.includes(currentNetworkId))){
if (stakeConfig.enabled && (!stakeConfig.availableNetworks || stakeConfig.availableNetworks.includes(currentNetwork.id))){
menu.push(
{
submenu:[],
Expand Down Expand Up @@ -116,15 +116,15 @@ class Dashboard extends Component {
selected:false,
route:'/dashboard/tools',
bgColor:this.props.theme.colors.primary,
submenu:Object.values(this.functionsUtil.getGlobalConfig(['tools'])).filter( tool => (tool.enabled && (!tool.availableNetworks || tool.availableNetworks.includes(currentNetworkId))) )
submenu:Object.values(this.functionsUtil.getGlobalConfig(['tools'])).filter( tool => (tool.enabled && (!tool.availableNetworks || tool.availableNetworks.includes(currentNetwork.id))) )
}
);

// console.log(currentNetworkId,menu);
// console.log(currentNetwork.id,menu);

// Add Stats
const statsInfo = this.functionsUtil.getGlobalConfig(['stats']);
if (!statsInfo.availableNetworks || statsInfo.availableNetworks.includes(currentNetworkId)){
if (!statsInfo.availableNetworks || statsInfo.availableNetworks.includes(currentNetwork.id)){
menu.push(
{
icon:'Equalizer',
Expand Down Expand Up @@ -156,7 +156,8 @@ class Dashboard extends Component {
);

await this.setState({
menu
menu,
currentNetwork
});
}

Expand Down Expand Up @@ -389,7 +390,7 @@ class Dashboard extends Component {
const accountInizialized = this.props.accountInizialized && prevProps.accountInizialized !== this.props.accountInizialized;
const contractsInitialized = this.props.contractsInitialized && prevProps.contractsInitialized !== this.props.contractsInitialized;

if (!viewOnly && (accountChanged || accountInizialized || contractsInitialized || strategyChanged || availableTokensChanged)){
if (!viewOnly && (networkChanged || accountChanged || accountInizialized || contractsInitialized || strategyChanged || availableTokensChanged)){
this.checkModals();
}
}
Expand All @@ -400,12 +401,31 @@ class Dashboard extends Component {
return null;
}

await this.checkPolygonModal();
await this.checkBetaApproval();
await this.checkTokensToMigrate();
await this.checkWelcomeModal();
await this.checkProtocolsTokensBalances();
}

async checkPolygonModal(){
const isPolygon = this.state.currentNetwork.provider === 'polygon';
const isPolygonApproved = this.functionsUtil.getStoredItem('polygonApproved',false,false);

console.log('checkPolygonModal',this.state.currentNetwork,isPolygon);

// Show Beta Warning modal
if (isPolygon && !isPolygonApproved){
const activeModal = 'polygon';
if (activeModal !== this.state.activeModal){
await this.setState({
activeModal
});
return activeModal;
}
}
}

async checkBetaApproval(){
const isOriginUrl = this.functionsUtil.checkUrlOrigin();
const isBetaApproved = this.functionsUtil.getStoredItem('betaApproved',false,false);
Expand All @@ -415,7 +435,7 @@ class Dashboard extends Component {
const activeModal = 'beta';
if (activeModal !== this.state.activeModal){
await this.setState({
activeModal,
activeModal
});

return activeModal;
Expand Down Expand Up @@ -744,6 +764,15 @@ class Dashboard extends Component {
)
}
</Flex>
{
this.state.currentNetwork &&
<PolygonModal
closeModal={this.resetModal}
goToSection={this.goToSection.bind(this)}
currentNetwork={this.state.currentNetwork}
isOpen={this.state.activeModal === 'polygon'}
/>
}
<BetaModal
closeModal={this.resetModal}
isOpen={this.state.activeModal === 'beta'}
Expand Down
4 changes: 2 additions & 2 deletions src/DepositRedeem/DepositRedeem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1403,13 +1403,13 @@ class DepositRedeem extends Component {
// const PolygonBridgeComponent = polygonBridgeInfo.subComponent;
const polygonNetworkId = this.functionsUtil.getGlobalConfig(['network','providers','polygon','networkPairs',currentNetwork.id]);
// const polygonNetwork = this.functionsUtil.getGlobalConfig(['network','availableNetworks',polygonNetworkId]);
const showPolygonBridgeBanner = currentNetwork.provider === 'polygon' && polygonNetworkId && polygonBridgeInfo.enabled && this.state.action === 'deposit';

const canPerformAction = /*!depositCurve && !this.state.redeemCurveEnabled && */((this.state.action === 'deposit' && this.state.canDeposit) || (this.state.action === 'redeem' && this.state.canRedeem) || redeemGovTokens) && (!this.state.showETHWrapperEnabled || this.state.action === 'redeem') && (!this.state.showPolygonBridgeEnabled || this.state.action === 'redeem');
const showActionFlow = !redeemGovTokens && canPerformAction;

const showBuyFlow = this.state.componentMounted && currentNetwork.provider === 'infura' && (!showDepositCurve || this.state.showBuyFlow) && !this.state.depositCurveEnabled && this.state.tokenApproved && !this.state.contractPaused && (!this.state.migrationEnabled || this.state.skipMigration) && this.state.action === 'deposit' && !this.state.canDeposit && !this.state.showETHWrapperEnabled;
const showPolygonBridge = this.state.componentMounted && this.state.action === 'deposit' && !this.state.canDeposit && currentNetwork.provider === 'polygon';
const showPolygonBridgeBanner = !showPolygonBridge && currentNetwork.provider === 'polygon' && polygonNetworkId && polygonBridgeInfo.enabled && this.state.action === 'deposit';

const buyToken = this.functionsUtil.BNify(this.props.accountBalance).gt(0) ? this.props.selectedToken : this.functionsUtil.getBaseToken();

Expand Down Expand Up @@ -3102,7 +3102,7 @@ class DepositRedeem extends Component {
color={'cellText'}
textAlign={'center'}
>
Use the Polygon PoS Bridge to deposit your {this.props.selectedToken} in the Polygon blockchain.
Use the {polygonBridgeInfo.label} to deposit your {this.props.selectedToken} in the Polygon blockchain.
</Text>
<RoundButton
buttonProps={{
Expand Down
64 changes: 48 additions & 16 deletions src/PolygonBridge/PolygonBridge.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,10 +86,12 @@ class PolygonBridge extends Component {
const childTokenConfig = tokenConfig.childToken;

// Init contracts
await Promise.all([
this.props.initContract(rootTokenConfig.name,rootTokenConfig.address,rootTokenConfig.abi),
this.props.initContract(childTokenConfig.name,childTokenConfig.address,childTokenConfig.abi)
]);
if (rootTokenConfig && childTokenConfig){
await Promise.all([
this.props.initContract(rootTokenConfig.name,rootTokenConfig.address,rootTokenConfig.abi),
this.props.initContract(childTokenConfig.name,childTokenConfig.address,childTokenConfig.abi)
]);
}

this.setState({
tokenConfig
Expand All @@ -115,16 +117,27 @@ class PolygonBridge extends Component {
}

getTransactionParams(amount){
let value = null;
let methodName = null;
let methodParams = [];
let contractName = null;
amount = this.functionsUtil.toBN(amount);
switch (this.state.selectedAction){
case 'Deposit':
methodName = 'depositFor';
contractName = 'RootChainManager';
const depositData = this.props.web3.eth.abi.encodeParameter('uint256', amount);
methodParams = [this.props.account,this.state.tokenConfig.rootToken.address,depositData];
switch (this.state.selectedToken){
case 'ETH':
methodName = 'depositEtherFor';
contractName = 'RootChainManager';
value = this.props.web3.eth.abi.encodeParameter('uint256', amount);
methodParams = [this.props.account];
break;
default:
methodName = 'depositFor';
contractName = 'RootChainManager';
const depositData = this.props.web3.eth.abi.encodeParameter('uint256', amount);
methodParams = [this.props.account,this.state.tokenConfig.rootToken.address,depositData];
break;
}
break;
case 'Withdraw':
methodName = 'withdraw';
Expand All @@ -134,7 +147,16 @@ class PolygonBridge extends Component {
default:
break;
}

// console.log('getTransactionParams',{
// value,
// methodName,
// methodParams,
// contractName
// });

return {
value,
methodName,
methodParams,
contractName
Expand Down Expand Up @@ -191,33 +213,42 @@ class PolygonBridge extends Component {

async updateData(selectedActionChanged=false){
const newState = {};
const isETH = this.state.selectedToken==='ETH';
switch (this.state.selectedAction){
case 'Deposit':
newState.steps = [];
newState.permitEnabled = false;
newState.approveEnabled = true;
newState.availableNetworks = [1,5];
newState.approveEnabled = !isETH;
newState.contractInfo = this.props.toolProps.contracts.ERC20Predicate;
newState.approveDescription = `Approve the contract to deposit your ${this.state.selectedToken}`;
newState.balanceProp = await this.functionsUtil.getTokenBalance(this.state.tokenConfig.rootToken.name,this.props.account);
newState.balanceProp = isETH ? await this.functionsUtil.getETHBalance(this.props.account) : await this.functionsUtil.getTokenBalance(this.state.tokenConfig.rootToken.name,this.props.account);
if (this.state.transactionSucceeded){
const depositedTokensEvent = this.state.transactionSucceeded.txReceipt && this.state.transactionSucceeded.txReceipt.events ? Object.values(this.state.transactionSucceeded.txReceipt.events).find( event => event.address.toLowerCase() === this.state.tokenConfig.rootToken.address.toLowerCase() && event.raw.topics.find( t => t.toLowerCase().includes(this.state.contractInfo.address.replace('0x','').toLowerCase()) ) && event.raw.topics.find( t => t.toLowerCase().includes(this.props.account.replace('0x','').toLowerCase()) ) && event.raw.data.toLowerCase()!=='0xffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff'.toLowerCase() ) : null;
const depositedTokensLog = this.state.transactionSucceeded.txReceipt && this.state.transactionSucceeded.txReceipt.logs ? this.state.transactionSucceeded.txReceipt.logs.find( log => log.address.toLowerCase() === this.state.tokenConfig.rootToken.address.toLowerCase() && log.topics.find( t => t.toLowerCase().includes(this.state.contractInfo.address.replace('0x','').toLowerCase()) ) && log.topics.find( t => t.toLowerCase().includes(this.props.account.replace('0x','').toLowerCase()) ) && log.data.toLowerCase()!=='0xffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff'.toLowerCase() ) : null;
let depositedTokensLog = null;
let depositedTokensEvent = null;
if (!isETH){
depositedTokensEvent = this.state.transactionSucceeded.txReceipt && this.state.transactionSucceeded.txReceipt.events ? Object.values(this.state.transactionSucceeded.txReceipt.events).find( event => event.address.toLowerCase() === this.state.tokenConfig.rootToken.address.toLowerCase() && event.raw.topics.find( t => t.toLowerCase().includes(this.state.contractInfo.address.replace('0x','').toLowerCase()) ) && event.raw.topics.find( t => t.toLowerCase().includes(this.props.account.replace('0x','').toLowerCase()) ) && event.raw.data.toLowerCase()!=='0xffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff'.toLowerCase() ) : null;
depositedTokensLog = this.state.transactionSucceeded.txReceipt && this.state.transactionSucceeded.txReceipt.logs ? this.state.transactionSucceeded.txReceipt.logs.find( log => log.address.toLowerCase() === this.state.tokenConfig.rootToken.address.toLowerCase() && log.topics.find( t => t.toLowerCase().includes(this.state.contractInfo.address.replace('0x','').toLowerCase()) ) && log.topics.find( t => t.toLowerCase().includes(this.props.account.replace('0x','').toLowerCase()) ) && log.data.toLowerCase()!=='0xffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff'.toLowerCase() ) : null;
} else {
depositedTokensEvent = this.state.transactionSucceeded.txReceipt && this.state.transactionSucceeded.txReceipt.events ? Object.values(this.state.transactionSucceeded.txReceipt.events).find( event => event.address.toLowerCase() === this.props.toolProps.contracts.EtherPredicate.address.toLowerCase() && event.raw.topics.find( t => t.toLowerCase().includes(this.props.account.replace('0x','').toLowerCase()) ) && event.raw.data.toLowerCase()!=='0xffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff'.toLowerCase() ) : null;
depositedTokensLog = this.state.transactionSucceeded.txReceipt && this.state.transactionSucceeded.txReceipt.logs ? this.state.transactionSucceeded.txReceipt.logs.find( log => log.address.toLowerCase() === this.props.toolProps.contracts.EtherPredicate.address.toLowerCase() && log.topics.find( t => t.toLowerCase().includes(this.props.account.replace('0x','').toLowerCase()) ) && log.data.toLowerCase()!=='0xffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff'.toLowerCase() ) : null;
}
const depositedTokens = depositedTokensLog ? this.functionsUtil.fixTokenDecimals(parseInt(depositedTokensLog.data,16),this.state.tokenConfig.decimals) : ( depositedTokensEvent ? this.functionsUtil.fixTokenDecimals(parseInt(depositedTokensEvent.raw.data,16),this.state.tokenConfig.decimals) : this.functionsUtil.BNify(0));
debugger;
newState.infoBox = {
icon:'DoneAll',
iconProps:{
color:this.props.theme.colors.transactions.status.completed
},
text:`You have successfully deposited <strong>${depositedTokens.toFixed(4)} ${this.state.selectedToken}</strong> in the Polygon chain. Please wait up to 10 minutes for your balance to be reflected in the Polygon chain.`
text:`You have successfully deposited <strong>${depositedTokens.toFixed(4)} ${this.state.selectedToken}</strong> in the Polygon chain. Please wait up to 10 minutes for your balance to be accounted in the Polygon chain.`
}
} else {
newState.infoBox = {
icon:'InfoOutline',
iconProps:{
color:'cellText'
},
text:`Please note that deposits require up to 10 minutes to be reflected in the Polygon chain.`
text:`Please note that deposit of funds takes ~7-8 minutes to be accounted in the Polygon chain.`
}
}
break;
Expand Down Expand Up @@ -348,7 +379,8 @@ class PolygonBridge extends Component {
const isExit = this.state.selectedAction === 'Exit';
const isDeposit = this.state.selectedAction === 'Deposit';
const isWithdraw = this.state.selectedAction === 'Withdraw';
const currentNetworkId = this.functionsUtil.getCurrentNetworkId();
const currentNetwork = this.functionsUtil.getCurrentNetwork();
const currentNetworkId = currentNetwork.id;

return (
<Flex
Expand Down Expand Up @@ -525,7 +557,7 @@ class PolygonBridge extends Component {
color={'cellText'}
textAlign={'center'}
>
The <strong>{this.functionsUtil.capitalize(this.props.network.current.name)} network</strong> is not supported for this function, please switch to <strong>{this.state.availableNetworks.map( networkId => this.functionsUtil.getGlobalConfig(['network','availableNetworks',networkId,'name']) ).join(' or ')} network</strong>.
The <strong>{this.functionsUtil.capitalize(currentNetwork.name)} network</strong> is not supported for this function, please switch to <strong>{this.functionsUtil.getGlobalConfig(['network','availableNetworks',this.functionsUtil.getGlobalConfig(['network','providers','polygon','networkPairs',currentNetworkId]),'name'])} network</strong>.
</Text>
</Flex>
</DashboardCard>
Expand Down
4 changes: 2 additions & 2 deletions src/SendTxWithBalance/SendTxWithBalance.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -562,7 +562,7 @@ class SendTxWithBalance extends Component {
flexDirection={'column'}
>
<Icon
size={'2.3em'}
size={'1.8em'}
name={'LockOpen'}
color={'cellText'}
/>
Expand All @@ -576,7 +576,7 @@ class SendTxWithBalance extends Component {
</Text>
<RoundButton
buttonProps={{
mt:3,
mt:2,
width:[1,1/2]
}}
handleClick={this.approve.bind(this)}
Expand Down
Loading

0 comments on commit a69ab44

Please sign in to comment.