fix: tippy css import - removed it (#73)

* fix: rm tippy css file

* v1.1.3

Author: salil-naik

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@socket.tech/plugin",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",

src/components/OpRewards.tsx

@@ -1,4 +1,4 @@
-import { useContext } from "react";
+import { useContext, useEffect, useState } from "react";
 import { Gift, Info } from "react-feather";
 import { useDispatch, useSelector } from "react-redux";
 import { useTransition } from "@react-spring/web";
@@ -15,6 +15,7 @@ import { Button } from "./common/Button";
 
 export const OpRewards = () => {
   const dispatch = useDispatch();
+  const [showRewardsSection, setShowRewardsSection] = useState<boolean>(false);
   const apiKey = useSelector((state: any) => state.customSettings.apiKey);
 
   const toggleDropdown = (value) => {
@@ -25,8 +26,14 @@ export const OpRewards = () => {
   const { userAddress } = web3Context.web3Provider;
 
   const { data } = useOpRebatesData({ address: userAddress, API_KEY: apiKey });
-  if (data?.pendingAmount == "0") return null;
 
+  useEffect(() => {
+    if (data) {
+      setShowRewardsSection(data?.pendingAmount != "0");
+    }
+  }, [data]);
+
+  if (!showRewardsSection) return null;
   return (
     <button
       onClick={() => toggleDropdown(true)}

src/components/Widget.tsx

@@ -1,7 +1,6 @@
 import { useEffect } from "react";
 import { WidgetProps } from "../types";
 import { useDispatch, useSelector } from "react-redux";
-import "tippy.js/dist/tippy.css";
 
 // context
 import { useContext } from "react";

src/index.css

@@ -16,6 +16,8 @@ input[type="number"] {
 .tippy-content{
   background: rgba(0, 0, 0, 0.9);
   border: 1px solid white;
+  padding: 5px;
+  color: white;
   font-size: 12px;
   border-radius: 0.4rem;
   overflow: hidden;