feat: background

packages/bridge/src/components/Layout/index.tsx

@@ -28,7 +28,7 @@ export const AppLayout = React.memo((props: any) => {
     '';
   return (
     <div className={`App`}>
-      <Wormhole onCreated={() => setWormholeReady(true)} show={isRoot}>
+      <Wormhole onCreated={() => setWormholeReady(true)} show={true} rotate={isRoot}>
         <Layout title={LABELS.APP_TITLE}>
           {isRoot && (
             <Header className="App-Bar">

packages/bridge/src/components/Wormhole/WormholeCanvas.tsx

@@ -9,12 +9,12 @@ import WormholeGeometry from './WormholeGeometry';
  * @returns {JSX.Element}
  * @constructor
  */
-const WormholeCanvas = ({ onCreated }: { onCreated: any }) => {
+const WormholeCanvas = ({ onCreated, rotate }: { onCreated: any, rotate?: boolean }) => {
   return (
     <Canvas onCreated={onCreated}>
       <Camera />
       <React.Suspense fallback={null}>
-        <WormholeGeometry />
+        <WormholeGeometry rotate={rotate} />
       </React.Suspense>
     </Canvas>
   );

packages/bridge/src/components/Wormhole/WormholeGeometry.tsx

@@ -20,7 +20,7 @@ const PARTICLE_SIZE = 10;
  * @returns {JSX.Element}
  * @constructor
  */
-const WormholeGeometry = () => {
+const WormholeGeometry = ({ rotate }: { rotate?: boolean }) => {
   const mesh = React.useRef<Mesh>();
   const pointTexture = useTexture(disc);
 
@@ -47,7 +47,9 @@ const WormholeGeometry = () => {
     if (mesh.current) {
       // x-Axis defines the "top" we're looking at, try e.g. 30.5
       mesh.current.rotation.x = 30;
-      mesh.current.rotation.z += 0.0005;
+      if(!rotate) {
+        mesh.current.rotation.z += 0.0005;
+      }
     }
   });
 

packages/bridge/src/components/Wormhole/index.tsx

@@ -13,14 +13,16 @@ const Wormhole = ({
   onCreated,
   children,
   show,
+  rotate,
 }: {
   onCreated: any;
   show: boolean;
+  rotate?: boolean;
   children: React.ReactNode;
 }) => (
-  show ? <>{children}</> :
+  !show ? <>{children}</> :
   <>
-    <WormholeCanvas onCreated={onCreated} />
+    <WormholeCanvas onCreated={onCreated} rotate={rotate} />
     <div className="wormhole-overlay">{children}</div>
   </>
 );

packages/bridge/src/views/transfer/index.tsx

@@ -1,24 +1,8 @@
-import React, { useCallback, useEffect } from 'react';
+import React from 'react';
 import { Card } from 'antd';
-import { LAMPORTS_PER_SOL } from '@solana/web3.js';
-import { LABELS } from '../../constants';
-import { contexts, utils, ConnectButton, useConnection, useWallet } from '@oyster/common';
-import { useHistory, useLocation } from "react-router-dom";
 import { Transfer } from '../../components/Transfer';
-import { useEthereum } from '../../contexts';
-import { Wrap } from "../../components/Wrap";
-const { notify } = utils;
 
 export const TransferView = () => {
-  const connection = useConnection();
-  const { wallet, connected } = useWallet();
-
-  useEffect(() => {
-
-    // connectEth();
-
-  }, [connected])
-
   return (
     <div className="flexColumn" style={{ flex: 1 }}>
       <Card