v6.0.5-alpha

v6.0.5-alpha

.env.local.example

@@ -1,4 +1,5 @@
 NEXT_PUBLIC_PROVIDER_ID=INFURA
 NEXT_PUBLIC_INFURA_PROJECT_ID="INFURA_PROJECT_ID"
 NEXT_PUBLIC_BLASTAPI_PROJECT_ID="BLASTAPI_PROJECT_ID"
-NEXT_PUBLIC_COMPETITION_ACTIVE=false
+NEXT_PUBLIC_COMPETITION_ACTIVE=false
+NEXT_PUBLIC_SOCKET_API_KEY="SOCKET_API_KEY"

README.md

@@ -12,6 +12,10 @@ ENS link: [kwenta.eth](https://app.ens.domains/name/kwenta.eth).
 
 The latest IPFS hash can be found under [releases](https://github.com/Kwenta/kwenta/releases).
 
+## Contributing
+
+Kwenta welcomes contributors. Regardless of the time you have available, everyone can provide meaningful contributions to the project by submitting bug reports, feature requests or even the smallest of fixes! To submit your contribution, please fork, fix, commit and create a pull-request describing your work in detail. For more details, please have a look at the [Contribution guidelines](CONTRIBUTING.md).
+
 ## Tech stack
 
 - Next.js
@@ -52,6 +56,7 @@ Required:
 - `NEXT_PUBLIC_PROVIDER_ID` - Specifies the default provider, options are `INFURA` or `BLAST_API`
 - `NEXT_PUBLIC_INFURA_PROJECT_ID` - Infura project id (get it from [infura.io](https://infura.io/)) or
 - `NEXT_PUBLIC_BLASTAPI_PROJECT_ID` - Blast API project id (get it from [blastapi.io](https://blastapi.io/))
+- `NEXT_PUBLIC_SOCKET_API_KEY` - Socket API key (get it from [socket.tech](https://docs.socket.tech/socket-api/v2#api-key)
 
 ### Run
 
@@ -117,10 +122,6 @@ npm start
 npm run test:e2e:only:tests
 ```
 
-## Contributing
-
-Kwenta welcomes contributors. Regardless of the time you have available, everyone can provide meaningful contributions to the project by submitting bug reports, feature requests or even the smallest of fixes! To submit your contribution, please fork, fix, commit and create a pull-request describing your work in detail. For more details, please have a look at the [Contribution guidelines](CONTRIBUTING.md).
-
 ## Contact
 
 Join the community on the [Kwenta Discord server](https://discord.gg/kwentaio)!

components/Card/CardHeader.tsx

@@ -8,6 +8,7 @@ export type CardHeaderProps = {
 	className?: string;
 	lowercase?: boolean;
 	noBorder?: boolean;
+	onClick?: () => void;
 };
 
 const CardHeader: FC<CardHeaderProps> = memo(

components/SocketBridge/SocketBridge.tsx

@@ -0,0 +1,85 @@
+import { Bridge } from '@socket.tech/plugin';
+import { useCallback } from 'react';
+import styled, { useTheme } from 'styled-components';
+import { chain } from 'wagmi';
+
+import ArrowIcon from 'assets/svg/app/arrow-down.svg';
+import Connector from 'containers/Connector';
+import { fetchBalances } from 'state/balances/actions';
+import { useAppDispatch } from 'state/hooks';
+import {
+	customizeSocket,
+	socketDefaultChains,
+	SOCKET_DEST_TOKEN_ADDRESS,
+	SOCKET_SOURCE_TOKEN_ADDRESS,
+} from 'utils/socket';
+
+const SocketBridge = () => {
+	const { activeChain, signer } = Connector.useContainer();
+	const dispatch = useAppDispatch();
+	const customize = customizeSocket(useTheme());
+	const onBridgeSuccess = useCallback(() => {
+		dispatch(fetchBalances());
+	}, [dispatch]);
+
+	return (
+		<BridgeContainer>
+			<Bridge
+				provider={signer?.provider}
+				API_KEY={process.env.NEXT_PUBLIC_SOCKET_API_KEY ?? ''}
+				sourceNetworks={socketDefaultChains}
+				destNetworks={[chain.optimism.id]}
+				defaultSourceToken={SOCKET_SOURCE_TOKEN_ADDRESS}
+				defaultDestToken={SOCKET_DEST_TOKEN_ADDRESS}
+				defaultSourceNetwork={
+					socketDefaultChains.includes(activeChain?.id ?? chain.mainnet.id)
+						? activeChain?.id
+						: chain.mainnet.id
+				}
+				customize={customize}
+				enableSameChainSwaps={true}
+				onBridgeSuccess={onBridgeSuccess}
+			/>
+			<StyledDiv>
+				<ArrowIcon />
+			</StyledDiv>
+		</BridgeContainer>
+	);
+};
+
+export const BridgeContainer = styled.div`
+	p:empty {
+		display: none;
+	}
+
+	.mt-3 {
+		margin-top: 0.25rem;
+	}
+
+	.mt-6 {
+		margin-top: 0.5rem;
+	}
+
+	.bg-widget-primary {
+		border: ${(props) => props.theme.colors.selectedTheme.border};
+	}
+
+	span.ml-2 {
+		font-size: 17px;
+		font-family: ${(props) => props.theme.fonts.regular};
+	}
+`;
+
+export const StyledDiv = styled.div`
+	svg {
+		height: 15px;
+		width: 15px;
+		path {
+			fill: ${(props) => props.theme.colors.selectedTheme.button.text.primary};
+		}
+	}
+	text-align: center;
+	padding-top: 20px;
+`;
+
+export default SocketBridge;

components/SocketBridge/index.ts

@@ -0,0 +1 @@
+export { default } from './SocketBridge';

components/SocketBridge/types.ts

@@ -0,0 +1,20 @@
+export type RGB = {
+	r: number;
+	g: number;
+	b: number;
+};
+
+export type SocketCustomizationProps = {
+	width?: number; // Width of the widget in px
+	responsiveWidth?: boolean; // Widget is responsive relative to the parent element
+	borderRadius?: number; // Radius of all borders in widget, takes values between 0 - 1
+	accent?: string; // Background color of buttons
+	onAccent?: string; // Color of text in buttons
+	primary?: string; // Background color of widget and modals
+	secondary?: string; // Foreground color of info section, hover hightlights, cards
+	text?: string; // Color of all text, headings and emphasised font on widget
+	secondaryText?: string; // Color of labels, icons, footer text on widget
+	interactive?: string; // Background color of dropdown elements
+	onInteractive?: string; // Color of text in dropdowns
+	fontFamily?: string; // Font of the widget
+};

containers/Connector/Connector.tsx

@@ -11,7 +11,7 @@ import { useAppDispatch } from 'state/hooks';
 import { resetNetwork, setSigner } from 'state/wallet/actions';
 
 import { generateExplorerFunctions, getBaseUrl } from './blockExplorer';
-import { wagmiClient } from './config';
+import { activeChainIds, wagmiClient } from './config';
 
 export let transactionNotifier = new BaseTN(wagmiClient.provider);
 export let blockExplorer = generateExplorerFunctions(getBaseUrl(10));
@@ -21,12 +21,11 @@ const useConnector = () => {
 	const { address, isConnected: isWalletConnected } = useAccount();
 	const [providerReady, setProviderReady] = useState(false);
 
-	const unsupportedNetwork = useMemo(() => activeChain?.unsupported ?? false, [activeChain]);
-
-	const network = useMemo(
-		() => (activeChain?.unsupported ? chain.optimism : activeChain ?? chain.optimism),
-		[activeChain]
-	);
+	const network = useMemo(() => {
+		return activeChainIds.includes(activeChain?.id ?? chain.optimism.id)
+			? activeChain ?? chain.optimism
+			: chain.optimism;
+	}, [activeChain]);
 
 	const walletAddress = useMemo(() => address ?? null, [address]);
 
@@ -89,7 +88,6 @@ const useConnector = () => {
 
 	return {
 		activeChain,
-		unsupportedNetwork,
 		isWalletConnected,
 		walletAddress,
 		provider,

containers/Connector/config.ts

@@ -20,7 +20,14 @@ import Tally from 'components/Rainbowkit/Tally';
 import { BLAST_NETWORK_LOOKUP } from 'constants/network';
 
 const { chains, provider } = configureChains(
-	[chain.optimism, chain.mainnet, chain.optimismGoerli, chain.goerli],
+	[
+		chain.optimism,
+		chain.mainnet,
+		chain.optimismGoerli,
+		chain.goerli,
+		chain.polygon,
+		chain.arbitrum,
+	],
 	[
 		infuraProvider({
 			apiKey: process.env.NEXT_PUBLIC_INFURA_PROJECT_ID!,
@@ -76,4 +83,11 @@ export const wagmiClient = createClient({
 	provider,
 });
 
+export const activeChainIds = [
+	chain.optimism.id,
+	chain.mainnet.id,
+	chain.optimismGoerli.id,
+	chain.goerli.id,
+];
+
 export { chains };