New transfer page ui desing (#47)

* Added empty new pages

* added new assets

* added new appbar

* added disconnect button on wallet componnet

* implemented new desing for transer page

packages/bridge/_colors.less

@@ -1,5 +1,7 @@
 @surge-20: #00CC82;
 @tungsten-100: #06101a;
+@tungsten-80: #2F506F;
 @tungsten-60: #547595;
 @tungsten-50: #0D1B28;
 @tungsten-40: #7BA4C7;
+@tungsten-0: #193650;

packages/bridge/public/home/background.svg

@@ -1,4 +1,4 @@
-<svg viewBox="0 0 1420 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="1420" height="1401" viewBox="0 0 1420 1401" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect x="-217.293" y="597" width="1311.39" height="1311.39" rx="299.5" transform="rotate(-45 -217.293 597)" fill="url(#paint0_linear)" stroke="url(#paint1_linear)"/>
 <rect x="176.707" y="597" width="754.19" height="754.19" rx="119.5" transform="rotate(-45 176.707 597)" fill="url(#paint2_linear)" stroke="url(#paint3_linear)"/>
 <rect x="369.707" y="597" width="480.94" height="480.94" rx="60.5" transform="rotate(-45 369.707 597)" fill="url(#paint4_linear)" stroke="url(#paint5_linear)"/>
@@ -27,18 +27,6 @@
 <circle cx="46.5" cy="254.5" r="0.5" fill="#2F506F"/>
 <circle cx="1309.5" cy="168.5" r="0.5" fill="#193650"/>
 <circle cx="454.5" cy="560.5" r="0.5" fill="white"/>
-<circle cx="1062.5" cy="2226.5" r="0.5" fill="white"/>
-<g filter="url(#filter2_b)">
-<path d="M725.384 408L727.282 405.322L711.202 331L689.316 331L677.927 376.419L666.425 331L644.539 331L628.459 405.322L630.358 408H641.524L655.147 343.275H656.599L671.227 400.188H684.515L699.143 343.275H700.594L714.217 408H725.384Z" fill="url(#paint10_linear)"/>
-<path d="M301 333.678L302.898 331H314.065L327.688 395.725H329.139L343.767 338.812H357.055L371.683 395.725H373.135L386.758 331H397.924L399.823 333.678L383.743 408H361.857L350.356 362.581L338.966 408H317.08L301 333.678Z" fill="url(#paint11_linear)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M542.862 408V331H584.341C596.4 331 602.43 337.026 602.43 349.078V361.688C602.43 371.137 598.708 376.865 591.264 378.874L604.663 405.099L602.988 408H591.375L577.082 379.767H556.485V408H542.862ZM556.485 367.491H583.894C587.169 367.491 588.807 365.855 588.807 362.581V348.186C588.807 344.912 587.169 343.275 583.894 343.275H556.485V367.491Z" fill="url(#paint12_linear)"/>
-<path d="M761.199 331V408H774.822V374.187H815.906V408H829.529V331H815.906V361.912H774.822V331H761.199Z" fill="url(#paint13_linear)"/>
-<path d="M974.495 408V331H988.117V395.725H1022.96V408H974.495Z" fill="url(#paint14_linear)"/>
-<path d="M1056.6 331V408H1117V395.725H1070.22V374.187H1099.83V361.912H1070.22V343.275H1117V331H1056.6Z" fill="url(#paint15_linear)"/>
-</g>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M460.495 342.073L442.269 360.091C437.572 364.735 437.572 372.265 442.269 376.909L460.495 394.927C465.192 399.571 472.808 399.571 477.505 394.927L495.731 376.909C500.428 372.265 500.428 364.735 495.731 360.091L477.505 342.073C472.808 337.429 465.192 337.429 460.495 342.073ZM432.549 350.482C422.484 360.433 422.484 376.567 432.549 386.518L450.775 404.537C460.84 414.488 477.16 414.488 487.225 404.537L505.451 386.518C515.516 376.567 515.516 360.433 505.451 350.482L487.225 332.463C477.16 322.512 460.84 322.512 450.775 332.463L432.549 350.482Z" fill="#DC1FFF"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M892.495 342.073L874.269 360.091C869.572 364.735 869.572 372.265 874.269 376.909L892.495 394.927C897.192 399.571 904.808 399.571 909.505 394.927L927.731 376.909C932.428 372.265 932.428 364.735 927.731 360.091L909.505 342.073C904.808 337.429 897.192 337.429 892.495 342.073ZM864.549 350.482C854.484 360.433 854.484 376.567 864.549 386.518L882.775 404.537C892.84 414.488 909.16 414.488 919.225 404.537L937.451 386.518C947.516 376.567 947.516 360.433 937.451 350.482L919.225 332.463C909.16 322.512 892.84 322.512 882.775 332.463L864.549 350.482Z" fill="#00FFA3"/>
-<path d="M450.811 248H457.924V246.75H452.22V242.795H457.47V241.545H452.22V237.614H457.833V236.364H450.811V248ZM472.537 237.614H476.196V248H477.605V237.614H481.264V236.364H472.537V237.614ZM496.239 248H497.648V242.795H503.852V248H505.261V236.364H503.852V241.545H497.648V236.364H496.239V248ZM520.883 248H527.996V246.75H522.292V242.795H527.542V241.545H522.292V237.614H527.905V236.364H520.883V248ZM543.245 248H544.654V243.455H547.2C547.302 243.455 547.398 243.455 547.495 243.449L549.95 248H551.586L548.955 243.193C550.438 242.688 551.131 241.477 551.131 239.932C551.131 237.875 549.904 236.364 547.177 236.364H543.245V248ZM544.654 242.182V237.614H547.131C549.018 237.614 549.745 238.534 549.745 239.932C549.745 241.33 549.018 242.182 547.154 242.182H544.654ZM566.279 248H573.393V246.75H567.688V242.795H572.938V241.545H567.688V237.614H573.302V236.364H566.279V248ZM596.278 236.364V243.955C596.278 245.659 595.108 246.886 593.165 246.886C591.221 246.886 590.051 245.659 590.051 243.955V236.364H588.642V244.068C588.642 246.455 590.426 248.205 593.165 248.205C595.903 248.205 597.687 246.455 597.687 244.068V236.364H596.278ZM613.301 236.364V248H614.619V239.159H614.733L618.369 248H619.642L623.279 239.159H623.392V248H624.71V236.364H623.029L619.074 246.023H618.938L614.983 236.364H613.301ZM660.863 245.955H662.136V242.841H665.249V241.568H662.136V238.455H660.863V241.568H657.749V242.841H660.863V245.955ZM704.646 239.273H706.01C705.947 237.517 704.328 236.205 702.078 236.205C699.851 236.205 698.101 237.5 698.101 239.455C698.101 241.023 699.237 241.955 701.055 242.477L702.487 242.886C703.714 243.227 704.805 243.659 704.805 244.818C704.805 246.091 703.578 246.932 701.964 246.932C700.578 246.932 699.351 246.318 699.237 245H697.783C697.919 246.909 699.464 248.205 701.964 248.205C704.646 248.205 706.169 246.727 706.169 244.841C706.169 242.659 704.101 241.955 702.896 241.636L701.714 241.318C700.851 241.091 699.464 240.636 699.464 239.386C699.464 238.273 700.487 237.455 702.033 237.455C703.442 237.455 704.51 238.125 704.646 239.273ZM731.104 242.182C731.104 238.5 728.945 236.205 725.967 236.205C722.99 236.205 720.831 238.5 720.831 242.182C720.831 245.864 722.99 248.159 725.967 248.159C728.945 248.159 731.104 245.864 731.104 242.182ZM729.74 242.182C729.74 245.205 728.081 246.841 725.967 246.841C723.854 246.841 722.195 245.205 722.195 242.182C722.195 239.159 723.854 237.523 725.967 237.523C728.081 237.523 729.74 239.159 729.74 242.182ZM746.273 248H753.091V246.75H747.682V236.364H746.273V248ZM769.285 248L770.455 244.705H775.16L776.33 248H777.808L773.535 236.364H772.08L767.808 248H769.285ZM770.898 243.455L772.762 238.205H772.853L774.717 243.455H770.898ZM801.647 236.364H800.261V245.523H800.147L793.784 236.364H792.42V248H793.829V238.864H793.943L800.284 248H801.647V236.364ZM817.744 248L818.915 244.705H823.619L824.79 248H826.267L821.994 236.364H820.54L816.267 248H817.744ZM819.358 243.455L821.221 238.205H821.312L823.176 243.455H819.358ZM858.179 248H862.384C865.134 248 866.27 246.659 866.27 244.909C866.27 243.068 864.998 242.068 863.929 242V241.886C864.929 241.614 865.816 240.955 865.816 239.455C865.816 237.75 864.679 236.364 862.248 236.364H858.179V248ZM859.588 246.75V242.705H862.452C863.975 242.705 864.929 243.727 864.929 244.909C864.929 245.932 864.225 246.75 862.384 246.75H859.588ZM859.588 241.477V237.614H862.248C863.793 237.614 864.475 238.432 864.475 239.455C864.475 240.682 863.475 241.477 862.202 241.477H859.588ZM881.386 248H882.795V243.455H885.34C885.442 243.455 885.539 243.455 885.636 243.449L888.09 248H889.727L887.096 243.193C888.579 242.688 889.272 241.477 889.272 239.932C889.272 237.875 888.045 236.364 885.317 236.364H881.386V248ZM882.795 242.182V237.614H885.272C887.158 237.614 887.886 238.534 887.886 239.932C887.886 241.33 887.158 242.182 885.295 242.182H882.795ZM905.829 236.364H904.42V248H905.829V236.364ZM925.045 248C928.591 248 930.591 245.795 930.591 242.159C930.591 238.545 928.591 236.364 925.204 236.364H921.454V248H925.045ZM922.864 246.75V237.614H925.114C927.841 237.614 929.227 239.341 929.227 242.159C929.227 245 927.841 246.75 924.954 246.75H922.864ZM953.709 240H955.163C954.732 237.75 952.845 236.205 950.391 236.205C947.408 236.205 945.3 238.5 945.3 242.182C945.3 245.864 947.391 248.159 950.482 248.159C953.254 248.159 955.232 246.312 955.232 243.432V242.182H950.8V243.432H953.868C953.828 245.523 952.453 246.841 950.482 246.841C948.323 246.841 946.663 245.205 946.663 242.182C946.663 239.159 948.323 237.523 950.391 237.523C952.073 237.523 953.215 238.472 953.709 240ZM970.445 248H977.559V246.75H971.854V242.795H977.104V241.545H971.854V237.614H977.468V236.364H970.445V248Z" fill="url(#paint16_linear)"/>
 <defs>
 <filter id="filter0_f" x="946.909" y="-268.564" width="963.182" height="1042.11" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
@@ -50,12 +38,6 @@
 <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
 <feGaussianBlur stdDeviation="15" result="effect1_foregroundBlur"/>
 </filter>
-<filter id="filter2_b" x="295" y="325" width="828" height="89" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feGaussianBlur in="BackgroundImage" stdDeviation="3"/>
-<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur" result="shape"/>
-</filter>
 <linearGradient id="paint0_linear" x1="1158.03" y1="147.28" x2="619.214" y2="1495.03" gradientUnits="userSpaceOnUse">
 <stop offset="0.0877329" stop-color="#0A1F31" stop-opacity="0.8"/>
 <stop offset="1"/>
@@ -96,34 +78,5 @@
 <stop stop-color="#E451FF"/>
 <stop offset="1" stop-color="#09020C" stop-opacity="0"/>
 </radialGradient>
-<linearGradient id="paint10_linear" x1="709" y1="303" x2="709" y2="429.791" gradientUnits="userSpaceOnUse">
-<stop stop-color="white"/>
-<stop offset="1" stop-color="#010202" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint11_linear" x1="709" y1="303" x2="709" y2="429.791" gradientUnits="userSpaceOnUse">
-<stop stop-color="white"/>
-<stop offset="1" stop-color="#010202" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint12_linear" x1="709" y1="303" x2="709" y2="429.791" gradientUnits="userSpaceOnUse">
-<stop stop-color="white"/>
-<stop offset="1" stop-color="#010202" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint13_linear" x1="709" y1="303" x2="709" y2="429.791" gradientUnits="userSpaceOnUse">
-<stop stop-color="white"/>
-<stop offset="1" stop-color="#010202" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint14_linear" x1="709" y1="303" x2="709" y2="429.791" gradientUnits="userSpaceOnUse">
-<stop stop-color="white"/>
-<stop offset="1" stop-color="#010202" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint15_linear" x1="709" y1="303" x2="709" y2="429.791" gradientUnits="userSpaceOnUse">
-<stop stop-color="white"/>
-<stop offset="1" stop-color="#010202" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint16_linear" x1="433.986" y1="252" x2="1009.03" y2="252" gradientUnits="userSpaceOnUse">
-<stop offset="0.130208" stop-color="#DC1FFF"/>
-<stop offset="0.5" stop-color="#4DA9FF"/>
-<stop offset="0.885417" stop-color="#00CC82"/>
-</linearGradient>
 </defs>
 </svg>

packages/bridge/public/home/main-logo.svg

@@ -0,0 +1,50 @@
+<svg width="816" height="176" viewBox="0 0 816 176" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_b)">
+<path d="M424.384 172L426.282 169.322L410.202 95L388.316 95L376.927 140.419L365.425 95L343.539 95L327.459 169.322L329.358 172H340.524L354.147 107.275H355.599L370.227 164.188H383.515L398.143 107.275H399.594L413.217 172H424.384Z" fill="url(#paint0_linear)"/>
+<path d="M0 97.6783L1.89829 95.0001H13.0647L26.6877 159.725H28.1393L42.7673 102.812H56.0554L70.6833 159.725H72.135L85.758 95.0001H96.9244L98.8227 97.6783L82.743 172H60.8569L49.3555 126.581L37.9658 172H16.0796L0 97.6783Z" fill="url(#paint1_linear)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M241.862 172V95.0001H283.341C295.4 95.0001 301.43 101.026 301.43 113.078V125.688C301.43 135.137 297.708 140.865 290.264 142.874L303.663 169.099L301.988 172H290.375L276.082 143.767H255.485V172H241.862ZM255.485 131.491H282.894C286.169 131.491 287.807 129.855 287.807 126.581V112.186C287.807 108.912 286.169 107.275 282.894 107.275H255.485V131.491Z" fill="url(#paint2_linear)"/>
+<path d="M460.199 95.0001V172H473.822V138.187H514.906V172H528.529V95.0001H514.906V125.912H473.822V95.0001H460.199Z" fill="url(#paint3_linear)"/>
+<path d="M673.495 172V95.0001H687.117V159.725H721.957V172H673.495Z" fill="url(#paint4_linear)"/>
+<path d="M755.598 95.0001V172H816V159.725H769.221V138.187H798.827V125.912H769.221V107.275H816V95.0001H755.598Z" fill="url(#paint5_linear)"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M159.495 106.073L141.269 124.091C136.572 128.735 136.572 136.265 141.269 140.909L159.495 158.927C164.192 163.571 171.808 163.571 176.505 158.927L194.731 140.909C199.428 136.265 199.428 128.735 194.731 124.091L176.505 106.073C171.808 101.429 164.192 101.429 159.495 106.073ZM131.549 114.482C121.484 124.433 121.484 140.567 131.549 150.518L149.775 168.537C159.84 178.488 176.16 178.488 186.225 168.537L204.451 150.518C214.516 140.567 214.516 124.433 204.451 114.482L186.225 96.4634C176.16 86.5122 159.84 86.5122 149.775 96.4634L131.549 114.482Z" fill="#DC1FFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M591.495 106.073L573.269 124.091C568.572 128.735 568.572 136.265 573.269 140.909L591.495 158.927C596.192 163.571 603.808 163.571 608.505 158.927L626.731 140.909C631.428 136.265 631.428 128.735 626.731 124.091L608.505 106.073C603.808 101.429 596.192 101.429 591.495 106.073ZM563.549 114.482C553.484 124.433 553.484 140.567 563.549 150.518L581.775 168.537C591.84 178.488 608.16 178.488 618.225 168.537L636.451 150.518C646.516 140.567 646.516 124.433 636.451 114.482L618.225 96.4634C608.16 86.5122 591.84 86.5122 581.775 96.4634L563.549 114.482Z" fill="#00FFA3"/>
+<path d="M149.811 12H156.924V10.75H151.22V6.79545H156.47V5.54545H151.22V1.61364H156.833V0.363636H149.811V12ZM171.537 1.61364H175.196V12H176.605V1.61364H180.264V0.363636H171.537V1.61364ZM195.239 12H196.648V6.79545H202.852V12H204.261V0.363636H202.852V5.54545H196.648V0.363636H195.239V12ZM219.883 12H226.996V10.75H221.292V6.79545H226.542V5.54545H221.292V1.61364H226.905V0.363636H219.883V12ZM242.245 12H243.654V7.45455H246.2C246.302 7.45455 246.398 7.45455 246.495 7.44886L248.95 12H250.586L247.955 7.19318C249.438 6.6875 250.131 5.47727 250.131 3.93182C250.131 1.875 248.904 0.363636 246.177 0.363636H242.245V12ZM243.654 6.18182V1.61364H246.131C248.018 1.61364 248.745 2.53409 248.745 3.93182C248.745 5.32955 248.018 6.18182 246.154 6.18182H243.654ZM265.279 12H272.393V10.75H266.688V6.79545H271.938V5.54545H266.688V1.61364H272.302V0.363636H265.279V12ZM295.278 0.363636V7.95455C295.278 9.65909 294.108 10.8864 292.165 10.8864C290.221 10.8864 289.051 9.65909 289.051 7.95455V0.363636H287.642V8.06818C287.642 10.4545 289.426 12.2045 292.165 12.2045C294.903 12.2045 296.687 10.4545 296.687 8.06818V0.363636H295.278ZM312.301 0.363636V12H313.619V3.15909H313.733L317.369 12H318.642L322.279 3.15909H322.392V12H323.71V0.363636H322.029L318.074 10.0227H317.938L313.983 0.363636H312.301ZM359.863 9.95455H361.136V6.84091H364.249V5.56818H361.136V2.45455H359.863V5.56818H356.749V6.84091H359.863V9.95455ZM403.646 3.27273H405.01C404.947 1.51705 403.328 0.204545 401.078 0.204545C398.851 0.204545 397.101 1.5 397.101 3.45455C397.101 5.02273 398.237 5.95455 400.055 6.47727L401.487 6.88636C402.714 7.22727 403.805 7.65909 403.805 8.81818C403.805 10.0909 402.578 10.9318 400.964 10.9318C399.578 10.9318 398.351 10.3182 398.237 9H396.783C396.919 10.9091 398.464 12.2045 400.964 12.2045C403.646 12.2045 405.169 10.7273 405.169 8.84091C405.169 6.65909 403.101 5.95455 401.896 5.63636L400.714 5.31818C399.851 5.09091 398.464 4.63636 398.464 3.38636C398.464 2.27273 399.487 1.45455 401.033 1.45455C402.442 1.45455 403.51 2.125 403.646 3.27273ZM430.104 6.18182C430.104 2.5 427.945 0.204545 424.967 0.204545C421.99 0.204545 419.831 2.5 419.831 6.18182C419.831 9.86364 421.99 12.1591 424.967 12.1591C427.945 12.1591 430.104 9.86364 430.104 6.18182ZM428.74 6.18182C428.74 9.20455 427.081 10.8409 424.967 10.8409C422.854 10.8409 421.195 9.20455 421.195 6.18182C421.195 3.15909 422.854 1.52273 424.967 1.52273C427.081 1.52273 428.74 3.15909 428.74 6.18182ZM445.273 12H452.091V10.75H446.682V0.363636H445.273V12ZM468.285 12L469.455 8.70455H474.16L475.33 12H476.808L472.535 0.363636H471.08L466.808 12H468.285ZM469.898 7.45455L471.762 2.20455H471.853L473.717 7.45455H469.898ZM500.647 0.363636H499.261V9.52273H499.147L492.784 0.363636H491.42V12H492.829V2.86364H492.943L499.284 12H500.647V0.363636ZM516.744 12L517.915 8.70455H522.619L523.79 12H525.267L520.994 0.363636H519.54L515.267 12H516.744ZM518.358 7.45455L520.221 2.20455H520.312L522.176 7.45455H518.358ZM557.179 12H561.384C564.134 12 565.27 10.6591 565.27 8.90909C565.27 7.06818 563.998 6.06818 562.929 6V5.88636C563.929 5.61364 564.816 4.95455 564.816 3.45455C564.816 1.75 563.679 0.363636 561.248 0.363636H557.179V12ZM558.588 10.75V6.70455H561.452C562.975 6.70455 563.929 7.72727 563.929 8.90909C563.929 9.93182 563.225 10.75 561.384 10.75H558.588ZM558.588 5.47727V1.61364H561.248C562.793 1.61364 563.475 2.43182 563.475 3.45455C563.475 4.68182 562.475 5.47727 561.202 5.47727H558.588ZM580.386 12H581.795V7.45455H584.34C584.442 7.45455 584.539 7.45455 584.636 7.44886L587.09 12H588.727L586.096 7.19318C587.579 6.6875 588.272 5.47727 588.272 3.93182C588.272 1.875 587.045 0.363636 584.317 0.363636H580.386V12ZM581.795 6.18182V1.61364H584.272C586.158 1.61364 586.886 2.53409 586.886 3.93182C586.886 5.32955 586.158 6.18182 584.295 6.18182H581.795ZM604.829 0.363636H603.42V12H604.829V0.363636ZM624.045 12C627.591 12 629.591 9.79545 629.591 6.15909C629.591 2.54545 627.591 0.363636 624.204 0.363636H620.454V12H624.045ZM621.864 10.75V1.61364H624.114C626.841 1.61364 628.227 3.34091 628.227 6.15909C628.227 9 626.841 10.75 623.954 10.75H621.864ZM652.709 4H654.163C653.732 1.75 651.845 0.204545 649.391 0.204545C646.408 0.204545 644.3 2.5 644.3 6.18182C644.3 9.86364 646.391 12.1591 649.482 12.1591C652.254 12.1591 654.232 10.3125 654.232 7.43182V6.18182H649.8V7.43182H652.868C652.828 9.52273 651.453 10.8409 649.482 10.8409C647.323 10.8409 645.663 9.20455 645.663 6.18182C645.663 3.15909 647.323 1.52273 649.391 1.52273C651.073 1.52273 652.215 2.47159 652.709 4ZM669.445 12H676.559V10.75H670.854V6.79545H676.104V5.54545H670.854V1.61364H676.468V0.363636H669.445V12Z" fill="url(#paint6_linear)"/>
+<defs>
+<filter id="filter0_b" x="-6" y="89" width="828" height="89" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImage" stdDeviation="3"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear" x1="408" y1="67" x2="408" y2="193.791" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#010202" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="408" y1="67" x2="408" y2="193.791" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#010202" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="408" y1="67" x2="408" y2="193.791" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#010202" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear" x1="408" y1="67" x2="408" y2="193.791" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#010202" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear" x1="408" y1="67" x2="408" y2="193.791" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#010202" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear" x1="408" y1="67" x2="408" y2="193.791" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#010202" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint6_linear" x1="132.986" y1="16" x2="708.028" y2="16" gradientUnits="userSpaceOnUse">
+<stop offset="0.130208" stop-color="#DC1FFF"/>
+<stop offset="0.5" stop-color="#4DA9FF"/>
+<stop offset="0.885417" stop-color="#00CC82"/>
+</linearGradient>
+</defs>
+</svg>

packages/bridge/public/transfer/background.svg

@@ -0,0 +1,97 @@
+<svg viewBox="0 0 1420 862" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_f)">
+<ellipse cx="711.5" cy="366.5" rx="277.5" ry="207.5" fill="url(#paint0_radial)"/>
+</g>
+<g style="mix-blend-mode:color-dodge" opacity="0.2" filter="url(#filter1_f)">
+<ellipse rx="1023.46" ry="103.62" transform="matrix(1 -1.74846e-07 -1.74846e-07 -1 814.464 406.62)" fill="url(#paint1_linear)"/>
+</g>
+<g filter="url(#filter2_f)">
+<ellipse cx="1494.5" cy="280.5" rx="377.5" ry="366.5" fill="url(#paint2_radial)" fill-opacity="0.2"/>
+</g>
+<g filter="url(#filter3_f)">
+<ellipse cx="454.5" cy="-155.5" rx="606.5" ry="588.5" fill="url(#paint3_radial)" fill-opacity="0.2"/>
+</g>
+<circle cx="157" cy="339" r="1" fill="#2F506F"/>
+<circle cx="507" cy="505" r="1" fill="#2F506F"/>
+<circle cx="1125" cy="505" r="1" fill="#2F506F"/>
+<circle cx="923" cy="155" r="1" fill="#2F506F"/>
+<circle cx="1286" cy="596" r="1" fill="#7BA4C7"/>
+<circle cx="433" cy="106" r="1" fill="#7BA4C7"/>
+<circle cx="513" cy="792" r="1" fill="#7BA4C7"/>
+<circle cx="1343" cy="114" r="1" fill="#7BA4C7"/>
+<circle cx="31" cy="694" r="1" fill="#D1D7DC"/>
+<circle cx="1204" cy="274" r="1" fill="#D1D7DC"/>
+<circle cx="409" cy="188" r="1" fill="#D1D7DC"/>
+<circle cx="1165" cy="110" r="1" fill="#D1D7DC"/>
+<circle cx="862.5" cy="162.5" r="0.5" fill="white"/>
+<circle cx="286.5" cy="264.5" r="0.5" fill="white"/>
+<circle cx="529.5" cy="142.5" r="0.5" fill="white"/>
+<circle cx="545.5" cy="172.5" r="0.5" fill="white"/>
+<circle cx="1062.5" cy="831.5" r="0.5" fill="white"/>
+<circle cx="795.5" cy="226.5" r="0.5" fill="white"/>
+<circle cx="954.5" cy="517.5" r="0.5" fill="#547595"/>
+<circle cx="212.5" cy="668.5" r="0.5" fill="#547595"/>
+<circle cx="235.5" cy="407.5" r="0.5" fill="#547595"/>
+<circle cx="1100.5" cy="319.5" r="0.5" fill="#2F506F"/>
+<circle cx="1272.5" cy="472.5" r="0.5" fill="#2F506F"/>
+<circle cx="591.5" cy="192.5" r="0.5" fill="#2F506F"/>
+<circle cx="657.5" cy="115.5" r="0.5" fill="#2F506F"/>
+<circle cx="272.5" cy="678.5" r="0.5" fill="#2F506F"/>
+<circle cx="1199.5" cy="131.5" r="0.5" fill="#2F506F"/>
+<circle cx="1334.5" cy="861.5" r="0.5" fill="#2F506F"/>
+<circle cx="46.5" cy="254.5" r="0.5" fill="#2F506F"/>
+<circle cx="280.5" cy="255.5" r="0.5" fill="#2F506F"/>
+<circle cx="898.5" cy="255.5" r="0.5" fill="#2F506F"/>
+<circle cx="539.5" cy="163.5" r="0.5" fill="#2F506F"/>
+<circle cx="319.5" cy="278.5" r="0.5" fill="#193650"/>
+<circle cx="562.5" cy="156.5" r="0.5" fill="#193650"/>
+<circle cx="953.5" cy="308.5" r="0.5" fill="#193650"/>
+<circle cx="271.5" cy="298.5" r="0.5" fill="#193650"/>
+<circle cx="514.5" cy="176.5" r="0.5" fill="#193650"/>
+<circle cx="905.5" cy="328.5" r="0.5" fill="#193650"/>
+<circle cx="295.5" cy="262.5" r="0.5" fill="#193650"/>
+<circle cx="913.5" cy="262.5" r="0.5" fill="#193650"/>
+<circle cx="554.5" cy="170.5" r="0.5" fill="#193650"/>
+<circle cx="1309.5" cy="168.5" r="0.5" fill="#193650"/>
+<circle cx="489.5" cy="560.5" r="0.5" fill="white"/>
+<circle cx="645.5" cy="636.5" r="0.5" fill="white"/>
+<defs>
+<filter id="filter0_f" x="404" y="129" width="615" height="475" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="15" result="effect1_foregroundBlur"/>
+</filter>
+<filter id="filter1_f" x="-409" y="103" width="2446.93" height="607.24" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="100" result="effect1_foregroundBlur"/>
+</filter>
+<filter id="filter2_f" x="1087" y="-116" width="815" height="793" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="15" result="effect1_foregroundBlur"/>
+</filter>
+<filter id="filter3_f" x="-182" y="-774" width="1273" height="1237" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="15" result="effect1_foregroundBlur"/>
+</filter>
+<radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(711.132 366.217) rotate(89.8986) scale(207.783 277.879)">
+<stop stop-opacity="0.6"/>
+<stop offset="1" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint1_linear" x1="348" y1="103.62" x2="873.182" y2="675.081" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E500FF"/>
+<stop offset="0.582233"/>
+<stop offset="1" stop-color="#42FF00"/>
+</linearGradient>
+<radialGradient id="paint2_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1494.5 280.5) rotate(90) scale(366.5 377.5)">
+<stop stop-color="#0000FF"/>
+<stop offset="1" stop-color="#0000FF" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint3_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(453.697 -156.303) rotate(89.9219) scale(589.303 607.328)">
+<stop stop-color="#DC1FFF"/>
+<stop offset="1" stop-color="#09020C" stop-opacity="0"/>
+</radialGradient>
+</defs>
+</svg>

