Merge pull request #87 from UniverseXYZ/development

Prepare release v1.1.2
UniverseXYZ · Aug 3, 2021 · 4070987 · 4070987
2 parents 8505be0 + ddae384
commit 4070987
Show file tree

Hide file tree

Showing 8 changed files with 152 additions and 13 deletions.
diff --git a/src/components/antd/tabs/s.module.scss b/src/components/antd/tabs/s.module.scss
@@ -13,14 +13,19 @@
 
     > :global(.ant-tabs-nav-wrap) {
       > :global(.ant-tabs-nav-list) {
+        overflow-y: auto;
+
         > :global(.ant-tabs-tab) {
+          flex-shrink: 0;
+
           > :global(.ant-tabs-tab-btn) {
             @include font-p1-semi-bold;
             display: flex;
             flex-direction: row;
             column-gap: 8px;
             align-items: center;
             color: var(--theme-secondary-color);
+            flex-shrink: 0;
 
             &:hover {
               color: var(--theme-primary-color);

diff --git a/src/components/custom/icon/index.tsx b/src/components/custom/icon/index.tsx
@@ -146,7 +146,8 @@ export type IconNames =
   | 'youtube'
   | 'medium'
   | 'polymorphs'
-  | 'core-drops';
+  | 'core-drops'
+  | 'static/add-token';
 
 export type IconProps = {
   name: IconNames;

diff --git a/src/layout/components/layout-header/index.tsx b/src/layout/components/layout-header/index.tsx
@@ -14,8 +14,10 @@ import Grid from 'components/custom/grid';
 import Icon from 'components/custom/icon';
 import { Text } from 'components/custom/typography';
 import { useGeneral } from 'components/providers/general-provider';
+import { XyzToken } from 'components/providers/known-tokens-provider';
 import { useWarning } from 'components/providers/warning-provider';
 import ConnectedWallet from 'wallets/components/connected-wallet';
+import { MetamaskConnector } from 'wallets/connectors/metamask';
 import { useWallet } from 'wallets/wallet';
 
 import s from './s.module.scss';
@@ -50,6 +52,25 @@ const LayoutHeader: React.FC = () => {
 
   const isGovernancePage = useRouteMatch('/governance');
 
+  async function handleAddProjectToken() {
+    if (wallet.connector?.id === 'metamask') {
+      try {
+        const connector = new MetamaskConnector({ supportedChainIds: [] });
+        await connector.addToken({
+          type: 'ERC20',
+          options: {
+            address: XyzToken.address,
+            symbol: XyzToken.symbol,
+            decimals: XyzToken.decimals,
+            image: `${window.location.origin}/android-chrome-192x192.png`,
+          },
+        });
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  }
+
   return (
     <div className={s.component} ref={setReferenceElement}>
       <ExternalLink href="https://universe.xyz/" target="_self">
@@ -199,6 +220,13 @@ const LayoutHeader: React.FC = () => {
           </Button>
         </Popover>
       </nav>
+      {!isMobile && wallet.isActive && wallet.connector?.id === 'metamask' && (
+        <div className={s.addTokenWrapper}>
+          <button type="button" onClick={handleAddProjectToken} className={s.addTokenButton}>
+            <Icon name="static/add-token" width={28} height={28} />
+          </button>
+        </div>
+      )}
       <ConnectedWallet />
       <Button type="link" className={s.burger} onClick={() => setNavOpen(prevState => !prevState)}>
         <Icon name={navOpen ? 'burger-close' : 'burger'} style={{ color: 'var(--theme-primary-color)' }} />

diff --git a/src/layout/components/layout-header/s.module.scss b/src/layout/components/layout-header/s.module.scss
@@ -102,7 +102,7 @@
   margin-left: 14px;
   margin-right: 20px;
 
-  @media (max-width: 768px) {
+  @media (max-width: 1023px) {
     margin-left: 6px;
     margin-right: 14px;
   }
@@ -113,7 +113,7 @@
   width: 56px;
   height: 56px;
 
-  @media (max-width: 768px) {
+  @media (max-width: 1023px) {
     width: 44px;
     height: 44px;
   }
@@ -129,7 +129,7 @@
   letter-spacing: 0;
   text-align: left;
   margin-right: auto;
-  padding: 0;
+  padding: 0 16px 0 0;
 
   @media (max-width: 1024px) {
     font-size: 13px;
@@ -140,7 +140,8 @@
 .nav {
   display: flex;
   border-right: 1px solid var(--theme-border-color);
-  margin-right: 24px;
+  margin-right: 20px;
+  min-height: 28px;
 
   @media (max-width: 768px) {
     display: none;
@@ -159,6 +160,14 @@
       transform: rotate(-180deg);
     }
   }
+
+  &:last-child {
+    margin-right: 20px;
+  }
+
+  @media (max-width: 1023px) {
+    margin-right: 20px;
+  }
 }
 
 .dropdown {
@@ -232,3 +241,20 @@
     margin-right: 10px;
   }
 }
+
+.addTokenWrapper {
+  padding-right: 20px;
+  margin-right: 20px;
+  border-right: 1px solid var(--theme-border-color);
+}
+
+.addTokenButton {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  background: transparent;
+  padding: 0;
+}
diff --git a/src/modules/governance/index.tsx b/src/modules/governance/index.tsx
@@ -85,16 +85,39 @@ const GovernanceViewInternal: React.FC = () => {
           }
         />
         <Tabs.Tab
-          key="forum"
-          disabled
+          key="signal"
           tab={
-            <ExternalLink href="https://forum.universe.xyz/" style={{ color: 'inherit' }}>
+            <ExternalLink href="https://signal.universe.xyz/" style={{ color: 'inherit', position: 'relative' }}>
               <Grid flow="col" gap={8} align="center">
                 <Icon name="chats-outlined" />
                 <Text type="p1" weight="semibold">
-                  Discussions
+                  Signal
+                </Text>
+                <Icon
+                  name="arrow-top-right"
+                  width={8}
+                  height={8}
+                  style={{ position: 'absolute', top: 0, right: -12 }}
+                />
+              </Grid>
+            </ExternalLink>
+          }
+        />
+        <Tabs.Tab
+          key="forum"
+          tab={
+            <ExternalLink href="https://forum.universe.xyz/" style={{ color: 'inherit', position: 'relative' }}>
+              <Grid flow="col" gap={8} align="center">
+                <Icon name="forum-outlined" />
+                <Text type="p1" weight="semibold">
+                  Forum
                 </Text>
-                <Icon name="arrow-top-right" width={8} height={8} style={{ alignSelf: 'start', color: 'inherit' }} />
+                <Icon
+                  name="arrow-top-right"
+                  width={8}
+                  height={8}
+                  style={{ position: 'absolute', top: 0, right: -12 }}
+                />
               </Grid>
             </ExternalLink>
           }

diff --git a/src/resources/svg/static-sprite.svg b/src/resources/svg/static-sprite.svg
diff --git a/src/wallets/components/connected-wallet/index.tsx b/src/wallets/components/connected-wallet/index.tsx
@@ -85,7 +85,7 @@ const ConnectedWallet: React.FC = () => {
                 </Text>
               </Grid>
             </Grid>
-            <Divider />
+            <Divider style={{ minHeight: 28 }} />
             <Grid padding={24}>
               <button type="button" className="button button-ghost" onClick={() => wallet.disconnect()}>
                 <span>Disconnect</span>
@@ -173,9 +173,9 @@ const ConnectedWallet: React.FC = () => {
   );
 
   return (
-    <Grid flow="col" gap={24} justify="center">
+    <Grid flow="col" gap={20} justify="center" align="center">
       <NotificationSection />
-      <Divider type="vertical" />
+      <Divider type="vertical" style={{ minHeight: 28 }} />
       {AccountSection}
     </Grid>
   );

diff --git a/src/wallets/connectors/metamask/index.ts b/src/wallets/connectors/metamask/index.ts
@@ -9,6 +9,27 @@ type MetaMaskError = Error & {
   code: number;
 };
 
+export type MetamaskWatchAsset = {
+  type: string;
+  options: {
+    address: string;
+    symbol: string;
+    decimals: number;
+    image: string;
+  };
+};
+
+export class MetamaskConnector extends InjectedConnector {
+  addToken(info: MetamaskWatchAsset): Promise<boolean> {
+    return this.getProvider().then(provider => {
+      return provider.request({
+        method: 'wallet_watchAsset',
+        params: info,
+      });
+    });
+  }
+}
+
 const MetaMaskWalletConfig: WalletConnector = {
   id: 'metamask',
   logo: MetaMaskLogo,