feat: update space skins settings (#497)

* fix: improve skin update code

* fix: allow skinParams only for turbo spaces

* fix: rename params to skinSettings to follow hub convention

* fix: save hex code when saving skin color

* refactor: refactor

* fix: saved cleaned up domain

Author: wa0x6e

src/helpers/actions.ts

@@ -2,36 +2,81 @@ import snapshot from '@snapshot-labs/snapshot.js';
 import db from './mysql';
 import { DEFAULT_NETWORK_ID, jsonParse, NETWORK_ID_WHITELIST } from './utils';
 
-export async function addOrUpdateSpace(space: string, settings: any) {
-  if (!settings?.name) return false;
-  if (settings.domain) {
-    settings.domain = settings.domain?.replace(/(^\w+:|^)\/\//, '').replace(/\/$/, '');
+function normalizeSettings(settings: any) {
+  const _settings = snapshot.utils.clone(settings);
+
+  if (_settings.domain) {
+    _settings.domain = _settings.domain?.replace(/(^\w+:|^)\/\//, '').replace(/\/$/, '');
   }
-  if (settings.delegationPortal) {
-    settings.delegationPortal = {
+  if (_settings.delegationPortal) {
+    _settings.delegationPortal = {
       delegationNetwork: '1',
-      ...settings.delegationPortal
+      ..._settings.delegationPortal
     };
   }
 
+  delete _settings.skinSettings;
+
+  return _settings;
+}
+
+export async function addOrUpdateSpace(id: string, settings: any) {
+  if (!settings?.name) return false;
+
+  const normalizedSettings = normalizeSettings(settings);
+
   const ts = (Date.now() / 1e3).toFixed();
   const query =
     'INSERT INTO spaces SET ? ON DUPLICATE KEY UPDATE updated = ?, settings = ?, name = ?, hibernated = 0, domain = ?';
 
   await db.queryAsync(query, [
     {
-      id: space,
+      id,
       name: settings.name,
       created: ts,
       updated: ts,
-      settings: JSON.stringify(settings),
-      domain: settings.domain || null
+      settings: JSON.stringify(normalizedSettings),
+      domain: normalizedSettings.domain || null
     },
     ts,
-    JSON.stringify(settings),
+    JSON.stringify(normalizedSettings),
     settings.name,
-    settings.domain || null
+    normalizedSettings.domain || null
   ]);
+
+  await addOrUpdateSkin(id, settings.skinSettings);
+}
+
+export async function addOrUpdateSkin(id: string, skinSettings: Record<string, string>) {
+  if (!skinSettings) return false;
+
+  const COLORS = [
+    'bg_color',
+    'link_color',
+    'text_color',
+    'content_color',
+    'border_color',
+    'heading_color',
+    'primary_color',
+    'header_color'
+  ];
+
+  await db.queryAsync(
+    `INSERT INTO skins
+      SET ?
+      ON DUPLICATE KEY UPDATE
+        ${COLORS.map(color => `${color} = ?`).join(',')},
+        theme = COALESCE(VALUES(theme), theme)
+    `,
+    [
+      {
+        id,
+        ...skinSettings
+      },
+      ...COLORS.map(color => skinSettings[color]),
+      skinSettings.theme
+    ]
+  );
 }
 
 export async function getProposal(space, id) {

src/writer/settings.ts

@@ -89,8 +89,9 @@ export async function verify(body): Promise<any> {
   const isAdmin = admins.includes(body.address.toLowerCase());
   const newAdmins = (msg.payload.admins || []).map(admin => admin.toLowerCase());
 
-  if (msg.payload.domain && !space?.turbo && !space?.domain) {
-    return Promise.reject('domain is a turbo feature only');
+  if (!space?.turbo && !space?.domain) {
+    if (msg.payload.domain) return Promise.reject('domain is a turbo feature only');
+    if (msg.payload.skinSettings) return Promise.reject('skin is a turbo feature only');
   }
 
   const anotherSpaceWithDomain = (

test/integration/helpers/actions.test.ts

@@ -1,4 +1,9 @@
-import { addOrUpdateSpace, getSpace, sxSpaceExists } from '../../../src/helpers/actions';
+import {
+  addOrUpdateSkin,
+  addOrUpdateSpace,
+  getSpace,
+  sxSpaceExists
+} from '../../../src/helpers/actions';
 import db, { sequencerDB } from '../../../src/helpers/mysql';
 import { DEFAULT_NETWORK_ID } from '../../../src/helpers/utils';
 import { spacesSqlFixtures } from '../../fixtures/space';
@@ -166,4 +171,88 @@ describe('helpers/actions', () => {
       });
     });
   });
+
+  describe('addOrUpdateSkin', () => {
+    afterAll(async () => {
+      await db.queryAsync('DELETE FROM snapshot_sequencer_test.skins');
+    });
+
+    it('adds a new skin when it does not exist', async () => {
+      const testId = 'test-new-skin-ids';
+      const skinSettings = {
+        bg_color: '#000000',
+        link_color: '#ffffff',
+        text_color: '#000000',
+        content_color: '#ffffff',
+        border_color: '#ffffff',
+        heading_color: '#ffffff',
+        primary_color: '#ffffff'
+      };
+      await addOrUpdateSkin(testId, skinSettings);
+      const skin = (await db.queryAsync('SELECT * FROM skins WHERE id = ?', [testId]))[0];
+      expect(skin).toEqual({
+        id: testId,
+        bg_color: '#000000',
+        link_color: '#ffffff',
+        text_color: '#000000',
+        content_color: '#ffffff',
+        border_color: '#ffffff',
+        heading_color: '#ffffff',
+        primary_color: '#ffffff',
+        header_color: null,
+        theme: 'light'
+      });
+    });
+
+    it('updates an existing skin', async () => {
+      const testId = 'test-update-skin-id';
+      await db.queryAsync(
+        'INSERT INTO skins (id, bg_color, link_color, text_color, content_color, border_color, heading_color, primary_color, header_color, theme) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)',
+        [
+          testId,
+          '#000000',
+          '#000000',
+          '#000000',
+          '#000000',
+          '#000000',
+          '#000000',
+          '#000000',
+          '#000000',
+          'light'
+        ]
+      );
+      await addOrUpdateSkin(testId, {
+        bg_color: '#FFFF00',
+        link_color: '#FFFFFF'
+      });
+      const skin = (await db.queryAsync('SELECT * FROM skins WHERE id = ?', [testId]))[0];
+      expect(skin).toEqual({
+        id: testId,
+        bg_color: '#FFFF00',
+        link_color: '#FFFFFF',
+        text_color: null,
+        content_color: null,
+        border_color: null,
+        heading_color: null,
+        primary_color: null,
+        header_color: null,
+        theme: 'light'
+      });
+
+      await addOrUpdateSkin(testId, { theme: 'dark' });
+      const skin2 = (await db.queryAsync('SELECT * FROM skins WHERE id = ?', [testId]))[0];
+      expect(skin2).toEqual({
+        id: testId,
+        bg_color: null,
+        link_color: null,
+        text_color: null,
+        content_color: null,
+        border_color: null,
+        heading_color: null,
+        primary_color: null,
+        header_color: null,
+        theme: 'dark'
+      });
+    });
+  });
 });

test/schema.sql

@@ -195,18 +195,18 @@ CREATE TABLE leaderboard (
 
 CREATE TABLE skins (
   id VARCHAR(100) NOT NULL,
-  bg_color VARCHAR(6) DEFAULT NULL,
-  link_color VARCHAR(6) DEFAULT NULL,
-  text_color VARCHAR(6) DEFAULT NULL,
-  content_color VARCHAR(6) DEFAULT NULL,
-  border_color VARCHAR(6) DEFAULT NULL,
-  heading_color VARCHAR(6) DEFAULT NULL,
-  primary_color VARCHAR(6) DEFAULT NULL,
-  header_color VARCHAR(6) DEFAULT NULL,
+  bg_color VARCHAR(7) DEFAULT NULL,
+  link_color VARCHAR(7) DEFAULT NULL,
+  text_color VARCHAR(7) DEFAULT NULL,
+  content_color VARCHAR(7) DEFAULT NULL,
+  border_color VARCHAR(7) DEFAULT NULL,
+  heading_color VARCHAR(7) DEFAULT NULL,
+  primary_color VARCHAR(7) DEFAULT NULL,
+  header_color VARCHAR(7) DEFAULT NULL,
   theme VARCHAR(5) NOT NULL DEFAULT 'light',
   PRIMARY KEY (id)
 );
-  
+
 CREATE TABLE options (
   name VARCHAR(100) NOT NULL,
   value VARCHAR(100) NOT NULL,