packages/bridge/public/transfer/input.svg

@@ -0,0 +1,3 @@
+<svg width="404" height="70" viewBox="0 0 404 70" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M35.4559 1C30.4167 1 25.584 3.00178 22.0208 6.56497L7.02082 21.565C-0.399147 28.9849 -0.399146 41.0151 7.02081 48.435L22.0208 63.4351C25.584 66.9983 30.4167 69 35.4559 69L368.544 69C373.583 69 378.416 66.9982 381.979 63.435L396.979 48.435C404.399 41.0151 404.399 28.9849 396.979 21.565L381.979 6.56497C378.416 3.00178 373.583 1 368.544 1H35.4559Z" fill="#06101A" stroke="#193650" stroke-width="2"/>
+</svg>

packages/bridge/public/transfer/select-bg.svg

@@ -0,0 +1,3 @@
+<svg width="157" height="56" viewBox="0 0 157 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.52724e-05 28C1.13148e-05 12.536 12.536 1.14574e-06 28 2.55909e-06L128.279 1.17242e-05C131.483 1.2017e-05 134.554 1.28125 136.808 3.55835L152.644 19.5583C157.273 24.2345 157.273 31.7655 152.644 36.4417L136.808 52.4417C134.554 54.7188 131.483 56 128.279 56L28 56C12.536 56 3.92299e-05 43.464 2.52724e-05 28Z" fill="#0D1B28"/>
+</svg>

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

