diff --git a/public/extension.png b/public/extension.png
new file mode 100644
index 0000000..8cd1d30
Binary files /dev/null and b/public/extension.png differ
diff --git a/src/components/Body/Tab.tsx b/src/components/Body/Tab.tsx
index 182d25b..175ddd4 100644
--- a/src/components/Body/Tab.tsx
+++ b/src/components/Body/Tab.tsx
@@ -1,28 +1,47 @@
-import { Box } from "@chakra-ui/react";
+import { Box, HStack, Badge } from "@chakra-ui/react";
const Tab = ({
children,
tabIndex,
selectedTabIndex,
setSelectedTabIndex,
+ isNew = false,
}: {
children: React.ReactNode;
tabIndex: number;
selectedTabIndex: number;
setSelectedTabIndex: Function;
+ isNew?: boolean;
}) => {
return (
- setSelectedTabIndex(tabIndex)}
>
- {children}
-
+ {children}
+ {isNew && (
+
+
+ New
+
+
+ )}
+
);
};
diff --git a/src/components/Body/index.tsx b/src/components/Body/index.tsx
index 60f7610..27be527 100644
--- a/src/components/Body/index.tsx
+++ b/src/components/Body/index.tsx
@@ -133,6 +133,7 @@ function Body() {
const [isConnected, setIsConnected] = useState(false);
const [loading, setLoading] = useState(false);
+ const tabs = ["WalletConnect", "iFrame", "Extension"];
const [selectedTabIndex, setSelectedTabIndex] = useState(0);
const [isIFrameLoading, setIsIFrameLoading] = useState(false);
const [safeDapps, setSafeDapps] = useState<{
@@ -699,265 +700,326 @@ function Body() {
background="gray.700"
borderRadius="xl"
>
- {["WalletConnect", "iFrame"].map((t, i) => (
+ {tabs.map((t, i) => (
{t}
))}
- {selectedTabIndex === 0 ? (
- <>
-
-
- WalletConnect URI
-
- Visit any dApp and select WalletConnect.
-
- Click "Copy to Clipboard" beneath the QR code, and paste
- it here.
-
-
- }
- hasArrow
- placement="top"
- >
-
-
-
-
-
-
- setUri(e.target.value)}
- bg={bgColor[colorMode]}
- isDisabled={isConnected}
- />
-
-
-
-
-
- {loading && (
-
-
-
-
-
- {!isConnected && (
-
-
-
- )}
-
-
- )}
- {peerMeta && (
- <>
-
- {isConnected ? "✅ Connected To:" : "⚠ Allow to Connect"}
-
-
-
- {peerMeta.name}
- {peerMeta.description}
-
- {peerMeta.url}
-
- {!isConnected && (
-
-
-
-
- )}
- {isConnected && (
-
-
-
- )}
-
-
- )}
-
- ) : (
- <>
-
-
- dapp URL
-
- Paste the URL of dapp you want to connect to
-
- Note: Some dapps might not support it, so use
- WalletConnect in that case
-
-
- }
- hasArrow
- placement="top"
- >
-
-
-
-
-
-
-
-
-
-
-
- Select a dapp
-
-
- {(!safeDapps || !safeDapps[networkIndex]) && (
-
-
-
- )}
-
- {safeDapps && safeDapps[networkIndex] && (
-
-
-
- setSearchSafeDapp(e.target.value)
- }
- />
- {searchSafeDapp && (
-
-
-
- )}
-
-
- )}
-
-
- {filteredSafeDapps &&
- filteredSafeDapps.map((dapp, i) => (
- {
- initIFrame(dapp.url);
- setInputAppUrl(dapp.url);
- closeSafeApps();
- }}
- >
-
-
-
- {dapp.name}
-
-
-
- ))}
-
+
+
+
+
+
+ setUri(e.target.value)}
+ bg={bgColor[colorMode]}
+ isDisabled={isConnected}
+ />
+
+
+
+
+
+ {loading && (
+
+
+
+
+
+ {!isConnected && (
+
+
+
+ )}
+
+
+ )}
+ {peerMeta && (
+ <>
+
+ {isConnected ? "✅ Connected To:" : "⚠ Allow to Connect"}
-
-
-
-
- setInputAppUrl(e.target.value)}
- bg={bgColor[colorMode]}
- />
-
-
-
-
-
- {appUrl && (
- setIsIFrameLoading(false)}
- />
- )}
-
-
- )}
+
+
+ {peerMeta.name}
+ {peerMeta.description}
+
+ {peerMeta.url}
+
+ {!isConnected && (
+
+
+
+
+ )}
+ {isConnected && (
+
+
+
+ )}
+
+
+ )}
+
+ );
+ case 1:
+ return (
+ <>
+
+
+ dapp URL
+
+
+ Paste the URL of dapp you want to connect to
+
+
+ Note: Some dapps might not support it, so use
+ WalletConnect in that case
+
+
+ }
+ hasArrow
+ placement="top"
+ >
+
+
+
+
+
+
+
+
+
+
+
+ Select a dapp
+
+
+ {(!safeDapps || !safeDapps[networkIndex]) && (
+
+
+
+ )}
+
+ {safeDapps && safeDapps[networkIndex] && (
+
+
+
+ setSearchSafeDapp(e.target.value)
+ }
+ />
+ {searchSafeDapp && (
+
+
+
+ )}
+
+
+ )}
+
+
+ {filteredSafeDapps &&
+ filteredSafeDapps.map((dapp, i) => (
+ {
+ initIFrame(dapp.url);
+ setInputAppUrl(dapp.url);
+ closeSafeApps();
+ }}
+ >
+
+
+
+ {dapp.name}
+
+
+
+ ))}
+
+
+
+
+
+
+
+ setInputAppUrl(e.target.value)}
+ bg={bgColor[colorMode]}
+ />
+
+
+
+
+
+ {appUrl && (
+ setIsIFrameLoading(false)}
+ />
+ )}
+
+
+ );
+ case 2:
+ return (
+
+
+
+ ⭐ Download the browser extension from:{" "}
+
+ Chrome Web Store
+
+
+
+
+ Read more:
+
+ Launch Tweet
+
+
+
+
+ );
+ }
+ })()}