DAPP-1598 fixed push snap modal icons

[rohitmalhotra1420]

Pull Request Template

Ticket Number

• 1598

Description

• Problem/Feature:

Type of Change

Fixed the broken icons on push snap modal. Please check the ticket description to test it out.

• [x] Bug fix
• [ ] New feature
• [ ] Code refactor
• [ ] Documentation update
• [ ] Other (please describe):

Checklist

• [x] Quick PR: Is this a quick PR? Can be approved before finishing a coffee.
  • [ ] Quick PR label added
• [ ] Not Merge Ready: Is this PR dependent on some other PR/tasks and not ready to be merged right now.
  • [ ] DO NOT Merge PR label added

Frontend Guidelines

• [ ] Followed frontend guidelines as per the Guidelines Notion Doc

Build & Testing

• [x] No errors in the build terminal
• [x] Engineer has tested the changes on their local environment
• [ ] Engineer has tested the changes on deploy preview

Screenshots/Video with Explanation

• Before: Explain the previous behavior

• After: What's changed now

Additional Context

Review & Approvals

• [x] Self-review completed
• [ ] Code review by at least one other engineer
• [ ] Documentation updates if applicable

Notes

[github-actions[bot]]

There is a typo in the comment for "Internal Components." It should be "Internal Components" instead of "Internal Compoonents."

In the function connectSnap, params should be passed directly to the request method instead of wrapping it in an object.

In the installSnap function, there are some commented-out code blocks that are not being used and can be removed.

In the return statement, the component Container is not defined; it seems like it should be Container should be replaced by styled(ItemVV2).

The prop scheme in the theme object should be compared using === instead of ==.

The components' styling looks consistent and well-structured.

// React + Web3 Essentials
import React from 'react';

// External Packages
import { useNavigate } from 'react-router-dom';
import styled, { useTheme } from 'styled-components';

// Internal Components
import PushLogoDark from 'assets/pushDark.svg?react';
import PushLogoLight from 'assets/pushLight.svg?react';
import HandTap from 'assets/snap/HandTap.svg?react';
import NotificationLogo from 'assets/snap/Notification.svg?react';
import WalletLogo from 'assets/snap/Wallet.svg?react';
import Metamask from 'assets/snap/metamasksnap.svg?react';
import { Button } from 'components/SharedStyling';
import { ItemHV2, ItemVV2, SpanV2 } from 'components/reusables/SharedStylingV2';

const SnapInformationModal = ({ handleCloseModal }) => {
  const theme = useTheme();
  const navigate = useNavigate();

  const defaultSnapOrigin = 'npm:@pushprotocol/snap';

  const connectSnap = async (snapId = defaultSnapOrigin, params = {}) => {
    await window.ethereum?.request({
      method: 'wallet_requestSnaps',
      params: {
        [snapId]: params,
      },
    });
  };

  const installSnap = async () => {
    handleCloseModal();
    navigate('/snap');
  };

  return (
    <StyledContainer>
      {/* Content */}
    </StyledContainer>
  );
};

const StyledContainer = styled(ItemVV2)`
  padding: 0px 9px 12px 9px;
`;

const PrimaryText = styled.p`
  margin: 0px;
  font-size: 18px;
  font-weight: 500;
  align-self: baseline;
  color: ${(props) => props.theme.snapPrimaryText};
`;

const SecondaryText = styled.p`
  margin: 0px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: ${(props) => props.theme.snapSecondaryText};
  text-align: left;
`;

const InstallButton = styled(Button)`
  width: fit-content;
  min-width: 102px;
  background: #d53a94;
  color: #fff;
  z-index: 0;
  font-family: 'Strawford';
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: normal;
  border-radius: 8px;
  padding: 14px;
`;

export default SnapInformationModal;

// All looks good.

[github-actions[bot]]

PR Preview Action v1.4.7 :---: Preview removed because the pull request was closed. 2024-06-13 09:35 UTC

[corlard3y]

LGTM