@@ -17,11 +17,15 @@ export const AppBar = () => {
       <div className={`app-bar-item ${isActiveClass('move')}`}>
         <Link to="/move">Bridge</Link>
       </div>
-      <div className={`app-bar-item ${isActiveClass('faq')}`}>FAQ</div>
+      <div className={`app-bar-item ${isActiveClass('faq')}`}>
-      <div className={`app-bar-item ${isActiveClass('poassets')}`}>
+        <Link to="/faq">FAQ</Link>
-        Proof-of-Assets
+      </div>
+      <div className={`app-bar-item ${isActiveClass('proof-of-assets')}`}>
+        <Link to="/proof-of-assets">Proof-of-Assets</Link>
+      </div>
+      <div className={`app-bar-item ${isActiveClass('help')}`}>
+        <Link to="/help">Help</Link>
       </div>
-      <div className={`app-bar-item ${isActiveClass('help')}`}>Help</div>
     </div>
   );
 };

packages/bridge/src/components/EthereumConnect/index.less

@@ -0,0 +1,58 @@
+@import "_colors";
+
+.ant-btn-group.ant-dropdown-button {
+  button {
+    text-transform: uppercase;
+    color: white;
+    background: #E67828;
+    //border-radius: 8px;
+    height: 40px;
+  }
+  button:first-child {
+    width: 134px;
+    border-bottom-left-radius: 8px !important;
+    border-top-left-radius: 8px !important;
+  }
+  button:last-child {
+    border-bottom-right-radius: 8px !important;
+    border-top-right-radius: 8px !important;
+  }
+}
+
+.eth-connect {
+  display: flex;
+  justify-content: center;
+  & > button {
+    color: white;
+    background: #E67828;
+    border-radius: 8px;
+    height: 40px;
+    width: 166px;
+  }
+
+  .eth-address {
+    position: relative;
+    width: 183px;
+    height: 48px;
+    background: @tungsten-100;
+    border: 2px solid #193650;
+    box-sizing: border-box;
+    border-radius: 8px;
+
+    font-size: 16px;
+    line-height: 21px;
+    color: #03E1FF;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+  }
+  .disconnect {
+    cursor: pointer;
+    color: #193650;
+    font-size: 16px;
+    &:hover {
+      transform: scale(1.3);
+      transition: ease-out 0.5s;
+    }
+  }
+}

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Button, Dropdown, Menu } from 'antd';
+import './index.less';
 
 import { useCorrectNetwork } from '../../hooks/useCorrectNetwork';
 import { shortenAddress } from '@oyster/common';
