diff --git a/src/modules/snap/SnapModule.tsx b/src/modules/snap/SnapModule.tsx
index 027e2c7067..d80e7ca781 100644
--- a/src/modules/snap/SnapModule.tsx
+++ b/src/modules/snap/SnapModule.tsx
@@ -1,223 +1,349 @@
// React + Web3 Essentials
-import React, { useState } from "react";
+import React, { useEffect, useState } from 'react';
// External Packages
-import ReactGA from "react-ga";
-import styled, { useTheme } from "styled-components";
+import ReactGA from 'react-ga';
+import styled, { useTheme } from 'styled-components';
+import { useWeb3React } from '@web3-react/core';
// Internal Components
import { ButtonV2, H2V2, ItemHV2, ItemVV2, SpanV2 } from 'components/reusables/SharedStylingV2';
-import { H2, Image, Item, Section, Span } from "../../primaries/SharedStyling";
+import { H2, Image, Item, Section, Span } from '../../primaries/SharedStyling';
import LoaderSpinner, { LOADER_TYPE } from 'components/reusables/loaders/LoaderSpinner';
-import Info from "segments/Info";
+import Info from 'segments/Info';
// Internal Configs
-import GLOBALS, { device, globalsMargin } from "config/Globals";
-import useModalBlur, { MODAL_POSITION } from "hooks/useModalBlur";
-import SnapExample from 'assets/PushSnaps/SnapExample.svg'
+import GLOBALS, { device, globalsMargin } from 'config/Globals';
+import useModalBlur, { MODAL_POSITION } from 'hooks/useModalBlur';
+import SnapExample from 'assets/PushSnaps/SnapExample.svg';
import InfoLogo from 'assets/PushSnaps/spam-icon.svg';
import PushMetamaskLogo from 'assets/PushSnaps/PushMetamaskLogo.svg';
import ActiveIcon from 'assets/PushSnaps/ActiveIcon.svg';
import { ReactComponent as Gear } from 'assets/PushSnaps/Gear.svg';
-import PushSnapModal from "./PushSnapModal";
-import AboutSnapModal from "./AboutSnapModal";
+import PushSnapModal from './PushSnapModal';
+import AboutSnapModal from './AboutSnapModal';
const SnapModule = () => {
+ const [loading, setLoading] = useState(false);
+ const [walletConnected, setWalletConnected] = useState(false);
+ const [snapInstalled, setSnapInstalled] = useState(false);
+
+ const { account, provider } = useWeb3React();
+
+ useEffect(() => {
+ getInstalledSnaps();
+ }, [snapInstalled]);
+
+ async function getInstalledSnaps() {
+ const installedSnaps = await window.ethereum.request({
+ method: 'wallet_getSnaps',
+ });
+ Object.keys(installedSnaps).forEach((snap) => {
+ if (snap == 'npm:push-v1') {
+ setSnapInstalled(true);
+ }
+ });
+ }
- const [loading, setLoading] = useState(false);
- const [walletConnected, setWalletConnected] = useState(false);
- const [snapInstalled,setSnapInstalled] = useState(false);
-
- const connectToMetamask = () => {
+ const defaultSnapOrigin = `npm:push-v1`;
+
+ async function connectSnap (
+ snapId = defaultSnapOrigin,
+ params = {}
+ ){
+ await window.ethereum?.request({
+ method: "wallet_requestSnaps",
+ params: {
+ [snapId]: params,
+ },
+ });
+ console.log('Snap Installed');
+ };
+
+ async function connectToMetaMask(){
+ if(!snapInstalled){
+ await connectSnap();
+ setSnapInstalled(true);
+ }else{
+ setLoading(!loading);
+ await addwalletAddress();
setLoading(!loading);
+ setWalletConnected(true);
}
+ }
- //About Snap Info Modal
- const {
- isModalOpen: isMetamaskPushSnapOpen,
- showModal: showPushSnapAbout,
- ModalComponent: AboutPushSnapModalComponent,
- } = useModalBlur();
-
-
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Push Snap
-
- powered by MetaMask
-
-
-
- {walletConnected ? (
- <>
- Get started by opting in to channels on Push.
- Once you opt-in you will receive notifications on MetaMask.
-
- ) : (
-
- You’re about to install Push Snap which allows you to receive notifications from Push directly on MetaMask!
-
- )}
-
-
-
-
-
- {walletConnected ? (
-
-
- Connected to Push Snap
-
- ) : (
-
- {loading ? (
-
- ) : (
-
- {snapInstalled ? 'Install Snap' : 'Connect Using MetaMask '}
-
- )}
-
- )}
-
- {walletConnected ? (
-
-
-
- Settings
-
- Get Started
-
- ) : (
-
-
- About this Snap
-
- )}
-
-
-
-
-
-
- );
+ async function getSignature(account: string){
+ const signer = provider.getSigner(account);
+ const signature = await signer.signMessage(`Add address ${account} to receive notifications through Push Snap`);
+ return signature;
+ }
+
+ async function addwalletAddress () {
+ const signatureResult = await getSignature(account);
+ if (signatureResult) {
+ if (account) {
+ await window.ethereum?.request({
+ method: 'wallet_invokeSnap',
+ params: {
+ snapId: defaultSnapOrigin,
+ request: {
+ method: 'pushproto_addaddress',
+ params: { address: account },
+ },
+ },
+ });
+ console.log('Added', account);
+ }
+ } else {
+ console.log('Signature Validation Failed');
+ }
+ };
+
+ //About Snap Info Modal
+ const {
+ isModalOpen: isMetamaskPushSnapOpen,
+ showModal: showPushSnapAbout,
+ ModalComponent: AboutPushSnapModalComponent,
+ } = useModalBlur();
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Push Snap
+
+
+ powered by MetaMask
+
+
+
+
+ {walletConnected ? (
+ <>
+
+ Get started by opting in to channels on Push.{' '}
+
+
+ Once you opt-in you will receive notifications on MetaMask.
+
+
+ ) : (
+
+ You’re about to install Push Snap which allows you to receive notifications from Push directly on
+ MetaMask!
+
+ )}
+
+
+
+ {walletConnected ? (
+
+
+
+ Connected to Push Snap
+
+
+ ) : (
+
+ {loading ? (
+
+ ) : (
+ connectToMetaMask()}>
+ {!snapInstalled ? 'Install Snap' : 'Connect Using MetaMask '}
+
+ )}
+
+ )}
+
+ {walletConnected ? (
+
+
+
+ Settings
+
+ window.location.href='/channels'}>Get Started
+
+ ) : (
+
+
+
+ About this Snap
+
+
+ )}
+
+
+
+ );
};
export default SnapModule;
const Container = styled(Section)`
- align-items: center;
- align-self: center;
- // background: ${(props) => props.theme.default.bg};
- background:#F4F5FA;
- border-radius: ${GLOBALS.ADJUSTMENTS.RADIUS.LARGE};
- box-shadow: ${GLOBALS.ADJUSTMENTS.MODULE_BOX_SHADOW};
- display: flex;
- flex-direction: column;
- flex: initial;
- justify-content: center;
+ align-items: center;
+ align-self: center;
+ // background: ${(props) => props.theme.default.bg};
+ background: #f4f5fa;
+ border-radius: ${GLOBALS.ADJUSTMENTS.RADIUS.LARGE};
+ box-shadow: ${GLOBALS.ADJUSTMENTS.MODULE_BOX_SHADOW};
+ display: flex;
+ flex-direction: column;
+ flex: initial;
+ justify-content: center;
max-width: 1200px;
- width: calc(100% - ${globalsMargin.MINI_MODULES.DESKTOP.RIGHT} - ${globalsMargin.MINI_MODULES.DESKTOP.LEFT} - ${GLOBALS.ADJUSTMENTS.PADDING.BIG} - ${GLOBALS.ADJUSTMENTS.PADDING.BIG});
+ width: calc(
+ 100% - ${globalsMargin.MINI_MODULES.DESKTOP.RIGHT} - ${globalsMargin.MINI_MODULES.DESKTOP.LEFT} -
+ ${GLOBALS.ADJUSTMENTS.PADDING.BIG} - ${GLOBALS.ADJUSTMENTS.PADDING.BIG}
+ );
padding: ${GLOBALS.ADJUSTMENTS.PADDING.BIG};
- position: relative;
+ position: relative;
margin: ${GLOBALS.ADJUSTMENTS.MARGIN.MINI_MODULES.DESKTOP};
@media ${device.laptop} {
margin: ${GLOBALS.ADJUSTMENTS.MARGIN.MINI_MODULES.TABLET};
padding: ${GLOBALS.ADJUSTMENTS.PADDING.DEFAULT};
- width: calc(100% - ${globalsMargin.MINI_MODULES.TABLET.RIGHT} - ${globalsMargin.MINI_MODULES.TABLET.LEFT} - ${GLOBALS.ADJUSTMENTS.PADDING.DEFAULT} - ${GLOBALS.ADJUSTMENTS.PADDING.DEFAULT});
+ width: calc(
+ 100% - ${globalsMargin.MINI_MODULES.TABLET.RIGHT} - ${globalsMargin.MINI_MODULES.TABLET.LEFT} -
+ ${GLOBALS.ADJUSTMENTS.PADDING.DEFAULT} - ${GLOBALS.ADJUSTMENTS.PADDING.DEFAULT}
+ );
}
@media ${device.mobileL} {
margin: ${GLOBALS.ADJUSTMENTS.MARGIN.MINI_MODULES.MOBILE};
padding: ${GLOBALS.ADJUSTMENTS.PADDING.DEFAULT};
- width: calc(100% - ${globalsMargin.MINI_MODULES.MOBILE.RIGHT} - ${globalsMargin.MINI_MODULES.MOBILE.LEFT} - ${GLOBALS.ADJUSTMENTS.PADDING.DEFAULT} - ${GLOBALS.ADJUSTMENTS.PADDING.DEFAULT});
+ width: calc(
+ 100% - ${globalsMargin.MINI_MODULES.MOBILE.RIGHT} - ${globalsMargin.MINI_MODULES.MOBILE.LEFT} -
+ ${GLOBALS.ADJUSTMENTS.PADDING.DEFAULT} - ${GLOBALS.ADJUSTMENTS.PADDING.DEFAULT}
+ );
}
`;
-
const SubContainer = styled(Section)`
- width:438px;
- height:423px;
- padding:48px 24px;
- border-radius: 32px;
- background: #FFF;
- box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);
- margin: 24px auto;
-`
+ width: 438px;
+ height: 423px;
+ padding: 48px 24px;
+ border-radius: 32px;
+ background: #fff;
+ box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);
+ margin: 24px auto;
+`;
const SnapButton = styled(ButtonV2)`
- height:44px;
- border-radius: 15px;
- font-size: 16px;
- font-weight:500;
- line-height: 141%;
- letter-spacing: -0.03em;
- color: #FFFFFF;
- flex:none;
- cursor:pointer;
-
- & > div{
- display:block;
- }
-
- @media(max-width:600px){
- font-size: 14px;
- }
+ height: 44px;
+ border-radius: 15px;
+ font-size: 16px;
+ font-weight: 500;
+ line-height: 141%;
+ letter-spacing: -0.03em;
+ color: #ffffff;
+ flex: none;
+ cursor: pointer;
+
+ & > div {
+ display: block;
+ }
-`
+ @media (max-width: 600px) {
+ font-size: 14px;
+ }
+`;
const ConnectButton = styled(SnapButton)`
- min-width:230px;
- padding: 16px 24px;
- background: #D53A94;
- border: 1px solid #D53A94;
+ min-width: 230px;
+ padding: 16px 24px;
+ background: #d53a94;
+ border: 1px solid #d53a94;
`;
const SettingsButton = styled(SnapButton)`
- flex-direction:row;
- color: #657795;
- text-align: center;
- width:135px;
- padding: 16px 24px;
- border: 1px solid #BAC4D6;
- background: #FFF;
- gap:4px;
-`
+ flex-direction: row;
+ color: #657795;
+ text-align: center;
+ width: 135px;
+ padding: 16px 24px;
+ border: 1px solid #bac4d6;
+ background: #fff;
+ gap: 4px;
+`;
const FilledButton = styled(SnapButton)`
- width:135px;
- padding: 16px 24px;
- background: #D53A94;
-`
+ width: 135px;
+ padding: 16px 24px;
+ background: #d53a94;
+`;
const InfoDiv = styled(ItemHV2)`
- cursor:pointer;
-`
-
-const ButtonContainer = styled(ItemHV2)`
+ cursor: pointer;
+`;
-`
\ No newline at end of file
+const ButtonContainer = styled(ItemHV2)``;