@@ -12,6 +13,7 @@ export const EthereumConnect = () => {
     connected,
     walletProvider,
     select,
+    disconnect,
   } = useEthereum();
   const { hasCorrespondingNetworks } = useCorrectNetwork();
 
@@ -24,10 +26,10 @@ export const EthereumConnect = () => {
   );
 
   return (
-    <div style={{ marginRight: 8 }}>
+    <div className={'eth-connect'}>
       {connected ? (
         hasCorrespondingNetworks ? (
-          <>
+          <div className={'eth-address'}>
             <img
               alt={'ethereum-icon'}
               width={20}
@@ -36,7 +38,10 @@ export const EthereumConnect = () => {
               src={walletProvider.icon}
             />
             {shortenAddress(accounts[0], 4)}
-          </>
+            <span className={'disconnect'} onClick={() => disconnect()}>
+              X
+            </span>
+          </div>
         ) : (
           <Button danger type={'primary'}>
             WRONG NETWORK
@@ -47,11 +52,11 @@ export const EthereumConnect = () => {
           onClick={() => onConnectEthereum && onConnectEthereum()}
           overlay={menu}
         >
-          Connect Ethereum
+          CONNECT
         </Dropdown.Button>
       ) : (
         <Button onClick={() => onConnectEthereum && onConnectEthereum()}>
-          Connect Ethereum
+          CONNECT WALLET
         </Button>
       )}
     </div>

packages/bridge/src/components/Input/input.tsx

@@ -1,9 +1,16 @@
 import React, { useState } from 'react';
-import { NumericInput } from '@oyster/common';
+import {
-import { Card } from 'antd';
+  ConnectButton,
+  CurrentUserWalletBadge,
+  NumericInput,
+  useWallet,
+} from '@oyster/common';
 import './style.less';
 import { ASSET_CHAIN } from '../../models/bridge/constants';
 import { TokenSelectModal } from '../TokenSelectModal';
+import { chainToName } from '../../utils/assets';
+import { TokenChain } from '../TokenDisplay/tokenChain';
+import { EthereumConnect } from '../EthereumConnect';
 
 export function Input(props: {
   title: string;
@@ -14,34 +21,31 @@ export function Input(props: {
   amount?: number | null;
   onChain: (chain: ASSET_CHAIN) => void;
   onInputChange: (value: number | undefined) => void;
+  className?: string;
 }) {
+  const { connected } = useWallet();
   const [lastAmount, setLastAmount] = useState<string>('');
 
   return (
-    <Card
+    <div className={`dashed-input-container ${props.className}`}>
-      className="ccy-input from-input"
+      <div className="input-header">{props.title}</div>
-      style={{ borderRadius: 20 }}
+      <div className="input-chain">
-      bodyStyle={{ padding: 0 }}
+        <TokenChain chain={props.chain} className={'input-icon'} />
-    >
+        {chainToName(props.chain)}
-      <div className="ccy-input-header">
+        {typeof props.balance === 'number' && (
-        <div className="ccy-input-header-left">{props.title}</div>
-
-        {!!props.balance && (
           <div
-            className="ccy-input-header-right"
+            className="balance"
             onClick={() =>
               props.onInputChange && props.onInputChange(props.balance)
             }
           >
-            Balance: {props.balance.toFixed(6)}
+            {props.balance.toFixed(6)}
           </div>
         )}
       </div>
-      <div
+      <div className="input-container">
-        className="ccy-input-header"
-        style={{ padding: '0px 10px 5px 7px', height: 80 }}
-      >
         <NumericInput
+          className={'input'}
           value={
             parseFloat(lastAmount || '0.00') === props.amount
               ? lastAmount
@@ -55,22 +59,29 @@ export function Input(props: {
             setLastAmount(val);
           }}
           style={{
-            fontSize: 24,
             boxShadow: 'none',
             borderColor: 'transparent',
             outline: 'transparent',
           }}
           placeholder="0.00"
         />
-        <div className="ccy-input-header-right" style={{ display: 'flex' }}>
+        <div className="input-select">
           <TokenSelectModal
             onSelectToken={token => props.setAsset(token)}
             onChain={(chain: ASSET_CHAIN) => props.onChain(chain)}
             asset={props.asset}
             chain={props.chain}
+            showIconChain={false}
           />
         </div>
       </div>
-    </Card>
+      {props.chain === ASSET_CHAIN.Ethereum ? (
+        <EthereumConnect />
+      ) : connected ? (
+        <CurrentUserWalletBadge showDisconnect={true} />
+      ) : (
+        <ConnectButton type="text" size="large" allowWalletChange={true} />
+      )}
+    </div>
   );
 }

packages/bridge/src/components/Input/style.less

@@ -1,3 +1,5 @@
+@import "_colors";
+
 .multichain-option {
   display: flex;
   align-items: center;
@@ -95,3 +97,119 @@
 .ant-select-dropdown {
   width: 150px !important;
 }
+
+.dashed-input-container {
+  width: 342px;
+  height: 342px;
+
+  border: 4px dotted;
+  border-radius: 50%;
+  box-sizing: border-box;
+  &.left {
+    border-color: #6E1080;
+  }
+  &.right {
+    border-color: #008051;
+  }
+  .input-header{
+    margin-top: 26px;
+    display: block;
+    text-align: center;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 16px;
+    line-height: 21px;
+    color: @tungsten-40;
+  }
+  .input-chain{
+    margin-top: 13px;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 20px;
+    line-height: 24px;
+    .input-icon {
+      margin-right: 10px;
+    }
+    .balance {
+      margin-top: 22px;
+      font-size: 12px;
+      line-height: 16px;
+      color: @tungsten-60
+    }
+  }
+
+  .input-container{
+    position: relative;
+    margin: 16px -36px 34px -36px ;
+    height: 66px;
+
+    background-image: url('/transfer/input.svg');
+    background-size: 100% 66px;
+    background-repeat: no-repeat;
+
+    input.input {
+      padding: 0 36px 0 36px;
+      font-size: 32px;
+      line-height: 39px;
+      color: @tungsten-80;
+      height: 100%;
+    }
+    .input-select {
+      display: flex;
+      align-content: center;
+      flex-direction: row;
+      position: absolute;
+      right: 11px;
+      top: 7px;
+      height: 52px;
+      width: 161px;
+      padding: 0 19px;
+      background-image: url(/transfer/select-bg.svg);
+      background-size: 100% 52px;
+      background-repeat: no-repeat;
+      .token-chain-logo {
+          position: relative;
+          width: auto;
+          height: auto;
+          display: flex;
+      }
+      .token-logo {
+        width: 32px;
+        height: 32px;
+      }
+    }
+  }
+}
+
+.wallet-wrapper {
+  display: flex;
+  justify-content: center;
+  padding: 0;
+
+  .wallet-key {
+    position: relative;
+    width: 183px;
+    height: 48px;
+    background: @tungsten-100;
+    border: 2px solid #193650;
+    box-sizing: border-box;
+    border-radius: 8px;
+    padding: 0;
+    margin: 0;
+    font-size: 16px;
+    line-height: 21px;
+    color: #03E1FF;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    .disconnect {
+      cursor: pointer;
+      color: #193650;
+      font-size: 16px;
+      &:hover {
+        transform: scale(1.3);
+        transition: ease-out 0.5s;
+      }
+    }
+  }
+}

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

@@ -37,7 +37,7 @@ export const AppLayout = React.memo((props: any) => {
             {!isRoot && (
               <div className="app-title app-left">
                 <Link to="/">
-                  <img src={'/appbar/logo.svg'} />
+                  <img alt="logo-bar" src={'/appbar/logo.svg'} />
                 </Link>
               </div>
             )}

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

@@ -0,0 +1,127 @@
+import { Table } from 'antd';
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { useWormholeAccounts } from '../../hooks/useWormholeAccounts';
+import { TokenDisplay } from '../../components/TokenDisplay';
+import { toChainSymbol } from '../../contexts/chainPair';
+import { formatUSD, shortenAddress } from '@oyster/common';
+
+export const RecentTransactionsTable = () => {
+  const {
+    loading: loadingLockedAccounts,
+    externalAssets,
+    totalInUSD,
+  } = useWormholeAccounts();
+
+  const columns = [
+    {
+      title: 'Symbol',
+      dataIndex: 'symbol',
+      key: 'symbol',
+      render(text: string, record: any) {
+        return {
+          props: {
+            style: {},
+          },
+          children: (
+            <Link
+              to={`/move?from=${toChainSymbol(record.chain)}&token=${
+                record.symbol
+              }`}
+            >
+              <span style={{ display: 'inline-flex', alignItems: 'center' }}>
+                {record.logo && (
+                  <TokenDisplay logo={record.logo} chain={record.chain} />
+                )}{' '}
+                {record.symbol}
+              </span>
+            </Link>
+          ),
+        };
+      },
+    },
+    {
+      title: 'Name',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: 'Amount',
+      dataIndex: 'amount',
+      key: 'amount',
+    },
+    {
+      title: 'Amount ($)',
+      dataIndex: 'amountInUSD',
+      key: 'amountInUSD',
+    },
+    {
+      title: 'Price',
+      dataIndex: 'price',
+      width: 100,
+      key: 'price',
+      render(text: string, record: any) {
+        return {
+          props: {
+            style: { textAlign: 'right' },
+          },
+          children: record.price ? formatUSD.format(record.price) : '--',
+        };
+      },
+    },
+    {
+      title: 'Asset Address',
+      dataIndex: 'address',
+      key: 'address',
+      render(text: string, record: any) {
+        return {
+          props: {
+            style: {},
+          },
+          children: (
+            <a href={record.explorer} target="_blank" rel="noopener noreferrer">
+              {shortenAddress(text, 6)}
+            </a>
+          ),
+        };
+      },
+    },
+    {
+      title: 'Wrapped Address',
+      dataIndex: 'mintKey',
+      key: 'mintKey',
+      render(text: string, record: any) {
+        return {
+          props: {
+            style: {},
+          },
+          children: (
+            <a
+              href={record.wrappedExplorer}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {shortenAddress(text, 6)}
+            </a>
+          ),
+        };
+      },
+    },
+  ];
+  return (
+    <div id={'recent-tx-container'}>
+      <div className={'home-subtitle'}>Recent Transactions</div>
+      <div className={'description-text'} style={{ marginBottom: '70px' }}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      </div>
+      <Table
+        scroll={{
+          scrollToFirstRowOnChange: false,
+        }}
+        dataSource={externalAssets.filter(a => a.name)}
+        columns={columns}
+        loading={loadingLockedAccounts}
+      />
+    </div>
+  );
+};

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

@@ -5,6 +5,7 @@ import React from 'react';
 import { useEthereum } from '../../contexts';
 import { ASSET_CHAIN } from '../../models/bridge/constants';
 import './style.less';
+import { TokenChain } from './tokenChain';
 
 export const TokenDisplay = ({
   asset,
@@ -20,15 +21,7 @@ export const TokenDisplay = ({
   return (
     <div className="token-chain-logo">
       <img className="token-logo" alt="" src={logo || token?.logoURI} />
-      <img
+      {chain && <TokenChain chain={chain} className={'chain-logo'} />}
-        className="chain-logo"
-        alt=""
-        src={
-          chain === ASSET_CHAIN.Ethereum
-            ? '/blockchains/ETH.svg'
-            : '/blockchains/solana.webp'
-        }
-      />
     </div>
   );
 };

packages/bridge/src/components/TokenDisplay/style.less

@@ -3,6 +3,12 @@
   width: 60px;
   height: 60px;
   display: flex;
+  .chain-logo {
+
+    position: absolute;
+    bottom: 3px;
+    right: 3px;
+  }
 }
 
 .token-logo {
@@ -16,10 +22,8 @@
 .chain-logo {
   border: 1px solid hsla(0, 0%, 50.2%, 0.5);
   border-radius: 20px;
-  position: absolute;
   background: #fff;
   width: 30px;
   height: 30px;
-  bottom: 3px;
+
-  right: 3px;
 }

packages/bridge/src/components/TokenDisplay/tokenChain.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ASSET_CHAIN } from '../../models/bridge/constants';
+
+export const TokenChain = (props: {
+  chain?: ASSET_CHAIN;
+  className?: string;
+}) => {
+  const { chain, className } = props;
+  return (
+    <img
+      className={`chain-logo ${className}`}
+      alt=""
+      src={
+        chain === ASSET_CHAIN.Ethereum
+          ? '/blockchains/ETH.svg'
+          : '/blockchains/solana.webp'
+      }
+    />
+  );
+};

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

@@ -15,6 +15,7 @@ export const TokenSelectModal = (props: {
   onChain: (chain: ASSET_CHAIN) => void;
   asset?: string;
   chain?: ASSET_CHAIN;
+  showIconChain?: boolean;
 }) => {
   const { tokens: ethTokens } = useEthereum();
   const { tokens: solTokens } = useConnectionConfig();
@@ -110,9 +111,11 @@ export const TokenSelectModal = (props: {
             <TokenDisplay
               asset={props.asset}
               token={firstToken}
-              chain={props.chain}
+              chain={props.showIconChain ? props.chain : undefined}
             />
           </div>
+          <div className={'multichain-option-symbol'}>{firstToken.symbol}</div>
+          <span className={'down-arrow'}></span>
         </div>
       ) : null}
       <Modal

packages/bridge/src/components/TokenSelectModal/style.less

@@ -1,3 +1,4 @@
+@import "_colors";
 .input-token-search {
   margin: 20px 0 20px 0;
 }
@@ -31,4 +32,20 @@
 
 .ReactVirtualized__Grid.ReactVirtualized__List:focus {
   outline: none !important;
-}
+}
+
+.multichain-option {
+  .multichain-option-symbol {
+    margin-left: 10px;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 21px;
+    color: @tungsten-60;
+  }
+  .down-arrow{
+    margin-left: 10px;
+    width: 15px;
+    height: 11px;
+  }
+}

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

@@ -30,6 +30,7 @@ import { useTokenChainPairState } from '../../contexts/chainPair';
 import { LABELS } from '../../constants';
 import { useCorrectNetwork } from '../../hooks/useCorrectNetwork';
 import { BigNumber } from 'ethers/utils';
+import { RecentTransactionsTable } from '../RecentTransactionsTable';
 
 const { useConnection } = contexts.Connection;
 const { useWallet } = contexts.Wallet;
@@ -52,7 +53,7 @@ export const typeToIcon = (type: string, isLast: boolean) => {
 
 export const Transfer = () => {
   const connection = useConnection();
-  const { wallet } = useWallet();
+  const { wallet, connected } = useWallet();
   const { provider, tokenMap } = useEthereum();
   const hasCorrespondingNetworks = useCorrectNetwork();
   const {
@@ -95,7 +96,7 @@ export const Transfer = () => {
     <>
       <div className="exchange-card">
         <Input
-          title={`From ${chainToName(request.from)}`}
+          title={`From`}
           asset={request.asset}
           balance={displayBalance(A.info)}
           setAsset={asset => setAssetInformation(asset)}
@@ -110,6 +111,7 @@ export const Transfer = () => {
             setLastTypedAccount(A.chain);
             A.setAmount(amount || 0);
           }}
+          className={'left'}
         />
         <Button
           type="primary"
@@ -125,10 +127,10 @@ export const Transfer = () => {
             }
           }}
         >
-          ⇅
+          ⇆
         </Button>
         <Input
-          title={`To ${chainToName(request.to)}`}
+          title={`To`}
           asset={request.asset}
           balance={displayBalance(B.info)}
           setAsset={asset => setAssetInformation(asset)}
@@ -143,151 +145,154 @@ export const Transfer = () => {
             setLastTypedAccount(B.chain);
             B.setAmount(amount || 0);
           }}
+          className={'right'}
         />
-      </div>
+        <Button
-      <ConnectButton
+          className={'transfer-button'}
-        type="primary"
+          type="primary"
-        size="large"
+          size="large"
-        style={{ width: '100%' }}
+          disabled={!(A.amount && B.amount) || !connected || !provider}
-        disabled={!(A.amount && B.amount)}
+          onClick={async () => {
-        onClick={async () => {
+            if (!wallet || !provider) {
-          if (!wallet || !provider) {
+              return;
-            return;
+            }
-          }
 
-          const token = tokenMap.get(request.asset?.toLowerCase() || '');
+            const token = tokenMap.get(request.asset?.toLowerCase() || '');
-          const NotificationContent = () => {
+            const NotificationContent = () => {
-            const [activeSteps, setActiveSteps] = useState<ProgressUpdate[]>(
+              const [activeSteps, setActiveSteps] = useState<ProgressUpdate[]>(
-              [],
+                [],
-            );
+              );
-            useEffect(() => {
+              useEffect(() => {
-              (async () => {
+                (async () => {
-                let steps: ProgressUpdate[] = [];
+                  let steps: ProgressUpdate[] = [];
-                try {
+                  try {
-                  if (request.from === ASSET_CHAIN.Solana) {
+                    if (request.from === ASSET_CHAIN.Solana) {
-                    await fromSolana(
+                      await fromSolana(
-                      connection,
+                        connection,
-                      wallet,
+                        wallet,
-                      request,
+                        request,
-                      provider,
+                        provider,
-                      update => {
+                        update => {
-                        if (update.replace) {
+                          if (update.replace) {
-                          steps.pop();
+                            steps.pop();
-                          steps = [...steps, update];
+                            steps = [...steps, update];
-                        } else {
+                          } else {
-                          steps = [...steps, update];
+                            steps = [...steps, update];
-                        }
+                          }
 
-                        setActiveSteps(steps);
+                          setActiveSteps(steps);
-                      },
+                        },
-                    );
+                      );
+                    }
+
+                    if (request.to === ASSET_CHAIN.Solana) {
+                      await toSolana(
+                        connection,
+                        wallet,
+                        request,
+                        provider,
+                        update => {
+                          if (update.replace) {
+                            steps.pop();
+                            steps = [...steps, update];
+                          } else {
+                            steps = [...steps, update];
+                          }
+
+                          setActiveSteps(steps);
+                        },
+                      );
+                    }
+                  } catch (err) {
+                    // TODO...
+                    console.log(err);
                   }
+                })();
+              }, [setActiveSteps]);
 
-                  if (request.to === ASSET_CHAIN.Solana) {
+              return (
-                    await toSolana(
+                <div>
-                      connection,
+                  <div style={{ display: 'flex' }}>
-                      wallet,
+                    <div>
-                      request,
+                      <h5>{`${chainToName(
-                      provider,
+                        request.from,
-                      update => {
+                      )} Mainnet -> ${chainToName(request.to)} Mainnet`}</h5>
-                        if (update.replace) {
+                      <h2>
-                          steps.pop();
+                        {request.amount?.toString()} {request.info?.name}
-                          steps = [...steps, update];
+                      </h2>
-                        } else {
+                    </div>
-                          steps = [...steps, update];
+                    <div
-                        }
+                      style={{
-
+                        display: 'flex',
-                        setActiveSteps(steps);
+                        marginLeft: 'auto',
-                      },
+                        marginRight: 10,
-                    );
+                      }}
-                  }
+                    >
-                } catch {
+                      <TokenDisplay
-                  // TODO...
+                        asset={request.asset}
-                }
+                        chain={request.from}
-              })();
+                        token={token}
-            }, [setActiveSteps]);
+                      />
-
+                      <span style={{ margin: 15 }}>{'➔'}</span>
-            return (
+                      <TokenDisplay
-              <div>
+                        asset={request.asset}
-                <div style={{ display: 'flex' }}>
+                        chain={request.to}
-                  <div>
+                        token={token}
-                    <h5>{`${chainToName(request.from)} Mainnet -> ${chainToName(
+                      />
-                      request.to,
+                    </div>
-                    )} Mainnet`}</h5>
-                    <h2>
-                      {request.amount?.toString()} {request.info?.name}
-                    </h2>
                   </div>
                   <div
                     style={{
+                      textAlign: 'left',
                       display: 'flex',
-                      marginLeft: 'auto',
+                      flexDirection: 'column',
-                      marginRight: 10,
                     }}
                   >
-                    <TokenDisplay
+                    {(() => {
-                      asset={request.asset}
+                      let group = '';
-                      chain={request.from}
+                      return activeSteps.map((step, i) => {
-                      token={token}
+                        let prevGroup = group;
-                    />
+                        group = step.group;
-                    <span style={{ margin: 15 }}>{'➔'}</span>
+                        let newGroup = prevGroup !== group;
-                    <TokenDisplay
+                        return (
-                      asset={request.asset}
+                          <>
-                      chain={request.to}
+                            {newGroup && <span>{group}</span>}
-                      token={token}
+                            <span style={{ marginLeft: 15 }}>
-                    />
+                              {typeToIcon(
+                                step.type,
+                                activeSteps.length - 1 === i,
+                              )}{' '}
+                              {step.message}
+                            </span>
+                          </>
+                        );
+                      });
+                    })()}
                   </div>
                 </div>
-                <div
+              );
-                  style={{
+            };
-                    textAlign: 'left',
-                    display: 'flex',
-                    flexDirection: 'column',
-                  }}
-                >
-                  {(() => {
-                    let group = '';
-                    return activeSteps.map((step, i) => {
-                      let prevGroup = group;
-                      group = step.group;
-                      let newGroup = prevGroup !== group;
-                      return (
-                        <>
-                          {newGroup && <span>{group}</span>}
-                          <span style={{ marginLeft: 15 }}>
-                            {typeToIcon(
-                              step.type,
-                              activeSteps.length - 1 === i,
-                            )}{' '}
-                            {step.message}
-                          </span>
-                        </>
-                      );
-                    });
-                  })()}
-                </div>
-              </div>
-            );
-          };
 
-          notification.open({
+            notification.open({
-            message: '',
+              message: '',
-            duration: 0,
+              duration: 0,
-            placement: 'bottomLeft',
+              placement: 'bottomLeft',
-            description: <NotificationContent />,
+              description: <NotificationContent />,
-            className: 'custom-class',
+              className: 'custom-class',
-            style: {
+              style: {
-              width: 500,
+                width: 500,
-            },
+              },
-          });
+            });
-        }}
+          }}
-      >
+        >
-        {hasCorrespondingNetworks
+          {hasCorrespondingNetworks
-          ? !(A.amount && B.amount)
+            ? !(A.amount && B.amount)
-            ? LABELS.ENTER_AMOUNT
+              ? LABELS.ENTER_AMOUNT
-            : LABELS.TRANSFER
+              : LABELS.TRANSFER
-          : LABELS.SET_CORRECT_WALLET_NETWORK}
+            : LABELS.SET_CORRECT_WALLET_NETWORK}
-      </ConnectButton>
+        </Button>
+      </div>
+      <RecentTransactionsTable />
     </>
   );
 };

packages/bridge/src/components/Transfer/style.less

@@ -1,18 +1,60 @@
 @import "_colors";
+
 .input-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-bottom: 10px;
 }
-.flexColumn:not(.home-container) {
+
-  background: @tungsten-100;
-}
 .swap-button {
   border-radius: 2em;
   width: 40px;
   height: 40px;
-  font-size: 20px;
+  font-size: 19px;
-  font-weight: bold;
+  top: 253px;
-  padding-left: 8px;
+  color: black;
+}
+
+.exchange-card {
+  position: relative;
+  max-width: calc(100% - 460px);
+  width: 100%;
+  margin: 167px auto 150px auto;
+  display: flex;
+  justify-content: space-between;
+}
+
+.transfer-button{
+  display: flex;
+
+  position: absolute;
+  width: 240px;
+  height: 64px;
+  left: calc(50% - 240px/2);
+  top: 335px;
+
+  border-radius: 12px;
+  border: none;
+  align-items: center;
+  justify-content: center;
+  background: @surge-20;
+  color: white;
+  font-weight: bold;
+  font-size: 18px;
+  line-height: 23px;
+  text-align: center;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  font-feature-settings: 'ss02' on;
+  &:disabled{
+    background: @tungsten-50;
+    color: #193650;
+  }
+}
+
+#recent-tx-container{
+  width: 100%;
+  max-width: calc(100% - 388px);
+  margin: auto;
 }

packages/bridge/src/routes.tsx

@@ -8,7 +8,14 @@ import {
 } from './contexts';
 import { AppLayout } from './components/Layout';
 
-import { FaucetView, HomeView, TransferView } from './views';
+import {
+  FaucetView,
+  HomeView,
+  TransferView,
+  HelpView,
+  ProofOfAssetsView,
+  FaqView,
+} from './views';
 import { CoingeckoProvider } from './contexts/coingecko';
 import { BridgeProvider } from './contexts/bridge';
 import { UseWalletProvider } from 'use-wallet';
@@ -38,6 +45,12 @@ export function Routes() {
                                 component={() => <HomeView />}
                               />
                               <Route path="/move" children={<TransferView />} />
+                              <Route path="/faq" children={<FaqView />} />
+                              <Route
+                                path="/proof-of-assets"
+                                children={<ProofOfAssetsView />}
+                              />
+                              <Route path="/help" children={<HelpView />} />
                               <Route
                                 exact
                                 path="/faucet"

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

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import './index.less';
+
+export const FaqView = () => {
+  return (
+    <div
+      className="flexColumn transfer-bg"
+      style={{ flex: 1, minHeight: '90vh' }}
+    ></div>
+  );
+};

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

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import './index.less';
+
+export const HelpView = () => {
+  return (
+    <div
+      className="flexColumn transfer-bg"
+      style={{ flex: 1, minHeight: '90vh' }}
+    ></div>
+  );
+};

packages/bridge/src/views/home/index.less

@@ -121,6 +121,9 @@ header.ant-layout-header.App-Bar {
     width: auto;
     margin: 3px 0 30px 0;
   }
+  & > div:first-child {
+    margin-bottom: 120px;
+  }
 }
 
 .grow-effect:hover {

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

@@ -129,6 +129,9 @@ export const HomeView = () => {
     <>
       <div className="flexColumn home-container wormhole-bg">
         <div className={'justify-bottom-container'}>
+          <div>
+            <img src={'/home/main-logo.svg'} />
+          </div>
           <div>
             A decentralized and bi-directional bridge for
             <br /> ERC-20 and SPL tokens

packages/bridge/src/views/index.tsx

@@ -1,3 +1,6 @@
 export { HomeView } from './home';
 export { FaucetView } from './faucet';
 export { TransferView } from './transfer';
+export { HelpView } from './help';
+export { FaqView } from './faq';
+export { ProofOfAssetsView } from './proof-of-assets';

packages/bridge/src/views/proof-of-assets/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import './index.less';
+
+export const ProofOfAssetsView = () => {
+  return (
+    <div
+      className="flexColumn transfer-bg"
+      style={{ flex: 1, minHeight: '90vh' }}
+    ></div>
+  );
+};

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

@@ -0,0 +1,7 @@
+
+.transfer-bg {
+  background-image: url('/transfer/background.svg');
+  background-size: 100% auto;
+  background-color: #06101a;
+  background-repeat: no-repeat;
+}

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

@@ -1,18 +1,16 @@
 import React from 'react';
+import './index.less';
 import { Card } from 'antd';
 import { Transfer } from '../../components/Transfer';
 
 export const TransferView = () => {
   return (
     <>
-      <div className="flexColumn" style={{ flex: 1, minHeight: '90vh' }}>
+      <div
-        <Card
+        className="flexColumn transfer-bg"
-          className="bridge-card"
+        style={{ flex: 1, minHeight: '90vh' }}
-          headStyle={{ padding: 0 }}
+      >
-          bodyStyle={{ position: 'relative' }}
+        <Transfer />
-        >
-          <Transfer />
-        </Card>
       </div>
     </>
   );

packages/common/src/components/CurrentUserWalletBadge/index.tsx

@@ -3,8 +3,10 @@ import React from 'react';
 import { useWallet, WALLET_PROVIDERS } from '../../contexts/wallet';
 import { shortenAddress } from '../../utils';
 
-export const CurrentUserWalletBadge = (props: {}) => {
+export const CurrentUserWalletBadge = (props: {
-  const { wallet } = useWallet();
+  showDisconnect?: boolean;
+}) => {
+  const { wallet, disconnect } = useWallet();
 
   if (!wallet || !wallet.publicKey) {
     return null;
@@ -21,6 +23,7 @@ export const CurrentUserWalletBadge = (props: {}) => {
           style={{ marginRight: 8 }}
         />
         {shortenAddress(`${wallet.publicKey}`)}
+        {props.showDisconnect && <span className={"disconnect"} onClick={() => disconnect()}>X</span>}
       </div>
     </div>
   );

packages/common/src/components/index.tsx

@@ -1,6 +1,7 @@
 export { ExplorerLink } from './ExplorerLink/index';
 export { ConnectButton } from './ConnectButton/index';
 export { CurrentUserBadge } from './CurrentUserBadge/index';
+export { CurrentUserWalletBadge } from './CurrentUserWalletBadge/index';
 export { Identicon } from './Identicon/index';
 export { Info } from './Icons/info';
 export { NumericInput } from './Input/numeric';